/*
 * Kemankeşnâme ortak tasarım dosyası
 * Ana sayfa ve profil sayfaları bu dosyayı birlikte kullanır.
 */

:root {
  --bg: #ede9df;
  --paper: #fffdf7;
  --paper-2: #f8f3e8;
  --ink: #1e2521;
  --muted: #6c756f;
  --line: #d9d1c3;
  --brand: #1f4a3a;
  --brand-dark: #17372c;
  --brand-soft: #e4efe9;
  --accent: #a36b2c;
  --accent-soft: #f1e3cf;
  --danger: #a64136;
  --shadow: 0 10px 30px rgba(49, 42, 30, 0.07);
  --radius: 14px;
  --header-height: 70px;
  --mobile-nav-height: 70px;

}


/* =========================================================
   TEMEL AYARLAR
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(163, 107, 44, 0.07),
      transparent 26%
    ),
    linear-gradient(180deg, #f2eee5 0%, var(--bg) 100%);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.5;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="link"]:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 3px solid rgba(31, 74, 58, 0.2);
  outline-offset: 2px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}


/* =========================================================
   ORTAK HEADER
========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  border-bottom: 1px solid rgba(31, 74, 58, 0.16);
  background: rgba(255, 253, 247, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.header-inner {
  width: min(1440px, calc(100% - 32px));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 500px) 1fr;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.12);
  font-size: 20px;
  font-weight: 700;
}

.brand-text strong {
  display: block;
  color: var(--brand-dark);
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.brand-text span {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-box {
  position: relative;
  width: 100%;
}

.search-box svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  height: 42px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-box input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(31, 74, 58, 0.1);
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.header-button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  transition:
    border-color 0.2s,
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}

.header-button:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.header-button:active {
  transform: scale(0.98);
}

.header-button.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.header-button.primary:hover {
  background: var(--brand-dark);
  color: #fff;
}


/* =========================================================
   ORTAK KARTLAR VE LİSTELER
========================================================= */

.panel,
.feed-card,
.composer,
.page-intro,
.profile-card,
.content-card,
.profile-tabs {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.96);
  box-shadow: var(--shadow);
}

.panel {
  overflow: hidden;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 14px 16px 11px;
  border-bottom: 1px solid var(--line);
}

.panel-header h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 18px;
  line-height: 1.25;
}

.panel-header a {
  flex: 0 0 auto;
  color: var(--accent);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 800;
}

.panel-description {
  display: none;
  margin: 0;
  padding: 10px 16px 11px;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 243, 232, 0.58);
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.45;
}

.intro-title {
  display: block;
}

.intro-title-mobile {
  display: none;
}

.ranking-list {
  margin: 0;
  padding: 7px 9px 10px;
  list-style: none;
}

.ranking-item {
  display: grid;
  grid-template-columns: 26px 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 9px 7px;
  border-bottom: 1px dashed #ded6ca;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}

.ranking-item:last-child {
  border-bottom: 0;
}

.ranking-item:hover {
  border-radius: 10px;
  background: var(--paper-2);
  transform: translateX(2px);
}

.rank-number {
  color: var(--accent);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.avatar.large {
  width: 48px;
  height: 48px;
  font-size: 14px;
}

.avatar.club {
  border-radius: 12px;
}

.av-1 {
  background: linear-gradient(135deg, #234f3e, #69937a);
}

.av-2 {
  background: linear-gradient(135deg, #7a412b, #d09964);
}

.av-3 {
  background: linear-gradient(135deg, #3b465f, #8796b2);
}

.av-4 {
  background: linear-gradient(135deg, #6b5d2e, #bbaa68);
}

.av-5 {
  background: linear-gradient(135deg, #4d335c, #9874aa);
}

.av-6 {
  background: linear-gradient(135deg, #7b2f3b, #c46b78);
}

.ranking-copy {
  min-width: 0;
}

.ranking-copy strong {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-copy > span {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}



/* =========================================================
   ANA SAYFA - MASAÜSTÜ YERLEŞİM
========================================================= */

.home-page .page-shell {
  width: min(1440px, calc(100% - 32px));
  margin: 24px auto 48px;
  overflow: visible;
}

.home-page .mobile-slider-track {
  position: relative;
  display: grid;
  grid-template-columns:
    280px
    minmax(0, 680px)
    300px;
  justify-content: center;
  align-items: start;
  gap: 24px;
  width: 100%;
}

.home-page .desktop-side {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

.home-page .desktop-side-left {
  grid-column: 1;
  grid-row: 1;
}

.home-page .feed-slide {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.home-page .desktop-side-right {
  grid-column: 3;
  grid-row: 1;
}

.home-page .desktop-side-right .clubs-slide {
  order: 1;
}

.home-page .desktop-side-right .brands-slide {
  order: 2;
}

.home-page .mobile-slide {
  min-width: 0;
  width: auto;
}

.home-page .sidebar {
  position: static;
  top: auto;
  display: block;
  min-width: 0;
}

.home-page .main-feed {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.mobile-panel-title,
.mobile-bottom-nav {
  display: none;
}

/* =========================================================
   ANA SAYFA - GİRİŞ ALANI
========================================================= */

.page-intro {
  overflow: hidden;
  background:
    linear-gradient(
      120deg,
      rgba(31, 74, 58, 0.96),
      rgba(23, 55, 44, 0.92)
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.03) 10px,
      rgba(255, 255, 255, 0.03) 20px
    );
  color: #fff;
}

.page-intro-inner {
  padding: 22px 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.86;
}

.page-intro h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.15;
}

.page-intro p {
  max-width: 580px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}


/* =========================================================
   ANA SAYFA - PAYLAŞIM OLUŞTURMA
========================================================= */

.composer {
  padding: 16px;
}

.composer-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.composer-placeholder {
  position: relative;
  flex: 1;
  min-height: 46px;
  max-height: 180px;
  overflow-y: auto;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  outline: none;
  background: var(--paper-2);
  color: var(--ink);
  cursor: text;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.composer-placeholder:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.composer-placeholder:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(31, 74, 58, 0.09);
}

.composer-photo-preview {
  position: relative;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
}

.composer-photo-preview img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: #ece7dc;
}

.composer-photo-preview button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 26, 23, 0.78);
  color: #fff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1;
}

.composer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: Arial, Helvetica, sans-serif;
}

.composer-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.composer-upload {
  min-height: 38px;
  max-width: 100%;
  padding: 0 15px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--brand-dark);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    border-color 0.2s,
    background 0.2s,
    color 0.2s;
}

.composer-upload:hover,
.composer-upload.has-file {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}

.composer-share {
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.composer-share:hover {
  background: var(--brand-dark);
}

.composer-share:disabled {
  cursor: default;
  opacity: 0.7;
}

.composer-video-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.composer-video-progress[hidden] {
  display: none !important;
}

.composer-video-progress-track {
  flex: 1;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3ded3;
}

.composer-video-progress-bar {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--brand);
  transition: width .22s ease;
}

.composer-video-progress-percent {
  flex: 0 0 38px;
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =========================================================
   ANA SAYFA - GÖNDERİLER
========================================================= */

.feed-card {
  overflow: hidden;
}

.post-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 18px 12px;
}

.post-author {
  min-width: 0;
  flex: 1;
}

.post-author-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.post-author-line strong {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-meta {
  margin-top: 2px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.post-menu {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
}

.post-menu:hover {
  background: var(--paper-2);
}

.post-body {
  padding: 0 18px 16px;
}

.post-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}


.post-media {
  position: relative;
  min-height: 310px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

.post-media::before,
.post-media::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.8;
}

.post-media::before {
  width: 280px;
  height: 280px;
  left: -60px;
  bottom: -80px;
  background: rgba(255, 255, 255, 0.12);
}

.post-media::after {
  width: 220px;
  height: 220px;
  right: -40px;
  top: -60px;
  border: 2px solid rgba(255, 255, 255, 0.18);
}

.media-green {
  background: linear-gradient(135deg, #17372c, #5f8e72);
}

.media-earth {
  background: linear-gradient(135deg, #4a2c20, #ad7b4b);
}

.media-blue {
  background: linear-gradient(135deg, #26384c, #667f98);
}

.media-art {
  position: relative;
  width: min(82%, 500px);
  min-height: 215px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.media-art .bow {
  display: block;
  margin-bottom: 10px;
  font-size: 54px;
}

.media-art strong {
  display: block;
  font-size: 25px;
  line-height: 1.2;
}

.media-art span {
  display: block;
  margin-top: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.82;
}

.post-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 42px;
  padding: 0 18px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.reaction-bubbles {
  display: flex;
  align-items: center;
}

.reaction-bubbles span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  margin-right: -4px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
}

.reaction-bubbles em {
  margin-left: 9px;
  color: var(--muted);
  font-style: normal;
}

.post-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 7px 10px 10px;
  border-top: 1px solid var(--line);
}

.post-action {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  transition:
    background 0.2s,
    color 0.2s;
}

.post-action:hover {
  background: var(--paper-2);
  color: var(--brand-dark);
}

.post-action.active {
  background: var(--brand-soft);
  color: var(--brand);
}

.post-comment-box {
  display: none;
  padding: 0 16px 16px;
}

.post-comment-box.open {
  display: flex;
  gap: 10px;
}

.post-comment-box input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  background: var(--paper-2);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.post-comment-box button {
  min-width: 78px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
}



/* =========================================================
   ANA SAYFA - ORTA BOY MASAÜSTÜ
========================================================= */

@media (min-width: 981px) and (max-width: 1180px) {
  .home-page .page-shell {
    width: min(100% - 24px, 1180px);
  }

  .home-page .mobile-slider-track {
    grid-template-columns:
      235px
      minmax(0, 620px)
      255px;
    gap: 16px;
  }

  .home-page .achievements-slide,
  .home-page .brands-slide {
    margin-top: 426px;
    top: calc(var(--header-height) + 442px);
  }

  .ranking-item {
    grid-template-columns: 24px 40px minmax(0, 1fr);
    gap: 7px;
    padding-inline: 5px;
  }

  .avatar {
    width: 40px;
    height: 40px;
    font-size: 11px;
  }

  .ranking-copy strong {
    font-size: 13px;
  }
}

/* =========================================================
   ANA SAYFA - MOBİL YATAY KAYDIRICI
========================================================= */

@media (max-width: 980px) {
  html,
  body {
    overflow-x: hidden;
  }

  body.home-page {
    padding-bottom: 0;
  }

  .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 62px;
    background: #fffdf7;
  }

  body.home-page,
  body.profile-page {
    padding-top: 62px;
  }

  .header-inner {
    width: min(100% - 24px, 760px);
    grid-template-columns: 1fr auto;
    gap: 14px;
  }

  .brand-text span,
  .search-box,
  .header-button:not(.primary) {
    display: none;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand-text strong {
    font-size: 19px;
  }

  .header-button.primary {
    min-height: 36px;
    padding: 0 14px;
    font-size: 12px;
  }

  .home-page .page-shell {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: height 0.24s ease;
  }

  .home-page .mobile-slider-track {
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: auto;
    align-items: start;
    gap: 0;
    width: 500%;
    min-width: 500%;
    transform: translate3d(-40%, 0, 0);
    transition:
      transform 0.38s
      cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    touch-action: pan-y;
  }

  .home-page .mobile-slider-track.is-dragging {
    transition: none;
  }

  .home-page .desktop-side {
    display: contents;
  }

  .home-page .mobile-slide,
  .home-page .people-slide,
  .home-page .achievements-slide,
  .home-page .feed-slide,
  .home-page .brands-slide,
  .home-page .clubs-slide {
    position: static;
    top: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 14px;
    align-self: flex-start;
  }

  .home-page .people-slide {
    grid-column: 1;
    grid-row: 1;
  }

  .home-page .achievements-slide {
    grid-column: 2;
    grid-row: 1;
  }

  .home-page .feed-slide {
    grid-column: 3;
    grid-row: 1;
  }

  .home-page .brands-slide {
    grid-column: 4;
    grid-row: 1;
  }

  .home-page .clubs-slide {
    grid-column: 5;
    grid-row: 1;
  }

  .home-page .main-feed,
  .home-page .sidebar {
    display: block;
  }

  .home-page .main-feed {
    display: grid;
    gap: 14px;
  }

  .home-page .mobile-panel-title {
    display: none;
  }

  .home-page .panel-header a {
    display: inline-flex;
    align-items: center;
  }

  .home-page .panel-description {
    display: block;
    padding: 10px 14px 12px;
    font-size: 11px;
  }

  .home-page .intro-title-desktop {
    display: none;
  }

  .home-page .intro-title-mobile {
    display: block;
  }

  .home-page .ranking-list {
    padding: 8px 12px 14px;
  }

  .home-page .ranking-item {
    grid-template-columns: 32px 52px minmax(0, 1fr);
    min-height: 72px;
    padding: 10px 8px;
  }

  .home-page .ranking-item .avatar {
    width: 50px;
    height: 50px;
    font-size: 13px;
  }

  .home-page .ranking-copy strong {
    font-size: 15px;
  }

  .home-page .mobile-bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
    width: 100%;
    min-height: var(--mobile-nav-height);
    padding:
      5px 4px
      calc(5px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(31, 74, 58, 0.15);
    border-radius: 0;
    background: rgba(255, 253, 247, 0.97);
    box-shadow: 0 -8px 30px rgba(20, 35, 27, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .home-page .mobile-nav-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 6px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      transform 0.2s ease;
  }

  .home-page .mobile-nav-button::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 28px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: transparent;
    transform: translateX(-50%);
    transition: background-color 0.2s ease;
  }

  .home-page .mobile-nav-button.active {
    color: var(--brand-dark);
    background: var(--brand-soft);
  }

  .home-page .mobile-nav-button.active::before {
    background: var(--brand);
  }

  .home-page .mobile-nav-button:active {
    transform: scale(0.96);
  }

  .home-page .mobile-nav-icon,
  .home-page .mobile-nav-button span:first-child {
    display: block;
    font-size: 19px;
    line-height: 1;
  }
}

/* =========================================================
   ANA SAYFA - KÜÇÜK MOBİL
========================================================= */

@media (max-width: 560px) {
  .home-page .mobile-slide,
  .home-page .people-slide,
  .home-page .achievements-slide,
  .home-page .feed-slide,
  .home-page .brands-slide,
  .home-page .clubs-slide {
    padding: 8px 6px 14px;
  }

  .home-page .panel,
  .home-page .feed-card,
  .home-page .composer,
  .home-page .page-intro {
    border-radius: 12px;
  }

  .home-page .page-intro-inner {
    padding: 18px;
  }

  .home-page .page-intro h1 {
    font-size: 25px;
  }

  .home-page .page-intro p {
    font-size: 13px;
  }

  .home-page .composer {
    padding: 14px;
  }

  .home-page .composer-actions {
    align-items: center;
  }

  .home-page .composer-tools {
    min-width: 0;
    flex: 1;
  }

  .home-page .composer-upload {
    width: 100%;
    padding-inline: 12px;
  }

  .home-page .post-header {
    padding: 15px 14px 10px;
  }

  .home-page .post-body {
    padding: 0 14px 14px;
  }

  .home-page .post-body p {
    font-size: 15px;
  }

  .home-page .post-media {
    min-height: 250px;
  }

  .home-page .media-art {
    width: 88%;
    min-height: 180px;
  }

  .home-page .media-art strong {
    font-size: 21px;
  }

  .home-page .post-stats {
    padding: 0 14px;
  }

  .home-page .mobile-nav-button {
    font-size: 9px;
  }

  .home-page .mobile-nav-icon,
  .home-page .mobile-nav-button span:first-child {
    font-size: 17px;
  }
}


/* =========================================================
   PROFİL SAYFASI
========================================================= */

body.profile-page {
  margin: 0;
  padding-bottom: 0;
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(163, 107, 44, 0.08),
      transparent 27%
    ),
    linear-gradient(180deg, #f2eee5 0%, var(--bg) 100%);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.5;
}

.profile-page .header-inner {
  width: min(1280px, calc(100% - 32px));
}

.profile-page .page-shell {
  display: block;
  width: min(1180px, calc(100% - 32px));
  margin: 24px auto 56px;
}

.profile-page .profile-card,
.profile-page .panel,
.profile-page .content-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.97);
  box-shadow: var(--shadow);
}

.profile-page .profile-card {
  overflow: hidden;
}

.profile-page .profile-cover {
  position: relative;
  min-height: 245px;
  overflow: hidden;
  background:
    linear-gradient(
      120deg,
      rgba(20, 49, 39, 0.97),
      rgba(43, 91, 69, 0.9)
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 12px,
      rgba(255, 255, 255, 0.04) 12px,
      rgba(255, 255, 255, 0.04) 24px
    );
  isolation: isolate;
}

.profile-page .profile-cover::before {
  content: "";
  position: absolute;
  width: 370px;
  height: 370px;
  right: -65px;
  top: -130px;
  border: 2px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
}

.profile-page .profile-cover::after {
  content: "➶";
  position: absolute;
  right: 8%;
  bottom: -38px;
  z-index: -1;
  color: rgba(255, 255, 255, 0.12);
  font-size: 220px;
  line-height: 1;
  transform: rotate(-8deg);
}

.profile-page .cover-copy {
  position: absolute;
  left: 34px;
  top: 32px;
  max-width: 440px;
  color: #fff;
}

.profile-page .cover-copy span {
  display: block;
  margin-bottom: 9px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

.profile-page .cover-copy strong {
  display: block;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.15;
}

.profile-page .profile-summary {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  padding: 0 28px 26px;
}

.profile-page .profile-avatar {
  width: 154px;
  height: 154px;
  display: grid;
  place-items: center;
  margin-top: -78px;
  border: 7px solid var(--paper);
  border-radius: 50%;
  background: linear-gradient(135deg, #17372c, #7e9e89);
  color: #fff;
  box-shadow: 0 8px 26px rgba(29, 44, 36, 0.2);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.profile-page .profile-main {
  min-width: 0;
  padding-top: 18px;
}

.profile-page .name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.profile-page .name-row h1 {
  margin: 0;
  color: var(--brand-dark);
  font-size: clamp(27px, 4vw, 38px);
  line-height: 1.1;
}


.profile-page .profile-subtitle {
  margin: 8px 0 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.profile-page .role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.profile-page .role-tag {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.profile-page .role-tag.secondary {
  background: var(--accent-soft);
  color: #70471d;
}

.profile-page .profile-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 4px;
  font-family: Arial, Helvetica, sans-serif;
}

.profile-page .action-button {
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.profile-page .action-button.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.profile-page .profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.profile-page .profile-stat {
  padding: 16px 20px;
  text-align: center;
  border-right: 1px solid var(--line);
}

.profile-page .profile-stat:last-child {
  border-right: 0;
}

.profile-page .profile-stat strong {
  display: block;
  color: var(--brand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  line-height: 1.1;
}

.profile-page .profile-stat span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-page .profile-tabs {
  display: flex;
  gap: 6px;
  margin: 18px 0;
  padding: 7px;
}

.profile-page .profile-tab {
  flex: 1;
  min-height: 43px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.profile-page .profile-tab.active {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.profile-page .tab-panel {
  display: none;
}

.profile-page .tab-panel.active {
  display: block;
}

.profile-page .content-grid {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.profile-page .sidebar-column {
  display: grid;
  gap: 20px;
}

.profile-page .panel-header,
.profile-page .content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 19px;
  border-bottom: 1px solid var(--line);
}

.profile-page .panel-header h2,
.profile-page .content-header h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 19px;
}

.profile-page .panel-body {
  padding: 18px 19px;
}

.profile-page .info-list {
  margin: 0;
  display: grid;
  gap: 15px;
}

.profile-page .info-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.profile-page .info-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--brand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 800;
}

.profile-page .info-copy dt {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-page .info-copy dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.profile-page .club-card {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
}

.profile-page .club-logo {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #252f42, #68788e);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 900;
}

.profile-page .club-copy strong {
  display: block;
  color: var(--brand-dark);
  font-size: 16px;
}

.profile-page .club-copy span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.profile-page .achievement-list {
  display: grid;
  gap: 13px;
  padding: 18px;
}

.profile-page .achievement-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper-2);
}

.profile-page .medal {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 23px;
  font-weight: 900;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.16);
}

.profile-page .medal.gold {
  background: linear-gradient(135deg, #8f5b0d, #d2a041);
}

.profile-page .medal.bronze {
  background: linear-gradient(135deg, #74432f, #b97859);
}

.profile-page .achievement-copy strong {
  display: block;
  color: var(--brand-dark);
  font-size: 16px;
  line-height: 1.35;
}

.profile-page .achievement-copy span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.profile-page .achievement-rank {
  min-width: 76px;
  padding: 8px 10px;
  border-radius: 999px;
  text-align: center;
  background: #fff;
  color: var(--accent);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-page .profile-note {
  padding: 19px;
  border-left: 4px solid var(--accent);
  background: var(--paper-2);
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.65;
}

.profile-page .empty-state {
  padding: 54px 24px;
  text-align: center;
}

.profile-page .empty-state .icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 32px;
}

.profile-page .empty-state h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 23px;
}

.profile-page .empty-state p {
  max-width: 470px;
  margin: 8px auto 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}


/* =========================================================
   PROFİL SAYFASI - TABLET VE MOBİL
========================================================= */

@media (max-width: 920px) {
  body.profile-page {
    padding-bottom: 84px;
  }

  .profile-page .header-inner {
    width: min(100% - 24px, 760px);
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .profile-page .search-box,
  .profile-page .header-button:not(.primary),
  .profile-page .brand-text span {
    display: none;
  }

  .profile-page .brand-mark {
    width: 38px;
    height: 38px;
  }

  .profile-page .brand-text strong {
    font-size: 19px;
  }

  .profile-page .header-button.primary {
    min-height: 36px;
    padding: 0 14px;
    font-size: 12px;
  }

  .profile-page .page-shell {
    width: min(100% - 18px, 760px);
    margin-top: 14px;
  }

  .profile-page .profile-cover {
    min-height: 210px;
  }

  .profile-page .profile-summary {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: 0 20px 20px;
  }

  .profile-page .profile-avatar {
    width: 128px;
    height: 128px;
    margin-top: -62px;
    font-size: 38px;
  }

  .profile-page .profile-actions {
    grid-column: 1 / -1;
    width: 100%;
    padding-top: 6px;
  }

  .profile-page .profile-actions .action-button {
    flex: 1;
  }

  .profile-page .content-grid {
    grid-template-columns: 1fr;
  }

  .profile-page .mobile-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 10px;
    z-index: 120;
    width: min(calc(100% - 20px), 520px);
    min-height: 68px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 8px;
    transform: translateX(-50%);
    border: 1px solid rgba(31, 74, 58, 0.2);
    border-radius: 20px;
    background: rgba(255, 253, 247, 0.96);
    box-shadow: 0 16px 45px rgba(36, 42, 37, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .profile-page .mobile-nav-link {
    display: grid;
    place-items: center;
    gap: 2px;
    border-radius: 14px;
    color: var(--muted);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 800;
  }

  .profile-page .mobile-nav-link span:first-child {
    font-size: 20px;
    line-height: 1;
  }

  .profile-page .mobile-nav-link.active {
    background: var(--brand-soft);
    color: var(--brand-dark);
  }
}

@media (max-width: 560px) {
  .profile-page .page-shell {
    width: min(100% - 12px, 760px);
    margin-top: 8px;
  }

  .profile-page .profile-card,
  .profile-page .panel,
  .profile-page .content-card,
  .profile-page .profile-tabs {
    border-radius: 12px;
  }

  .profile-page .profile-cover {
    min-height: 178px;
  }

  .profile-page .cover-copy {
    left: 20px;
    top: 22px;
  }

  .profile-page .cover-copy strong {
    font-size: 27px;
  }

  .profile-page .profile-summary {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 16px 18px;
    text-align: center;
  }

  .profile-page .profile-avatar {
    width: 112px;
    height: 112px;
    margin: -56px auto 0;
    font-size: 33px;
  }

  .profile-page .profile-main {
    padding-top: 0;
  }

  .profile-page .name-row {
    justify-content: center;
  }

  .profile-page .role-tags {
    justify-content: center;
  }

  .profile-page .profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .profile-page .profile-stat {
    padding: 14px 8px;
  }

  .profile-page .profile-stat strong {
    font-size: 19px;
  }

  .profile-page .profile-stat span {
    font-size: 9px;
  }

  .profile-page .profile-tabs {
    overflow-x: auto;
  }

  .profile-page .profile-tab {
    min-width: 110px;
  }

  .profile-page .achievement-list {
    padding: 12px;
  }

  .profile-page .achievement-item {
    grid-template-columns: 47px minmax(0, 1fr);
    gap: 11px;
    padding: 13px;
  }

  .profile-page .medal {
    width: 47px;
    height: 47px;
    font-size: 20px;
  }

  .profile-page .achievement-rank {
    grid-column: 2;
    justify-self: start;
  }

  .profile-page .achievement-copy strong {
    font-size: 14px;
  }

  .profile-page .panel-header,
  .profile-page .content-header {
    padding: 15px;
  }

  .profile-page .panel-body {
    padding: 15px;
  }
}


/* =========================================================
   V4 ANA SAYFA DÜZELTMELERİ
========================================================= */

.home-page .feed-post-list {
  display: grid;
  gap: 16px;
}

.home-page .post-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-page .post-stats {
  min-height: 44px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.home-page .post-stats .like-count {
  color: var(--muted);
  font-style: normal;
}

.home-page .feed-window-control {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.home-page .feed-window-control[hidden] {
  display: none !important;
}

.home-page .feed-window-control button {
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.96);
  color: var(--brand-dark);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.home-page .feed-window-control button:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.home-page .feed-window-control button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.home-page .feed-window-control button:disabled:hover {
  border-color: var(--line);
  background: rgba(255, 253, 247, 0.96);
}

.home-page .feed-window-control .feed-window-secondary {
  background: var(--paper-2);
}

.home-page .feed-window-control-top {
  margin-bottom: 0;
}

.home-page .feed-window-control-bottom {
  margin-top: 0;
}

.site-footer {
  border-top: 1px solid rgba(31, 74, 58, 0.14);
  background: rgba(255, 253, 247, 0.72);
}

.site-footer-inner {
  width: min(1440px, calc(100% - 32px));
  min-height: 54px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

@media (max-width: 980px) {
  .home-page .feed-post-list {
    gap: 14px;
  }

  .site-footer {
    margin-bottom: 0;
    padding-bottom:
      calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  }

  .site-footer-inner {
    width: min(100% - 24px, 720px);
    min-height: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    text-align: center;
  }
}


/* =========================================================
   SON DÜZELTMELER: MOBİL HEADER VE AKIŞ GEZİNMESİ
========================================================= */

.home-page .feed-card {
  scroll-margin-top: calc(var(--header-height) + 14px);
}

@media (max-width: 980px) {
  .home-page .feed-card {
    scroll-margin-top: 76px;
  }

  .home-page .feed-window-control-top {
    justify-content: center;
  }
}


/* =========================================================
   ADIM 2 - GİRİŞ / KAYIT PENCERESİ
========================================================= */

.auth-mobile-only {
  display: none;
}

body.auth-modal-open {
  overflow: hidden;
}

.auth-modal {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(20, 28, 24, 0.58);
  cursor: pointer;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.auth-dialog {
  position: relative;
  width: min(100%, 470px);
  max-height: min(760px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid rgba(31, 74, 58, 0.18);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(22, 34, 28, 0.28);
}

.auth-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px 15px;
}

.auth-dialog-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.auth-dialog-header h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 24px;
  line-height: 1.2;
}

.auth-close-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--muted);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 1;
}

.auth-tab-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin: 0 20px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper-2);
}

.auth-tab-button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.auth-tab-button.active {
  background: var(--paper);
  color: var(--brand-dark);
  box-shadow: 0 4px 15px rgba(49, 42, 30, 0.08);
}

.auth-slider {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

.auth-slider-track {
  display: flex;
  align-items: flex-start;
  width: 200%;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.32s
    cubic-bezier(0.22, 0.61, 0.36, 1);
}

.auth-panel {
  flex: 0 0 50%;
  width: 50%;
  padding: 20px 22px 24px;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-field {
  display: grid;
  gap: 7px;
}

.auth-field > span {
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.auth-field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.auth-field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(31, 74, 58, 0.1);
}

.auth-form-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.55;
}

.auth-message {
  min-height: 19px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.auth-message.error {
  color: var(--danger);
}

.auth-message.success {
  color: var(--brand);
}

.auth-submit-button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.auth-submit-button:hover {
  background: var(--brand-dark);
}

.auth-submit-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.composer-guest {
  cursor: pointer;
}

.composer-guest .composer-placeholder {
  cursor: pointer;
}

.composer-guest .composer-upload,
.composer-guest .composer-share {
  pointer-events: none;
}


/* =========================================================
   ADIM 2 - HESAP / PROFİL GEÇİŞ SAYFASI
========================================================= */

.account-header-title {
  justify-self: center;
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 900;
}

.account-shell {
  width: min(1050px, calc(100% - 32px));
  margin: 28px auto 60px;
}

.account-welcome-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(
      120deg,
      rgba(31, 74, 58, 0.98),
      rgba(23, 55, 44, 0.93)
    );
  color: #fff;
  box-shadow: var(--shadow);
}

.account-avatar {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 5px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 27px;
  font-weight: 900;
}

.account-eyebrow {
  display: block;
  margin-bottom: 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 0.78;
}

.account-welcome-card h1 {
  margin: 0;
  font-size: clamp(25px, 4vw, 37px);
  line-height: 1.2;
}

.account-welcome-card p {
  max-width: 750px;
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.account-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.account-card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 900;
}

.account-card.pending .account-card-icon {
  background: var(--accent-soft);
  color: var(--accent);
}

.account-card h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 19px;
}

.account-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.account-info-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
}

.account-info-list > div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
}

.account-info-list dt {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.account-info-list dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.account-next-step {
  margin-top: 18px;
  padding: 15px 17px;
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--paper-2);
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

@media (max-width: 980px) {
  .header-actions .auth-desktop-only {
    display: none !important;
  }

  .header-actions .auth-mobile-only {
    display: inline-flex !important;
  }

  .account-page {
    padding-top: 62px;
  }

  .account-page .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
  }

  .account-page .header-inner {
    grid-template-columns: 1fr auto;
  }

  .account-page .account-header-title {
    display: none;
  }

  .account-page .header-actions .header-button:not(.primary) {
    display: none;
  }

  .account-shell {
    width: min(100% - 16px, 760px);
    margin-top: 12px;
  }
}

@media (max-width: 620px) {
  .auth-modal {
    align-items: end;
    padding: 0;
  }

  .auth-dialog {
    width: 100%;
    max-height: calc(100vh - 18px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
  }

  .auth-dialog-header {
    padding: 17px 18px 13px;
  }

  .auth-tab-list {
    margin-inline: 16px;
  }

  .auth-panel {
    padding: 18px 18px
      calc(22px + env(safe-area-inset-bottom));
  }

  .account-welcome-card {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 21px;
    text-align: center;
  }

  .account-avatar {
    width: 78px;
    height: 78px;
    margin: 0 auto;
    font-size: 23px;
  }

  .account-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   ADIM 3 - PROFİL TAMAMLAMA VE ALAN BAZLI ONAY
========================================================= */

.profile-completion-page {
  min-height: 100vh;
}

.profile-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 28px auto 80px;
}

.profile-progress-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(210px, 260px);
  align-items: center;
  gap: 22px;
  padding: 26px;
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(31, 74, 58, 0.98), rgba(23, 55, 44, 0.94));
  color: #fff;
  box-shadow: var(--shadow);
}

.profile-progress-avatar {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 900;
}

.profile-progress-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-progress-copy h1 {
  margin: 0;
  font-size: clamp(25px, 4vw, 38px);
}

.profile-progress-copy p {
  max-width: 680px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.profile-progress-numbers {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  font-family: Arial, Helvetica, sans-serif;
}

.profile-progress-numbers strong {
  display: block;
  font-size: 24px;
}

.profile-progress-numbers > span,
.profile-progress-numbers small {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
}

.progress-line {
  height: 7px;
  margin: 12px 0 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.progress-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #d9b77c;
}

.profile-page-notice,
.profile-form-message {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.profile-page-notice.success,
.profile-form-message.success {
  border: 1px solid #b8d5c4;
  background: #e5f1ea;
  color: #174a32;
}

.profile-page-notice.warning {
  border: 1px solid #dec695;
  background: #fff3d6;
  color: #71521b;
}

.profile-form-message.error {
  border: 1px solid #dfb2aa;
  background: #f8e6e2;
  color: #8d342a;
}

.profile-form-message:empty {
  display: none;
}

.profile-form {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.profile-section-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.profile-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.profile-section-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 900;
}

.profile-section-heading h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 22px;
}

.profile-section-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.profile-fields-grid {
  display: grid;
  gap: 15px;
}

.profile-fields-grid.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-field-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper-2);
}

.profile-field-card.editing {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 74, 58, 0.08);
}

.field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.field-heading label,
.profile-field-card > label,
.achievement-step label,
.membership-proof label {
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.profile-field-card input:not([type="file"]),
.profile-field-card select,
.achievement-step input:not([type="file"]),
.achievement-step select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.profile-field-card input:focus,
.profile-field-card select:focus,
.achievement-step input:focus,
.achievement-step select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 74, 58, 0.09);
}

.profile-field-card input:disabled,
.profile-field-card select:disabled {
  opacity: 1;
  background: #ebe7dd;
  color: #6a6f6b;
  cursor: not-allowed;
}

.field-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field-status.approved {
  background: #dcece3;
  color: #1c6543;
}

.field-status.pending {
  background: #f2e6c9;
  color: #815c1e;
}

.field-status.rejected {
  background: #f2deda;
  color: #963d32;
}

.field-status.missing {
  background: #e6e3dc;
  color: #6c756f;
}

.field-status.optional {
  background: #e8eef0;
  color: #556a72;
}

.field-rejection {
  margin: 9px 0 0;
  padding: 9px 10px;
  border-left: 3px solid var(--danger);
  background: #f8e7e3;
  color: #89392f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.field-edit-button {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
}

.file-drop-area {
  min-height: 88px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px dashed #b9ad9a;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  text-align: center;
}

.file-drop-area span,
.profile-field-card small,
.membership-proof small {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}

.visually-hidden-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.selected-file-name {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
  color: var(--brand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.membership-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.membership-option {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper-2);
}

.membership-option-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.membership-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.membership-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.membership-proof {
  display: grid;
  gap: 7px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.membership-proof input[type="file"],
.profile-field-card input[type="file"],
.achievement-step input[type="file"] {
  width: 100%;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.existing-achievement-list,
.achievement-form-list {
  display: grid;
  gap: 11px;
}

.existing-achievement-list + .existing-achievement-list,
.existing-achievement-list + .achievement-form-list {
  margin-top: 12px;
}

.existing-achievement {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
}

.achievement-rank {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
}

.existing-achievement strong,
.existing-achievement span {
  display: block;
}

.existing-achievement span {
  margin-top: 2px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}

.achievement-form-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper-2);
}

.achievement-card-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.remove-achievement {
  border: 0;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.achievement-step {
  display: none;
  gap: 7px;
}

.achievement-step.active {
  display: grid;
}

.achievement-form-card .field-rejection {
  grid-column: 1 / -1;
  margin: 0;
}

.add-achievement-button {
  min-height: 43px;
  margin-top: 13px;
  padding: 0 16px;
  border: 1px dashed var(--brand);
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.profile-submit-bar {
  position: sticky;
  bottom: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.96);
  box-shadow: 0 12px 35px rgba(49, 42, 30, 0.16);
  backdrop-filter: blur(12px);
}

.profile-submit-bar strong,
.profile-submit-bar span {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
}

.profile-submit-bar strong {
  color: var(--brand-dark);
  font-size: 12px;
}

.profile-submit-bar span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.profile-save-button {
  min-height: 44px;
  padding: 0 19px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.profile-save-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

@media (max-width: 900px) {
  .profile-progress-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .profile-progress-numbers {
    grid-column: 1 / -1;
  }

  .membership-grid {
    grid-template-columns: 1fr;
  }

  .achievement-form-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .profile-shell {
    width: min(100% - 14px, 760px);
    margin-top: 10px;
  }

  .profile-progress-card {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 20px;
    text-align: center;
  }

  .profile-progress-avatar {
    width: 82px;
    height: 82px;
    margin: 0 auto;
  }

  .profile-section-card {
    padding: 17px;
  }

  .profile-fields-grid.two-columns,
  .achievement-form-card {
    grid-template-columns: 1fr;
  }

  .profile-section-heading h2 {
    font-size: 19px;
  }

  .profile-submit-bar {
    bottom: 8px;
    align-items: stretch;
    flex-direction: column;
  }

  .profile-save-button {
    width: 100%;
  }
}

/* =========================================================
   ADIM 5 — DİNAMİK KİŞİLER VE HERKESE AÇIK PROFİL
   ========================================================= */

.avatar.has-image,
.person-card-avatar.has-image,
.profile-page .profile-avatar.has-image {
  overflow: hidden;
  padding: 0;
  background: var(--paper-2);
}

.avatar.has-image img,
.person-card-avatar.has-image img,
.profile-page .profile-avatar.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ranking-empty {
  display: grid;
  gap: 4px;
  padding: 24px 18px;
  text-align: center;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
}

.ranking-empty strong {
  color: var(--brand-dark);
  font-size: 14px;
}

.ranking-empty span {
  font-size: 12px;
}

.profile-page .medal.silver {
  background: linear-gradient(135deg, #667078, #b5bdc3);
}

.profile-page .profile-avatar img {
  border-radius: 50%;
}

.profile-page .empty-state.compact {
  padding: 38px 22px;
}

.public-not-found {
  padding-top: 50px;
}

.public-not-found .action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.public-profile-mobile-nav button.mobile-nav-link {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.people-directory-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(163, 107, 44, 0.08), transparent 27%),
    linear-gradient(180deg, #f2eee5 0%, var(--bg) 100%);
}

.people-directory-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 26px auto 56px;
}

.people-directory-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.97);
  box-shadow: var(--shadow);
}

.people-directory-intro .eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.people-directory-intro h1 {
  margin: 0;
  color: var(--brand-dark);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
}

.people-directory-intro p {
  max-width: 700px;
  margin: 9px 0 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.people-directory-intro > strong {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.people-mobile-search {
  display: none;
}

.people-search-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 18px 0 0;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.94);
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.people-search-summary a {
  color: var(--brand);
  font-weight: 800;
}

.people-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.person-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 253, 247, 0.98);
  box-shadow: var(--shadow);
}

.person-card-main {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 20px;
}

.person-card-avatar {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-dark), #7e9e89);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 900;
}

.person-card-copy {
  min-width: 0;
}

.person-card-copy strong,
.person-card-copy small,
.person-card-copy em {
  display: block;
}

.person-card-copy strong {
  overflow: hidden;
  color: var(--brand-dark);
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-card-copy small {
  margin-top: 5px;
  color: var(--accent);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.person-card-copy em {
  overflow: hidden;
  margin-top: 5px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-card-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.person-card-details span {
  min-width: 0;
  padding: 11px 8px;
  text-align: center;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.person-card-details span:last-child {
  border-right: 0;
}

.person-card-button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin: 14px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.people-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
  font-family: Arial, Helvetica, sans-serif;
}

.people-pagination a,
.people-pagination span {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .people-directory-page {
    padding-bottom: 84px;
  }

  .people-directory-page .site-header,
  .public-profile-page .site-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
  }

  .people-directory-shell,
  .public-profile-page .page-shell {
    margin-top: calc(var(--header-height) + 16px);
  }

  .people-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .people-mobile-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 14px;
  }

  .people-mobile-search input,
  .people-mobile-search button {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font: inherit;
  }

  .people-mobile-search input {
    min-width: 0;
    padding: 0 14px;
    background: #fff;
  }

  .people-mobile-search button {
    padding: 0 17px;
    background: var(--brand);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 900;
  }
}

@media (max-width: 640px) {
  .people-directory-shell {
    width: min(100% - 12px, 760px);
    margin-bottom: 24px;
  }

  .people-directory-intro {
    align-items: flex-start;
    padding: 20px;
  }

  .people-directory-intro > strong {
    display: none;
  }

  .people-directory-intro h1 {
    font-size: 28px;
  }

  .people-directory-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
  }

  .person-card-main {
    grid-template-columns: 68px minmax(0, 1fr);
    padding: 16px;
  }

  .person-card-avatar {
    width: 68px;
    height: 68px;
    font-size: 21px;
  }

  .person-card-copy strong {
    font-size: 17px;
  }

  .people-search-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 980px) {
  .people-directory-page .mobile-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 10px;
    z-index: 120;
    width: min(calc(100% - 20px), 520px);
    min-height: 68px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 8px;
    transform: translateX(-50%);
    border: 1px solid rgba(31, 74, 58, 0.2);
    border-radius: 20px;
    background: rgba(255, 253, 247, 0.96);
    box-shadow: 0 16px 45px rgba(36, 42, 37, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .people-directory-page .mobile-nav-link {
    display: grid;
    place-items: center;
    gap: 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 800;
  }

  .people-directory-page .mobile-nav-link span:first-child {
    font-size: 20px;
    line-height: 1;
  }

  .people-directory-page .mobile-nav-link.active {
    background: var(--brand-soft);
    color: var(--brand-dark);
  }
}

/* =========================================================
   ADIM 6 — BAŞARI TABLOSU
   ========================================================= */
.achievement-directory-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 2%, rgba(163, 107, 44, 0.1), transparent 28%),
    linear-gradient(180deg, #f2eee5 0%, var(--bg) 100%);
}

.achievement-ranking-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 26px auto 56px;
}

.achievement-ranking-intro {
  margin-bottom: 16px;
}

.achievement-score-guide {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 2.15fr);
  align-items: center;
  gap: 22px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, 0.97);
  box-shadow: var(--shadow);
}

.achievement-score-title strong,
.achievement-score-title span {
  display: block;
}

.achievement-score-title strong {
  color: var(--brand-dark);
  font-size: 17px;
}

.achievement-score-title span {
  margin-top: 5px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

.achievement-score-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.achievement-score-grid > span {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 58px;
  padding: 8px 5px;
  border-right: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.achievement-score-grid > span:last-child {
  border-right: 0;
}

.achievement-score-grid b {
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
}

.achievement-leaderboard {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.achievement-leader-card {
  display: grid;
  grid-template-columns: 62px minmax(220px, 1fr) minmax(280px, 1.45fr) 92px 108px;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 253, 247, 0.98);
  box-shadow: 0 8px 24px rgba(47, 43, 35, 0.07);
}

.achievement-leader-card.top-rank {
  border-color: rgba(163, 107, 44, 0.38);
  background: linear-gradient(90deg, rgba(248, 239, 219, 0.96), rgba(255, 253, 247, 0.99));
}

.achievement-rank-position {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 900;
}

.top-rank-1 .achievement-rank-position {
  background: #d2a43c;
  color: #fff;
}

.top-rank-2 .achievement-rank-position {
  background: #9aa4a7;
  color: #fff;
}

.top-rank-3 .achievement-rank-position {
  background: #a96d3f;
  color: #fff;
}

.achievement-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.achievement-avatar {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-dark), #7e9e89);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 900;
}

.achievement-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.achievement-person-copy {
  min-width: 0;
}

.achievement-person-copy strong,
.achievement-person-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-person-copy strong {
  color: var(--brand-dark);
  font-size: 17px;
}

.achievement-person-copy small {
  margin-top: 5px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.achievement-medal-summary {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.achievement-medal-summary span {
  padding: 6px 8px;
  border: 1px solid rgba(163, 107, 44, 0.2);
  border-radius: 999px;
  background: #fbf4e8;
  color: #684a28;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 800;
}

.achievement-total {
  display: grid;
  justify-items: center;
  font-family: Arial, Helvetica, sans-serif;
}

.achievement-total strong {
  color: var(--accent);
  font-size: 25px;
  line-height: 1;
}

.achievement-total > span {
  margin-top: 2px;
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.achievement-total small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

.achievement-profile-link {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand);
  border-radius: 999px;
  color: var(--brand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
}

.achievement-profile-link:hover {
  background: var(--brand);
  color: #fff;
}

.achievement-empty-state {
  margin-top: 18px;
}

@media (max-width: 980px) {
  .achievement-ranking-shell {
    margin-top: calc(var(--header-height) + 16px);
    margin-bottom: 30px;
  }

  .achievement-score-guide {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .achievement-score-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .achievement-score-grid > span:nth-child(3) {
    border-right: 0;
  }

  .achievement-score-grid > span:nth-child(-n+3) {
    border-bottom: 1px solid var(--line);
  }

  .achievement-leader-card {
    grid-template-columns: 52px minmax(0, 1fr) 82px;
    gap: 12px;
  }

  .achievement-medal-summary {
    grid-column: 2 / 4;
  }

  .achievement-profile-link {
    grid-column: 2 / 4;
  }
}

@media (max-width: 640px) {
  .achievement-ranking-shell {
    width: min(100% - 12px, 760px);
  }

  .achievement-ranking-intro {
    margin-bottom: 12px;
  }

  .achievement-score-guide {
    padding: 16px;
  }

  .achievement-score-title strong {
    font-size: 15px;
  }

  .achievement-leaderboard {
    gap: 10px;
    margin-top: 14px;
  }

  .achievement-leader-card {
    grid-template-columns: 42px minmax(0, 1fr) 62px;
    gap: 10px;
    padding: 13px 12px;
  }

  .achievement-rank-position {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .achievement-avatar {
    width: 48px;
    height: 48px;
    font-size: 15px;
  }

  .achievement-person {
    gap: 9px;
  }

  .achievement-person-copy strong {
    font-size: 15px;
  }

  .achievement-person-copy small {
    font-size: 10px;
  }

  .achievement-total strong {
    font-size: 21px;
  }

  .achievement-medal-summary {
    grid-column: 1 / 4;
  }

  .achievement-profile-link {
    grid-column: 1 / 4;
  }
}


/* =========================================================
   ADIM 7: KULÜPLER
   ========================================================= */

.panel-empty {
    padding: 20px 16px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.avatar.has-image,
.admin-avatar-image,
.club-directory-logo.has-image,
.club-profile-logo.has-image {
    overflow: hidden;
}

.avatar.has-image img,
.admin-avatar-image img,
.club-directory-logo.has-image img,
.club-profile-logo.has-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.club-directory-logo {
    border-radius: 18px;
}

.club-submit-section {
    margin-top: 26px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--cream);
}

.club-submit-tab {
    width: 100%;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
    border: 0;
    color: var(--green);
    background: var(--cream);
    font: inherit;
    font-size: 17px;
    cursor: pointer;
}

.club-submit-tab strong {
    font-family: Georgia, serif;
    font-size: 21px;
}

.club-submit-tab > span:last-child {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--green);
    font-size: 22px;
    transition: transform .2s ease;
}

.club-submit-tab.open > span:last-child {
    transform: rotate(45deg);
}

.club-submit-panel {
    padding: 24px;
    border-top: 1px solid var(--line);
    background: #faf6ee;
    scroll-margin-top: 86px;
}

.club-submit-intro {
    margin-bottom: 20px;
}

.club-submit-intro h2 {
    margin: 4px 0 7px;
    color: var(--green);
    font-family: Georgia, serif;
    font-size: 28px;
}

.club-submit-intro p {
    margin: 0;
    color: var(--muted);
}

.club-login-required,
.club-application-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
}

.club-application-status {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 16px;
}

.club-application-status strong,
.club-application-status span,
.club-application-status a {
    display: block;
}

.club-application-status span {
    color: var(--muted);
}

.club-application-status.waiting {
    color: #755a16;
    background: #fff3cd;
}

.club-application-status.rejected {
    color: var(--red);
    background: var(--red-bg);
}

.club-application-status.approved {
    color: var(--ok);
    background: var(--ok-bg);
}

.club-application-status a {
    font-weight: 800;
}

.club-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.club-application-form label {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.club-application-form label > span {
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
}

.club-application-form input,
.club-application-form select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #cfc6b8;
    border-radius: 9px;
    color: var(--ink);
    background: #fff;
    font: inherit;
}

.club-application-form input[type="file"] {
    padding: 8px;
}

.club-application-form label small {
    color: var(--muted);
    line-height: 1.4;
}

.club-form-wide {
    grid-column: 1 / -1;
}

.club-upload-field {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}

.club-form-message {
    min-height: 22px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
}

.club-form-message.error {
    color: var(--red);
}

.club-form-message.success {
    color: var(--ok);
}

.club-submit-button {
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--green);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.club-submit-button:disabled {
    opacity: .6;
    cursor: wait;
}

.club-profile-cover {
    background:
        linear-gradient(110deg, rgba(23,55,44,.96), rgba(36,81,63,.82)),
        radial-gradient(circle at right top, rgba(255,255,255,.15), transparent 42%);
}

.club-profile-logo {
    border-radius: 22px;
}

.club-profile-stats {
    grid-template-columns: repeat(3, 1fr);
}

.club-public-content {
    margin-top: 18px;
}

.club-public-message {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
}

.club-public-mark {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: var(--green);
    font-size: 25px;
}

.club-public-message strong {
    display: block;
    margin-bottom: 8px;
    color: var(--green);
    font-family: Georgia, serif;
    font-size: 23px;
}

.club-public-message p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

@media (max-width: 700px) {
    .club-form-grid {
        grid-template-columns: 1fr;
    }

    .club-form-wide {
        grid-column: auto;
    }

    .club-submit-panel {
        padding: 17px;
    }

    .club-submit-tab {
        padding: 0 16px;
        font-size: 14px;
    }

    .club-submit-tab strong {
        font-size: 17px;
    }

    .club-login-required {
        align-items: stretch;
        flex-direction: column;
    }

    .club-public-message {
        padding: 18px;
    }
}


/* =========================================================
   ADIM 8: MARKALAR
   ========================================================= */

.brand-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px auto;
    gap: 10px;
    margin: 18px 0;
}

.brand-filter-form input,
.brand-filter-form select {
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #cfc6b8;
    border-radius: 9px;
    color: var(--ink);
    background: #fff;
    font: inherit;
}

.brand-filter-form button {
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: var(--green);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.brand-directory-logo {
    border-radius: 18px;
    overflow: hidden;
}

.brand-directory-logo img,
.brand-profile-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.brand-profile-cover {
    background:
        linear-gradient(110deg, rgba(83,55,28,.96), rgba(139,92,41,.82)),
        radial-gradient(circle at right top, rgba(255,255,255,.15), transparent 42%);
}

.brand-profile-logo {
    overflow: hidden;
    border-radius: 22px;
}

.brand-profile-stats {
    grid-template-columns: repeat(3, 1fr);
}

.brand-public-content {
    margin-top: 18px;
}

@media (max-width: 700px) {
    .brand-filter-form {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   ADIM 9: KİŞİ - KULÜP - MARKA İLİŞKİLERİ
   ========================================================= */

.profile-page .profile-entity-inline {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--brand-dark);
    text-decoration: none;
    vertical-align: middle;
}

.profile-page .profile-entity-inline:hover span:last-child {
    text-decoration: underline;
}

.profile-page .profile-entity-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, #355749, #7b9a88);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 900;
}

.profile-page .profile-entity-avatar.person-avatar {
    border-radius: 50%;
    background: linear-gradient(135deg, #6d5539, #b38b58);
}

.profile-page .profile-entity-avatar img,
.profile-page .club-logo.has-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.profile-page .profile-equipment-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.profile-page .profile-equipment-value em {
    color: var(--muted);
    font-style: normal;
    font-weight: 700;
}

.profile-page .linked-entity-card {
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.profile-page .linked-entity-card:hover {
    transform: translateY(-1px);
    border-color: rgba(31, 74, 58, .35);
    box-shadow: 0 10px 24px rgba(31, 74, 58, .08);
}

.profile-page .club-logo.has-image {
    overflow: hidden;
    background: #fff;
}

@media (max-width: 560px) {
    .profile-page .profile-entity-inline {
        width: 100%;
    }
}


/* =========================================================
   ADIM 10: GERÇEK PAYLAŞIM SİSTEMİ
   ========================================================= */

.avatar.has-image,
.post-comment-avatar.has-image {
  overflow: hidden;
}

.avatar.has-image img,
.post-comment-avatar.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.post-author-line a,
.post-meta,
.comment-count {
  color: inherit;
  text-decoration: none;
}

.post-author-line a:hover,
.post-meta:hover,
.comment-count:hover {
  color: var(--brand);
}

.real-post-media {
  min-height: 0;
  display: block;
  background: #ece7dc;
}

.real-post-media::before,
.real-post-media::after {
  display: none;
}

.real-post-media img {
  width: 100%;
  max-height: 680px;
  display: block;
  object-fit: contain;
  background: #ece7dc;
}

.post-stat-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.post-action.comment-button {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.post-form-message {
  min-height: 18px;
  margin-top: 9px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.post-form-message.error {
  color: #a3372a;
}

.post-form-message.success {
  color: #267048;
}

.composer-locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.composer-locked strong,
.composer-locked span {
  display: block;
}

.composer-locked strong {
  color: var(--brand-dark);
}

.composer-locked span {
  margin-top: 5px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.feed-load-more {
  display: flex;
  justify-content: center;
  padding: 4px 0 16px;
}

.feed-load-more button {
  min-height: 43px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand-dark);
  background: var(--paper);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.feed-load-more button:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.feed-empty-state {
  margin-bottom: 12px;
}

.profile-stats-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-post-list {
  width: min(100%, 760px);
  display: grid;
  gap: 14px;
  margin: 0 auto;
}

.post-detail-shell {
  width: min(100% - 28px, 760px);
  margin: 0 auto;
  padding: 26px 0 80px;
}

.post-detail-back {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.post-detail-card-wrap .feed-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.post-comments-section {
  margin-top: 16px;
}

.post-comments-section .content-header span {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.post-detail-comment-form {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.post-detail-comment-form textarea {
  width: 100%;
  min-height: 90px;
  padding: 12px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: var(--paper-2);
  font: inherit;
  line-height: 1.5;
}

.post-detail-comment-form textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(31, 74, 58, .08);
}

.post-detail-comment-form > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}

.post-detail-comment-form button {
  min-height: 40px;
  padding: 0 17px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.post-comment-list {
  display: grid;
}

.post-comment-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.post-comment-item:last-child {
  border-bottom: 0;
}

.post-comment-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}

.post-comment-content {
  min-width: 0;
  flex: 1;
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--paper-2);
}

.post-comment-content > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.post-comment-content a {
  color: var(--brand-dark);
  text-decoration: none;
}

.post-comment-content span {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}

.post-comment-content p {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.post-comments-empty,
.post-comment-login {
  padding: 22px 18px;
  color: var(--muted);
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.post-comment-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

@media (max-width: 700px) {
  .composer-locked,
  .post-comment-login {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-stats-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-detail-shell {
    width: min(100% - 16px, 760px);
    padding-top: 14px;
  }

  .post-detail-comment-form > div {
    align-items: stretch;
    flex-direction: column;
  }
}


.home-page .real-feed-card .post-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* =========================================================
   BUGFIX: BUTON METİNLERİNİ DİKEY ORTALAMA
   ========================================================= */

/*
 * Bazı tarayıcılarda min-height kullanılan doğal <button> elemanlarının
 * yazı tabanı yukarıda kalabiliyor. Aynı sınıfın <a> etiketiyle
 * kullanıldığı yerlerde min-height de etkisiz kalıyordu.
 */

.header-button {
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

.header-button:not(.auth-mobile-only) {
  display: inline-flex;
}

.composer-upload,
.composer-share,
.post-action,
.post-comment-box button,
.profile-page .action-button,
.home-page .feed-window-control button,
.auth-tab-button,
.auth-submit-button,
.people-mobile-search button,
.club-submit-button,
.brand-filter-form button,
.feed-load-more button,
.post-detail-comment-form button,
.add-achievement-button,
.profile-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

.post-action.comment-button {
  display: inline-flex;
}

.post-menu {
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}

/* Buton görünümündeki bağlantılar */
.profile-page a.action-button,
.public-not-found .action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

/* Mobil giriş butonu kendi görünürlük kuralını korur. */
@media (max-width: 980px) {
  .header-actions .auth-mobile-only {
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
  }
}


/* =========================================================
   ADIM 11: PAYLAŞIM VE YORUM MODERASYONU
   ========================================================= */

.content-status-card {
  position: relative;
}

.content-status-card.content-status-pending {
  border-color: rgba(174, 124, 21, .35);
}

.content-status-card.content-status-rejected {
  border-color: rgba(165, 54, 54, .35);
}

.content-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.content-status-badge.pending {
  color: #7c5b13;
  background: #fff0bf;
}

.content-status-badge.approved {
  color: #236347;
  background: #dff2e8;
}

.content-status-badge.rejected {
  color: #9a3030;
  background: #f9dddd;
}

.content-moderation-message,
.comment-moderation-message {
  margin: 0 16px 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
}

.content-moderation-message strong,
.content-moderation-message span {
  display: block;
}

.content-moderation-message strong {
  margin-bottom: 3px;
}

.content-moderation-message.pending,
.comment-moderation-message.pending {
  color: #745713;
  background: #fff4ce;
}

.content-moderation-message.rejected,
.comment-moderation-message.rejected {
  color: #913333;
  background: #fbe5e5;
}

.post-comment-item .comment-moderation-message {
  margin: 9px 0 0;
}

.content-moderation-page-note {
  margin-bottom: 16px;
}

.profile-content-subsection + .profile-content-subsection {
  margin-top: 26px;
}

.profile-subsection-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.profile-subsection-heading h2 {
  margin: 0;
  color: var(--green);
  font-family: Georgia, serif;
  font-size: 24px;
}

.profile-subsection-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.profile-subsection-heading > strong {
  min-width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
}

.profile-comment-list {
  display: grid;
  gap: 12px;
}

.profile-comment-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.profile-comment-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-comment-card-head strong,
.profile-comment-card-head span {
  display: block;
}

.profile-comment-card-head strong {
  color: var(--green);
}

.profile-comment-card-head span:not(.content-status-badge) {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.profile-comment-card > p {
  margin: 14px 0;
  line-height: 1.6;
}

.profile-comment-card .comment-moderation-message {
  margin: 0 0 12px;
}

.profile-comment-reference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.profile-comment-reference span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-comment-reference a {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 600px) {
  .post-author-line {
    flex-wrap: wrap;
  }

  .profile-comment-card-head,
  .profile-comment-reference {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-comment-reference span {
    width: 100%;
  }
}


/* =========================================================
   MODERASYON SONUÇ PENCERESİ
   ========================================================= */

body.moderation-popup-open {
  overflow: hidden;
}

.moderation-popup[hidden] {
  display: none;
}

.moderation-popup {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 20px;
}

.moderation-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 20, .62);
  backdrop-filter: blur(3px);
}

.moderation-popup-dialog {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  padding: 30px 28px 26px;
  border: 1px solid rgba(23, 55, 44, .16);
  border-radius: 18px;
  background: #fffdf7;
  box-shadow: 0 24px 70px rgba(10, 25, 20, .25);
  text-align: center;
}

.moderation-popup-close {
  position: absolute;
  top: 11px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.moderation-popup-close:hover {
  color: var(--green);
  background: rgba(23, 55, 44, .07);
}

.moderation-popup-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin: 0 auto 17px;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 29px;
  font-weight: 900;
}

.moderation-popup-dialog h2 {
  margin: 0;
  color: var(--green);
  font-family: Georgia, serif;
  font-size: 27px;
}

.moderation-popup-dialog p {
  margin: 12px 0 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.moderation-popup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.moderation-popup-primary,
.moderation-popup-secondary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.moderation-popup-primary {
  border: 0;
  color: #fff;
  background: var(--green);
}

.moderation-popup-secondary {
  border: 1px solid var(--green);
  color: var(--green);
  background: transparent;
}

.profile-comment-status-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.profile-comment-total {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--green);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .moderation-popup-dialog {
    padding: 27px 18px 20px;
  }

  .moderation-popup-actions {
    grid-template-columns: 1fr;
  }

  .profile-subsection-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-comment-status-summary {
    justify-content: flex-start;
  }
}


/* =========================================================
   ADIM 12: ORTAK NAVİGASYON, PROFİL MENÜSÜ VE DÜZELTMELER
   ========================================================= */

.nav-line-icon { width: 23px; height: 23px; display: block; }
.nav-achievement-emoji { display: block; font-size: 21px; line-height: 1; filter: saturate(1.15); }
.mobile-nav-icon-wrap { min-height: 25px; display: grid; place-items: center; }
.home-page .mobile-nav-icon .nav-line-icon { width: 22px; height: 22px; }
.home-page .mobile-nav-icon .nav-achievement-emoji { font-size: 21px; }

.public-mobile-nav { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.public-mobile-nav .mobile-nav-link { min-width: 0; text-decoration: none; }
.public-mobile-nav .mobile-nav-link > span:last-child { font-size: 9px; white-space: nowrap; }

.header-profile-actions { position: relative; justify-self: end; }
.header-profile-menu { position: relative; display: inline-flex; align-items: stretch; border: 1px solid rgba(31,74,58,.2); border-radius: 999px; background: #fffdf7; box-shadow: 0 6px 20px rgba(31,74,58,.08); }
.header-profile-main { min-height: 42px; display: inline-flex; align-items: center; gap: 9px; padding: 4px 10px 4px 5px; color: var(--brand-dark); font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: 900; text-decoration: none; }
.header-profile-avatar { width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: var(--brand); font-size: 10px; }
.header-profile-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.header-profile-toggle { width: 34px; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid rgba(31,74,58,.12); border-radius: 0 999px 999px 0; color: var(--brand-dark); background: transparent; cursor: pointer; }
.header-profile-chevron { width: 17px; height: 17px; transition: transform .2s ease; }
.header-profile-menu.open .header-profile-chevron { transform: rotate(180deg); }
.header-profile-dropdown { position: absolute; top: calc(100% + 10px); right: 0; z-index: 500; width: 220px; overflow: hidden; padding: 7px; border: 1px solid rgba(31,74,58,.16); border-radius: 14px; background: #fffdf7; box-shadow: 0 18px 48px rgba(20,38,30,.2); }
.header-profile-dropdown[hidden] { display: none; }
.header-profile-dropdown a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 11px; border-radius: 9px; color: var(--ink); font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: 800; text-decoration: none; }
.header-profile-dropdown a:hover { color: var(--brand-dark); background: var(--brand-soft); }
.header-profile-dropdown .profile-menu-logout { color: #9a3030; }
.profile-menu-icon { width: 19px; height: 19px; flex: 0 0 19px; }

.guest-composer-avatar { color: #9ca6a1 !important; background: #edf0ee !important; opacity: .72; }
.guest-avatar-icon { width: 31px; height: 31px; }

.person-list-card { min-width: 0; display: grid; grid-template-columns: 28px 58px minmax(0,1fr); align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; color: inherit; background: var(--paper); box-shadow: var(--shadow-soft); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.person-list-card:hover { transform: translateY(-2px); border-color: rgba(31,74,58,.35); }
.person-list-rank { color: var(--brand); font-family: Arial,Helvetica,sans-serif; font-size: 18px; font-weight: 900; text-align: center; }
.person-list-card .person-card-avatar { width: 58px; height: 58px; }
.person-list-copy { min-width: 0; }
.person-list-copy strong, .person-list-copy span, .person-list-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-list-copy strong { color: var(--brand-dark); font-size: 16px; }
.person-list-copy span { margin-top: 4px; font-size: 12px; font-weight: 700; }
.person-list-copy small { margin-top: 3px; color: var(--muted); font-family: Arial,Helvetica,sans-serif; font-size: 11px; }

.post-detail-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.post-detail-topbar .post-detail-back { margin: 0; }
.post-detail-profile-link { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--brand-dark); background: var(--paper); font-family: Arial,Helvetica,sans-serif; font-size: 12px; font-weight: 900; text-decoration: none; }

.profile-image-field { min-width: 0; overflow: hidden; }
.profile-image-field .file-drop-area { width: 100%; max-width: 100%; box-sizing: border-box; }
.profile-image-field .visually-hidden-file { position: fixed !important; left: -10000px !important; width: 1px !important; max-width: 1px !important; height: 1px !important; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.brand-product-group-field { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.brand-product-group-field legend { width: 100%; color: var(--green); font-size: 13px; font-weight: 800; }
.brand-product-group-field label { display: inline-flex; align-items: center; gap: 7px; }
.brand-product-group-field input { width: 18px; min-height: 18px; }
.brand-product-group-field small { width: 100%; }
.brand-manual-input[hidden] { display: none; }
.brand-manual-input { margin-top: 8px; }

.trash-line-icon { width: 16px; height: 16px; display: block; }
.post-menu.delete-post-button, .comment-delete-button { display: grid; place-items: center; padding: 0; color: #7b8580; background: transparent; }
.post-menu.delete-post-button:hover, .comment-delete-button:hover { color: #a33939; background: #f8e6e6; }
.post-comment-content { position: relative; padding-right: 34px; }
.comment-delete-button { position: absolute; top: 0; right: 0; width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer; }
.profile-comment-card { position: relative; }
.profile-comment-delete { position: static; width: fit-content; height: 34px; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; padding: 0 10px; border: 1px solid #ead2d2; font-family: Arial,Helvetica,sans-serif; font-size: 11px; font-weight: 800; }

.profile-page .profile-entity-avatar.has-image, .profile-page .club-logo.has-image { border-color: transparent; background: transparent !important; box-shadow: none; }

@media (max-width: 980px) {
  .public-profile-page .page-shell { margin-top: calc(var(--header-height) + 8px) !important; }
  .public-mobile-nav { width: min(calc(100% - 12px), 560px) !important; bottom: 6px !important; padding: 6px !important; }
  .header-profile-main { min-height: 38px; }
  .header-profile-label-link { display: inline-flex; }
  .header-profile-dropdown { position: fixed; top: var(--header-height); right: 8px; }
}

@media (max-width: 560px) {
  .public-profile-page .page-shell { width: calc(100% - 12px) !important; margin-top: calc(var(--header-height) + 6px) !important; }
  .person-list-card { grid-template-columns: 24px 50px minmax(0,1fr); gap: 9px; padding: 12px 10px; }
  .person-list-card .person-card-avatar { width: 50px; height: 50px; }
  .person-list-rank { font-size: 16px; }
  .post-detail-topbar { align-items: stretch; }
  .post-detail-back, .post-detail-profile-link { flex: 1; text-align: center; }
  .header-profile-dropdown { left: 8px; right: 8px; width: auto; }
}

.post-comment-item { scroll-margin-top: calc(var(--header-height) + 16px); }


/* =========================================================
   ADIM 13: LİSTELER, MOBİL NAV, POPUP VE İSTEĞE BAĞLI ALANLAR
   ========================================================= */

.field-heading label small,
.admin-form-grid label > span small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.directory-submit-link {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.compact-directory-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.directory-list-card .club-directory-logo,
.directory-list-card .brand-directory-logo {
  overflow: hidden;
  border-radius: 12px;
  background: transparent;
}

.directory-list-card .club-directory-logo img,
.directory-list-card .brand-directory-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.directory-submit-section {
  margin-top: 18px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.directory-submit-section .club-submit-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
}

.directory-application-submit {
  min-height: 50px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-dark) !important;
  color: #fff !important;
  background: var(--brand) !important;
  box-shadow: 0 8px 18px rgba(31, 74, 58, .16);
  opacity: 1;
}

.directory-application-submit:hover {
  background: var(--brand-dark) !important;
}

.post-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
}

.post-action-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: block;
}

.like-button.active .post-action-icon {
  fill: currentColor;
}

.post-detail-profile-link {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--brand-dark);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.post-detail-profile-link:hover,
.post-detail-back:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.moderation-popup-dialog {
  padding: 20px 22px 22px;
  text-align: left;
}

.moderation-popup-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 11px;
}

.moderation-popup-icon {
  width: 42px;
  height: 42px;
  margin: 0;
  font-size: 21px;
}

.moderation-popup-close {
  position: static;
  width: 34px;
  height: 34px;
  justify-self: end;
}

.moderation-popup-dialog h2 {
  font-size: 22px;
  line-height: 1.2;
}

.moderation-popup-dialog p {
  margin: 13px 0 18px 53px;
  font-size: 13px;
  line-height: 1.5;
}

.moderation-popup-primary {
  border: 1px solid var(--green);
  color: #fff;
  background: var(--green);
}

.moderation-popup-secondary {
  border: 1px solid var(--line);
  color: var(--brand-dark);
  background: var(--paper);
}

.nav-achievement-emoji { display: none !important; }
.nav-line-icon { color: currentColor; stroke-width: 2.65; }

@media (max-width: 980px) {
  body.profile-page.public-profile-page {
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  }

  .public-profile-page .page-shell {
    margin-top: 6px !important;
  }

  .public-mobile-nav,
  .profile-page .public-mobile-nav,
  .people-directory-page .public-mobile-nav {
    position: fixed !important;
    z-index: 1000 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: var(--mobile-nav-height) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    border: 0 !important;
    border-top: 1px solid rgba(31, 74, 58, .15) !important;
    border-radius: 0 !important;
    background: rgba(255, 253, 247, .97) !important;
    box-shadow: 0 -8px 30px rgba(20, 35, 27, .1) !important;
  }

  .public-mobile-nav .mobile-nav-link {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 6px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
  }

  .public-mobile-nav .mobile-nav-link.active {
    color: var(--brand-dark);
    background: var(--brand-soft);
  }
}

@media (max-width: 640px) {
  .compact-directory-grid {
    grid-template-columns: 1fr;
  }
  .people-directory-intro p {
    line-height: 1.6;
  }
  .moderation-popup-dialog p {
    margin-left: 0;
  }
  .moderation-popup-actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* ADIM 13 son hizalama: paylaşım üst bağlantıları buton gibi genişlemez. */
.post-detail-topbar { align-items: center; justify-content: space-between; }
.post-detail-back, .post-detail-profile-link { flex: 0 0 auto; text-align: initial; }
@media (max-width: 560px) {
  .post-detail-topbar { align-items: center; }
  .post-detail-back, .post-detail-profile-link { flex: 0 0 auto; text-align: initial; }
}


/* =========================================================
   ADIM 14: LİSTE, BAŞARI VE POPUP İYİLEŞTİRMELERİ
   ========================================================= */

/* Kişiler, başarılar, kulüpler ve markalarda başlık alanı tek sütundur. */
.people-directory-intro,
.achievement-ranking-intro {
  display: block;
}

.people-directory-intro > div,
.achievement-ranking-intro > div {
  width: 100%;
}

.people-directory-intro p,
.achievement-ranking-intro p {
  max-width: none;
}

.people-directory-intro > strong,
.achievement-ranking-intro > strong {
  display: none;
}

/* Kulüp ve marka kartlarını ana sayfadaki kutular gibi daha belirgin yap. */
.compact-directory-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.club-directory-grid .directory-list-card,
.brand-directory-grid .directory-list-card {
  min-height: 102px;
  grid-template-columns: 28px 66px minmax(0, 1fr);
  padding: 16px;
  border: 1px solid rgba(31, 74, 58, .18);
  border-radius: 17px;
  background: rgba(255, 253, 247, .98);
  box-shadow: 0 9px 26px rgba(34, 47, 40, .08);
}

.club-directory-grid .directory-list-card:hover,
.brand-directory-grid .directory-list-card:hover {
  border-color: rgba(31, 74, 58, .38);
  box-shadow: 0 13px 30px rgba(34, 47, 40, .12);
}

.club-directory-grid .person-card-avatar,
.brand-directory-grid .person-card-avatar {
  width: 66px;
  height: 66px;
  border: 1px solid rgba(31, 74, 58, .10);
  border-radius: 13px;
  background: transparent;
}

.club-directory-grid .person-list-copy strong,
.brand-directory-grid .person-list-copy strong {
  font-size: 16px;
}

.club-directory-grid .person-list-copy small,
.brand-directory-grid .person-list-copy small {
  margin-top: 6px;
}

/* Başarı kartlarında yalnızca sıra, kişi ve ödül adetleri bulunur. */
.achievement-leader-card {
  grid-template-columns: 62px minmax(230px, 1fr) minmax(330px, auto);
}

.achievement-awards {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.achievement-award {
  min-width: 48px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid currentColor;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
}

.achievement-award svg {
  width: 23px;
  height: 23px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.achievement-award.medal svg circle {
  fill: currentColor;
  fill-opacity: .16;
}

.achievement-award strong {
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 900;
}

.achievement-award.gold {
  color: #c29322;
}

.achievement-award.silver {
  color: #7e898e;
}

.achievement-award.bronze {
  color: #a7683e;
}

/* Eski puanlama ve aksiyon alanları bu sürümde kullanılmaz. */
.achievement-score-guide,
.achievement-total,
.achievement-profile-link,
.achievement-medal-summary {
  display: none !important;
}

/* Paylaşım detayında üst geri/profil bağlantı alanı kaldırıldı. */
.post-detail-topbar {
  display: none !important;
}

/* Moderasyon popup'ı simetrik, kompakt ve saat ikonlu. */
.moderation-popup {
  padding: 18px;
}

.moderation-popup-dialog {
  width: min(390px, 100%);
  padding: 30px 26px 24px;
  border-radius: 20px;
  text-align: center;
}

.moderation-popup-heading,
.moderation-popup-icon {
  display: none !important;
}

.moderation-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.moderation-popup-clock {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--brand), var(--brand-dark));
  box-shadow: 0 10px 24px rgba(31, 74, 58, .22);
}

.moderation-popup-clock svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.moderation-popup-dialog h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.25;
  text-align: center;
}

.moderation-popup-dialog p {
  max-width: 290px;
  margin: 9px auto 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.moderation-popup-actions {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.moderation-popup-primary,
.moderation-popup-secondary {
  min-height: 45px;
  border-radius: 11px;
}

@media (max-width: 980px) {
  .compact-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .achievement-leader-card {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .achievement-awards {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .compact-directory-grid {
    grid-template-columns: 1fr;
  }

  .club-directory-grid .directory-list-card,
  .brand-directory-grid .directory-list-card {
    min-height: 88px;
    grid-template-columns: 24px 56px minmax(0, 1fr);
    padding: 13px 12px;
  }

  .club-directory-grid .person-card-avatar,
  .brand-directory-grid .person-card-avatar {
    width: 56px;
    height: 56px;
  }

  .achievement-leader-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .achievement-awards {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .achievement-award {
    min-width: 44px;
    min-height: 39px;
    padding: 5px 7px;
  }

  .achievement-award svg {
    width: 21px;
    height: 21px;
  }

  .moderation-popup-dialog {
    padding: 27px 18px 20px;
  }

  .moderation-popup-actions {
    grid-template-columns: 1fr 1fr;
  }
}


/* =========================================================
   ADIM 15: FORM, ÜYELİK, BOŞ SONUÇ VE POPUP DÜZELTMELERİ
   ========================================================= */

/* Boş arama sonuçları sade ve dengeli görünür. */
.directory-empty-state {
  width: min(100%, 620px);
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 20px auto 0;
  padding: 36px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
}

.directory-empty-state .icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 24px;
}

.directory-empty-state h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 20px;
}

/* Başarı ikonlarında yalnızca ikon ve normal kalınlıkta adet bulunur. */
.achievement-awards {
  gap: 13px;
}

.achievement-award {
  min-width: 0;
  min-height: 0;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.achievement-award strong {
  font-size: 14px;
  font-weight: 600;
}

.achievement-award svg {
  width: 25px;
  height: 25px;
}

/* Moderasyon popup aksiyonları alt alta; Tamam merkezde. */
.moderation-popup-actions {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 8px;
}

.moderation-popup-primary {
  width: 100%;
}

.moderation-popup-secondary {
  width: auto;
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  color: var(--brand);
  background: transparent;
  justify-self: center;
}

.moderation-popup-secondary:hover {
  background: var(--brand-soft);
}

/* Seçiniz alanı ve manuel tercih girişleri aynı kartta dengeli kalsın. */
.brand-preference-card select:invalid {
  color: var(--muted);
}

.brand-preference-card select option {
  color: var(--ink);
}

@media (max-width: 640px) {
  .directory-empty-state {
    padding: 30px 18px;
  }

  .achievement-awards {
    gap: 11px;
  }
}

/* ADIM 16 */
.stored-achievement-delete{margin-left:auto;padding:6px 10px;border:1px solid rgba(160,49,49,.24);border-radius:8px;color:#963838;background:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.stored-achievement-delete:hover{background:#fbeaea}
@media(min-width:981px){body{font-family:"Avenir Next","Segoe UI","Trebuchet MS",Arial,sans-serif;letter-spacing:.005em}button,input,select,textarea{font-family:inherit}.achievement-award svg{width:33px;height:33px;stroke-width:1.3}}
@media(max-width:980px){.achievement-awards{justify-content:flex-end}.achievement-award svg{width:25px;height:25px;stroke-width:1.35}}
.moderation-popup-dialog p{margin-bottom:13px}.moderation-popup-secondary{min-width:104px;min-height:40px;padding:0 20px;border:1px solid rgba(31,74,58,.35);border-radius:10px;color:var(--brand);background:#fff}.moderation-popup-secondary:hover{color:#fff;background:var(--brand)}


/* =========================================================
   ADIM 18 - KISI PROFILI YENI TASARIM
========================================================= */
.profile-page .profile-card.profile-card-v2 {
  overflow: hidden;
}

.profile-page .profile-cover.has-cover-grid {
  background: linear-gradient(120deg, rgba(20, 49, 39, 0.88), rgba(43, 91, 69, 0.8));
}

.profile-page .profile-cover::before {
  opacity: 0.45;
}

.profile-page .profile-cover::after {
  opacity: 0.55;
}

.profile-page .profile-cover-grid {
  position: absolute;
  inset: 0;
  display: grid;
  z-index: -2;
}

.profile-page .profile-cover-grid.columns-1 { grid-template-columns: 1fr; }
.profile-page .profile-cover-grid.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-page .profile-cover-grid.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.profile-page .profile-cover-cell {
  background-size: cover;
  background-position: center;
  filter: saturate(0.95);
  transform: scale(1.02);
}

.profile-page .profile-summary-v2 {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
}

.profile-page .profile-avatar {
  position: relative;
}

.profile-page .profile-avatar-edit {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.72);
  background: rgba(15, 28, 22, 0.92);
  color: #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,0.16);
}

.profile-page .profile-avatar-edit-icon {
  width: 18px;
  height: 18px;
}

.profile-page .profile-subtitle-rich {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.profile-page .profile-subtitle-club {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
}

.profile-page .profile-subtitle-club-logo {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(30, 67, 53, 0.16);
  background: rgba(255,255,255,0.92);
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
}

.profile-page .profile-subtitle-club-logo.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-page .profile-subtitle-club.plain,
.profile-page .profile-subtitle-location,
.profile-page .profile-subtitle-separator {
  color: var(--muted);
  font-weight: 700;
}

.profile-page .profile-achievement-summary {
  align-self: center;
  padding-bottom: 4px;
}

.profile-page .profile-achievement-summary .achievement-awards {
  justify-content: flex-end;
  padding: 0;
}

.profile-page .profile-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}

.profile-page .profile-highlight-column {
  min-height: 116px;
  padding: 18px 22px;
}

.profile-page .profile-highlight-column + .profile-highlight-column {
  border-left: 1px solid var(--line);
}

.profile-page .profile-highlight-left,
.profile-page .profile-highlight-right {
  display: grid;
  align-content: center;
  gap: 12px;
}

.profile-page .profile-mini-info {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.profile-page .profile-mini-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--paper-2);
  font-size: 18px;
}

.profile-page .profile-mini-info strong,
.profile-page .profile-gear-line {
  color: var(--brand-dark);
  font-size: 16px;
}

.profile-page .profile-mini-empty {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.profile-page .profile-gear-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.profile-page .profile-gear-label {
  min-width: 40px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-page .profile-gear-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-dark);
  font-weight: 700;
}

.profile-page .profile-gear-logo {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(30, 67, 53, 0.16);
  background: rgba(255,255,255,0.95);
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
}

.profile-page .profile-gear-logo.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.profile-page .profile-gear-meta,
.profile-page .profile-gear-text {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.profile-page .profile-subsection-heading > div > p {
  display: none;
}

.profile-page .achievement-item-clean {
  grid-template-columns: 54px minmax(0, 1fr);
}

.profile-page .achievement-item-clean .achievement-copy span {
  margin-top: 4px;
}

.profile-page .profile-comment-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.profile-page .profile-comment-card-meta {
  min-width: 0;
}

.profile-page .profile-comment-card-meta strong,
.profile-page .profile-comment-post-link {
  display: block;
  color: var(--brand-dark);
}

.profile-page .profile-comment-card-meta span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.profile-page .profile-comment-card-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.profile-page .profile-comment-delete.icon-only {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  margin: 0;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
}

.profile-page .profile-comment-delete.icon-only span {
  display: none;
}

.profile-page .profile-comment-delete.icon-only .trash-line-icon {
  width: 18px;
  height: 18px;
}

.profile-page .profile-comment-reference {
  display: none;
}

.profile-page .profile-comment-card > p {
  margin-top: 12px;
}

@media (max-width: 920px) {
  .profile-page .profile-summary-v2 {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .profile-page .profile-achievement-summary {
    grid-column: 1 / -1;
    width: 100%;
    padding-top: 6px;
  }

  .profile-page .profile-achievement-summary .achievement-awards {
    justify-content: center;
  }

  .profile-page .profile-highlights {
    grid-template-columns: 1fr;
  }

  .profile-page .profile-highlight-column + .profile-highlight-column {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .profile-page .profile-cover {
    min-height: 178px;
  }

  .profile-page .profile-summary-v2 {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .profile-page .profile-avatar-edit {
    left: auto;
    right: 2px;
  }

  .profile-page .profile-subtitle-rich,
  .profile-page .role-tags,
  .profile-page .profile-achievement-summary .achievement-awards {
    justify-content: center;
  }

  .profile-page .profile-highlight-column {
    padding: 16px;
  }

  .profile-page .profile-gear-line {
    justify-content: center;
  }

  .profile-page .profile-comment-card-head {
    align-items: flex-start;
  }
}


/* =========================================================
   ADIM 19 - KİŞİ PROFİLİ İNCE AYARLAR
========================================================= */

/* Kapak fotoğraflarının önündeki koyu-şeffaf yeşil katman. */
.profile-page .profile-cover.has-cover-grid {
  background: #17372c;
}

.profile-page .profile-cover-grid {
  z-index: 0;
}

.profile-page .profile-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 1;
  border: 0;
  border-radius: 0;
  background: linear-gradient(
    to top,
    rgba(13, 35, 27, .88) 0%,
    rgba(22, 59, 44, .62) 42%,
    rgba(30, 76, 57, .26) 100%
  );
  pointer-events: none;
}

.profile-page .profile-cover::after {
  z-index: 2;
}

/* Profil fotoğrafı düzenleme ikonu dışarı taşsa da kesilmez. */
.profile-page .profile-avatar.has-image {
  overflow: visible;
}

.profile-page .profile-avatar.has-image img {
  border-radius: 50%;
}

.profile-page .profile-avatar-edit {
  left: auto;
  right: -5px;
  bottom: -5px;
  z-index: 8;
}

/* Başarı özeti Başarılar sayfasındaki düz madalya/kupa görünümünü kullanır. */
.profile-page .profile-achievement-summary .achievement-award.medal,
.profile-page .profile-achievement-summary .achievement-award.trophy {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-page .profile-achievement-summary .achievement-award.medal.gold,
.profile-page .profile-achievement-summary .achievement-award.medal.silver,
.profile-page .profile-achievement-summary .achievement-award.medal.bronze {
  background: transparent;
}

/* Yaş, kemankeşlik süresi, yay ve ok masaüstünde tek satırda. */
.profile-page .profile-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  border-top: 1px solid var(--line);
}

.profile-page .profile-highlight-item {
  min-width: 0;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 15px 16px;
  color: var(--brand-dark);
  text-align: center;
}

.profile-page .profile-highlight-item + .profile-highlight-item {
  border-left: 1px solid var(--line);
}

.profile-page .profile-highlight-text,
.profile-page .profile-gear-item,
.profile-page .profile-gear-text,
.profile-page .profile-gear-meta {
  font-weight: 500;
}

.profile-page .profile-highlight-text {
  font-size: 14px;
}

.profile-page .profile-highlight-equipment {
  align-content: center;
}

.profile-page .profile-gear-label {
  min-width: auto;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

.profile-page .profile-gear-item {
  font-size: 13px;
}

.profile-page .profile-gear-meta,
.profile-page .profile-gear-text {
  font-size: 11px;
}

.profile-page .profile-comment-status-only {
  margin: 0 0 12px;
  justify-content: flex-end;
}

/* Masaüstünde profil sayfası da ana sayfadaki modern sistem fontunu kullanır. */
@media (min-width: 981px) {
  .profile-page .profile-card,
  .profile-page .profile-card *,
  .profile-page .profile-tabs,
  .profile-page .profile-tabs *,
  .profile-page .tab-panel,
  .profile-page .tab-panel * {
    font-family: inherit;
  }
}

@media (max-width: 920px) {
  .profile-page .profile-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-page .profile-highlight-item:nth-child(odd) {
    border-left: 0;
  }

  .profile-page .profile-highlight-item:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  .profile-page .profile-cover-grid.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .profile-page .profile-cover-grid.columns-3 .profile-cover-cell:nth-child(3) {
    grid-column: 1 / -1;
  }

  .profile-page .profile-avatar-edit {
    right: -9px;
    bottom: -9px;
  }

  .profile-page .profile-highlight-item {
    min-height: 84px;
    padding: 13px 10px;
  }

  .profile-page .profile-highlight-text {
    font-size: 13px;
  }
}


/* =========================================================
   ADIM 20 - TUM SAYFALARDA ORTAK MASAUSTU FONTU
========================================================= */
@media (min-width: 981px) {
  body,
  body *:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon):not(ellipse):not(rect) {
    font-family: "Avenir Next", "Segoe UI", "Trebuchet MS", Arial, sans-serif !important;
  }

  button,
  input,
  select,
  textarea,
  option {
    font-family: "Avenir Next", "Segoe UI", "Trebuchet MS", Arial, sans-serif !important;
  }
}


/* =========================================================
   ADIM 21 - KİŞİ PROFİLİ YORUM, KAPAK VE BİLGİ DÜZENİ
========================================================= */

/* Kapakta masaüstünde ilk 3, mobilde mümkünse 4 görsel gösterilir. */
.profile-page .profile-cover-grid.columns-4 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-page .profile-cover-grid.columns-4 .profile-cover-cell:nth-child(4) {
  display: none;
}

/* Kulüp, konum, yaş ve deneyim masaüstünde aynı satırdadır. */
.profile-page .profile-subtitle-rich,
.profile-page .profile-subtitle-primary,
.profile-page .profile-subtitle-secondary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-page .profile-subtitle-secondary {
  color: var(--muted);
  font-weight: 600;
}

/* Yay ve ok tercihleri alt alta gösterilir. */
.profile-page .profile-highlights.profile-preference-list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

.profile-page .profile-preference-list .profile-highlight-item {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 22px;
  text-align: left;
}

.profile-page .profile-preference-list .profile-highlight-item + .profile-highlight-item {
  border-top: 1px solid var(--line);
  border-left: 0;
}

.profile-page .profile-preference-list .profile-gear-label {
  min-width: 92px;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 600;
}

.profile-page .profile-preference-list .profile-gear-item,
.profile-page .profile-preference-list .profile-gear-text,
.profile-page .profile-preference-list .profile-gear-meta {
  font-weight: 500;
}

/* Profil üstündeki başarı adetleri ikonların sağında kalır. */
.profile-page .profile-achievement-summary .achievement-award,
.profile-page .profile-achievement-summary .achievement-award.medal,
.profile-page .profile-achievement-summary .achievement-award.trophy {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

.profile-page .profile-achievement-summary .achievement-award svg {
  flex: 0 0 auto;
}

.profile-page .profile-achievement-summary .achievement-award strong {
  display: inline-block;
  line-height: 1;
}

/* Yorum kartları paylaşım kartlarıyla aynı kâğıt tonunu kullanır. */
.profile-page .profile-comment-card {
  position: relative;
  padding: 17px 58px 17px 17px;
  background: rgba(255, 253, 247, 0.96);
  box-shadow: var(--shadow);
}

.profile-page .profile-comment-card-tools {
  position: static;
}

.profile-page .profile-comment-delete.icon-only {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 10px;
}

.profile-page .profile-comment-delete.icon-only .trash-line-icon {
  width: 16px;
  height: 16px;
}

.profile-page .profile-comment-post-link strong {
  font-weight: 800;
}

/* Eski yorum sayısı/durum özeti görünmez. */
.profile-page .profile-comment-status-only {
  display: none !important;
}

@media (max-width: 560px) {
  .profile-page .profile-cover-grid.columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .profile-page .profile-cover-grid.columns-4 .profile-cover-cell:nth-child(4) {
    display: block;
  }

  .profile-page .profile-subtitle-rich {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .profile-page .profile-subtitle-primary,
  .profile-page .profile-subtitle-secondary {
    justify-content: center;
  }

  .profile-page .profile-subtitle-group-separator {
    display: none;
  }

  .profile-page .profile-preference-list .profile-highlight-item {
    min-height: 66px;
    padding: 12px 14px;
  }

  .profile-page .profile-preference-list .profile-gear-label {
    min-width: 84px;
    font-size: 12px;
  }

  .profile-page .profile-comment-card {
    padding: 15px 52px 15px 15px;
  }

  .profile-page .profile-comment-card-head {
    display: block;
  }

  .profile-page .profile-comment-delete.icon-only {
    top: 10px;
    right: 10px;
    width: 31px;
    height: 31px;
    min-height: 31px;
  }
}


/* =========================================================
   ADIM 22 - MASAUSTUNDE ROZET YANINDA TERCIHLER
========================================================= */
.profile-page .profile-role-preferences-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 14px;
}

.profile-page .profile-role-preferences-row .role-tags {
  margin-top: 0;
  flex: 0 1 auto;
}

.profile-page .profile-desktop-preferences {
  display: none;
}

@media (min-width: 981px) {
  .profile-page .profile-desktop-preferences {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 9px;
    /* ADIM 148: Rozetler ile tercihler arasindaki masaustu ayiraci kaldirildi.
       Tercih icerigi, eski separator cizgisinin basladigi noktadan devam eder. */
    padding-left: 0;
    border-left: 0;
  }


  /* ADIM 151: Yay ve Ok Tercihi arasinda, konum/yas satirindakiyle ayni nokta ayiraci. */
  .profile-page .profile-desktop-preference-separator {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
  }
  .profile-page .profile-desktop-preference-item {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
  }

  .profile-page .profile-desktop-preference-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
  }

  .profile-page .profile-desktop-preference-value {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 500;
  }

  .profile-page .profile-desktop-preference-logo {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    overflow: hidden;
    border: 1px solid rgba(31, 74, 58, .15);
    border-radius: 9px;
    background: rgba(255,255,255,.94);
    color: var(--brand-dark);
    font-size: 9px;
    font-weight: 700;
  }

  .profile-page .profile-desktop-preference-logo.has-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  .profile-page .profile-desktop-preference-text {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
  }

  /* Masaüstünde alt tercih bloğu tekrarlanmaz. */
  .profile-page .profile-highlights.profile-preference-list {
    display: none;
  }
}

@media (max-width: 980px) {
  .profile-page .profile-role-preferences-row {
    display: block;
    margin-top: 14px;
  }

  .profile-page .profile-desktop-preferences {
    display: none;
  }
}


/* =========================================================
   ADIM 23 - MASAÜSTÜ GALERİ VE PROFİL BİLGİ DÜZENİ
========================================================= */

/* Paylaşımlar sekmesi: masaüstünde solda sabit galeri, sağda akış. */
.profile-page .profile-posts-layout {
  width: 100%;
}

.profile-page .profile-posts-layout.has-gallery {
  display: grid;
  grid-template-columns: minmax(255px, 320px) minmax(0, 760px);
  align-items: start;
  justify-content: center;
  gap: 20px;
}

.profile-page .profile-posts-layout .profile-post-list {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.profile-page .profile-post-gallery {
  min-width: 0;
}

.profile-page .profile-post-gallery-sticky {
  position: sticky;
  top: calc(var(--header-height) + 16px);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 253, 247, .96);
  box-shadow: var(--shadow);
}

.profile-page .profile-post-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.profile-page .profile-post-gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--paper-2);
}

.profile-page .profile-post-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 55, 44, 0);
  transition: background .18s ease;
}

.profile-page .profile-post-gallery-item:hover::after {
  background: rgba(23, 55, 44, .15);
}

.profile-page .profile-post-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .2s ease;
}

.profile-page .profile-post-gallery-item:hover img {
  transform: scale(1.035);
}

/* Masaüstünde kulüp, konum, yaş ve deneyim aynı sade metin yapısındadır. */
@media (min-width: 981px) {
  .profile-page .profile-subtitle-primary,
  .profile-page .profile-subtitle-secondary,
  .profile-page .profile-subtitle-club,
  .profile-page .profile-subtitle-club.plain,
  .profile-page .profile-subtitle-location,
  .profile-page .profile-subtitle-separator {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
  }

  .profile-page .profile-subtitle-club-logo {
    display: none;
  }
}

/* Tablet ve mobilde masaüstü galerisi kullanılmaz. */
@media (max-width: 980px) {
  .profile-page .profile-posts-layout.has-gallery {
    display: block;
  }

  .profile-page .profile-post-gallery {
    display: none;
  }

  .profile-page .profile-posts-layout .profile-post-list {
    width: min(100%, 760px);
    margin: 0 auto;
  }
}

/* Mobil tercih satırlarında ayraç yoktur ve içerik biraz içeri alınır. */
@media (max-width: 560px) {
  .profile-page .profile-preference-list .profile-highlight-item {
    gap: 5px;
    padding-left: 30px;
    padding-right: 14px;
  }

  .profile-page .profile-preference-list .profile-highlight-item + .profile-highlight-item {
    border-top: 0;
  }

  .profile-page .profile-preference-list .profile-gear-label {
    min-width: 72px;
    margin-right: 0;
  }

  .profile-page .profile-preference-list .profile-gear-item {
    gap: 5px;
  }
}


/* =========================================================
   ADIM 24 - STICKY SEKMELER, GENİŞ GALERİ VE MOBİL TERCİHLER
========================================================= */

@media (min-width: 981px) {
  /* Sekmeler sayfa yukarı kaydırıldığında header altında görünür kalır. */
  .profile-page .profile-tabs {
    position: sticky;
    top: calc(var(--header-height) + 12px);
    z-index: 90;
    width: 100%;
    margin: 18px 0;
    border: 1px solid var(--line);
    background: rgba(255, 253, 247, .96);
    box-shadow: 0 10px 28px rgba(29, 44, 36, .12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* Galeri ve paylaşım akışı sekme kutusunun tam genişliğini kullanır. */
  .profile-page .profile-posts-layout.has-gallery {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(350px, 38%) minmax(0, 1fr);
    justify-content: stretch;
    gap: 22px;
  }

  .profile-page .profile-post-gallery {
    min-width: 0;
    align-self: start;
  }

  /* Galeri, sticky sekmelerin altında sabit görünür. */
  .profile-page .profile-post-gallery-sticky {
    position: sticky;
    top: calc(var(--header-height) + 86px);
    z-index: 25;
    max-height: calc(100vh - var(--header-height) - 102px);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .profile-page .profile-post-gallery-grid {
    gap: 8px;
  }

  .profile-page .profile-post-gallery-item {
    border-radius: 9px;
  }

  .profile-page .profile-desktop-preference-meta {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  /* Mobilde yay ve ok tercihleri iki sıkı ve ortalanmış satırdır. */
  .profile-page .profile-highlights.profile-preference-list {
    justify-items: stretch;
  }

  .profile-page .profile-preference-list .profile-highlight-item {
    min-height: 50px;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    text-align: center;
  }

  .profile-page .profile-preference-list .profile-highlight-item + .profile-highlight-item {
    margin-top: 0;
    border-top: 0;
  }

  .profile-page .profile-preference-list .profile-gear-label {
    min-width: auto;
    margin: 0;
    text-align: right;
  }

  .profile-page .profile-preference-list .profile-gear-item {
    gap: 4px;
  }

  .profile-page .profile-preference-list .profile-gear-logo {
    margin: 0;
  }
}


/* =========================================================
   ADIM 25 - NORMAL SEKMELER VE GERÇEK FIXED GALERİ
========================================================= */

@media (min-width: 981px) {
  /* Sekmeler tekrar normal sayfa akışındadır. */
  .profile-page .profile-tabs {
    position: static;
    top: auto;
    z-index: auto;
    margin: 18px 0;
    background: rgba(255, 253, 247, .97);
    box-shadow: var(--shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Sabit galeri için sol sütun bütün paylaşım alanı boyunca uzanır. */
  .profile-page .profile-posts-layout.has-gallery {
    align-items: stretch;
  }

  .profile-page .profile-post-gallery {
    position: relative;
    align-self: stretch;
    min-height: 100%;
  }

  .profile-page .profile-post-gallery-sticky {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    max-height: calc(100vh - var(--header-height) - 32px);
    overflow-y: auto;
    z-index: 25;
  }

  /* Paylaşım bölümü içerisinde ekran üzerinde sabit kalan durum. */
  .profile-page .profile-post-gallery-sticky.is-fixed {
    position: fixed;
    top: calc(var(--header-height) + 16px);
    bottom: auto;
  }

  /* Paylaşım bölümü bittiğinde galeri kendi sütununun altında kalır. */
  .profile-page .profile-post-gallery-sticky.is-bottom {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100% !important;
  }
}


/* =========================================================
   ADIM 26 - MASAÜSTÜ KULÜP LOGOSU
========================================================= */

@media (min-width: 981px) {
  .profile-page .profile-subtitle-club {
    gap: 7px;
  }

  .profile-page .profile-subtitle-club-logo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(30, 67, 53, .18);
    border-radius: 8px;
    background: rgba(255, 253, 247, .96);
    color: var(--brand-dark);
    box-shadow: 0 2px 7px rgba(29, 44, 36, .08);
  }

  .profile-page .profile-subtitle-club-logo.has-image img {
    width: 100%;
    height: 100%;
    padding: 2px;
    object-fit: contain;
    border-radius: 7px;
  }
}


/* =========================================================
   ADIM 27 - MODERASYON POPUP BOŞLUK DÜZELTMESİ
========================================================= */

/*
 * Profilde Gör butonu daha önce tanımlı olmayan --green değişkenini
 * kullandığı için görünmüyor fakat yer kaplıyordu. Butonun rengi
 * doğrudan mevcut --brand değişkenine bağlandı.
 */
.moderation-popup-dialog h2 {
  color: var(--brand);
}

.moderation-popup-primary {
  border: 1px solid var(--brand);
  color: #fff;
  background: var(--brand);
}

.moderation-popup-primary:hover {
  color: #fff;
  background: var(--brand-dark);
}

.moderation-popup-dialog p {
  margin-bottom: 8px !important;
}

.moderation-popup-actions {
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-height: 0 !important;
  align-content: start;
}

.moderation-popup-secondary {
  margin-top: 0;
}


/* =========================================================
   ADIM 28 - POPUP BUTONLARI YAN YANA
========================================================= */

.moderation-popup-actions {
  width: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(104px, auto) !important;
  align-items: center;
  justify-items: stretch !important;
  gap: 10px !important;
}

.moderation-popup-primary {
  width: 100% !important;
  min-width: 0;
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--brand) !important;
  border-radius: 10px;
  color: #fff !important;
  background: var(--brand) !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none;
}

.moderation-popup-primary:visited {
  color: #fff !important;
}

.moderation-popup-primary:hover {
  color: #fff !important;
  background: var(--brand-dark) !important;
}

.moderation-popup-secondary {
  width: auto !important;
  min-width: 104px;
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  justify-self: end !important;
  padding: 0 20px;
  border: 1px solid rgba(31, 74, 58, .35) !important;
  border-radius: 10px;
  color: var(--brand) !important;
  background: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.moderation-popup-secondary:hover {
  color: #fff !important;
  background: var(--brand) !important;
}

@media (max-width: 480px) {
  .moderation-popup-actions {
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto) !important;
    gap: 8px !important;
  }

  .moderation-popup-primary,
  .moderation-popup-secondary {
    min-height: 40px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .moderation-popup-secondary {
    min-width: 92px;
  }
}


/* =========================================================
   ADIM 29 - POPUP BUTON ÜST BOŞLUĞU
========================================================= */

.moderation-popup-actions {
  margin-top: 14px !important;
}


/* =========================================================
   ADIM 30 - DOĞRULANMIŞ KULLANICI ROZETİ
========================================================= */

.verified-name-line,
.verified-name-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.verified-user-badge {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  vertical-align: -3px;
  color: #fff;
}

.verified-user-badge.large {
  width: 21px;
  height: 21px;
  flex-basis: 21px;
  margin-left: 7px;
  vertical-align: -2px;
}

.verified-user-badge svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.moderation-popup.is-verified-result .moderation-popup-clock {
  color: #218653;
  background: rgba(33, 134, 83, .12);
}

.moderation-popup.is-verified-result .moderation-popup-clock svg circle {
  fill: rgba(33, 134, 83, .06);
}

.moderation-popup.is-verified-result .moderation-popup-dialog h2 {
  color: #17683f;
}

@media (max-width: 560px) {
  .verified-user-badge {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .verified-user-badge.large {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }
}


/* =========================================================
   ADIM 31 - DOĞRULANMIŞ ROZET GÖRSEL GÜNCELLEME
========================================================= */

.verified-user-badge {
  filter: drop-shadow(0 2px 4px rgba(39, 118, 70, .14));
}

.verified-user-badge svg {
  overflow: visible;
}

.verified-user-badge .badge-scallop {
  fill: rgba(88, 211, 131, .82);
  stroke: rgba(31, 122, 69, .52);
  stroke-width: .85;
}

.verified-user-badge .badge-core {
  fill: rgba(255, 255, 255, .12);
  stroke: rgba(255, 255, 255, .32);
  stroke-width: .4;
}

.verified-user-badge .badge-check {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.verified-user-badge.large {
  filter: drop-shadow(0 3px 6px rgba(39, 118, 70, .16));
}

.moderation-popup.is-verified-result .moderation-popup-clock {
  color: #52c97d;
  background: rgba(82, 201, 125, .12);
}

.moderation-popup.is-verified-result .moderation-popup-clock svg circle {
  fill: rgba(82, 201, 125, .08);
}

.moderation-popup.is-verified-result .moderation-popup-dialog h2 {
  color: #238b52;
}


/* =========================================================
   ADIM 32 - REFERANS GİBİ DOĞRULANMIŞ ROZET
========================================================= */

.verified-user-badge {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  vertical-align: -3px;
  color: inherit;
  filter: none;
  opacity: .92;
}

.verified-user-badge.large {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  margin-left: 7px;
  vertical-align: -2px;
}

.verified-user-badge svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.verified-user-badge .badge-shape {
  fill: currentColor;
  fill-opacity: .20;
  stroke: currentColor;
  stroke-opacity: .44;
  stroke-width: .55;
  stroke-linejoin: round;
}

.verified-user-badge .badge-check {
  fill: none;
  stroke: currentColor;
  stroke-opacity: .46;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.moderation-popup.is-verified-result .moderation-popup-clock {
  color: #69b67f;
  background: rgba(105, 182, 127, .12);
}

.moderation-popup.is-verified-result .moderation-popup-clock svg circle {
  fill: rgba(105, 182, 127, .08);
}

.moderation-popup.is-verified-result .moderation-popup-dialog h2 {
  color: #3d8c53;
}

@media (max-width: 560px) {
  .verified-user-badge {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .verified-user-badge.large {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }
}


/* =========================================================
   ADIM 35 - YENİ KULÜP PROFİLİ
========================================================= */

.public-club-page .club-profile-card-v2 {
  overflow: hidden;
}

.public-club-page .club-profile-cover {
  position: relative;
  min-height: 245px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(120deg, rgba(20, 49, 39, .96), rgba(43, 91, 69, .88));
}

.public-club-page .club-profile-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(
      to top,
      rgba(13, 38, 29, .86) 0%,
      rgba(20, 55, 42, .62) 42%,
      rgba(31, 76, 58, .28) 100%
    );
  pointer-events: none;
}

.public-club-page .club-profile-cover::after {
  display: none;
}

.public-club-page .club-cover-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.public-club-page .club-cover-cell {
  min-width: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
  background: rgba(20, 49, 39, .75);
}

.public-club-page .club-cover-cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: .72;
  transform: scale(1.015);
  transition: opacity .18s ease, transform .18s ease;
}

.public-club-page .club-cover-cell:hover img {
  opacity: .88;
  transform: scale(1.045);
}

.public-club-page .club-profile-summary-v2 {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
}

.public-club-page .club-profile-logo {
  border-radius: 22px;
}

.public-club-page .club-profile-logo.has-image img {
  object-fit: contain;
  padding: 7px;
}

.public-club-page .club-profile-main-v2 {
  padding-top: 18px;
}

.public-club-page .club-profile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.public-club-page .club-profile-meta-primary,
.public-club-page .club-profile-meta-secondary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.public-club-page .club-president-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-weight: 600;
}

.public-club-page .club-president-avatar {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(30, 67, 53, .18);
  border-radius: 8px;
  background: rgba(255, 253, 247, .96);
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 800;
}

.public-club-page .club-president-avatar.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.public-club-page .club-profile-dot {
  color: rgba(83, 99, 90, .62);
}

.public-club-page .club-profile-meta a {
  color: var(--muted);
  text-decoration: none;
}

.public-club-page .club-profile-meta a:hover {
  color: var(--brand);
}

.public-club-page .club-achievement-summary {
  align-self: center;
  max-width: 330px;
  padding-bottom: 4px;
}

.public-club-page .club-achievement-summary .achievement-awards {
  justify-content: flex-end;
}

.public-club-page .club-profile-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-club-page .club-people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.public-club-page .club-person-list-card {
  margin: 0;
}

.public-club-page .club-achievement-list {
  padding: 18px;
}

.public-club-page .club-achievement-item {
  align-items: start;
}

.public-club-page .club-achievement-person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
}

.public-club-page .club-achievement-person-avatar {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 9px;
  font-weight: 800;
}

.public-club-page .club-achievement-person-avatar.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 980px) {
  .public-club-page .club-profile-cover {
    min-height: 210px;
  }

  .public-club-page .club-profile-summary-v2 {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .public-club-page .club-achievement-summary {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    padding-top: 6px;
  }

  .public-club-page .club-achievement-summary .achievement-awards {
    justify-content: center;
  }

  .public-club-page .club-people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .public-club-page .club-profile-cover {
    min-height: 178px;
  }

  .public-club-page .club-cover-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .public-club-page .club-profile-summary-v2 {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .public-club-page .club-profile-main-v2 {
    padding-top: 0;
  }

  .public-club-page .club-profile-meta,
  .public-club-page .club-profile-meta-primary,
  .public-club-page .club-profile-meta-secondary {
    justify-content: center;
  }

  .public-club-page .club-profile-meta-primary,
  .public-club-page .club-profile-meta-secondary {
    width: 100%;
  }

  .public-club-page .club-profile-meta-secondary {
    gap: 5px;
  }

  .public-club-page .club-profile-tabs {
    overflow: visible;
  }

  .public-club-page .club-profile-tabs .profile-tab {
    min-width: 0;
    padding: 0 7px;
    font-size: 12px;
  }

  .public-club-page .club-people-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .public-club-page .club-achievement-list {
    padding: 12px;
  }
}


/* =========================================================
   ADIM 36 - KULÜP İLETİŞİM BİLGİLERİ VE NUMARASIZ KİŞİLER
========================================================= */

.public-club-page .club-profile-contact-lines {
  display: grid;
  align-items: start;
  gap: 5px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}

.public-club-page .club-profile-contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.public-club-page .club-profile-contact-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
}

.public-club-page .club-profile-contact-item strong {
  flex: 0 0 auto;
  color: var(--brand-dark);
  font-weight: 700;
}

.public-club-page .club-profile-contact-item span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-weight: 400;
}

.public-club-page a.club-profile-contact-item:hover span {
  color: var(--brand);
}

.public-club-page .club-person-list-card {
  grid-template-columns: 58px minmax(0, 1fr);
}

@media (max-width: 560px) {
  .public-club-page .club-profile-contact-lines {
    justify-items: center;
    gap: 4px;
  }

  .public-club-page .club-profile-contact-line {
    justify-content: center;
    gap: 5px 12px;
  }

  .public-club-page .club-profile-contact-item {
    justify-content: center;
  }
}


/* =========================================================
   ADIM 37 - KİŞİ PROFİLİ KAYIT TÜRÜ ROZETLERİ
========================================================= */

/* Tüm kayıt türleri Sporcu rozetiyle aynı görünür. */
.public-profile-page .role-tag,
.public-profile-page .role-tag.secondary {
  background: var(--brand-soft);
  color: var(--brand-dark);
}


/* =========================================================
   ADIM 38 - BEKLEYEN GÖRSEL İLE MODERASYON UYARISI ARALIĞI
========================================================= */

/* Yalnızca görselin hemen ardından gelen moderasyon kutusuna boşluk ekler. */
.post-media + .content-moderation-message {
  margin-top: 12px;
}


/* =========================================================
   ADIM 39 - PROFİL KAPAK DEKORLARINI KALDIRMA
========================================================= */

/* Kişi, kulüp ve marka kapaklarındaki dekoratif ok kaldırıldı. */
.profile-page .profile-cover::after,
.public-club-page .club-profile-cover::after,
.brand-profile-cover::after {
  content: none !important;
  display: none !important;
}

/*
 * Yuvarlak çizgi kaldırılır; fotoğrafların üzerindeki okunabilirlik
 * gradienti korunur.
 */
.profile-page .profile-cover::before,
.public-club-page .club-profile-cover::before,
.brand-profile-cover::before {
  border: 0 !important;
  border-radius: 0 !important;
}

/* Marka kapağındaki sağ üst yuvarlak ışık/dekor kaldırıldı. */
.brand-profile-cover {
  background:
    linear-gradient(
      110deg,
      rgba(83, 55, 28, .96),
      rgba(139, 92, 41, .82)
    ) !important;
}


/* =========================================================
   ADIM 40 - YENİ MARKA PROFİLİ VE ÜRÜN YÖNETİMİ
========================================================= */

.public-brand-page .brand-profile-card-v2 {
  overflow: hidden;
}

.public-brand-page .brand-profile-cover-v2 {
  min-height: 245px;
  overflow: hidden;
  background: linear-gradient(120deg, #6d4a2c, #a77b4d) !important;
}

.public-brand-page .brand-profile-cover-v2::before,
.public-brand-page .brand-profile-cover-v2::after {
  content: none !important;
  display: none !important;
}

.public-brand-page .brand-cover-picture {
  position: absolute;
  inset: 0;
  display: block;
}

.public-brand-page .brand-cover-picture img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.public-brand-page .brand-profile-summary-v2 {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
}

.public-brand-page .brand-profile-logo {
  border-radius: 22px;
}

.public-brand-page .brand-profile-logo.has-image img {
  object-fit: contain;
  padding: 7px;
}

.public-brand-page .brand-profile-main-v2 {
  padding-top: 18px;
}

.public-brand-page .brand-authority-row {
  margin-top: 9px;
}

.public-brand-page .brand-authority-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}

.public-brand-page .brand-authority-inline strong {
  color: var(--brand-dark);
  font-weight: 700;
}

.public-brand-page a.brand-authority-inline:hover {
  color: var(--brand);
}

.public-brand-page .brand-authority-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(31, 74, 58, .18);
  border-radius: 8px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-size: 10px;
  font-weight: 800;
}

.public-brand-page .brand-authority-avatar.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.public-brand-page .brand-sale-tags {
  margin-top: 11px;
}

.public-brand-page .brand-profile-contact-lines {
  margin-top: 11px;
}

.public-brand-page .brand-profile-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-brand-page .brand-profile-tabs.has-edit-tab {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-brand-page .brand-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.public-brand-page .brand-product-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.public-brand-page .brand-product-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.public-brand-page .brand-product-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 12px;
}

.public-brand-page .brand-product-copy {
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 17px;
}

.public-brand-page .brand-product-copy h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 19px;
  line-height: 1.25;
}

.public-brand-page .brand-product-copy p {
  display: -webkit-box;
  min-height: 68px;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.public-brand-page .brand-product-buy {
  width: fit-content;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.public-brand-page .brand-product-buy:hover {
  background: var(--brand-dark);
}

.public-brand-page .brand-people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.public-brand-page .brand-person-list-card {
  grid-template-columns: 58px minmax(0, 1fr);
}

.public-brand-page .brand-edit-section + .brand-edit-section {
  margin-top: 18px;
}

.public-brand-page .brand-edit-header {
  align-items: start;
}

.public-brand-page .brand-edit-header h2 {
  margin: 3px 0 5px;
}

.public-brand-page .brand-edit-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.public-brand-page .brand-edit-kicker {
  display: block;
  color: var(--brand);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.public-brand-page .brand-management-form {
  padding: 20px;
  border-top: 1px solid var(--line);
}

.public-brand-page .brand-cover-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.public-brand-page .brand-edit-upload-card {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.public-brand-page .brand-edit-field-title,
.public-brand-page .brand-product-editor-form label > span {
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 800;
}

.public-brand-page .brand-edit-field-help,
.public-brand-page .brand-product-editor-form label > small,
.public-brand-page .brand-product-order-field small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.public-brand-page .brand-cover-preview {
  min-height: 185px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(31, 74, 58, .28);
  border-radius: 12px;
  color: var(--muted);
  background: #f6f2e9;
  font-size: 12px;
  text-align: center;
}

.public-brand-page .brand-cover-preview.mobile-preview {
  min-height: 225px;
}

.public-brand-page .brand-cover-preview img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
}

.public-brand-page .brand-edit-upload-card input[type="file"],
.public-brand-page .brand-product-image-field input[type="file"] {
  width: 100%;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.public-brand-page .brand-management-submit,
.public-brand-page .brand-management-cancel,
.public-brand-page .brand-product-edit-button,
.public-brand-page .brand-product-delete-button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.public-brand-page .brand-management-submit {
  margin-top: 16px;
  border: 1px solid var(--brand);
  color: #fff;
  background: var(--brand);
}

.public-brand-page .brand-management-submit:hover {
  background: var(--brand-dark);
}

.public-brand-page .brand-management-submit:disabled,
.public-brand-page .brand-product-edit-button:disabled,
.public-brand-page .brand-product-delete-button:disabled {
  cursor: wait;
  opacity: .62;
}

.public-brand-page .brand-management-message {
  min-height: 22px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.public-brand-page .brand-management-message.success {
  color: var(--ok);
}

.public-brand-page .brand-management-message.error {
  color: var(--red);
}

.public-brand-page .brand-management-message.info {
  color: var(--brand);
}

.public-brand-page .brand-product-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.public-brand-page .brand-product-editor-form label {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.public-brand-page .brand-product-editor-form input,
.public-brand-page .brand-product-editor-form textarea {
  width: 100%;
  min-height: 45px;
  padding: 10px 12px;
  border: 1px solid #cfc6b8;
  border-radius: 9px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.public-brand-page .brand-product-editor-form textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.55;
}

.public-brand-page .brand-product-editor-wide {
  grid-column: 1 / -1;
}

.public-brand-page .brand-product-form-preview {
  min-height: 205px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(31, 74, 58, .28);
  border-radius: 12px;
  color: var(--muted);
  background: #f6f2e9;
  font-size: 12px;
}

.public-brand-page .brand-product-form-preview img {
  width: 100%;
  height: 205px;
  display: block;
  object-fit: contain;
  padding: 10px;
  background: #fff;
}

.public-brand-page .brand-product-order-field {
  max-width: 190px;
}

.public-brand-page .brand-product-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.public-brand-page .brand-management-cancel {
  margin-top: 16px;
  border: 1px solid var(--line);
  color: var(--brand-dark);
  background: #fff;
}

.public-brand-page .brand-management-cancel[hidden] {
  display: none;
}

.public-brand-page .brand-manage-product-list {
  display: grid;
  gap: 10px;
  padding: 0 20px 20px;
}

.public-brand-page .brand-manage-product-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.public-brand-page .brand-manage-product-thumb {
  width: 64px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: #f6f2e9;
}

.public-brand-page .brand-manage-product-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.public-brand-page .brand-manage-product-copy {
  min-width: 0;
}

.public-brand-page .brand-manage-product-copy strong,
.public-brand-page .brand-manage-product-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-brand-page .brand-manage-product-copy strong {
  color: var(--brand-dark);
  font-size: 13px;
}

.public-brand-page .brand-manage-product-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.public-brand-page .brand-manage-product-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.public-brand-page .brand-product-edit-button {
  border: 1px solid var(--line);
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.public-brand-page .brand-product-delete-button {
  border: 1px solid #ead2d2;
  color: #9b3838;
  background: #fff4f4;
}

@media (max-width: 980px) {
  .public-brand-page .brand-product-grid,
  .public-brand-page .brand-people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-brand-page .brand-profile-cover-v2 {
    min-height: 210px;
  }
}

@media (max-width: 560px) {
  .public-brand-page .brand-profile-cover-v2 {
    min-height: 188px;
  }

  .public-brand-page .brand-profile-summary-v2 {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .public-brand-page .brand-profile-main-v2 {
    padding-top: 0;
  }

  .public-brand-page .brand-authority-row,
  .public-brand-page .brand-sale-tags,
  .public-brand-page .brand-profile-contact-lines {
    display: flex;
    justify-content: center;
  }

  .public-brand-page .brand-profile-contact-lines {
    display: grid;
  }

  .public-brand-page .brand-profile-tabs .profile-tab {
    min-width: 0;
    padding: 0 6px;
    font-size: 12px;
  }

  .public-brand-page .brand-product-grid,
  .public-brand-page .brand-people-grid,
  .public-brand-page .brand-cover-upload-grid,
  .public-brand-page .brand-product-editor-grid {
    grid-template-columns: 1fr;
  }

  .public-brand-page .brand-product-editor-wide {
    grid-column: auto;
  }

  .public-brand-page .brand-person-list-card {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .public-brand-page .brand-management-form {
    padding: 14px;
  }

  .public-brand-page .brand-manage-product-list {
    padding: 0 14px 14px;
  }

  .public-brand-page .brand-manage-product-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .public-brand-page .brand-manage-product-thumb {
    width: 52px;
    height: 46px;
  }

  .public-brand-page .brand-manage-product-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}


/* =========================================================
   ADIM 41 - MARKA ROZETLERİ, İLETİŞİM VE ÇOKLU YETKİLİ MARKALARI
========================================================= */

/* Masaüstünde satış rozetleri marka adının hemen sağındadır. */
.public-brand-page .brand-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 13px;
}

.public-brand-page .brand-title-row h1 {
  margin: 0;
}

.public-brand-page .brand-title-row .brand-sale-tags {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}

/* Marka iletişim alanı kulüp profilindeki sade bilgi yapısını kullanır. */
.public-brand-page .brand-profile-contact-lines {
  display: grid;
  align-items: start;
  gap: 5px;
  margin-top: 11px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}

.public-brand-page .brand-profile-contact-lines .club-profile-contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.public-brand-page .brand-profile-contact-lines .club-profile-contact-item {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
}

.public-brand-page .brand-profile-contact-lines .club-profile-contact-item strong,
.public-brand-page .brand-authority-label {
  flex: 0 0 auto;
  color: var(--brand-dark);
  font-weight: 700;
}

.public-brand-page .brand-profile-contact-lines .club-profile-contact-item span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-weight: 400;
}

.public-brand-page .brand-profile-contact-lines a.club-profile-contact-item:hover span {
  color: var(--brand);
}

.public-brand-page .brand-authority-contact-line {
  margin-top: 1px;
}

.public-brand-page .brand-authority-inline {
  gap: 7px;
}

.public-brand-page .brand-authority-inline > span:last-child {
  font-weight: 400;
}

/* Marka Yetkilisi kişi profilinde kulüp yerine bütün yetkili markalar görünür. */
.profile-page .profile-authorized-brands {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
}

.profile-page .profile-authorized-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: inherit;
  text-decoration: none;
}

.profile-page .profile-authorized-brand:hover {
  color: var(--brand);
}

.profile-page .profile-authorized-brand-logo {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(31, 74, 58, .15);
  border-radius: 9px;
  color: var(--brand-dark);
  background: rgba(255, 255, 255, .94);
  font-size: 9px;
  font-weight: 800;
}

.profile-page .profile-authorized-brand-logo.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 2px;
}

@media (max-width: 560px) {
  /* Mobilde rozetler marka adının altında kalır. */
  .public-brand-page .brand-title-row {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  .public-brand-page .brand-title-row .brand-sale-tags {
    justify-content: center;
  }

  /*
   * Mobil marka iletişim bilgileri:
   * Konum, Telefon, E-posta, Web ve Marka Yetkilisi ayrı satırlardadır.
   */
  .public-brand-page .brand-profile-contact-lines {
    width: 100%;
    justify-items: center;
    gap: 7px;
  }

  .public-brand-page .brand-profile-contact-lines .club-profile-contact-line {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
  }

  .public-brand-page .brand-profile-contact-lines .club-profile-contact-item {
    width: 100%;
    justify-content: center;
  }

  .public-brand-page .brand-authority-contact-line {
    margin-top: 1px;
  }

  .public-brand-page .brand-authority-inline {
    justify-content: center;
  }

  .profile-page .profile-authorized-brands {
    justify-content: center;
  }

  .profile-page .profile-authorized-brand {
    font-size: 14px;
    font-weight: 700;
  }
}

/* Marka yetkilisi marka adı, masaüstünde de il/ilçe metniyle birebir aynı tipografiyi kullanır. */
@media (min-width: 981px) {
  .profile-page .profile-authorized-brand {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
  }
}


/* =========================================================
   ADIM 42 - ÇOKLU MARKA YETKİLİLİĞİ
========================================================= */

.brand-authority-membership {
  grid-column: 1 / -1;
}

.brand-authority-proof {
  gap: 12px;
}

.brand-authority-help {
  margin: 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

.brand-authority-existing-list,
.brand-authority-new-list {
  display: grid;
  gap: 9px;
}

.brand-authority-existing,
.brand-authority-new-row {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.brand-authority-existing {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.brand-authority-existing.pending {
  border-color: #dfc88d;
  background: #fffaf0;
}

.brand-authority-existing-logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--brand-dark);
  background: var(--paper-2);
  font-size: 10px;
  font-weight: 900;
}

.brand-authority-existing-logo.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 3px;
}

.brand-authority-existing-copy {
  min-width: 0;
}

.brand-authority-existing-copy strong,
.brand-authority-existing-copy small {
  display: block;
}

.brand-authority-existing-copy strong {
  color: var(--brand-dark);
  font-size: 13px;
}

.brand-authority-existing-copy small {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 10px;
}

.brand-authority-remove {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--danger);
  font-size: 10px;
  font-weight: 800;
}

.brand-authority-remove input {
  width: 17px;
  height: 17px;
  margin: 0;
}

.brand-authority-new-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.brand-authority-new-row label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.brand-authority-new-row label > span {
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 900;
}

.brand-authority-new-row select,
.brand-authority-new-row input[type="file"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: 11px;
}

.brand-authority-new-row small {
  color: var(--muted);
  font-size: 9px;
}

.brand-authority-add-button,
.brand-authority-row-remove {
  min-height: 39px;
  border-radius: 9px;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.brand-authority-add-button {
  width: fit-content;
  padding: 0 14px;
  border: 1px solid var(--brand);
  color: #fff;
  background: var(--brand);
}

.brand-authority-row-remove {
  padding: 0 12px;
  border: 1px solid #ead2d2;
  color: #983d35;
  background: #fff5f4;
}

@media (max-width: 680px) {
  .brand-authority-existing,
  .brand-authority-new-row {
    grid-template-columns: 1fr;
  }

  .brand-authority-existing-logo {
    justify-self: center;
  }

  .brand-authority-existing-copy,
  .brand-authority-existing .field-status {
    justify-self: center;
    text-align: center;
  }

  .brand-authority-remove {
    justify-self: center;
  }

  .brand-authority-add-button {
    width: 100%;
  }
}


/* =========================================================
   ADIM 43 - MARKA ÜST ALANI VE KARE KİMLİK GÖRSELLERİ
========================================================= */

/* Ok Satışı / Yay Satışı rozetleri kaldırılmıştır. */
.public-brand-page .brand-sale-tags {
  display: none !important;
}

/*
 * Masaüstü:
 * logo | marka adı + yetkili | iletişim dörtlüsü
 */
.public-brand-page .brand-profile-summary-v3 {
  grid-template-columns: auto minmax(260px, 1fr) minmax(255px, .78fr);
  align-items: center;
  column-gap: 25px;
}

.public-brand-page .brand-profile-identity-column {
  min-width: 0;
  align-self: center;
  padding-top: 15px;
  padding-bottom: 7px;
}

.public-brand-page .brand-profile-identity-column .brand-title-row {
  display: block;
}

.public-brand-page .brand-profile-identity-column .brand-title-row h1 {
  margin: 0;
}

.public-brand-page .brand-authority-title-line {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.public-brand-page .brand-authority-title-line > strong {
  flex: 0 0 auto;
  color: var(--brand-dark);
  font-weight: 700;
}

.public-brand-page .brand-authority-title-line .brand-authority-inline {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
}

.public-brand-page .brand-authority-title-line .brand-authority-inline > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 400;
}

.public-brand-page .brand-profile-contact-column {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 15px 0 7px 22px;
  border-left: 1px solid rgba(31, 74, 58, .14);
}

.public-brand-page .brand-profile-contact-item {
  min-width: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-decoration: none;
}

.public-brand-page .brand-profile-contact-item strong {
  color: var(--brand-dark);
  font-weight: 700;
}

.public-brand-page .brand-profile-contact-item span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-weight: 400;
}

.public-brand-page a.brand-profile-contact-item:hover span {
  color: var(--brand);
}

/* Yüklenen kişi, kulüp ve marka kimlik görselleri kare dosyadır. */
.profile-avatar.has-image img,
.profile-subtitle-club-logo.has-image img,
.profile-authorized-brand-logo.has-image img,
.club-profile-logo.has-image img,
.brand-profile-logo.has-image img {
  aspect-ratio: 1 / 1;
}

@media (max-width: 980px) {
  .public-brand-page .brand-profile-summary-v3 {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
  }

  .public-brand-page .brand-profile-contact-column {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 18px;
    padding: 13px 0 4px;
    border-top: 1px solid rgba(31, 74, 58, .12);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .public-brand-page .brand-profile-summary-v3 {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .public-brand-page .brand-profile-identity-column {
    width: 100%;
    padding-top: 0;
  }

  /*
   * Mobilde "Marka Yetkilisi:" ile kişi aynı satırdadır;
   * etiket sonrası satır atlanmaz.
   */
  .public-brand-page .brand-authority-title-line {
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .public-brand-page .brand-authority-title-line .brand-authority-inline {
    flex: 0 1 auto;
    justify-content: center;
  }

  .public-brand-page .brand-authority-title-line .brand-authority-avatar {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }

  .public-brand-page .brand-profile-contact-column {
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 7px;
    padding: 13px 0 3px;
  }

  .public-brand-page .brand-profile-contact-item {
    width: 100%;
    grid-template-columns: max-content minmax(0, auto);
    justify-content: center;
    text-align: left;
  }
}


/* =========================================================
   ADIM 44 - ORTAK FONT, MARKA KULLANANLARI VE BAŞARI ÖZETİ
========================================================= */

/* Ana sayfada kullanılan yazı tipi artık mobil dahil bütün genel sayfalarda geçerlidir. */
body,
body *:not(svg):not(path):not(circle):not(line):not(polyline):not(polygon):not(ellipse):not(rect) {
  font-family: "Avenir Next", "Segoe UI", "Trebuchet MS", Arial, sans-serif !important;
}

button,
input,
select,
textarea,
option {
  font-family: "Avenir Next", "Segoe UI", "Trebuchet MS", Arial, sans-serif !important;
}

/* Ürün satış bağlantısı ürün kutusunun ortasındadır. */
.public-brand-page .brand-product-buy {
  justify-self: center;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

/*
 * Masaüstü marka üst alanı:
 * logo | marka/yetkili | kullananların başarıları | sağa yaslı bilgi dörtlüsü
 */
@media (min-width: 981px) {
  .public-brand-page .brand-profile-summary-v3 {
    grid-template-columns:
      auto
      minmax(205px, .72fr)
      minmax(220px, 1fr)
      minmax(255px, max-content);
    align-items: center;
    gap: 18px 24px;
    padding-right: 28px;
    padding-bottom: 14px;
  }

  .public-brand-page .brand-profile-identity-column {
    padding-top: 12px;
    padding-bottom: 0;
  }

  .public-brand-page .brand-achievement-summary {
    min-width: 0;
    align-self: center;
    padding: 10px 0 0;
  }

  .public-brand-page .brand-achievement-summary .achievement-awards {
    justify-content: center;
    gap: 9px 12px;
  }

  .public-brand-page .brand-profile-contact-column {
    width: max-content;
    max-width: 100%;
    justify-self: end;
    align-self: stretch;
    align-content: center;
    margin-left: auto;
    padding: 10px 8px 0 24px;
  }
}

/*
 * Tablet düzeninde başarılar tam satıra, bilgi dörtlüsü onun altına geçer.
 */
@media (min-width: 561px) and (max-width: 980px) {
  .public-brand-page .brand-achievement-summary {
    grid-column: 1 / -1;
    width: 100%;
    padding-top: 8px;
  }

  .public-brand-page .brand-achievement-summary .achievement-awards {
    justify-content: center;
  }

  .public-brand-page .brand-profile-contact-column {
    grid-column: 1 / -1;
  }
}

/* Mobilde başarı özeti bilgi dörtlüsünün altında sıralanır. */
@media (max-width: 560px) {
  .public-brand-page .brand-profile-summary-v3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-bottom: 14px;
  }

  .public-brand-page .brand-profile-logo {
    order: 1;
  }

  .public-brand-page .brand-profile-identity-column {
    order: 2;
  }

  .public-brand-page .brand-profile-contact-column {
    order: 3;
  }

  .public-brand-page .brand-achievement-summary {
    order: 4;
    width: 100%;
    padding: 13px 0 0;
  }

  .public-brand-page .brand-achievement-summary .achievement-awards {
    justify-content: center;
  }
}


/* =========================================================
   ADIM 45 - MASAÜSTÜ MARKA BAŞLIK ALANINI GENİŞLETME
========================================================= */

@media (min-width: 981px) {
  /*
   * Madalya sütunu yalnızca içeriği kadar yer kaplar.
   * Boşalan genişlik marka adı ve yetkili bölümüne aktarılır.
   */
  .public-brand-page .brand-profile-summary-v3 {
    grid-template-columns:
      auto
      minmax(320px, 1fr)
      fit-content(180px)
      minmax(255px, max-content);
    column-gap: 16px;
    row-gap: 10px;
    padding-right: 24px;
    padding-bottom: 10px;
  }

  .public-brand-page .brand-profile-identity-column {
    min-width: 320px;
    padding-top: 10px;
  }

  .public-brand-page .brand-profile-identity-column .brand-title-row h1 {
    white-space: nowrap;
  }

  .public-brand-page .brand-achievement-summary {
    width: fit-content;
    max-width: 180px;
    justify-self: center;
    padding: 0;
  }

  .public-brand-page .brand-achievement-summary .achievement-awards {
    max-width: 180px;
    justify-content: center;
    gap: 6px 8px;
  }

  .public-brand-page .brand-profile-contact-column {
    padding-top: 8px;
  }
}


/* =========================================================
   ADIM 46 - MASAÜSTÜ MARKA MADALYALARINI TEK SATIRDA TUTMA
========================================================= */

@media (min-width: 981px) {
  /*
   * Madalya alanındaki 180 px sınırı kaldırılır.
   * Daha küçük ikonlarla bütün madalya ve kupalar tek satırda tutulur.
   */
  .public-brand-page .brand-profile-summary-v3 {
    grid-template-columns:
      auto
      minmax(280px, 1fr)
      max-content
      minmax(220px, max-content);
    column-gap: 10px;
  }

  .public-brand-page .brand-profile-identity-column {
    min-width: 280px;
  }

  .public-brand-page .brand-achievement-summary {
    width: max-content;
    max-width: none;
    min-width: 0;
    justify-self: center;
    padding: 0;
  }

  .public-brand-page .brand-achievement-summary .achievement-awards {
    width: max-content;
    max-width: none;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px;
  }

  .public-brand-page .brand-achievement-summary .achievement-award,
  .public-brand-page .brand-achievement-summary .achievement-award.medal,
  .public-brand-page .brand-achievement-summary .achievement-award.trophy {
    flex: 0 0 auto;
    gap: 2px !important;
  }

  .public-brand-page .brand-achievement-summary .achievement-award svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.55;
  }

  .public-brand-page .brand-achievement-summary .achievement-award strong {
    font-size: 12px;
    line-height: 1;
  }
}


/* =========================================================
   ADIM 47 - MADALYA İKONLARINI NORMAL BOYUTA GERİ ALMA
========================================================= */

@media (min-width: 981px) {
  /*
   * İkonlar ana masaüstü boyutuna döner.
   * Tek satır yerleşimi; kutu dolguları ve sütun aralıkları
   * azaltılarak korunur.
   */
  .public-brand-page .brand-profile-summary-v3 {
    grid-template-columns:
      auto
      minmax(300px, 1fr)
      max-content
      minmax(210px, max-content);
    column-gap: 6px;
    padding-right: 16px;
  }

  .public-brand-page .brand-profile-identity-column {
    min-width: 300px;
  }

  .public-brand-page .brand-achievement-summary .achievement-awards {
    flex-wrap: nowrap;
    gap: 2px;
  }

  .public-brand-page .brand-achievement-summary .achievement-award,
  .public-brand-page .brand-achievement-summary .achievement-award.medal,
  .public-brand-page .brand-achievement-summary .achievement-award.trophy {
    min-width: 0;
    min-height: 38px;
    padding: 2px 3px;
    gap: 2px !important;
  }

  .public-brand-page .brand-achievement-summary .achievement-award svg {
    width: 33px;
    height: 33px;
    stroke-width: 1.3;
  }

  .public-brand-page .brand-achievement-summary .achievement-award strong {
    font-size: 15px;
    line-height: 1;
  }

  .public-brand-page .brand-profile-contact-column {
    padding-left: 14px;
  }
}


/* =========================================================
   ADIM 48 - MADALYA X AYRACI, MARKA DÜZENİ VE BEĞENENLER
========================================================= */

/* Madalya ve kupa ikonuyla sayı arasındaki ince x ayracı. */
.achievement-award strong::before {
  content: "x";
  display: inline-block;
  margin: 0 4px 0 1px;
  color: currentColor;
  font-size: .72em;
  font-weight: 400;
  line-height: 1;
  opacity: .62;
  transform: translateY(-.02em);
}

/* Beğeni sayısı bağlantı görünümü. */
.like-count-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.like-count-link:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.like-count-link.is-disabled {
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}

/* Paylaşım detayındaki Yorumlar / Beğeniler kutusu. */
.post-interaction-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.post-show-comments-button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand-dark);
  background: var(--paper-2);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.post-show-comments-button:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.post-likes-panel {
  min-height: 80px;
}

.post-like-list {
  display: grid;
}

.post-liker-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--brand-dark);
  text-decoration: none;
}

.post-liker-item:last-child {
  border-bottom: 0;
}

a.post-liker-item:hover {
  background: var(--paper-2);
}

.post-liker-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(31, 74, 58, .14);
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  font-size: 10px;
  font-weight: 900;
}

.post-liker-avatar.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.post-liker-item strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-likes-loading,
.post-likes-empty {
  padding: 24px 18px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/*
 * Marka üst alanında önceki aşamadaki aşırı sıkıştırma azaltılır.
 * İkon boyutları değişmez; doğal iç ve dış boşluklar geri gelir.
 */
@media (min-width: 981px) {
  .public-brand-page .brand-profile-summary-v3 {
    grid-template-columns:
      auto
      minmax(300px, 1fr)
      max-content
      minmax(215px, max-content);
    column-gap: 12px;
    padding-right: 26px;
    padding-bottom: 12px;
  }

  .public-brand-page .brand-profile-identity-column {
    min-width: 300px;
    padding-right: 4px;
  }

  .public-brand-page .brand-achievement-summary {
    padding-right: 4px;
    padding-left: 4px;
  }

  .public-brand-page .brand-achievement-summary .achievement-awards {
    gap: 5px;
  }

  .public-brand-page .brand-achievement-summary .achievement-award,
  .public-brand-page .brand-achievement-summary .achievement-award.medal,
  .public-brand-page .brand-achievement-summary .achievement-award.trophy {
    min-height: 42px;
    padding: 5px 6px;
    gap: 2px !important;
  }

  .public-brand-page .brand-profile-contact-column {
    padding-left: 18px;
  }
}

/* Marka ürünleri mobilde iki sütun olarak listelenir. */
@media (max-width: 560px) {
  .public-brand-page .brand-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .public-brand-page .brand-product-card {
    border-radius: 13px;
  }

  .public-brand-page .brand-product-image {
    aspect-ratio: 1 / 1;
  }

  .public-brand-page .brand-product-image img {
    padding: 7px;
  }

  .public-brand-page .brand-product-copy {
    gap: 7px;
    padding: 10px 9px 11px;
  }

  .public-brand-page .brand-product-copy h2 {
    font-size: 13px;
    line-height: 1.3;
  }

  .public-brand-page .brand-product-copy p {
    min-height: 38px;
    font-size: 10px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
  }

  .public-brand-page .brand-product-buy {
    min-height: 32px;
    padding: 0 10px;
    font-size: 9px;
  }

  .post-interaction-header-actions {
    gap: 6px;
  }

  .post-show-comments-button {
    padding: 0 9px;
    font-size: 9px;
  }

  .post-liker-item {
    padding: 12px 14px;
  }
}


/* =========================================================
   ADIM 49 - MARKA ÜST ALANINI KULÜP DÜZENİNE ALMA
========================================================= */

/*
 * Marka üst kutusu artık kulüp profiliyle aynı iskeleti kullanır:
 * logo | ad-yetkili-iletişim | madalya/kupa
 */
.public-brand-page .brand-profile-summary-v4 {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
}

.public-brand-page .brand-profile-main-v4 {
  min-width: 0;
  padding-top: 18px;
}

.public-brand-page .brand-profile-main-v4 .name-row h1 {
  margin: 0;
  white-space: normal;
}

.public-brand-page .brand-profile-main-v4 .brand-authority-title-line {
  margin-top: 8px;
}

.public-brand-page .brand-profile-contact-lines {
  display: grid;
  align-items: start;
  gap: 5px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}

.public-brand-page .brand-profile-contact-lines .club-profile-contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.public-brand-page .brand-profile-contact-lines .club-profile-contact-item {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
}

.public-brand-page .brand-profile-contact-lines .club-profile-contact-item strong {
  flex: 0 0 auto;
  color: var(--brand-dark);
  font-weight: 700;
}

.public-brand-page .brand-profile-contact-lines .club-profile-contact-item span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-weight: 400;
}

.public-brand-page .brand-profile-contact-lines a.club-profile-contact-item:hover span {
  color: var(--brand);
}

.public-brand-page .brand-achievement-summary {
  width: auto;
  max-width: 330px;
  min-width: 0;
  align-self: center;
  justify-self: auto;
  padding: 0 0 4px;
}

.public-brand-page .brand-achievement-summary .achievement-awards {
  width: auto;
  max-width: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.public-brand-page .brand-achievement-summary .achievement-award,
.public-brand-page .brand-achievement-summary .achievement-award.medal,
.public-brand-page .brand-achievement-summary .achievement-award.trophy {
  min-height: 0;
  padding: 0;
}

/* x işaretini ikonlara biraz daha yaklaştırır. */
.achievement-award strong::before {
  margin: 0 2px 0 -3px;
}

@media (max-width: 980px) {
  .public-brand-page .brand-profile-summary-v4 {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .public-brand-page .brand-achievement-summary {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    padding-top: 6px;
  }

  .public-brand-page .brand-achievement-summary .achievement-awards {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .public-brand-page .brand-profile-summary-v4 {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .public-brand-page .brand-profile-main-v4 {
    width: 100%;
    padding-top: 0;
  }

  .public-brand-page .brand-profile-main-v4 .brand-authority-title-line {
    justify-content: center;
    flex-wrap: nowrap;
  }

  .public-brand-page .brand-profile-contact-lines {
    justify-items: center;
    gap: 4px;
  }

  .public-brand-page .brand-profile-contact-lines .club-profile-contact-line {
    width: 100%;
    justify-content: center;
    gap: 5px 12px;
  }

  .public-brand-page .brand-profile-contact-lines .club-profile-contact-item {
    justify-content: center;
  }
}

/*
 * Ürün görseli artık <img> ile kırpılmaz.
 * Kutunun arka planında merkezlenerek tamamı görünür.
 */
.public-brand-page .brand-product-image {
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.public-brand-page .brand-product-image.has-background-image {
  padding: 12px;
  background-origin: content-box;
  background-clip: content-box;
}

.public-brand-page .brand-product-image img {
  display: none !important;
}

@media (max-width: 560px) {
  .public-brand-page .brand-product-image.has-background-image {
    padding: 7px;
  }
}


/* =========================================================
   ADIM 51 - YENİ KEMANKEŞ, MODERASYON SAYACI VE STANDART ÖDÜL DÜZENİ
========================================================= */

/*
 * Moderatör/admin oturumlarında profil düğmesinin solundaki toplam
 * bekleyen onay göstergesi.
 */
.header-moderation-pending-badge {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(132, 20, 20, .28);
  border-radius: 50%;
  color: rgba(255, 255, 255, .88);
  background: rgba(190, 35, 35, .94);
  box-shadow: 0 6px 16px rgba(145, 28, 28, .24);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}

.header-moderation-pending-badge:hover {
  color: rgba(255, 255, 255, .96);
  background: #a82020;
  transform: translateY(-1px);
}

.header-moderation-pending-badge span {
  max-width: 28px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

/*
 * Bütün madalya ve kupa görünümlerinde standart:
 * ikon [eşit boşluk] x [eşit boşluk] sayı
 */
.achievement-award {
  gap: 0 !important;
}

.achievement-award strong {
  display: inline-flex;
  align-items: center;
  margin-left: 0;
}

.achievement-award strong::before {
  content: "x";
  display: inline-block;
  margin: 0 2px;
  color: currentColor;
  font-size: .84em;
  font-weight: 500;
  line-height: 1;
  opacity: .72;
  transform: none;
}

/*
 * Marka üst kutusu kart, kapak, özet, iletişim ve mobil kırılımda doğrudan
 * kulüp profilinin sınıflarını kullanır. Marka özel mobil yerleşim kuralı yoktur.
 */
.public-brand-page .club-profile-card-v2 {
  overflow: hidden;
}

.public-brand-page .club-profile-logo.has-image img {
  object-fit: contain;
  padding: 7px;
}

/* Beğeni sayısı hover'ı yorum sayısıyla aynı; alt çizgi yoktur. */
.like-count-link:hover {
  color: var(--brand);
  text-decoration: none;
}

@media (max-width: 560px) {
  .header-moderation-pending-badge {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    font-size: 9px;
  }
}


/* =========================================================
   ADIM 52 - PAYLAŞIM DEVAMI VE MARKA MOBİL KULÜP DÜZENİ
========================================================= */

/*
 * Akıştaki paylaşım metni en fazla dört satırdır.
 * Detay sayfasındaki post-body-full metni sınırlanmaz.
 */
.post-body-preview p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.post-read-more {
  width: fit-content;
  display: inline;
  margin-top: 3px;
  color: var(--brand-dark);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.4;
  text-decoration: none;
}

.post-read-more[hidden] {
  display: none !important;
}

.post-read-more:hover {
  color: var(--brand);
  text-decoration: none;
}

/*
 * Önceki sürümlerden kalan marka-logo order değerleri mobilde logoyu
 * bilgi alanının altına itiyordu. Kulüp profilinin gerçek mobil sırası,
 * ölçüleri ve boşlukları burada birebir yeniden uygulanır.
 */
@media (max-width: 560px) {
  .public-brand-page .club-profile-card-v2 {
    overflow: hidden;
  }

  .public-brand-page .club-profile-cover {
    min-height: 178px;
  }

  .public-brand-page .club-profile-summary-v2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: end !important;
    gap: 10px !important;
    padding: 0 16px 18px !important;
    text-align: center !important;
  }

  .public-brand-page .brand-profile-logo,
  .public-brand-page .club-profile-logo {
    order: 0 !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 112px !important;
    height: 112px !important;
    justify-self: center !important;
    margin: -56px auto 0 !important;
  }

  .public-brand-page .club-profile-main-v2 {
    order: 0 !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 0 !important;
  }

  .public-brand-page .club-profile-main-v2 .name-row {
    justify-content: center !important;
  }

  .public-brand-page .club-profile-main-v2 .name-row h1 {
    margin: 0 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .public-brand-page .club-profile-contact-lines,
  .public-brand-page .club-profile-meta {
    width: 100% !important;
    justify-content: center !important;
    justify-items: center !important;
    margin-top: 10px !important;
    text-align: center !important;
  }

  .public-brand-page .club-profile-contact-line {
    width: 100% !important;
    justify-content: center !important;
  }

  .public-brand-page .club-profile-contact-item {
    justify-content: center !important;
    text-align: center !important;
  }

  .public-brand-page .club-achievement-summary {
    order: 0 !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: none !important;
    padding-top: 6px !important;
  }

  .public-brand-page .club-achievement-summary .achievement-awards {
    justify-content: center !important;
  }
}


/* =========================================================
   ADIM 55 - KİŞİ ÖDÜLLERİNİ MASAÜSTÜNDE İKİ SATIRA AYIRMA
========================================================= */

/* Mobil ve tablette mevcut akış korunur. */
.person-achievement-row {
  display: contents;
}

/* Masaüstünde madalyalar üstte, kupalar altta görünür. */
@media (min-width: 981px) {
  .person-achievement-awards {
    width: max-content;
    max-width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .person-achievement-row {
    width: max-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
}


/* =========================================================
   ADIM 56 - PROFİL TAMAMLAMA, KVKK VE İNCE GÖNDERİ AKSİYONLARI
========================================================= */

.profile-approved-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff !important;
  background: var(--brand) !important;
}

.profile-approved-eyebrow > span {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.profile-image-field input[type="file"] {
  width: 100%;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--brand-dark);
  background: #fff;
}

.start-year-proof-card {
  grid-column: 1 / -1;
}

.start-year-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.start-year-proof-grid label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 800;
}

.kvkk-consent-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
}

.kvkk-consent-card.approved {
  border-color: rgba(31, 74, 58, .28);
  background: rgba(31, 74, 58, .06);
}

.kvkk-consent-check {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 700;
}

.kvkk-consent-check input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.kvkk-consent-check a {
  color: var(--brand);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profile-submit-bar-simple {
  justify-content: flex-end;
}

.header-user-rejected-badge {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(132, 20, 20, .28);
  border-radius: 50%;
  color: rgba(255, 255, 255, .9);
  background: rgba(190, 35, 35, .94);
  box-shadow: 0 6px 16px rgba(145, 28, 28, .24);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.header-user-rejected-badge:hover {
  color: #fff;
  background: #a82020;
}

.post-action {
  font-weight: 600 !important;
}

.post-action-icon {
  stroke-width: 1.9 !important;
}

.legal-page {
  background: var(--page);
}

.legal-shell {
  width: min(920px, calc(100% - 28px));
  display: grid;
  gap: 14px;
  margin: 28px auto 60px;
}

.legal-hero,
.legal-section {
  padding: 24px;
}

.legal-hero h1,
.legal-section h2 {
  margin-top: 0;
  color: var(--brand-dark);
}

.legal-section p {
  color: var(--muted);
  line-height: 1.75;
}

.legal-warning {
  padding: 12px 14px;
  border-left: 3px solid #a82020;
  background: rgba(168, 32, 32, .06);
}

.legal-consent-section {
  border-color: rgba(31, 74, 58, .26);
}

@media (max-width: 650px) {
  .start-year-proof-grid {
    grid-template-columns: 1fr;
  }

  .kvkk-consent-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-user-rejected-badge {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    font-size: 9px;
  }

  .legal-shell {
    width: min(100% - 18px, 920px);
    margin-top: 16px;
  }

  .legal-hero,
  .legal-section {
    padding: 18px;
  }
}


/* =========================================================
   ADIM 57 - TOPLU PROFİL DEĞİŞİKLİĞİ VE ÜYELİK YÖNETİMİ
========================================================= */

.approved-profile-image-preview {
  width: 96px;
  height: 96px;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-2);
}

.approved-profile-image-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.profile-image-upload-wrap {
  display: grid;
  gap: 7px;
}

.membership-proof-help a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.membership-proof-help strong {
  font-weight: 900;
}

.membership-removal-note {
  display: grid;
  gap: 5px;
}

.membership-removal-note small {
  color: var(--muted);
  line-height: 1.45;
}


.approved-profile-image-preview[hidden],
.profile-image-upload-wrap[hidden] {
  display: none !important;
}


/* =========================================================
   ADIM 59 - ANLIK PROFİL ALANLARI VE KULÜP DEĞİŞİKLİK BELGESİ
========================================================= */

.club-change-proof {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(30, 67, 53, .16);
  border-radius: 12px;
  background: rgba(31, 74, 58, .05);
}

.club-change-proof[hidden] { display: none !important; }
.club-change-proof > label { color: var(--brand-dark); font-size: 12px; font-weight: 900; }
.club-change-proof small { color: var(--muted); line-height: 1.55; }
.club-change-proof a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }


/* =========================================================
   ADIM 61 - BAŞLANGIÇ BELGESİ VE MASAÜSTÜ KAYDET KUTUSU
========================================================= */

.start-year-proof-upload {
  display: grid;
  gap: 8px;
}

.start-year-proof-upload[hidden] {
  display: none !important;
}

.start-year-proof-upload > label {
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 900;
}

@media (min-width: 651px) {
  .profile-submit-bar.profile-submit-bar-simple {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    padding: 15px 17px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 253, 247, 0.96);
    box-shadow: 0 12px 35px rgba(49, 42, 30, 0.16);
    backdrop-filter: blur(12px);
  }

  .profile-submit-bar.profile-submit-bar-simple .profile-save-button {
    width: auto;
    min-height: 44px;
    padding: 0 19px;
    border: 0;
    border-radius: 999px;
  }
}


/* =========================================================
   ADIM 62 - TEMİZ PROFİL TAMAMLAMA VE GÜNCELLEME
========================================================= */

.profile-section-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.profile-section-title-row h2 {
  margin: 0;
}

.profile-submit-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.profile-submit-actions .profile-save-button {
  width: auto;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
}

/* Önceki sticky/yüzen kaydet kutusu tamamen devre dışıdır. */
.profile-submit-bar.profile-submit-bar-simple {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 650px) {
  .profile-submit-actions {
    justify-content: stretch;
  }

  .profile-submit-actions .profile-save-button {
    width: 100%;
  }
}


/* =========================================================
   ADIM 63 - PROFİL DOĞRULAMA, KALKAN VE FORM HATALARI
========================================================= */

.profile-approved-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.profile-approved-shield {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  color: currentColor;
}

.profile-approved-shield svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-form.validation-attempted
  :is(input, select, textarea):invalid {
  border-color: #b83b32 !important;
  box-shadow: 0 0 0 2px rgba(184, 59, 50, .1);
}

.profile-field-card.has-validation-error,
.membership-option.has-validation-error,
.achievement-form-card.has-validation-error,
.kvkk-consent-card.has-validation-error,
.membership-grid.has-validation-error {
  border-color: #b83b32 !important;
  box-shadow: 0 0 0 2px rgba(184, 59, 50, .08);
}

.membership-grid.has-validation-error {
  padding: 10px;
  border: 1px solid #b83b32;
  border-radius: 14px;
}

.membership-option.membership-reset-mode {
  border-color: rgba(23, 55, 44, .2);
  background: var(--paper-2);
}

.membership-option.membership-reset-mode
  .field-status.approved {
  display: none;
}

.brand-authority-existing-list[hidden] {
  display: none !important;
}

.add-achievement-button {
  margin-bottom: 14px;
}

.legal-controller-details {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
}

.legal-controller-details p {
  margin: 0;
  line-height: 1.6;
}


/* =========================================================
   ADIM 64 - BİLDİRİMLER VE PAROLA YENİLEME
========================================================= */

.auth-forgot-link {
  width: fit-content;
  margin-top: -4px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.auth-forgot-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.header-notification-badge {
  text-decoration: none;
}

.notifications-shell,
.password-shell {
  width: min(100% - 32px, 880px);
  margin: 0 auto;
  padding: 34px 0 80px;
}

.notifications-intro {
  margin-bottom: 20px;
}

.notifications-intro h1,
.password-card h1 {
  margin: 6px 0 10px;
  color: var(--brand-dark);
}

.notifications-intro p,
.password-card > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.notification-list {
  display: grid;
  gap: 10px;
}

.notification-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(38, 48, 43, .05);
}

.notification-card:hover {
  border-color: rgba(23, 55, 44, .28);
  transform: translateY(-1px);
}

.notification-card.unread {
  border-color: rgba(23, 55, 44, .26);
  background: rgba(23, 55, 44, .045);
}

.notification-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand-dark);
  background: rgba(23, 55, 44, .08);
  font-size: 18px;
  font-weight: 900;
}

.notification-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.notification-copy strong {
  color: var(--brand-dark);
}

.notification-copy > span {
  color: var(--ink);
  line-height: 1.55;
}

.notification-copy small {
  color: var(--muted);
  font-size: 11px;
}

.notification-arrow {
  align-self: center;
  color: var(--brand);
  font-size: 19px;
}

.notifications-empty {
  min-height: 250px;
}

.password-page {
  min-height: 100vh;
  background: var(--page);
}

.password-shell {
  width: min(100% - 32px, 560px);
}

.password-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(38, 48, 43, .09);
}

.password-form {
  display: grid;
  gap: 15px;
  margin-top: 22px;
}

.password-form label {
  display: grid;
  gap: 7px;
}

.password-form label > span {
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 900;
}

.password-form input {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.password-back-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.password-button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 18px;
  text-decoration: none;
}

.profile-comment-owner {
  color: var(--ink);
  font-weight: 700;
}

.profile-comment-post-link strong {
  font-weight: 900;
}

@media (max-width: 620px) {
  .notifications-shell,
  .password-shell {
    width: min(100% - 20px, 880px);
    padding-top: 22px;
  }

  .notification-card {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 13px;
  }

  .notification-icon {
    width: 38px;
    height: 38px;
  }

  .notification-arrow {
    display: none;
  }

  .password-card {
    padding: 20px 16px;
  }
}


/* =========================================================
   ADIM 65 - BİLDİRİM HEADER VE SADE LİSTE
========================================================= */

.notifications-page .header-inner {
  grid-template-columns: minmax(0, 1fr) auto;
}

.notifications-page .header-actions {
  grid-column: 2;
  justify-self: end;
}

.notifications-page .notifications-shell {
  padding-top: 22px;
}

@media (max-width: 980px) {
  .notifications-page {
    padding-top: 62px;
  }

  .notifications-page .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}


/* =========================================================
   ADIM 66 - PROFİL YORUM KARTLARI
========================================================= */

.profile-page .profile-comment-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-page .profile-comment-card-meta {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 14px;
  padding-right: 2px;
}

.profile-page .profile-comment-context {
  min-width: 0;
  display: inline-flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px !important;
  line-height: 1.45;
}

.profile-page .profile-comment-owner,
.profile-page .profile-comment-post-link,
.profile-page .profile-comment-post-label {
  display: inline !important;
  margin: 0 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: inherit !important;
  line-height: inherit;
}

.profile-page .profile-comment-owner {
  color: var(--ink);
  font-weight: 700;
}

.profile-page .profile-comment-post-link,
.profile-page .profile-comment-post-label {
  color: var(--brand-dark);
  text-decoration: none;
}

.profile-page .profile-comment-post-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile-page .profile-comment-post-link strong,
.profile-page .profile-comment-post-label {
  font-weight: 900;
}

.profile-page .profile-comment-time {
  display: inline !important;
  flex: 0 0 auto;
  margin: 0 !important;
  color: var(--muted) !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
}

.profile-page .profile-comment-card > .profile-comment-text {
  margin: 10px 0 0;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .profile-page .profile-comment-card-head {
    display: flex;
  }

  .profile-page .profile-comment-card-meta {
    display: flex;
    padding-right: 0;
    gap: 4px 10px;
  }

  .profile-page .profile-comment-context {
    font-size: 12.5px !important;
  }

  .profile-page .profile-comment-time {
    font-size: 11px !important;
  }

  .profile-page .profile-comment-card > .profile-comment-text {
    margin-top: 9px;
    font-size: 13.5px;
  }
}


/* =========================================================
   ADIM 68 - 10'LU PENCERE SAYFALAMA
========================================================= */

.window-pager {
  position: relative;
  min-width: 0;
}

.window-pagination {
  display: flex;
  align-items: center;
  gap: 9px;
}

.window-pagination[hidden],
.window-pagination button[hidden] {
  display: none !important;
}

.window-pagination-top {
  justify-content: space-between;
  margin: 0 0 12px;
}

.window-pagination-bottom {
  justify-content: center;
  margin: 16px 0 0;
}

.window-pagination button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(23, 55, 44, .2);
  border-radius: 999px;
  color: var(--brand-dark);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.window-pagination button:hover:not(:disabled) {
  border-color: rgba(23, 55, 44, .42);
  background: rgba(23, 55, 44, .06);
  transform: translateY(-1px);
}

.window-pagination button:disabled {
  cursor: wait;
  opacity: .55;
}

.window-pagination-message {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 59, 50, .25);
  border-radius: 10px;
  color: #9d2f28;
  background: rgba(184, 59, 50, .07);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.window-pagination-message[hidden] {
  display: none !important;
}

.window-pager.is-loading [data-window-content] {
  opacity: .55;
  pointer-events: none;
}

.window-pager [data-window-content] {
  transition: opacity .18s ease;
}

.notifications-window-pager .notification-list {
  display: grid;
}

.profile-window-pager .profile-posts-layout {
  min-height: 0;
}

.profile-window-pager
  .profile-post-gallery[hidden] {
  display: none !important;
}

@media (max-width: 620px) {
  .window-pagination-top {
    gap: 7px;
  }

  .window-pagination-top button {
    flex: 1 1 0;
    padding: 0 10px;
  }

  .window-pagination-bottom button {
    width: min(100%, 280px);
  }
}


/* =========================================================
   ADIM 71 - İKİ SATIR BİLDİRİM VE KULLANICI AVATARI
========================================================= */

.notification-card {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 13px 15px;
}

.notification-icon,
.notification-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  overflow: hidden;
  border-radius: 50%;
}

.notification-avatar {
  border: 1px solid rgba(23, 55, 44, .14);
  background: rgba(23, 55, 44, .06);
}

.notification-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.notification-avatar-fallback {
  color: rgba(23, 55, 44, .58);
}

.notification-avatar-fallback svg {
  width: 25px;
  height: 25px;
}

.notification-copy {
  display: grid;
  gap: 4px;
  align-content: center;
}

.notification-copy .notification-message {
  margin: 0;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
}

.notification-copy .notification-relative-time {
  margin: 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.notification-copy > span:not(.notification-message),
.notification-copy > strong:not(.notification-message) {
  display: none;
}

@media (max-width: 620px) {
  .notification-card {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 66px;
    gap: 10px;
    padding: 12px;
  }

  .notification-icon,
  .notification-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .notification-avatar-fallback svg {
    width: 23px;
    height: 23px;
  }

  .notification-copy .notification-message {
    font-size: 13px;
  }

  .notification-copy .notification-relative-time {
    font-size: 10.5px;
  }
}


/* =========================================================
   ADIM 73 - KAPSAMLI PLATFORM GÜNCELLEMESİ
========================================================= */

/* Footer bağlantıları */
.site-footer-links {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.site-footer-links a {
  color: var(--brand-dark);
  font-weight: 800;
  text-decoration: none;
}

.site-footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Kişiler kayıt türü filtreleri ve rozetleri */
.people-role-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.people-role-filters a,
.person-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(23, 55, 44, .18);
  border-radius: 999px;
  color: var(--brand-dark);
  background: rgba(255, 253, 247, .9);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10.5px;
  font-weight: 900;
  text-decoration: none;
}

.people-role-filters a:hover,
.people-role-filters a.active,
.person-role-badge:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.person-list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
}

.person-list-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.person-list-card:hover .person-list-main {
  color: inherit;
}

.person-role-badges {
  max-width: 270px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

/* Tam Ad Soyad bahsetmeleri */
.content-mention {
  color: var(--brand-dark);
  font-weight: 900;
  text-decoration: none;
}

.content-mention:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Gönderi ve yorum metinlerinde otomatik web bağlantıları */
.content-auto-link {
  color: var(--brand-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.content-auto-link:hover {
  color: var(--brand);
}

/* Profil inceleme saati */
.profile-review-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.profile-review-clock {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  color: #9a6b16;
  border: 1px solid rgba(154, 107, 22, .24);
  border-radius: 50%;
  background: rgba(255, 243, 205, .9);
}

.profile-review-clock svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Marka yetkilisi kulüp rolü doğrulaması */
.membership-grid.has-validation-error {
  background: rgba(184, 59, 50, .035);
}

/* Destek sayfası */
.support-shell {
  padding-bottom: 34px;
}

.support-form-card {
  margin-bottom: 18px;
}

.support-form {
  display: grid;
  gap: 15px;
}

.support-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.support-form label {
  display: grid;
  gap: 7px;
}

.support-form label > span {
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 900;
}

.support-form label small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
}

.support-form input,
.support-form textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.support-form textarea {
  min-height: 170px;
  resize: vertical;
}

.support-form input:focus,
.support-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(23, 55, 44, .08);
}

.support-account-summary {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid rgba(23, 55, 44, .14);
  border-radius: 11px;
  background: var(--paper-2);
}

.support-account-summary span {
  color: var(--muted);
  font-size: 12px;
}

.support-submit {
  width: fit-content;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-weight: 900;
  cursor: pointer;
}

.support-submit:hover {
  background: var(--brand-dark);
}

@media (max-width: 760px) {
  .person-list-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .person-list-main {
    grid-template-columns: 24px 50px minmax(0, 1fr);
    gap: 9px;
  }

  .person-role-badges {
    max-width: none;
    justify-content: flex-start;
    padding-left: 83px;
  }

  .support-form-grid {
    grid-template-columns: 1fr;
  }

  .support-submit {
    width: 100%;
  }

  .site-footer-links {
    margin-top: 5px;
  }
}

@media (max-width: 440px) {
  .person-role-badges {
    padding-left: 0;
  }
}


/* =========================================================
   ADIM 74 - ARAYÜZ RÖTUŞLARI
========================================================= */

/* Kişiler: konumun altında ince ve linkli üyelik türleri */
.people-role-filters,
.person-role-badges {
  display: none !important;
}

.people-directory-page .person-list-card {
  display: grid;
  grid-template-columns: 28px 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 15px;
}

.person-card-profile-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.person-name-link {
  width: fit-content;
  max-width: 100%;
  color: var(--brand-dark);
  text-decoration: none;
}

.person-name-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.person-name-link strong {
  display: inline;
}

.person-list-copy .person-location,
.person-list-copy .person-role-links {
  display: block;
  margin-top: 3px;
  overflow: visible;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
}

.person-list-copy .person-role-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 5px;
  margin-top: 1px;
}

.person-role-links a {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.person-role-links a:hover {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Masaüstünde footer bağlantıları normal kalınlıktadır. */
@media (min-width: 761px) {
  .site-footer-links a {
    font-weight: 400;
  }
}

/* Profil bildirimi kırmızı, moderasyon bekleyen sayacı mavidir. */
.header-user-rejected-badge,
.header-notification-badge {
  border-color: rgba(132, 20, 20, .28);
  color: rgba(255, 255, 255, .92);
  background: rgba(190, 35, 35, .94);
  box-shadow: 0 6px 16px rgba(145, 28, 28, .24);
}

.header-user-rejected-badge:hover,
.header-notification-badge:hover {
  color: #fff;
  background: #a82020;
}

.header-moderation-pending-badge {
  border-color: rgba(34, 83, 145, .34);
  color: rgba(255, 255, 255, .94);
  background: #2f6fb3;
  box-shadow: 0 6px 16px rgba(35, 88, 151, .24);
}

.header-moderation-pending-badge:hover {
  color: #fff;
  background: #245b99;
}

/* Profil düzenleme başarı dereceleri tam ortalanır. */
.account-page
  .achievements-section
  .existing-achievement
  .achievement-rank {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 42px;
  padding: 0;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: none;
}

@media (max-width: 560px) {
  .people-directory-page .person-list-card {
    grid-template-columns: 24px 50px minmax(0, 1fr);
    gap: 9px;
    padding: 12px 10px;
  }

  .account-page
    .achievements-section
    .existing-achievement
    .achievement-rank {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    flex-basis: 40px;
    font-size: 14px;
  }
}


/* =========================================================
   ADIM 75 - MOBİL TARAYICI TEMA RENGİ
========================================================= */

:root {
  color-scheme: light;
}

html {
  background-color: #fffdf7;
}

body {
  background-color: #fffdf7;
}


/* =========================================================
   ADIM 76 - AKIŞ, LOGO, MADALYA, ÜLKE VE LEGAL HEADER
========================================================= */

/* Kulüp ve marka listelerinde logo alanını karttan görsel olarak ayır. */
.club-directory-grid .directory-list-card,
.brand-directory-grid .directory-list-card {
  grid-template-columns: 28px 72px minmax(0, 1fr);
  column-gap: 17px;
  row-gap: 8px;
}

.directory-list-card .club-directory-logo,
.directory-list-card .brand-directory-logo,
.club-directory-grid .person-card-avatar,
.brand-directory-grid .person-card-avatar {
  width: 72px;
  height: 72px;
  padding: 7px;
  border: 1px solid rgba(31, 74, 58, .14);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.directory-list-card .club-directory-logo img,
.directory-list-card .brand-directory-logo img {
  border-radius: 8px;
  object-fit: contain;
}

.club-directory-grid .person-list-copy,
.brand-directory-grid .person-list-copy {
  padding-left: 1px;
}

/* Ana sayfa iki yönlü kesintisiz yükleme. */
.home-infinite-feed {
  position: relative;
  min-width: 0;
}

.home-feed-sentinel {
  min-height: 34px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.home-feed-sentinel-top {
  margin-bottom: 4px;
}

.home-feed-sentinel-bottom {
  margin-top: 8px;
}

.home-feed-spinner {
  width: 26px;
  height: 26px;
  display: block;
  border: 3px solid rgba(31, 74, 58, .16);
  border-top-color: var(--brand);
  border-radius: 50%;
  opacity: 0;
  animation: home-feed-spin .7s linear infinite;
}

.home-infinite-feed.is-loading-newer
  .home-feed-sentinel-top
  .home-feed-spinner,
.home-infinite-feed.is-loading-older
  .home-feed-sentinel-bottom
  .home-feed-spinner {
  opacity: 1;
}

.home-feed-sentinel.is-finished {
  min-height: 12px;
}

.home-feed-sentinel.is-finished .home-feed-spinner {
  display: none;
}

@keyframes home-feed-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Moderasyondaki mobil sayaç masaüstündeki gibi gerçek daire kalır. */
@media (max-width: 720px) {
  .admin-panel-heading > strong {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 36px;
    align-self: flex-start;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
  }
}

/* Yeni madalya çiziminin kurdele ve madalya gövdesi daha belirgindir. */
.achievement-award.medal svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.8;
}

.achievement-award.medal svg circle {
  fill: currentColor;
  fill-opacity: .13;
  stroke-width: 2;
}

/* Marka adı yanında ülke bayrağı. */
.brand-name-country-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.brand-country-flag {
  width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 31px;
  overflow: hidden;
  border: 1px solid rgba(31, 74, 58, .16);
  border-radius: 50%;
  background: var(--paper-2);
  box-shadow: 0 3px 10px rgba(34, 47, 40, .08);
  font-size: 19px;
  line-height: 1;
}

/* Destek ve KVKK gibi legal sayfalarda profil alanı sağ kenarda kalır. */
.legal-page .header-inner {
  grid-template-columns: minmax(0, 1fr) auto;
}

.legal-page .header-actions {
  grid-column: 2;
  justify-self: end;
}

@media (max-width: 720px) {
  .club-directory-grid .directory-list-card,
  .brand-directory-grid .directory-list-card {
    grid-template-columns: 24px 62px minmax(0, 1fr);
    column-gap: 13px;
  }

  .directory-list-card .club-directory-logo,
  .directory-list-card .brand-directory-logo,
  .club-directory-grid .person-card-avatar,
  .brand-directory-grid .person-card-avatar {
    width: 62px;
    height: 62px;
    padding: 6px;
    border-radius: 13px;
  }

  .brand-country-flag {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    font-size: 18px;
  }

  .home-feed-sentinel {
    min-height: 30px;
  }

  .home-feed-spinner {
    width: 23px;
    height: 23px;
  }
}

/* =========================================================
   ADIM 77 - ANA SAYFA PAYLASIM BOSLUGU
   Paylasim olusturma kutusu ile ilk gonderi arasindaki bosluk,
   gonderi kartlarinin kendi aralarindaki gap degeriyle ayni kalir.
   Ust sonsuz-akis sentinel'i gozlemleme gorevini surdurur ancak
   normal belge akisinda ekstra dikey alan kaplamaz.
========================================================= */
.home-infinite-feed .home-feed-sentinel-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  min-height: 1px;
  height: 1px;
  margin: 0;
}

/* =========================================================
   ADIM 78 - MARKA VE KULUP LOGO ZEMINLERI
========================================================= */

/*
 * Marka ve kulup logolari kendi ana profil logolari haricinde
 * beyaz bir zemin uzerinde gosterilir. Saydam PNG/WebP logolarin
 * kart veya avatar zeminiyle karismamasi icin bu yuzey sabittir.
 */
.avatar.club.has-image,
.directory-list-card .club-directory-logo.has-image,
.directory-list-card .brand-directory-logo.has-image,
.profile-page .profile-subtitle-club-logo.has-image,
.profile-page .profile-authorized-brand-logo.has-image,
.profile-page .profile-desktop-preference-logo.has-image,
.profile-page .profile-gear-logo.has-image,
.brand-authority-existing-logo.has-image {
  background: #fff !important;
}

.avatar.club.has-image img,
.profile-page .profile-subtitle-club-logo.has-image img,
.profile-page .profile-authorized-brand-logo.has-image img,
.profile-page .profile-desktop-preference-logo.has-image img,
.profile-page .profile-gear-logo.has-image img,
.brand-authority-existing-logo.has-image img {
  background: #fff;
  object-fit: contain;
}

/* Tüm Kulüpler / Tüm Markalar: dış kutu gerçek logo alanıyla aynı ölçüde. */
.club-directory-grid .directory-list-card,
.brand-directory-grid .directory-list-card {
  grid-template-columns: 28px 58px minmax(0, 1fr);
  column-gap: 13px;
}

.directory-list-card .club-directory-logo,
.directory-list-card .brand-directory-logo,
.club-directory-grid .person-card-avatar,
.brand-directory-grid .person-card-avatar {
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: none;
}

.directory-list-card .club-directory-logo.has-image img,
.directory-list-card .brand-directory-logo.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border-radius: inherit;
  object-fit: contain;
}

@media (max-width: 720px) {
  .club-directory-grid .directory-list-card,
  .brand-directory-grid .directory-list-card {
    grid-template-columns: 24px 50px minmax(0, 1fr);
    column-gap: 10px;
  }

  .directory-list-card .club-directory-logo,
  .directory-list-card .brand-directory-logo,
  .club-directory-grid .person-card-avatar,
  .brand-directory-grid .person-card-avatar {
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 11px;
  }
}

/* =========================================================
   ADIM 79 - MARKA ULKE BAYRAKLARI
========================================================= */
/*
 * Marka detay sayfasındaki ülke bayrağı artık font/emoji değildir.
 * Masaüstü işletim sistemlerinin emoji desteğine bağlı kalmamak için
 * gerçek bayrak görseli kullanılır. Yuvarlak rozet, arka plan, kenarlık
 * ve gölge kaldırılmıştır; yalnızca bayrağın kendisi görünür.
 */
.brand-country-flag {
  width: auto;
  height: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: inherit;
  line-height: 1;
}

.brand-country-flag-image {
  width: 32px;
  height: 24px;
  display: block;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-country-flag-fallback {
  min-width: 30px;
  height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 0;
  border-radius: 3px;
  background: var(--paper-2);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}

@media (max-width: 720px) {
  .brand-country-flag {
    width: auto;
    height: auto;
    flex-basis: auto;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .brand-country-flag-image {
    width: 30px;
    height: 22px;
  }
}

/* =========================================================
   ADIM 80 - MARKA ULKE BAYRAKLARI YUVARLAK VE KOMPAKT
========================================================= */
/*
 * Adım 79'daki gerçek bayrak görselleri korunur.
 * Bayrağın kendisi dairesel olarak kırpılır; ayrıca rozet arka planı yoktur.
 * Ölçü bir miktar küçültülerek marka adı yanında daha dengeli görünür.
 */
.brand-country-flag {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
}

.brand-country-flag-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.brand-country-flag-fallback {
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  font-size: 9px;
}

@media (max-width: 720px) {
  .brand-country-flag {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .brand-country-flag-fallback {
    width: 24px;
    min-width: 24px;
    height: 24px;
  }
}


/* =========================================================
   ADIM 82 - MARKA BAYRAKLARINI KALDIRMA VE DETAY LOGOLARINI
             KARE GOSTERME
========================================================= */
/*
 * Marka detay sayfasında ülke bayrağı artık gösterilmez.
 * Kulüp ve marka detay sayfalarında logo zaten kare/yuvarlatılmış kare
 * bir dış kutu içindedir. Genel profil avatar kurallarından gelen dairesel
 * kırpma iç logo görseline uygulanmaz.
 */
.public-club-page .club-profile-logo.has-image img,
.public-brand-page .brand-profile-logo.has-image img,
.public-brand-page .club-profile-logo.has-image img {
  border-radius: 0 !important;
  object-fit: contain !important;
}

/* =========================================================
   ADIM 83 - ANA SAYFA SON GONDERI / FOOTER HIZASI
========================================================= */
/*
 * En eski gönderiye ulaşıldığında artık yükleme yapılmayacağı için alt
 * sentinel masaüstünde dikey yer kaplamaz. Böylece son gönderi kartının
 * alt kenarı sağ/sol sütunların bitişiyle aynı seviyeye gelir ve footer'a
 * kadar olan gereksiz yaklaşık 20px boşluk kaldırılır.
 */
@media (min-width: 981px) {
  .home-infinite-feed
    .home-feed-sentinel-bottom.is-finished {
    min-height: 0;
    height: 0;
    margin-top: 0;
    overflow: hidden;
  }
}


/* =========================================================
   ADIM 84 - ANA SAYFA PAYLASIM KUTUSU ALT BOSLUK
========================================================= */

/* Mesaj yokken ayrilan 18px + 9px alan karti gereksiz uzatmasin. */
.home-page .composer .post-form-message:empty {
  display: none;
}


/* =========================================================
   ADIM 87 - OTOMATIK ILK ONAY / HOS GELDIN GONDERISI
========================================================= */
.welcome-feed-card {
  position: relative;
}

.welcome-post-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 18px 18px 12px;
  text-align: center;
}

.welcome-avatar-cluster {
  position: relative;
  width: 122px;
  height: 76px;
  display: block;
  margin: 0 auto 9px;
  text-decoration: none;
}

.welcome-profile-avatar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 4px;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 7px 20px rgba(31, 74, 58, 0.12);
}

.welcome-profile-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.welcome-brand-logo {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 1px;
  width: 58px;
  height: 58px;
  display: block;
  overflow: hidden;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 6px 16px rgba(31, 74, 58, 0.14);
}

.welcome-brand-logo img {
  width: 100%;
  height: 100%;
  display: block;
}

.welcome-post-message {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
}

.welcome-post-message a {
  color: var(--brand-dark);
  text-decoration: none;
}

.welcome-post-message a:hover {
  text-decoration: underline;
}

.welcome-post-time {
  margin-top: 3px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-decoration: none;
}

.welcome-post-stats {
  min-height: 34px;
}

.welcome-post-actions {
  padding-top: 5px;
  padding-bottom: 6px;
}

.welcome-post-actions .post-action {
  min-height: 38px;
}

@media (max-width: 560px) {
  .welcome-post-content {
    padding: 15px 14px 10px;
  }

  .welcome-avatar-cluster {
    width: 109px;
    height: 68px;
    margin-bottom: 8px;
  }

  .welcome-profile-avatar {
    left: 3px;
    width: 68px;
    height: 68px;
    border-width: 2px;
    font-size: 20px;
  }

  .welcome-brand-logo {
    top: 9px;
    right: 1px;
    width: 52px;
    height: 52px;
    border-width: 2px;
  }

  .welcome-post-message {
    font-size: 15px;
  }

  .welcome-post-stats {
    min-height: 32px;
  }

  .welcome-post-actions .post-action {
    min-height: 36px;
  }
}


/* =========================================================
   ADIM 88 - HOS GELDIN GONDERISI SILME + LOGO KONUMU
========================================================= */
.welcome-post-delete {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 8px;
}

@media (max-width: 560px) {
  .welcome-post-delete {
    top: 6px;
    right: 6px;
  }
}


/* =========================================================
   ADIM 91 - HOS GELDIN LOGOSU + PROFIL YAYIN MESAJI
========================================================= */


/* =========================================================
   ADIM 92 - HOS GELDIN PAYLASIMI ILK YAYINDA TEK SEFER + LOGO BUYUTME
========================================================= */

/* =========================================================
   ADIM 96 - MOBIL SAYFA SONU / FOOTER BOSLUKLARINI ESITLE
========================================================= */
/*
 * Ana sayfada mobil slaytlar footer'dan once 14px alt boslukla biter.
 * Dizin ve herkese acik profil sayfalarinda eski 24-56px shell marjlari
 * ile ayrica ayrilan body alt boslugu footer/nav mesafesini gereksiz
 * buyutuyordu. Tum bu sayfalar ana sayfadaki 14px ritmine cekilir.
 */
@media (max-width: 980px) {
  .people-directory-page,
  body.profile-page.public-profile-page {
    padding-bottom: 0 !important;
  }

  .people-directory-page .people-directory-shell,
  .achievement-directory-page .achievement-ranking-shell,
  .public-profile-page .page-shell {
    margin-bottom: 14px !important;
  }
}


/* =========================================================
   ADIM 98 - PAYLASIM DETAY MOBIL ALT BOSLUK + METIN PARAGRAFLARI
========================================================= */
@media (max-width: 980px) {
  body.profile-page.post-detail-page {
    padding-bottom: 0 !important;
  }

  .post-detail-page .post-detail-shell {
    padding-bottom: 14px !important;
  }
}

/* =========================================================
   ADIM 99 - HALKA ACIK LISTELERDE INFINITE SCROLL
========================================================= */
.infinite-scroll-sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
}

.infinite-scroll-sentinel[hidden] {
  display: none !important;
}

.infinite-scroll-status {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 2px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.infinite-scroll-status[hidden] {
  display: none !important;
}

.infinite-scroll-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(31, 74, 58, .18);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: kemankesInfiniteSpin .7s linear infinite;
}

@keyframes kemankesInfiniteSpin {
  to { transform: rotate(360deg); }
}

.window-pager > .window-pagination {
  display: none !important;
}

/* =========================================================
   ADIM 100 - VIDEO PAYLASIMLARI
   ========================================================= */

.composer-media-preview video {
  width: 100%;
  max-height: 420px;
  display: block;
  object-fit: contain;
  background: #000;
  border-radius: 10px;
}

.real-post-video {
  position: relative;
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #000;
  cursor: pointer;
  overflow: hidden;
  text-align: initial;
}

.post-video-feed {
  width: 100%;
  max-height: 680px;
  display: block;
  object-fit: contain;
  background: #000;
}


html:has(body.video-viewer-open),
body.video-viewer-open {
  background: #000 !important;
}

body.video-viewer-open {
  overflow: hidden !important;
}

.kemankes-video-viewer {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #000;
  color: #fff;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.kemankes-video-viewer[hidden] {
  display: none !important;
}

.video-viewer-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/*
 * Üstte kronolojik olarak daha yeni, ortada mevcut, altta daha eski video bulunur.
 * Track başlangıçta -100% konumundadır; ortadaki video ekrana oturur.
 * JS yalnızca translateY değerini değiştirerek gerçek swipe hissi verir.
 */
.video-viewer-track {
  position: absolute;
  left: 0;
  right: 0;
  top: -100%;
  height: 300%;
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: none;
}

.video-viewer-track.is-animating {
  transition: transform .28s cubic-bezier(.22, .82, .24, 1);
}

.video-viewer-slide {
  position: relative;
  flex: 0 0 33.333333%;
  width: 100%;
  height: 33.333333%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.video-viewer-video,
.video-viewer-preview-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

.video-viewer-preview-video {
  pointer-events: none;
}

/* Swipe sırasında yalnızca merkez oynatma kontrolleri kaybolur. */
.kemankes-video-viewer.is-swiping .video-viewer-controls {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Profil bilgisi tam ekran video açık olduğu sürece sürekli görünür. */
.video-viewer-context {
  position: absolute;
  z-index: 5;
  opacity: 1;
  pointer-events: none;
  color: #fff;
}

.video-viewer-context-top {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding:
    calc(16px + env(safe-area-inset-top, 0px))
    18px
    14px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .58), rgba(0, 0, 0, 0));
}

.video-viewer-author-avatar,
.video-viewer-author-name,
.video-viewer-author-time,
.video-viewer-description-link,
.video-viewer-action {
  pointer-events: auto;
}

.video-viewer-author-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.video-viewer-author-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.video-viewer-author-initials {
  line-height: 1;
}

.video-viewer-author-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.video-viewer-author-name {
  max-width: min(72vw, 520px);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.25;
}

.video-viewer-author-name strong {
  font-weight: 800;
}

.video-viewer-author-time {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.25;
}

.video-viewer-bottom-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 52px 86px 18px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .40) 58%, rgba(0, 0, 0, 0));
  color: #fff;
  pointer-events: none;
}

/*
 * Alt gradient içerik konumunu değiştirmeden ekranın en alt kenarına kadar
 * devam eder. Böylece masaüstünde progress çizgisi ile gradient arasında
 * siyah olmayan boş şerit oluşmaz.
 */
.video-viewer-bottom-ui::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, .82);
  pointer-events: none;
}

.video-viewer-description-link {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
}

.video-viewer-description-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-viewer-description-link[hidden] {
  display: none !important;
}

.video-viewer-description-link:hover,
.video-viewer-description-link:focus-visible,
.video-viewer-author-name:hover,
.video-viewer-author-name:focus-visible,
.video-viewer-author-time:hover,
.video-viewer-author-time:focus-visible {
  text-decoration: underline;
}

.video-viewer-action-band {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  pointer-events: auto;
}

.video-viewer-action-row {
  position: relative;
  width: 48px;
  height: 48px;
  min-height: 48px;
}

.video-viewer-action-row-share {
  width: 48px;
}

/*
 * Aksiyon butonu ve sayaç çıkıntısı tek yarı saydam yüzey olarak çizilir.
 * Böylece sayaç ana daireye bitiştiğinde iki transparan katman üst üste
 * binmez ve birleşim noktası daha koyu görünmez.
 */
.video-viewer-action-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(38, 38, 38, .62);
  pointer-events: none;
}

.video-viewer-action-row.has-count::before {
  top: -8px;
  right: -10px;
  left: auto;
  width: 58px;
  height: 58px;
  border-radius: 0;
  background: rgba(38, 38, 38, .62);
  -webkit-mask:
    radial-gradient(circle 24px at 24px 32px, #000 99%, transparent 100%),
    radial-gradient(circle 10px at 41px 18px, #000 99%, transparent 100%);
  mask:
    radial-gradient(circle 24px at 24px 32px, #000 99%, transparent 100%),
    radial-gradient(circle 10px at 41px 18px, #000 99%, transparent 100%);
}

.video-viewer-action-count {
  position: absolute;
  top: 1px;
  right: -2px;
  z-index: 3;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.2px;
  box-shadow: none;
  pointer-events: none;
}

.video-viewer-action-count[hidden] {
  display: none !important;
}

.video-viewer-action {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.video-viewer-action svg {
  width: 25px;
  height: 25px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-viewer-action.active svg {
  fill: currentColor;
}

.video-viewer-action:disabled {
  opacity: .55;
  cursor: default;
}

.video-viewer-share.is-confirmed {
  background: rgba(255, 255, 255, .26);
}

.video-viewer-controls {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(86vw, 430px);
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  align-items: center;
  justify-items: center;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.kemankes-video-viewer.controls-visible .video-viewer-controls {
  opacity: 1;
  pointer-events: auto;
}

.video-viewer-control {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.50);
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.video-viewer-control span {
  margin-left: -2px;
  font-size: 14px;
}

.video-viewer-mute svg {
  width: 29px;
  height: 29px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-viewer-center {
  width: 78px;
  height: 78px;
  background: rgba(0, 0, 0, 0.56);
  font-size: 32px;
}

/* En alt bant: sürüklenebilir video zaman çizgisi. */
.video-viewer-progress {
  --video-progress: 0%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 10;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: ew-resize;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  touch-action: pan-x;
  -webkit-tap-highlight-color: transparent;
}

.video-viewer-progress::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 0;
  background: linear-gradient(to right, #fff 0 var(--video-progress), rgba(255, 255, 255, .28) var(--video-progress) 100%);
}

.video-viewer-progress::-webkit-slider-thumb {
  width: 1px;
  height: 18px;
  margin-top: -7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.video-viewer-progress::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .28);
}

.video-viewer-progress::-moz-range-progress {
  height: 4px;
  background: #fff;
}

.video-viewer-progress::-moz-range-thumb {
  width: 1px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Masaüstünde görünür çizgi viewport'un en alt kenarına sıfır oturur;
   input'un 18px'lik görünmez sürükleme alanı korunur. */
@media (min-width: 761px) {
  .video-viewer-progress::-webkit-slider-runnable-track {
    transform: translateY(7px);
  }

  .video-viewer-progress::-moz-range-track,
  .video-viewer-progress::-moz-range-progress {
    transform: translateY(7px);
  }
}

@media (max-width: 760px) {
  .post-video-feed {
    max-height: 72vh;
  }

  .video-viewer-control {
    width: 54px;
    height: 54px;
  }

  .video-viewer-center {
    width: 72px;
    height: 72px;
  }

  .video-viewer-context-top {
    padding-left: 14px;
    padding-right: 14px;
  }

  .video-viewer-bottom-ui {
    gap: 9px;
    padding: 48px 78px 14px 14px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .video-viewer-action-band {
    right: 14px;
    bottom: 14px;
    gap: 10px;
  }

  .video-viewer-action-row,
  .video-viewer-action-row-share {
    width: 46px;
    height: 46px;
    min-height: 46px;
  }

  .video-viewer-action-row::before {
    width: 46px;
    height: 46px;
  }

  .video-viewer-action-row.has-count::before {
    top: -8px;
    right: -10px;
    width: 56px;
    height: 56px;
    -webkit-mask:
      radial-gradient(circle 23px at 23px 31px, #000 99%, transparent 100%),
      radial-gradient(circle 10px at 39px 18px, #000 99%, transparent 100%);
    mask:
      radial-gradient(circle 23px at 23px 31px, #000 99%, transparent 100%),
      radial-gradient(circle 10px at 39px 18px, #000 99%, transparent 100%);
  }

  .video-viewer-action {
    width: 46px;
    height: 46px;
  }

  .video-viewer-author-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}


/* =========================================================
   ADIM 121 - ANDROID TWA VIDEO GERCEK TAM EKRAN
   Android standalone/TWA içinde Fullscreen API ile açılan viewer,
   sistem gesture alanına kadar kesintisiz siyah yüzey verir.
========================================================= */
.kemankes-video-viewer:fullscreen,
.kemankes-video-viewer:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  inset: 0;
  background: #000 !important;
}

.kemankes-video-viewer:fullscreen .video-viewer-stage,
.kemankes-video-viewer:-webkit-full-screen .video-viewer-stage {
  background: #000 !important;
}

/* =========================================================
   ADIM 122 - WEB PUSH İZİN ARAYÜZÜ
   ========================================================= */
.header-profile-dropdown .profile-menu-push-toggle {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  color: var(--ink);
  background: transparent;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.header-profile-dropdown .profile-menu-push-toggle:hover {
  color: var(--brand-dark);
  background: var(--brand-soft);
}
.header-profile-dropdown .profile-menu-push-toggle.is-disabled-state {
  color: var(--muted);
}
.header-profile-dropdown .profile-menu-push-toggle[hidden] {
  display: none !important;
}

.push-permission-prompt {
  position: fixed;
  left: 50%;
  bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  z-index: 4000;
  width: min(calc(100% - 24px), 520px);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(31,74,58,.18);
  border-radius: 16px;
  color: var(--ink);
  background: rgba(255,253,247,.98);
  box-shadow: 0 18px 55px rgba(20,38,30,.24);
  opacity: 0;
  transform: translate(-50%, 18px);
  transition: opacity .2s ease, transform .2s ease;
}
.push-permission-prompt.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.push-permission-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
}
.push-permission-icon svg { width: 23px; height: 23px; }
.push-permission-copy { min-width: 0; }
.push-permission-copy strong,
.push-permission-copy span { display: block; }
.push-permission-copy strong {
  color: var(--brand-dark);
  font-family: Arial,Helvetica,sans-serif;
  font-size: 14px;
  font-weight: 900;
}
.push-permission-copy span {
  margin-top: 4px;
  color: var(--muted);
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.push-permission-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.push-permission-actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand-dark);
  background: #fff;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.push-permission-actions button.primary {
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
}
.push-feedback {
  position: fixed;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 14px));
  z-index: 4100;
  max-width: calc(100% - 28px);
  padding: 11px 16px;
  border-radius: 999px;
  color: #fff;
  background: rgba(31,74,58,.95);
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity .18s ease, transform .18s ease;
}
.push-feedback.show { opacity: 1; transform: translate(-50%, 0); }
.push-feedback.is-error { background: rgba(145,45,45,.96); }

@media (max-width: 760px) {
  .push-permission-prompt {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .push-feedback {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
}


/* =========================================================
   ADIM 123 - BİLDİRİM / MODERASYON İKİ RENKLİ KAPSÜLÜ
========================================================= */

.header-alert-badges {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  line-height: 1;
}

/*
 * Kişisel bildirim (kırmızı) ve moderasyon (mavi) aynı anda varsa iki
 * bağımsız yuvarlak yerine tek bir iki renkli hap kapsülü görünür.
 * Her yarı kendi bağlantısını korur.
 */
.header-alert-badges.is-capsule {
  gap: 0;
  overflow: visible;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(55, 61, 82, .22);
}

.header-alert-badges.is-capsule .header-notification-badge,
.header-alert-badges.is-capsule .header-moderation-pending-badge {
  width: auto;
  min-width: 25px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0 5px;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.header-alert-badges.is-capsule .header-notification-badge {
  border-right-width: 0;
  border-radius: 999px 0 0 999px;
}

.header-alert-badges.is-capsule .header-moderation-pending-badge {
  border-left-color: rgba(255, 255, 255, .26);
  border-radius: 0 999px 999px 0;
}

.header-alert-badges.is-capsule .header-notification-badge:hover,
.header-alert-badges.is-capsule .header-moderation-pending-badge:hover {
  transform: none;
  filter: brightness(.93);
}

.header-alert-badges.is-capsule .header-notification-badge span,
.header-alert-badges.is-capsule .header-moderation-pending-badge span {
  max-width: none;
}

@media (max-width: 560px) {
  .header-alert-badges {
    gap: 5px;
  }

  .header-alert-badges.is-capsule {
    gap: 0;
  }

  .header-alert-badges.is-capsule .header-notification-badge,
  .header-alert-badges.is-capsule .header-moderation-pending-badge {
    min-width: 23px;
    width: auto;
    height: 29px;
    flex-basis: auto;
    padding: 0 4px;
    font-size: 9px;
  }
}


/* =========================================================
   ADIM 127 - AKIS / MEDYA / VIDEO GORUNUM DUZELTMELERI
   ========================================================= */

/* Yatay/kisa fotograflarda mobildeki eski 250px min-height nedeniyle
   fotografin altinda gri dolgu kalmasin. Gercek fotograf kutusu her zaman
   gorselin dogal yuksekligini takip eder. */
.home-page .real-post-media,
.real-post-media {
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
}

.real-post-media img {
  height: auto !important;
  background: transparent !important;
}

/* Cok uzun videolar max-height'e takildiginda object-fit:contain iki yanda
   siyah kolon uretiyordu. Akista kutuyu tamamen doldur; yalnizca gereken
   kisim kirpilsin. */
.post-video-feed {
  object-fit: cover !important;
}

/* Tam ekran video katmaninda yalnizca ekrandan daha dar/en-boy oranina sahip
   (cok uzun) videolar cover olur. Diger videolar contain kalir. */
.video-viewer-video.is-extra-tall,
.video-viewer-preview-video.is-extra-tall {
  object-fit: cover !important;
}

/* Gercek Fullscreen API yerine uygulama icinde sabit tam-ekran katman kullanilir.
   Boylece Android/Chrome'un "tam ekrandan cikmak icin..." sistem uyarisi
   tetiklenmez. */
.kemankes-video-viewer {
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
}

/* Hash ile yorum/beğeni alanina giderken sabit baslik altinda kalmasin. */
.post-interaction-section,
.post-comment-item {
  scroll-margin-top: calc(var(--header-height, 72px) + 14px);
}


/* =========================================================
   ADIM 128 - ANLIK AKIS RESTORE + TWA SEFFAF NAV HAZIRLIGI
   ========================================================= */
html.kemankes-feed-restoring {
  scroll-behavior: auto !important;
}

html.kemankes-feed-restoring body.home-page {
  visibility: hidden !important;
}

/* Android TWA navigation bar seffaf kullanildiginda normal sayfanin alttan
   gorunecek temel rengi navbar ile ayni olsun. */
html:not(:has(body.video-viewer-open)) {
  background-color: #fffdf7;
}

/* Video viewer acikken edge-to-edge/safe-area bolgesi de kesintisiz siyah. */
body.video-viewer-open,
body.video-viewer-open .kemankes-video-viewer {
  background-color: #000 !important;
}

body.video-viewer-open .kemankes-video-viewer::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100001;
  height: max(env(safe-area-inset-bottom, 0px), 1px);
  background: #000;
  pointer-events: none;
}


/* =========================================================
   ADIM 129 - ANDROID TWA EDGE-TO-EDGE SAFE AREA RENKLERI
   ========================================================= */
/* navigationColor Android tarafinda seffaf. viewport-fit=cover ile Chrome/TWA
   gesture alanina web pikseli cizebilir. Normal ekranlarda temel yuzey krem. */
html,
body {
  background-color: #fffdf7;
}

/* Video viewer acikken root dahil tum alt sistem alani siyaha akar. */
html:has(body.video-viewer-open),
html:has(body.video-viewer-open) body,
body.video-viewer-open,
body.video-viewer-open .kemankes-video-viewer {
  background-color: #000 !important;
}

/* Mobil alt navbarin zemini safe-area boyunca krem olarak devam etsin. */
@media (max-width: 980px) {
  .public-mobile-nav,
  .profile-page .public-mobile-nav,
  .people-directory-page .public-mobile-nav {
    background-color: #fffdf7 !important;
  }

  .public-mobile-nav::after,
  .profile-page .public-mobile-nav::after,
  .people-directory-page .public-mobile-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: max(env(safe-area-inset-bottom, 0px), env(safe-area-max-inset-bottom, 0px));
    background: #fffdf7;
    pointer-events: none;
  }

  body.video-viewer-open .public-mobile-nav::after,
  body.video-viewer-open .profile-page .public-mobile-nav::after,
  body.video-viewer-open .people-directory-page .public-mobile-nav::after {
    background: #000;
  }
}

/* =========================================================
   ADIM 130 - VIDEO VISUAL VIEWPORT / MOBIL CHROME ALT KONTROLLER
   ========================================================= */
/*
 * Mobil Chrome'da adres cubugu gorunurken klasik fixed inset:0 / 100vh,
 * gorunen ekrandan daha uzun kalabilir. JS visualViewport.height degerini
 * --kemankes-video-vvh olarak yazar; dvh destekleyen tarayicilar icin de
 * guvenli bir varsayilan vardir. Boylece aciklama, aksiyonlar ve progress
 * Chrome'un alt sistem/toolbar alaninin altinda kalmaz.
 */
.kemankes-video-viewer {
  --kemankes-video-vvh: 100dvh;
  --kemankes-video-vv-top: 0px;
  top: var(--kemankes-video-vv-top, 0px);
  right: 0;
  bottom: auto;
  left: 0;
  height: var(--kemankes-video-vvh, 100dvh);
  max-height: var(--kemankes-video-vvh, 100dvh);
}

@supports not (height: 100dvh) {
  .kemankes-video-viewer {
    --kemankes-video-vvh: 100vh;
  }
}


/* =========================================================
   ADIM 131 - ANDROID CHROME VIDEO ALT GUVENLIK ALANI
   ========================================================= */
.kemankes-video-viewer {
  --kemankes-video-bottom-guard: 0px;
}

/*
 * Android Chrome gesture alani safe-area-inset-bottom olarak raporlanmasa
 * bile aciklama ve aksiyonlar sistem alaninin ustunde kalir. Viewer zemini
 * siyah olarak fiziksel ekranin en altina kadar devam eder.
 */
.video-viewer-bottom-ui {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--kemankes-video-bottom-guard, 0px));
}

.video-viewer-bottom-ui::after {
  height: calc(12px + env(safe-area-inset-bottom, 0px) + var(--kemankes-video-bottom-guard, 0px));
}

.video-viewer-action-band {
  bottom: calc(18px + var(--kemankes-video-bottom-guard, 0px));
}

.video-viewer-progress {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--kemankes-video-bottom-guard, 0px));
}

@media (max-width: 760px) {
  .video-viewer-bottom-ui {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--kemankes-video-bottom-guard, 0px));
  }

  .video-viewer-action-band {
    bottom: calc(14px + var(--kemankes-video-bottom-guard, 0px));
  }
}


/* =========================================================
   ADIM 135 - MASAUSTU VIDEO VIEWER DOGAL BOYUT
   Feed onizlemesindeki ekrana yayma/cover kurallari desktop viewer'a
   tasinmaz. Video intrinsic boyutunda kalir; yalnizca viewport'u asarsa
   orantili olarak kuculur. Mobil viewer kurallari aynen devam eder.
========================================================= */
@media (min-width: 761px) {
  .video-viewer-video,
  .video-viewer-preview-video,
  .video-viewer-video.is-extra-tall,
  .video-viewer-preview-video.is-extra-tall {
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
  }
}


/* =========================================================
   ADIM 137 - VIDEO ORANLARI / 4:5 DIKEY ONIZLEME / SABIT RESTORE
   ========================================================= */

/* Yatay ve kare videolar: akis kartinin tam genisligi + videonun kendi
   en/boy orani. Max-height veya siyah dolgu yoktur. */
.real-post-video {
  height: auto !important;
  background: transparent !important;
}

.post-video-feed {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

/* Yuksekligi genisliginden fazla olan tum videolar (mobil + masaustu)
   akista 4:5 portre kutusunda merkezden kirpilir. Kutunun hicbir yerinde
   siyah letterbox/pillarbox olusmaz. */
.real-post-video.is-portrait-video {
  width: 100% !important;
  aspect-ratio: 4 / 5;
  overflow: hidden !important;
  background: transparent !important;
}

.real-post-video.is-portrait-video .post-video-feed {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
}

/* Viewer: yatay, kare veya dikey fark etmeksizin video kirpilmaz.
   Tam ekran siyah viewer icinde mevcut viewport'a contain ile sigar.
   Yatay video mobilde genisligi doldurur; dikey video ekran yuksekligine
   gore sigar. Masaustunde de ayni tek kural kullanilir. */
.video-viewer-video,
.video-viewer-preview-video,
.video-viewer-video.is-extra-tall,
.video-viewer-preview-video.is-extra-tall {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
}

/* Adım 138: Başarı sıralama sistemi */
.achievement-ranking-method-link {
    color: var(--green, #1f4a3a);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.achievement-method-shell {
    width: min(100% - 32px, 920px);
    margin: 34px auto 64px;
    display: grid;
    gap: 18px;
}

.achievement-method-hero,
.achievement-method-card {
    border: 1px solid #ddd4c6;
    border-radius: 16px;
    background: #fffdf7;
    box-shadow: 0 8px 24px rgba(31, 74, 58, .05);
}

.achievement-method-hero {
    padding: 28px;
}

.achievement-method-hero h1 {
    margin: 7px 0 12px;
    color: #1f4a3a;
}

.achievement-method-hero p,
.achievement-method-card p {
    margin: 0;
    color: #5d625e;
    line-height: 1.72;
}

.achievement-method-hero a {
    display: inline-block;
    margin-top: 16px;
    color: #1f4a3a;
    font-weight: 800;
}

.achievement-method-card {
    padding: 24px 26px;
}

.achievement-method-card h2 {
    margin: 0 0 10px;
    color: #1f4a3a;
    font-size: 20px;
}

.achievement-method-card p + p,
.achievement-method-table-wrap + p {
    margin-top: 14px;
}

.achievement-method-table-wrap {
    margin-top: 16px;
    overflow-x: auto;
}

.achievement-method-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.achievement-method-table th,
.achievement-method-table td {
    padding: 12px 14px;
    border: 1px solid #ddd4c6;
    text-align: left;
}

.achievement-method-table thead th {
    background: #1f4a3a;
    color: #fff;
}

.achievement-method-table tbody th {
    color: #1f4a3a;
    background: #f4f0e7;
}

@media (max-width: 680px) {
    .achievement-method-shell {
        width: min(100% - 20px, 920px);
        margin-top: 18px;
        gap: 12px;
    }

    .achievement-method-hero,
    .achievement-method-card {
        padding: 19px 17px;
        border-radius: 13px;
    }

    .achievement-method-card h2 {
        font-size: 18px;
    }
}


/* =========================================================
   ADIM 138.2 - BASARI METNI / MOBIL SIRALAMA SAYFASI TASMA DUZELTMESI
   ========================================================= */

/* Grid item'larin icindeki genis tablolar karti viewport disina itmesin. */
.achievement-method-shell,
.achievement-method-hero,
.achievement-method-card,
.achievement-method-table-wrap {
    min-width: 0;
    max-width: 100%;
}

.achievement-method-hero,
.achievement-method-card {
    width: 100%;
    overflow: hidden;
}

.achievement-method-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 680px) {
    .achievement-method-shell {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
    }

    .achievement-method-hero,
    .achievement-method-card {
        max-width: 100%;
    }

    .achievement-method-table {
        /* Tablo okunabilir kalir; gerekiyorsa yalnizca kendi sarmalayicisi kayar. */
        min-width: 500px;
    }
}


/* =========================================================
   ADIM 141 - KVKK / DESTEK MOBIL HEADER VE FOOTER BOSLUKLARI
   ========================================================= */
/* Destek sayfasinda legal-shell'in 60px alt marjina eklenen eski
   padding/margin katmanlarini kaldir. Masaustunde footer ile form arasinda
   yalnizca normal kart ritmi kadar bosluk kalsin. */
.support-page .support-shell {
  padding-bottom: 0;
  margin-bottom: 18px;
}

.support-page .support-form-card {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  /* Mobil ortak header fixed oldugu icin legal sayfalarda da gercek header
     yuksekligi kadar yer ayir; ilk kart artik header'in altinda kalmaz. */
  body.legal-page {
    padding-top: 62px;
  }

  /* Legal sayfalarda 60px'lik masaustu alt marjini mobilde kullanma. */
  .legal-page .legal-shell,
  .support-page .support-shell {
    margin-top: 14px;
    margin-bottom: 14px;
  }

  /* Destek'te public-mobile-nav mevcut; footer'in navbar rezervi korunur,
     fakat shell tarafinda ikinci bir bosluk olusmaz. */
  .support-page .support-shell {
    padding-bottom: 0;
  }
}

/* =========================================================
   ADIM 142 - KVKK MOBIL NAV / BASARI DETAY FOOTER BOSLUGU
   ========================================================= */
/* Basari siralama detay sayfasinda son kart ile footer arasinda
   yalnizca normal sayfa ritmi kadar bosluk birak. */
.achievement-method-page .achievement-method-shell {
  margin-bottom: 18px;
}

@media (max-width: 980px) {
  .achievement-method-page .achievement-method-shell {
    margin-bottom: 14px;
  }
}



/* =========================================================
   ADIM 143-144 - MOBIL ANA SAYFA SEKME LISTELERI ILK 10
   Kişiler, Başarılar, Markalar ve Kulüpler mobilde 10 kayıt gösterir.
   Masaüstündeki yan paneller mevcut 5 kayıtlık görünümünü korur.
========================================================= */
@media (min-width: 981px) {
  .home-page .people-slide .ranking-list .ranking-item:nth-child(n + 6),
  .home-page .achievements-slide .ranking-list .ranking-item:nth-child(n + 6),
  .home-page .brands-slide .ranking-list .ranking-item:nth-child(n + 6),
  .home-page .clubs-slide .ranking-list .ranking-item:nth-child(n + 6) {
    display: none;
  }
}

/* =========================================================
   ADIM 145 - OK TERCIHI: KENDIM YAPIYORUM
========================================================= */
.profile-page .profile-self-made-preference {
  color: var(--brand-dark);
}

.profile-page .self-made-avatar {
  overflow: hidden;
  background: #fff;
}

.profile-page .self-made-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* =========================================================
   ADIM 146 - MOBILDE CIFT KAYITLI MARKA TERCIHI MERKEZ HIZASI
========================================================= */
@media (max-width: 560px) {
  /*
   * Yay ve ok tercihinin ikisi de kayitli markaysa logo sutunu
   * profil alaninin geometrik merkezinde sabit kalir. Sol metinler
   * logoya dogru, sag detaylar logodan disariya dogru hizalanir.
   */
  .profile-page .profile-preference-list-centered-brands .profile-highlight-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    align-items: center;
    justify-content: initial;
    column-gap: 8px;
    min-height: 52px;
    padding: 7px 14px;
    text-align: initial;
  }

  .profile-page .profile-preference-list-centered-brands .profile-gear-label {
    grid-column: 1;
    justify-self: end;
    min-width: 0;
    text-align: right;
    white-space: nowrap;
  }

  .profile-page .profile-preference-list-centered-brands .profile-gear-item {
    display: contents;
  }

  .profile-page .profile-preference-list-centered-brands .profile-gear-logo {
    grid-column: 2;
    justify-self: center;
    width: 38px;
    height: 38px;
    margin: 0;
  }

  .profile-page .profile-preference-list-centered-brands .profile-gear-details {
    grid-column: 3;
    justify-self: start;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 6px;
    text-align: left;
  }

  .profile-page .profile-preference-list-centered-brands .profile-gear-name {
    min-width: 0;
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
  }

  .profile-page .profile-preference-list-centered-brands .profile-gear-meta {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
  }
}


/* =========================================================
   ADIM 147 - MOBIL TERCIH SATIRLARI DOGAL MERKEZ + GORSEL HIZASI
========================================================= */
@media (max-width: 560px) {
  /*
   * Yay satiri kendi toplam genisligiyle normal olarak ortalanir.
   * Ok satiri da ayni normal flex duzenini kullanir; public-profile.js
   * sadece ikinci satiri, gorseller tam alt alta gelecek kadar yatay kaydirir.
   * Bu yontem sabit merkez kolonunun olusturdugu yapay sol boslugu engeller.
   */
  .profile-page .profile-preference-list-aligned-visuals .profile-highlight-item {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    justify-content: center;
    column-gap: normal;
    gap: 4px;
    min-height: 50px;
    padding: 6px 12px;
    text-align: center;
    will-change: transform;
  }

  .profile-page .profile-preference-list-aligned-visuals .profile-gear-label {
    min-width: auto;
    margin: 0;
    text-align: right;
    white-space: nowrap;
  }

  .profile-page .profile-preference-list-aligned-visuals .profile-gear-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .profile-page .profile-preference-list-aligned-visuals .profile-gear-logo {
    width: 38px;
    height: 38px;
    margin: 0;
    flex: 0 0 38px;
  }

  .profile-page .profile-preference-list-aligned-visuals .profile-gear-details {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 6px;
    text-align: left;
  }

  .profile-page .profile-preference-list-aligned-visuals .profile-self-made-preference {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
}

/* =========================================================
   ADIM 150 - MOBIL KISI PROFILI KULUP LOGOSU
   Masaustu ile ayni kare logo kutusu
========================================================= */
@media (max-width: 980px) {
  .profile-page .profile-subtitle-club {
    gap: 7px;
  }

  .profile-page .profile-subtitle-club-logo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(30, 67, 53, .18);
    border-radius: 8px;
    background: rgba(255, 253, 247, .96);
    color: var(--brand-dark);
    box-shadow: 0 2px 7px rgba(29, 44, 36, .08);
    padding: 0;
    box-sizing: border-box;
  }

  .profile-page .profile-subtitle-club-logo.has-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    padding: 2px;
    object-fit: contain;
    border: 0;
    border-radius: 7px;
    background: #fff;
    box-sizing: border-box;
  }
}


/* =========================================================
   ADIM 153: DOĞUM YILI AÇIKLAMA NOTU
   ========================================================= */

.field-heading label .field-label-hint {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
}

/* =========================================================
   ADIM 160 - ARDISIK HOS GELDIN GONDERILERINI GRUPLAMA
========================================================= */
.welcome-avatar-cluster.is-grouped {
  position: relative;
  width: 228px;
  height: 64px;
  margin-bottom: 10px;
}

.welcome-group-avatar {
  position: absolute;
  top: 0;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 7px 20px rgba(31, 74, 58, 0.12);
}

.welcome-group-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.welcome-group-avatar.slot-1 { left: 0; z-index: 7; }
.welcome-group-avatar.slot-2 { left: 34px; z-index: 6; }
.welcome-group-avatar.slot-3 { left: 68px; z-index: 5; }
.welcome-group-avatar.slot-4 { left: 102px; z-index: 4; }
.welcome-group-avatar.slot-5 { left: 136px; z-index: 3; }

.welcome-avatar-cluster.is-grouped .welcome-brand-logo {
  top: 0;
  right: 0;
  z-index: 2;
  width: 58px;
  height: 58px;
}

@media (max-width: 560px) {
  .welcome-avatar-cluster.is-grouped {
    width: 202px;
    height: 57px;
    margin-bottom: 9px;
  }

  .welcome-group-avatar {
    width: 52px;
    height: 52px;
    border-width: 2px;
    font-size: 15px;
  }

  .welcome-group-avatar.slot-1 { left: 0; }
  .welcome-group-avatar.slot-2 { left: 30px; }
  .welcome-group-avatar.slot-3 { left: 60px; }
  .welcome-group-avatar.slot-4 { left: 90px; }
  .welcome-group-avatar.slot-5 { left: 120px; }

  .welcome-avatar-cluster.is-grouped .welcome-brand-logo {
    top: 0;
    right: 0;
    width: 52px;
    height: 52px;
  }
}

/* =========================================================
   ADIM 167 - VIDEO VIEWER ETKILESIM GRUBU DIKEY ORTA
   Beğen / yorum / paylaş buton grubu alt kenara yaslanmaz;
   viewer yüksekliğinin ortasına göre dikey merkezlenir.
   ========================================================= */
.video-viewer-action-band {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  justify-content: center;
}

@media (max-width: 760px) {
  .video-viewer-action-band {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

/* =========================================================
   ADIM 167.1 - VIDEO ETKILESIM GRUBU GERCEK EKRAN ORTASI
   Aksiyon grubu artık bottom-ui dışında, doğrudan viewer-stage
   çocuğudur. Bu nedenle %50 konumu fullscreen sahnesinin gerçek
   dikey merkezini ifade eder.
   ========================================================= */
.video-viewer-stage > .video-viewer-action-band {
  position: absolute;
  top: 50%;
  right: 18px;
  bottom: auto !important;
  z-index: 9;
  transform: translateY(-50%);
  justify-content: center;
}

@media (max-width: 760px) {
  .video-viewer-stage > .video-viewer-action-band {
    top: 50%;
    right: 14px;
    bottom: auto !important;
    transform: translateY(-50%);
  }
}

/* =========================================================
   ADIM 167.2 - VIDEO ETKILESIM GRUBU ALT SAG
   Beğen / yorum / paylaş grubu viewer-stage icinde kalir;
   fullscreen sahnenin sağ alt köşesine sabitlenir.
   ========================================================= */
.video-viewer-stage > .video-viewer-action-band {
  top: auto !important;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--kemankes-video-bottom-guard, 0px)) !important;
  transform: none !important;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .video-viewer-stage > .video-viewer-action-band {
    top: auto !important;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px) + var(--kemankes-video-bottom-guard, 0px)) !important;
    transform: none !important;
  }
}

/* =========================================================
   ADIM 167.3 - VIDEO ETKILESIM GRUBU ALT YAZININ USTU
   Sag-alt konum korunur; 3'lu aksiyon grubu aciklama/yazi
   satirinin hemen ustunde, rahat bir boslukla konumlanir.
   ========================================================= */
.video-viewer-stage > .video-viewer-action-band {
  bottom: calc(64px + env(safe-area-inset-bottom, 0px) + var(--kemankes-video-bottom-guard, 0px)) !important;
}

@media (max-width: 760px) {
  .video-viewer-stage > .video-viewer-action-band {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px) + var(--kemankes-video-bottom-guard, 0px)) !important;
  }
}

/* =========================================================
   ADIM 167.5 - MOBIL VIDEO ETKILESIM GRUBU BIRAZ ASAGI
   Masaustu Adim 167.3 konumunu korur. Mobilde 9:16 videolarda
   aksiyon grubunun videonun altindaki siyah alana dusmemesi icin
   alt mesafe 84px olarak dengelenir.
   ========================================================= */
@media (max-width: 760px) {
  .video-viewer-stage > .video-viewer-action-band {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px) + var(--kemankes-video-bottom-guard, 0px)) !important;
  }
}

/* =========================================================
   ADIM 169 - OTOMATIK MARKA TERCIHI PAYLASIMI
========================================================= */
.brand-preference-avatar-cluster .welcome-profile-avatar,
.brand-preference-avatar-cluster .brand-preference-logo {
  text-decoration: none;
}

.brand-preference-logo {
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.brand-preference-logo img {
  width: 100%;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 50%;
}

.brand-preference-message a {
  font-weight: inherit;
}

@media (max-width: 560px) {
  .brand-preference-logo {
    font-size: 12px;
  }

  .brand-preference-logo img {
    padding: 4px;
  }
}

/* =========================================================
   ADIM 170.1 - OTOMATIK BASARI PAYLASIMI GORSEL DUZELTME
   - Ok/yay emojisi kaldirildi.
   - Yarisma yili normal agirlikta.
   - Madalya/kupa yalnizca temiz SVG olarak gorunur; detay sayfasinda
     arkada kalabilecek arka plan/pseudo efektleri sifirlanir.
========================================================= */
.achievement-system-avatar-cluster {
  width: 132px;
  height: 82px;
}

.achievement-system-avatar-cluster .welcome-profile-avatar {
  z-index: 3;
}

.achievement-system-award {
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 0;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #c29322;
  filter: drop-shadow(0 6px 9px rgba(34, 47, 40, .12));
  isolation: isolate;
}

.achievement-system-award::before,
.achievement-system-award::after {
  content: none !important;
  display: none !important;
}

.achievement-system-award.gold {
  color: #c29322;
}

.achievement-system-award.silver {
  color: #7e898e;
}

.achievement-system-award.bronze {
  color: #a7683e;
}

.achievement-system-award svg {
  width: 68px;
  height: 68px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  background: transparent !important;
  box-shadow: none !important;
}

.achievement-system-award.medal .medal-loop {
  fill: transparent;
  stroke-width: 1.8;
}

.achievement-system-award.medal .medal-neck {
  stroke-width: 1.8;
}

.achievement-system-award.medal .medal-disc {
  fill: currentColor;
  fill-opacity: .14;
  stroke-width: 1.9;
}

.achievement-system-award.medal .medal-star {
  fill: currentColor;
  fill-opacity: .2;
  stroke-width: 1.55;
}

.achievement-system-message a {
  font-weight: inherit;
}

.achievement-system-event {
  margin: 3px 0 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.achievement-system-year {
  color: inherit;
  font-weight: 400;
}

@media (max-width: 560px) {
  .achievement-system-avatar-cluster {
    width: 120px;
    height: 74px;
  }

  .achievement-system-award {
    top: 3px;
    width: 68px;
    height: 68px;
  }

  .achievement-system-award svg {
    width: 62px;
    height: 62px;
  }

  .achievement-system-event {
    font-size: 11px;
  }
}



/* =========================================================
   ADIM 170.2 - BASARI PAYLASIMI MADALYA / AKIS ARALIGI / TUR
   - Madalya SVG'si Basarilar tablosundaki cizime esitlendi.
   - Ana sayfa akisinda profil resmi ile odul birbirine girmez;
     detay kartindaki gibi aralarinda temiz bosluk kalir.
   - Detay sayfasinin mevcut yerlesimi degistirilmez.
========================================================= */

/* Basarilar tablosundaki madalyaya uygun sade renk/dolgu davranisi. */
.achievement-system-award.medal svg circle {
  fill: currentColor;
  fill-opacity: .13;
  stroke-width: 2;
}

/* Adim 170.1'deki eski ozel medal parcalarinin kurallari yeni SVG'de kullanilmaz. */
.achievement-system-award.medal .medal-loop,
.achievement-system-award.medal .medal-neck,
.achievement-system-award.medal .medal-disc,
.achievement-system-award.medal .medal-star {
  all: unset;
}

/* Yalniz ana sayfa akisinda iki yuvarlak/gorsel birbirine girmesin. */
.home-page .achievement-system-avatar-cluster {
  width: 164px;
}

.home-page .achievement-system-avatar-cluster .welcome-profile-avatar {
  left: 0;
}

.home-page .achievement-system-avatar-cluster .achievement-system-award {
  right: 0;
}

.achievement-system-type {
  color: inherit;
  font-weight: 400;
}

@media (max-width: 560px) {
  .home-page .achievement-system-avatar-cluster {
    width: 146px;
  }

  .home-page .achievement-system-avatar-cluster .welcome-profile-avatar {
    left: 0;
  }

  .home-page .achievement-system-avatar-cluster .achievement-system-award {
    right: 0;
  }
}

/* =========================================================
   ADIM 170.3 - BASARI PAYLASIMI AKIS ARALIGI DETAY ILE AYNI
   - Ana akis profil resmi / madalya-kupa araligi, detay kartiyla
     birebir ayni cluster olculerine donduruldu.
========================================================= */
.home-page .achievement-system-avatar-cluster {
  width: 132px;
}

.home-page .achievement-system-avatar-cluster .welcome-profile-avatar {
  left: 4px;
}

.home-page .achievement-system-avatar-cluster .achievement-system-award {
  right: 0;
}

@media (max-width: 560px) {
  .home-page .achievement-system-avatar-cluster {
    width: 120px;
  }

  .home-page .achievement-system-avatar-cluster .welcome-profile-avatar {
    left: 3px;
  }

  .home-page .achievement-system-avatar-cluster .achievement-system-award {
    right: 0;
  }
}

/* =========================================================
   ADIM 170.4 - BASARI PAYLASIMI AKIS ARALIGI INCE AYAR
   - Adim 170.3'te fazla yakin kalan profil resmi / madalya-kupa
     mesafesi, detay kartindaki gorunume yakin dengeli araliga alindi.
   - Yalniz ana akis etkilenir; detay sayfasi degismez.
========================================================= */
.home-page .achievement-system-avatar-cluster {
  width: 146px;
}

.home-page .achievement-system-avatar-cluster .welcome-profile-avatar {
  left: 4px;
}

.home-page .achievement-system-avatar-cluster .achievement-system-award {
  right: 0;
}

@media (max-width: 560px) {
  .home-page .achievement-system-avatar-cluster {
    width: 132px;
  }

  .home-page .achievement-system-avatar-cluster .welcome-profile-avatar {
    left: 3px;
  }

  .home-page .achievement-system-avatar-cluster .achievement-system-award {
    right: 0;
  }
}

/* =========================================================
   ADIM 170.5 - BASARI PAYLASIMI DETAY ARALIGI AKIS ILE AYNI
   - Ana akista Adim 170.4 ile begenilen profil resmi / madalya-kupa
     mesafesi, paylasim detayinda da birebir kullanilir.
========================================================= */
.achievement-system-avatar-cluster {
  width: 146px;
}

.achievement-system-avatar-cluster .welcome-profile-avatar {
  left: 4px;
}

.achievement-system-avatar-cluster .achievement-system-award {
  right: 0;
}

@media (max-width: 560px) {
  .achievement-system-avatar-cluster {
    width: 132px;
  }

  .achievement-system-avatar-cluster .welcome-profile-avatar {
    left: 3px;
  }

  .achievement-system-avatar-cluster .achievement-system-award {
    right: 0;
  }
}

/* =========================================================
   ADIM 170.6 - BASARI OTOMATIK POST TUM GORUNUMLERDE TEK ARALIK
   - Ana akista Adim 170.4 ile begenilen geometri tek kaynak kabul edilir.
   - Ana akis, kisi profili, kulup profili ve paylasim detayi ayni olculeri kullanir.
   - Onceki sayfa-bazli farklar ve override'lar bu ortak kuralla etkisizlestirilir.
========================================================= */
.achievement-system-feed-card .achievement-system-avatar-cluster {
  position: relative !important;
  width: 146px !important;
  height: 82px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.achievement-system-feed-card .achievement-system-avatar-cluster .welcome-profile-avatar {
  top: 0 !important;
  left: 4px !important;
  right: auto !important;
  width: 76px !important;
  height: 76px !important;
  margin: 0 !important;
  transform: none !important;
}

.achievement-system-feed-card .achievement-system-avatar-cluster .achievement-system-award {
  top: 4px !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: 74px !important;
  height: 74px !important;
  margin: 0 !important;
  transform: none !important;
}

.achievement-system-feed-card .achievement-system-avatar-cluster .achievement-system-award svg {
  width: 68px !important;
  height: 68px !important;
}

@media (max-width: 560px) {
  .achievement-system-feed-card .achievement-system-avatar-cluster {
    width: 132px !important;
    height: 74px !important;
  }

  .achievement-system-feed-card .achievement-system-avatar-cluster .welcome-profile-avatar {
    top: 0 !important;
    left: 3px !important;
    width: 68px !important;
    height: 68px !important;
  }

  .achievement-system-feed-card .achievement-system-avatar-cluster .achievement-system-award {
    top: 3px !important;
    right: 0 !important;
    width: 68px !important;
    height: 68px !important;
  }

  .achievement-system-feed-card .achievement-system-avatar-cluster .achievement-system-award svg {
    width: 62px !important;
    height: 62px !important;
  }
}

/* =========================================================
   ADIM 172 - ICERIK UC NOKTA MENUSU + DUZENLE / BILDIR
========================================================= */
.content-options {
  position: relative;
  z-index: 18;
  flex: 0 0 auto;
}

.content-options.welcome-post-delete,
.content-options.is-floating {
  position: absolute;
}

.content-options-trigger,
.comment-options-trigger {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.comment-options-trigger {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.content-options-trigger:hover,
.content-options.is-open .content-options-trigger,
.comment-options-trigger:hover,
.content-options.is-open .comment-options-trigger {
  background: var(--paper-2);
  color: var(--ink);
}

.content-menu-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

.content-options-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  right: 0;
  min-width: 142px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(26, 43, 35, .16);
}

.content-options-popover[hidden] {
  display: none !important;
}

.content-options-item,
.content-options-popover .delete-post-button,
.content-options-popover .comment-delete-button {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 36px;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  margin: 0;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--ink) !important;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.content-options-item:hover,
.content-options-popover .delete-post-button:hover,
.content-options-popover .comment-delete-button:hover {
  background: var(--paper-2) !important;
}

.content-options-item.is-danger,
.content-options-popover .delete-post-button,
.content-options-popover .comment-delete-button {
  color: #a33939 !important;
}

.content-menu-item-icon,
.content-options-item .trash-line-icon,
.content-options-popover .trash-line-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: block;
}

.content-menu-item-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.post-comment-content {
  padding-right: 38px;
}

.post-comment-content > .comment-options {
  position: absolute;
  top: 0;
  right: 0;
}

.profile-comment-card-tools .profile-comment-options {
  position: relative;
}

.profile-comment-card-tools .profile-comment-options .content-options-popover {
  top: calc(100% + 4px);
}

/* İçerik metni düzenleme penceresi */
body.content-edit-open {
  overflow: hidden;
}

.content-edit-modal {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.content-edit-modal[hidden] {
  display: none !important;
}

.content-edit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .48);
}

.content-edit-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  padding: 20px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .24);
}

.content-edit-dialog h2 {
  margin: 0 36px 14px 0;
  color: var(--brand);
  font-size: 18px;
}

.content-edit-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.content-edit-close:hover {
  background: var(--paper-2);
}

.content-edit-textarea {
  width: 100%;
  min-height: 170px;
  resize: vertical;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: 15px/1.55 Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

.content-edit-textarea:focus {
  outline: 2px solid rgba(31, 74, 58, .14);
  border-color: var(--brand);
}

.content-edit-message {
  min-height: 18px;
  margin-top: 8px;
  color: #a33939;
  font: 12px/1.4 Arial, Helvetica, sans-serif;
}

.content-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.content-edit-cancel,
.content-edit-submit {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 9px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.content-edit-cancel {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.content-edit-submit {
  border: 1px solid var(--brand) !important;
  background: var(--brand) !important;
  color: #fff !important;
}

.content-edit-submit:not(:disabled):hover {
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

.content-edit-submit:disabled {
  opacity: .6;
  cursor: wait;
}

@media (max-width: 560px) {
  .content-options-popover {
    min-width: 136px;
  }

  .content-edit-modal {
    padding: 10px;
    align-items: end;
  }

  .content-edit-dialog {
    width: 100%;
    padding: 17px 14px calc(14px + env(safe-area-inset-bottom));
    border-radius: 15px 15px 0 0;
  }

  .content-edit-textarea {
    min-height: 150px;
  }
}

/* ADIM 172.1 - Düzenleme penceresinde Kaydet düğmesini her görünümde sabit ve görünür tut. */
.content-edit-dialog {
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
}

.content-edit-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.content-edit-cancel,
.content-edit-submit {
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  opacity: 1;
}

.content-edit-submit:disabled {
  opacity: .6;
}

@media (max-width: 560px) {
  .content-edit-dialog {
    max-height: calc(100dvh - 10px);
  }
}

/* =========================================================
   ADIM 173 - MOBIL DIZIN SAYFALARI HEADER / ACIKLAMA BOSLUGU
========================================================= */
@media (max-width: 980px) {
  .people-directory-page .people-directory-shell,
  .achievement-directory-page .achievement-ranking-shell {
    margin-top: calc(var(--header-height) + 14px) !important;
  }
}

/* =========================================================
   ADIM 173.1 - MOBIL DIZIN HEADER / ACIKLAMA BOSLUGU TAM ESITLEME
   - Mobil header gercekte 62px yuksekliginde.
   - Onceki --header-height (70px) hesabi nedeniyle fiili bosluk 22px kalabiliyordu.
   - Header altindan aciklama kutusuna net 14px bosluk verilir.
========================================================= */
@media (max-width: 980px) {
  .people-directory-page .people-directory-shell,
  .achievement-directory-page .achievement-ranking-shell {
    margin-top: 76px !important; /* 62px mobil header + 14px bosluk */
  }
}

/* =========================================================
   ADIM 180 - PROFİL İÇİNDEN YENİ MARKA BAŞVURUSU
========================================================= */

.brand-authority-new-heading,
.brand-authority-new-brand-fields {
  grid-column: 1 / -1;
}

.brand-authority-new-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand-authority-new-brand-fields {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.brand-authority-new-brand-fields[hidden] {
  display: none !important;
}

.brand-authority-new-brand-note {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #d9ccb0;
  border-radius: 10px;
  background: #fffaf0;
}

.brand-authority-new-brand-note strong {
  color: var(--brand-dark);
  font-size: 12px;
}

.brand-authority-new-brand-note span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.brand-authority-new-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.brand-authority-new-brand-grid label,
.brand-authority-new-brand-grid fieldset {
  min-width: 0;
}

.brand-authority-new-brand-grid input[type="text"],
.brand-authority-new-brand-grid input[type="tel"],
.brand-authority-new-brand-grid input[type="email"],
.brand-authority-new-brand-grid input[type="url"],
.brand-authority-new-brand-grid select,
.brand-authority-new-brand-grid input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}

.brand-authority-new-brand-grid .brand-product-group-field {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.brand-authority-new-brand-grid .brand-product-group-field legend {
  padding: 0 4px;
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 900;
}

.brand-authority-new-brand-grid .brand-product-group-field label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
}

.brand-authority-new-brand-grid .brand-product-group-field input {
  width: 17px;
  height: 17px;
  margin: 0;
}

.brand-authority-new-brand-wide {
  grid-column: 1 / -1;
}

@media (max-width: 680px) {
  .brand-authority-new-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .brand-authority-new-brand-grid {
    grid-template-columns: 1fr;
  }

  .brand-authority-new-brand-wide {
    grid-column: auto;
  }
}

/* =========================================================
   ADIM 185.4 - KULLANICI DESTEK GECMISI / SOHBET GORUNUMU
   ========================================================= */
.support-history-card {
  display: grid;
  gap: 16px;
}

.support-history-heading,
.support-user-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.support-history-heading h2,
.support-history-heading p,
.support-user-detail-head strong,
.support-user-detail-head span {
  margin: 0;
}

.support-history-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.support-history-heading > strong {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--brand-dark);
  font-size: 13px;
}

.support-user-detail {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.support-user-detail-head > div {
  display: grid;
  gap: 4px;
}

.support-user-detail-head span {
  color: var(--muted);
  font-size: 11px;
}

.support-user-detail-head a {
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.support-user-conversation {
  display: grid;
  gap: 12px;
}

.support-user-bubble {
  width: min(88%, 650px);
  padding: 13px 15px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.65;
}

.support-user-bubble header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 11px;
}

.support-user-bubble header span {
  color: var(--muted);
  white-space: nowrap;
}

.support-user-bubble.is-user {
  justify-self: end;
  border: 1px solid rgba(23, 55, 44, .12);
  border-bottom-right-radius: 4px;
  background: #edf4ef;
}

.support-user-bubble.is-support {
  justify-self: start;
  border: 1px solid #e0d8c7;
  border-bottom-left-radius: 4px;
  background: #fffaf0;
}

.support-user-ticket-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.support-user-ticket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 15px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.support-user-ticket:last-child {
  border-bottom: 0;
}

.support-user-ticket:hover,
.support-user-ticket.is-active {
  background: var(--paper-2);
}

.support-user-ticket-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.support-user-ticket-copy em {
  width: fit-content;
  color: var(--brand);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.support-user-ticket-copy > span,
.support-user-ticket-copy small {
  color: var(--muted);
}

.support-user-ticket-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.support-user-ticket-copy small {
  font-size: 10px;
}

.support-user-ticket > b {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 12px;
}

.support-history-empty {
  padding: 15px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 680px) {
  .support-user-detail {
    padding: 13px;
  }

  .support-user-bubble {
    width: 94%;
  }

  .support-user-bubble header {
    display: grid;
    gap: 2px;
  }

  .support-user-bubble header span {
    white-space: normal;
  }

  .support-user-ticket {
    padding: 13px;
  }
}


/* =========================================================
   ADIM 186.4 — PROFİL VIEWER PAN + VEKTÖREL LOGO ZEMİNİ
   ========================================================= */
.profile-page .profile-avatar.has-image > .profile-avatar-zoom-source {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body.profile-avatar-viewer-open {
  overflow: hidden;
}

.profile-avatar-viewer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.84) 0%,
      rgba(0, 0, 0, 0.68) 48%,
      rgba(0, 0, 0, 0.82) 100%
    );
  transition: opacity 220ms ease, visibility 220ms ease;
  overscroll-behavior: contain;
  touch-action: none;
}

.profile-avatar-viewer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.profile-avatar-viewer-stage {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.46);
  transform: translate3d(0, 0, 0) scale(var(--profile-avatar-viewer-start-scale, 0.3333));
  transition: transform 230ms cubic-bezier(0.2, 0.78, 0.25, 1);
  transform-origin: center center;
  will-change: transform;
  touch-action: none;
}

.profile-avatar-viewer.is-open .profile-avatar-viewer-stage {
  transform:
    translate3d(
      var(--profile-avatar-viewer-pan-x, 0px),
      var(--profile-avatar-viewer-pan-y, 0px),
      0
    )
    scale(var(--profile-avatar-viewer-zoom-scale, 1));
}

.profile-avatar-viewer.is-pinching .profile-avatar-viewer-stage,
.profile-avatar-viewer.is-panning .profile-avatar-viewer-stage {
  transition: none;
}

.profile-avatar-viewer-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 0;
  border-radius: 50%;
  transform: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

/* Kulüp ve marka logoları profildeki gibi radiuslu kare görünür.
 * Transparan alanlar beyaz zeminde gösterilir; çerçeve ve gölge eklenmez. */
.profile-avatar-viewer.is-logo .profile-avatar-viewer-stage {
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: none;
}

.profile-avatar-viewer.is-logo .profile-avatar-viewer-image {
  object-fit: contain;
  border: 0;
  border-radius: 22px;
  background: transparent;
}

/* Yönetimde “Vektörel Logo” işaretlenen kulüp/markalarda
 * transparan logo doğrudan karartılmış viewer zemini üzerinde görünür. */
.profile-avatar-viewer.is-logo.is-vector-logo .profile-avatar-viewer-stage {
  background: transparent;
}

@media (max-width: 560px) {
  .profile-avatar-viewer {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-avatar-viewer,
  .profile-avatar-viewer-stage {
    transition-duration: 1ms;
  }
}

/* =========================================================
   ADIM 187.19.28 - GONDERI GORSELI TAM EKRAN VIEWER
   Profil viewer ile ayni koyu arka plan ve gesture mantigi.
   Gorsel her zaman kirpilmadan kendi en-boy oraninda gosterilir.
   ========================================================= */
.real-post-media.post-image-open {
  width: 100%;
  padding: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.real-post-media.post-image-open:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
  .profile-avatar-viewer-stage,
  .post-image-viewer-stage {
    cursor: pointer;
  }

  .profile-avatar-viewer.is-zoomed .profile-avatar-viewer-stage,
  .post-image-viewer.is-zoomed .post-image-viewer-stage {
    cursor: grab;
  }

  .profile-avatar-viewer.is-panning .profile-avatar-viewer-stage,
  .post-image-viewer.is-panning .post-image-viewer-stage {
    cursor: grabbing;
  }
}

body.post-image-viewer-open {
  overflow: hidden;
}

.post-image-viewer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.84) 0%,
      rgba(0, 0, 0, 0.68) 48%,
      rgba(0, 0, 0, 0.82) 100%
    );
  transition: opacity 220ms ease, visibility 220ms ease;
  overscroll-behavior: contain;
  touch-action: none;
}

.post-image-viewer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.post-image-viewer-stage {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.46);
  transform: translate3d(0, 0, 0) scale(var(--post-image-viewer-start-scale, 0.3333));
  transition: transform 230ms cubic-bezier(0.2, 0.78, 0.25, 1);
  transform-origin: center center;
  will-change: transform;
  touch-action: none;
}

.post-image-viewer.is-open .post-image-viewer-stage {
  transform:
    translate3d(
      var(--post-image-viewer-pan-x, 0px),
      var(--post-image-viewer-pan-y, 0px),
      0
    )
    scale(var(--post-image-viewer-zoom-scale, 1));
}

.post-image-viewer.is-pinching .post-image-viewer-stage,
.post-image-viewer.is-panning .post-image-viewer-stage {
  transition: none;
}

.post-image-viewer-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

@media (max-width: 560px) {
  .post-image-viewer {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-image-viewer,
  .post-image-viewer-stage {
    transition-duration: 1ms;
  }
}

/* =========================================================
   ADIM 186.6 - MOBIL KISI PROFILI UST BILGI DOGAL SATIR AKISI
   Kulup/marka, konum, yas ve kemankeslik suresi sabit iki satira
   zorlanmaz; sigdigi olcude ayni satirda akar. Nokta yalniz ayni
   satiri paylasan ardışık bilgiler arasinda JS ile gosterilir.
========================================================= */
@media (max-width: 560px) {
  .profile-page .profile-subtitle-rich {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px 12px;
  }

  .profile-page .profile-subtitle-primary,
  .profile-page .profile-subtitle-secondary {
    display: contents;
  }

  .profile-page .profile-subtitle-separator,
  .profile-page .profile-subtitle-group-separator {
    display: none !important;
  }

  .profile-page .profile-subtitle-info-item {
    position: relative;
    max-width: 100%;
  }

  .profile-page .profile-subtitle-info-item.has-mobile-inline-separator::before {
    content: "·";
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--muted);
    font: inherit;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
  }
}

/* =========================================================
   ADIM 187 - MINIMAL PWA KURULUM AKISI
   ========================================================= */
.pwa-install-prompt {
  position: fixed;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  z-index: 10080;
  width: min(560px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid rgba(31, 74, 58, .16);
  border-radius: 18px;
  background: rgba(255, 253, 247, .97);
  box-shadow: 0 18px 48px rgba(21, 42, 34, .2);
  opacity: 0;
  transform: translate(-50%, 18px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.pwa-install-prompt.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.pwa-install-prompt > img {
  width: 46px;
  height: 46px;
  display: block;
  border-radius: 12px;
}
.pwa-install-copy { min-width: 0; }
.pwa-install-copy strong,
.pwa-install-copy span { display: block; }
.pwa-install-copy strong {
  color: #1f4a3a;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
}
.pwa-install-copy span {
  margin-top: 3px;
  color: #63716b;
  font-size: 12px;
  line-height: 1.3;
}
.pwa-install-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pwa-install-actions button,
.pwa-ios-guide-card button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  background: #edf1ee;
  color: #365247;
}
.pwa-install-actions button.primary,
.pwa-ios-guide-card button {
  background: #1f4a3a;
  color: #fff;
}
.pwa-ios-guide {
  position: fixed;
  inset: 0;
  z-index: 10120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px 14px max(20px, calc(env(safe-area-inset-bottom, 0px) + 14px));
  background: rgba(10, 18, 15, .5);
  opacity: 0;
  transition: opacity .18s ease;
}
.pwa-ios-guide.show { opacity: 1; }
.pwa-ios-guide-card {
  width: min(470px, 100%);
  padding: 18px;
  border-radius: 20px;
  background: #fffdf7;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  color: #263a32;
}
.pwa-ios-guide-card > strong {
  display: block;
  color: #1f4a3a;
  font-size: 17px;
  line-height: 1.3;
}
.pwa-ios-guide-card ol {
  margin: 14px 0 10px;
  padding-left: 22px;
}
.pwa-ios-guide-card li {
  margin: 7px 0;
  line-height: 1.35;
}
.pwa-ios-guide-card > span {
  display: block;
  color: #65716c;
  font-size: 13px;
  line-height: 1.4;
}
.pwa-ios-guide-card button {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 11px 14px;
}
@media (max-width: 560px) {
  .pwa-install-prompt {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .pwa-install-prompt > img {
    width: 42px;
    height: 42px;
  }
  .pwa-install-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* =========================================================
   ADIM 187.1 - STANDALONE PWA / SISTEM CUBUKLARI / ANA AKIS CTA
   ========================================================= */
.home-page .intro-copy-mobile {
  display: none;
}

@media (max-width: 980px) {
  .home-page .page-intro .eyebrow {
    display: none;
  }

  .home-page .intro-copy-desktop {
    display: none;
  }

  .home-page .intro-copy-mobile {
    display: block;
  }

  .home-page .mobile-pwa-intro-trigger {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    max-width: 100%;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
  }

  .home-page .mobile-pwa-intro-trigger strong {
    color: #fff;
    font-weight: 800;
  }
}

/* Standalone modda işletim sistemi çubukları görünür; web navbarı viewport'un
   alt kenarına sıfır oturur. Android/iOS güvenli alanı navbar zemini içinde
   karşılanır, arada ilave boşluk/margin oluşturulmaz. */
@media (display-mode: standalone) and (max-width: 980px) {
  .home-page .mobile-bottom-nav,
  .public-mobile-nav,
  .profile-page .public-mobile-nav,
  .people-directory-page .public-mobile-nav {
    bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* =========================================================
   ADIM 187.6 - KURULU PWA CTA DURUMU
   ========================================================= */
.home-page .pwa-intro-installed-copy {
  display: none;
}

@media (max-width: 980px) {
  .home-page .mobile-pwa-intro-trigger.is-pwa-installed {
    cursor: default;
  }

  .home-page .mobile-pwa-intro-trigger.is-pwa-installed .pwa-intro-install-copy {
    display: none;
  }

  .home-page .mobile-pwa-intro-trigger.is-pwa-installed .pwa-intro-installed-copy {
    display: inline;
  }
}

@media (display-mode: standalone) and (max-width: 980px) {
  .home-page .mobile-pwa-intro-trigger {
    cursor: default;
  }

  .home-page .mobile-pwa-intro-trigger .pwa-intro-install-copy {
    display: none;
  }

  .home-page .mobile-pwa-intro-trigger .pwa-intro-installed-copy {
    display: inline;
  }
}

/* =========================================================
   ADIM 187.13 - STANDALONE PWA ALT GESTURE ALANI EDGE-TO-EDGE
   ========================================================= */
/* Chrome 135+ resmi edge-to-edge fast-path deseni. Alt menünün ikon/metin
   alanı aynı yerde kalır; yalnız zemin Android gesture alanının arkasına
   doğru önceden büyütülür. safe-area-max desteklenmeyen motorlarda 36px
   fallback kullanılır. Normal Chrome sekmesi bu bloktan etkilenmez. */
@media (display-mode: standalone) and (max-width: 980px) {
  :root {
    --kemankes-safe-area-max-bottom: env(safe-area-max-inset-bottom, 36px);
  }

  .home-page .mobile-bottom-nav,
  .public-mobile-nav,
  .profile-page .public-mobile-nav,
  .people-directory-page .public-mobile-nav {
    min-height: calc(var(--mobile-nav-height) + var(--kemankes-safe-area-max-bottom)) !important;
    padding-bottom: calc(5px + var(--kemankes-safe-area-max-bottom)) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) - var(--kemankes-safe-area-max-bottom)) !important;
    background: #fffdf7 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Eski ::after uzantısı viewport dışında kaldığında etkisiz ve çift zemin
     üretebildiği için standalone modda kapatılır. */
  .public-mobile-nav::after,
  .profile-page .public-mobile-nav::after,
  .people-directory-page .public-mobile-nav::after {
    display: none !important;
  }

  .site-footer {
    padding-bottom: calc(var(--mobile-nav-height) + var(--kemankes-safe-area-max-bottom)) !important;
  }

  body.profile-page.public-profile-page {
    padding-bottom: calc(var(--mobile-nav-height) + var(--kemankes-safe-area-max-bottom)) !important;
  }
}


/* =========================================================
   ADIM 187.15.1 - KULUP/MARKA MASAUSTU ODUL DIKEY ORTALAMA
========================================================= */
/*
 * Yalniz masaustunde kulup ve marka profil ust alaninda:
 * - odul sutunu icerigin gercek genisligi kadar yer ayirir,
 * - 6 madalya/kupa tek satirda tutulur,
 * - ad/iletisim alani kalan genisligi kullanarak bir miktar daralir,
 * - odul grubu sag blok icinde dikeyde ortalanir.
 * Tablet/mobil yerlesime dokunulmaz.
 */
@media (min-width: 981px) {
  .public-club-page .club-profile-summary-v2 {
    grid-template-columns: auto minmax(0, 1fr) max-content;
  }

  .public-club-page .club-achievement-summary {
    width: max-content;
    max-width: none;
    align-self: center;
    padding-bottom: 4px;
  }

  .public-club-page .club-achievement-summary .achievement-awards {
    width: max-content;
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

/* =========================================================
   ADIM 187.15.2 - ODUL BLOKUNU HAFIF ASAGI ALMA VE BOS KULUP KAPAGI MOTIFI
========================================================= */
/*
 * Masaustunde kulup ve marka odul grubu tek satir cozumunu korur; ancak
 * gorsel denge icin blok hafif asagi kaydirilir.
 * Ayrica yalniz kapak alani bos olan kulup profillerinde yesil gradientin
 * arkasina silik bir tarihi okculuk manzarasi motifi eklenir.
 */
@media (min-width: 981px) {
  .public-club-page .club-achievement-summary,
  .public-brand-page .brand-achievement-summary {
    transform: translateY(8px);
  }

  .public-club-page .club-profile-cover:not(.has-club-cover-grid) {
    background-position: center bottom;
  }
}

.public-club-page .club-profile-cover:not(.has-club-cover-grid) {
  background:
    linear-gradient(120deg, rgba(20, 49, 39, .68), rgba(43, 91, 69, .58)),
    url('assets/images/club-cover-default-watermark.jpg');
  background-size: cover;
  background-position: center 46%;
  background-repeat: no-repeat;
}

.public-club-page .club-profile-cover:not(.has-club-cover-grid)::before {
  background:
    linear-gradient(
      to top,
      rgba(13, 38, 29, .64) 0%,
      rgba(20, 55, 42, .34) 42%,
      rgba(31, 76, 58, .08) 100%
    );
}

@media (max-width: 980px) {
  .public-club-page .club-profile-cover:not(.has-club-cover-grid) {
    background:
      linear-gradient(120deg, rgba(20, 49, 39, .60), rgba(43, 91, 69, .50)),
      url('assets/images/club-cover-default-watermark.jpg');
    background-size: cover;
    background-position: center 38%;
    background-repeat: no-repeat;
  }

  .public-club-page .club-profile-cover:not(.has-club-cover-grid)::before {
    background:
      linear-gradient(
        to top,
        rgba(13, 38, 29, .56) 0%,
        rgba(20, 55, 42, .26) 42%,
        rgba(31, 76, 58, .05) 100%
      );
  }
}

/* =========================================================
   ADIM 187.15.8 - MASAUSTU BOS KULUP KAPAGI GERCEK ALT KENAR HIZASI
========================================================= */
/*
 * 187.15.7'de masaustu background-position kuralı genel kuraldan once
 * kaldigi icin center 46% tarafindan eziliyordu. Bu override dosyanin
 * sonunda yer alir ve masaustunde gercekten alt kenar hizasini uygular.
 */
@media (min-width: 981px) {
  .public-club-page .club-profile-cover:not(.has-club-cover-grid) {
    background-position: center bottom;
  }
}


/* =========================================================
   ADIM 187.15.9 - MASAUSTU BOS KULUP KAPAGI MOTIFINI BIRAZ ASAGI ALMA
========================================================= */
/*
 * Masaustunde alt kenar hizasi korunur ancak motif bir miktar daha asagi
 * algilansin diye arka plan alt referansinin da altina 14px kaydirilir.
 * Mobil gorunume dokunulmaz.
 */
@media (min-width: 981px) {
  .public-club-page .club-profile-cover:not(.has-club-cover-grid) {
    background-position: center calc(100% + 14px);
  }
}

/* =========================================================
   ADIM 187.15.10 - MASAUSTU KAPAKTA SADECE RESIM ODAGINI ASAGI ALMA
========================================================= */
/*
 * 187.15.9'da tum arka plan katmani asagi kaydigi icin yesil gradient de
 * beraber iniyordu. Bu adimda masaustunde katmanlar ayrilir:
 * - yesil gradient yerinde kalir,
 * - yalnizca alttaki gorselin odagi biraz daha asagi kayar.
 * Mobil gorunume dokunulmaz.
 */
@media (min-width: 981px) {
  .public-club-page .club-profile-cover:not(.has-club-cover-grid) {
    background-position: center center, center calc(100% + 14px);
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
  }
}

/* =========================================================
   ADIM 187.16.1 - KISILER DIZINI TAMAMLANMAMIS PROFIL OZET KARTI DUZENI
========================================================= */
.people-directory-page .incomplete-profile-summary-card {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  cursor: default;
}

.people-directory-page .incomplete-profile-summary-card:hover {
  transform: none;
  border-color: var(--line);
}

.people-directory-page .incomplete-profile-summary-rank {
  width: 28px;
  color: var(--brand);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.people-directory-page .incomplete-profile-summary-copy {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  padding-left: 6px;
}

.people-directory-page .incomplete-profile-summary-copy strong {
  display: block;
  overflow: visible;
  color: var(--brand-dark);
  font-size: 16px;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

@media (max-width: 560px) {
  .people-directory-page .incomplete-profile-summary-card {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
  }

  .people-directory-page .incomplete-profile-summary-rank {
    width: 24px;
    font-size: 16px;
  }

  .people-directory-page .incomplete-profile-summary-copy {
    min-height: 50px;
    padding-left: 4px;
  }

  .people-directory-page .incomplete-profile-summary-copy strong {
    font-size: 14px;
  }
}

/* =========================================================
   ADIM 187.16.5 - KISILER OZET KARTI BASLIGINI YATAY ORTALAMA
========================================================= */
/*
 * +N degeri soldaki normal sira numarasi hizasinda kalir.
 * Ozel kartin basligi ise kalan metin alaninda yatay olarak ortalanir.
 */
.people-directory-page .incomplete-profile-summary-copy {
  justify-content: center;
  padding-left: 0;
  text-align: center;
}

@media (max-width: 560px) {
  .people-directory-page .incomplete-profile-summary-copy {
    padding-left: 0;
  }
}

/* =========================================================
   ADIM 187.16.6 - KISILER OZET KARTI SOL HIZA VE AD-SOYAD FONT ESITLEME
========================================================= */
/*
 * 187.16.5'te eklenen yatay ortalama geri alinir.
 * Baslik yeniden onceki sol hizasina doner.
 * Baslik fontu normal kisi listesindeki ad-soyadlarla ayni 16px olur.
 */
.people-directory-page .incomplete-profile-summary-copy {
  justify-content: flex-start;
  padding-left: 6px;
  text-align: left;
}

.people-directory-page .incomplete-profile-summary-copy strong {
  font-size: 16px;
}

@media (max-width: 560px) {
  .people-directory-page .incomplete-profile-summary-copy {
    padding-left: 4px;
  }

  .people-directory-page .incomplete-profile-summary-copy strong {
    font-size: 16px;
  }
}

/* =========================================================
   ADIM 187.16.7 - BASARILAR DIZINI BASARI EKLEMEMIS KEMANKES OZET KARTI
========================================================= */
/*
 * Basari siralamasinin filtresiz gercek sonunda avatar ve odul alani
 * olmayan ozel kart gosterilir. +N degeri normal sira alaninda, baslik ise
 * hemen yaninda yer alir.
 */
.achievement-directory-page .no-achievement-summary-card {
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 16px;
  cursor: default;
}

.achievement-directory-page .no-achievement-summary-rank {
  width: 62px;
  height: auto;
  min-height: 58px;
  justify-self: start;
  border-radius: 0;
  background: transparent;
  color: var(--brand);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.achievement-directory-page .no-achievement-summary-copy {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
}

.achievement-directory-page .no-achievement-summary-copy strong {
  display: block;
  overflow: visible;
  color: var(--brand-dark);
  font-size: 17px;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

@media (max-width: 980px) {
  .achievement-directory-page .no-achievement-summary-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
  }

  .achievement-directory-page .no-achievement-summary-rank {
    width: 52px;
  }
}

@media (max-width: 640px) {
  .achievement-directory-page .no-achievement-summary-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
  }

  .achievement-directory-page .no-achievement-summary-rank {
    width: 40px;
    min-height: 48px;
    font-size: 16px;
  }

  .achievement-directory-page .no-achievement-summary-copy {
    min-height: 48px;
  }

  .achievement-directory-page .no-achievement-summary-copy strong {
    font-size: 15px;
  }
}

/* =========================================================
   ADIM 187.16.10 - MOBIL PROFIL FOOTER/NAV BOSLUGU REGRESYON DUZELTMESI
========================================================= */
/*
 * Adim 96'da kisi/kulup/marka profillerinin ekstra body alt rezervi
 * kaldirilmisti. Adim 187.13'te PWA edge-to-edge gesture zemini eklenirken
 * standalone modda body padding-bottom ve footer rezervine safe-area-max
 * yeniden eklenerek bu eski buyuk bosluk geri gelmisti.
 *
 * Gesture zemini/nav edge-to-edge davranisi korunur. Yalniz profil
 * sayfalarinda 187.13'te eklenen fazladan 36px rezerv geri alinir ve
 * Adim 96'daki sik footer ritmine donulur.
 */
@media (display-mode: standalone) and (max-width: 980px) {
  body.profile-page.public-profile-page {
    padding-bottom: 0 !important;
  }

  body.profile-page.public-profile-page .site-footer {
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.profile-page.public-profile-page .page-shell {
    margin-bottom: 14px !important;
  }
}

/* =========================================================
   ADIM 187.17.1 - KISILER/BASARILAR OZET KARTLARINI TEK SATIR ORTALAMA
========================================================= */
/*
 * +N degeri artik ayri sira numarasi gorunumu tasimaz.
 * Sayi ve baslik ayni tipografide, aralarinda normal bir yazi boslugu kadar
 * mesafe ile kartin yatay merkezinde tek bir metin grubu gibi gorunur.
 */
.people-directory-page .incomplete-profile-summary-card,
.achievement-directory-page .no-achievement-summary-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
}

.people-directory-page .incomplete-profile-summary-rank,
.achievement-directory-page .no-achievement-summary-rank {
  width: auto;
  min-height: 0;
  justify-self: auto;
  background: transparent;
  color: var(--brand-dark);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.people-directory-page .incomplete-profile-summary-rank {
  font-size: 16px;
}

.people-directory-page .incomplete-profile-summary-copy {
  flex: 0 0 auto;
  padding-left: 0;
  justify-content: flex-start;
  text-align: left;
}

.achievement-directory-page .no-achievement-summary-rank {
  height: auto;
  border-radius: 0;
  font-size: 17px;
}

.achievement-directory-page .no-achievement-summary-copy {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .people-directory-page .incomplete-profile-summary-card,
  .achievement-directory-page .no-achievement-summary-card {
    gap: .35em;
  }

  .people-directory-page .incomplete-profile-summary-rank,
  .people-directory-page .incomplete-profile-summary-copy strong {
    font-size: 16px;
  }

  .people-directory-page .incomplete-profile-summary-copy {
    padding-left: 0;
  }

  .achievement-directory-page .no-achievement-summary-rank,
  .achievement-directory-page .no-achievement-summary-copy strong {
    font-size: 15px;
  }
}

/* =========================================================
   ADIM 187.18.1 - KULUP/MARKA PROFIL LOGOSUNDA IC BOSLUK KALDIRMA
   Profil logosu sadece kutunun border-radius'i kadar kirpilir;
   ek ic padding kullanilmaz. Dis profile border/cerceve korunur.
========================================================= */
.public-club-page .club-profile-logo.has-image img,
.public-brand-page .brand-profile-logo.has-image img,
.public-brand-page .club-profile-logo.has-image img {
  padding: 0 !important;
  object-fit: contain !important;
}

/* =========================================================
   ADIM 187.18.2 - KULUP/MARKA PROFIL LOGOSU CERCEVE RADIUS KIRPMA
   Dis kutu 22px radius + 7px cerceve kullandigi icin ic logo
   15px radius ile cercevenin ic egimini takip eder.
========================================================= */
.public-club-page .club-profile-logo.has-image,
.public-brand-page .brand-profile-logo.has-image,
.public-brand-page .club-profile-logo.has-image {
  overflow: hidden !important;
}

.public-club-page .club-profile-logo.has-image img,
.public-brand-page .brand-profile-logo.has-image img,
.public-brand-page .club-profile-logo.has-image img {
  padding: 0 !important;
  object-fit: contain !important;
  border-radius: 15px !important;
}

/* =========================================================
   ADIM 187.19.39 - FOTOGRAFSIZ PROFILDE ARKAPLANSIZ BOS GALERI
========================================================= */
.profile-page .profile-post-gallery-empty {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 21px 28px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.profile-page .profile-post-gallery-empty[hidden] {
  display: none !important;
}

/* =========================================================
   ADIM 187.19.47 - HEDEFIMIZ BILGI / SECILMIS ICERIK ROZETI
========================================================= */
.header-target-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid rgba(31, 74, 58, .2);
  border-radius: 999px;
  color: var(--brand-dark);
  background: #fffdf7;
  box-shadow: 0 6px 20px rgba(31, 74, 58, .08);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.header-target-link:hover {
  border-color: rgba(31, 74, 58, .36);
  background: var(--brand-soft);
}

.header-target-emoji {
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.header-profile-menu { overflow: visible; }

.post-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: block;
  overflow: visible;
}

.post-avatar-wrap > .avatar.large {
  width: 48px;
  height: 48px;
}

.post-target-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 3;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid #fffdf7;
  border-radius: 50%;
  background: #fffdf7;
  box-shadow: 0 3px 9px rgba(27, 37, 33, .18);
  font-size: 12px;
  line-height: 1;
}

.content-menu-target-emoji {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
}

.content-user-bold {
  color: inherit;
  font-weight: 900;
}

.target-knowledge-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 2%, rgba(163, 107, 44, .08), transparent 28%),
    linear-gradient(180deg, #f2eee5 0%, var(--bg) 100%);
}

.target-knowledge-shell {
  width: min(760px, calc(100% - 32px));
  margin: 26px auto 64px;
}

.target-knowledge-intro {
  margin-bottom: 16px;
}

.target-feed-list {
  display: grid;
  gap: 14px;
}

.target-feed-list > .feed-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.target-feed-sentinel {
  min-height: 40px;
  display: grid;
  place-items: center;
}

.target-feed-sentinel.is-finished { display: none; }

.target-feed-empty-state {
  padding: 26px 22px;
  border: 1px dashed rgba(31, 74, 58, .24);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255, 253, 247, .78);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

@media (max-width: 980px) {
  .header-target-link {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
  }

  .header-target-label { display: none; }
  .header-target-emoji { font-size: 20px; }

  .target-knowledge-shell {
    width: min(720px, calc(100% - 16px));
    margin-top: 16px;
    margin-bottom: 90px;
  }
}

@media (max-width: 560px) {
  .header-actions { gap: 6px; }

  .header-profile-main {
    gap: 6px;
    padding-right: 7px;
  }


  .header-profile-toggle { width: 29px; }

  .target-knowledge-shell {
    width: calc(100% - 12px);
    margin-top: 10px;
  }

  .target-knowledge-intro {
    margin-bottom: 10px;
  }

  .target-feed-list { gap: 10px; }
}

@media (max-width: 980px) {
  body.target-knowledge-page {
    padding-top: 62px;
    padding-bottom: 86px;
  }
}


/* =========================================================
   ADIM 187.19.49 - HEDEF ALT BOSLUK / TEK YILDIZ
========================================================= */
/* Hedefimiz Bilgi de diğer akışlar gibi son karttan footer'a kısa bir ritimle
   bağlanır. Önceki 64/90px shell boşluğu mobilde gereksiz uzuyordu. */
.target-knowledge-shell {
  margin-bottom: 18px;
}

@media (max-width: 980px) {
  body.target-knowledge-page {
    padding-bottom: 0 !important;
  }

  .target-knowledge-page .target-knowledge-shell {
    margin-bottom: 14px !important;
  }
}

/* Standalone/PWA'da 187.13 safe-area-max rezervi Hedefimiz Bilgi footer'ında
   ikinci bir boşluk gibi görünmesin; profil sayfalarındaki sıkı footer-nav
   ritmiyle aynı gerçek safe-area rezervi kullanılır. */
@media (display-mode: standalone) and (max-width: 980px) {
  body.target-knowledge-page .site-footer {
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* =========================================================
   ADIM 187.19.50 - PROFIL ALANINDA DURUMA GORE BILDIRIM KAPSULU
========================================================= */
/* Profil alanı artık rozetleri avatarın üstüne bindirmez. Avatar solda sabit
   kalır; Profil yazısının yeri bildirim olduğunda sayaç alanına dönüşür. */
.header-profile-main {
  box-sizing: border-box;
}

.header-profile-avatar-link,
.header-profile-label-link {
  color: var(--brand-dark);
  text-decoration: none;
}

.header-profile-avatar-link {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
}

.header-profile-label-link {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  font: inherit;
  white-space: nowrap;
}

.header-profile-avatar-link:hover,
.header-profile-label-link:hover {
  color: var(--brand-dark);
}

.header-profile-main.has-alerts {
  gap: 8px;
  padding-right: 8px;
}

.header-profile-alert-badges {
  align-self: center;
  margin: 0;
}

/* Tek sayaç da Profil yazısının kapladığı bölgede, avatarla aynı görsel
   yükseklikte durur. İki sayaç aynı anda varsa Adım 123'ün kırmızı/lacivert
   bölünmüş kapsülü aynen kullanılır. */
.header-profile-alert-badges:not(.is-capsule) .header-notification-badge,
.header-profile-alert-badges:not(.is-capsule) .header-moderation-pending-badge {
  margin: 0;
}

@media (max-width: 560px) {
  .header-profile-main.has-alerts {
    gap: 6px;
    padding-right: 6px;
  }

  .header-profile-label-link {
    display: inline-flex;
  }
}

/* =========================================================
   ADIM 187.19.57 - HEDEFIMIZ BILGI MASAUSTU 3 SUTUN
========================================================= */
@media (min-width: 981px) {
  /* Ana sayfanın masaüstü içerik genişliğini kullan; açıklama kutusu bu
     alanın tamamına yayılır. */
  .target-knowledge-shell {
    width: min(1440px, calc(100% - 32px));
    margin-top: 24px;
  }

  .target-knowledge-intro,
  .target-infinite-feed {
    width: 100%;
    box-sizing: border-box;
  }

  /* JavaScript devre dışıysa klasik 3 sütun grid güvenli geri dönüş olarak
     kalır. JS hazır olduğunda DOM sırasını bozmadan kartlar en kısa sütuna
     yerleştirilerek gerçek yığma taş (masonry) akışına geçilir. */
  .target-feed-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: start;
    gap: 18px;
  }

  .target-feed-list > .feed-card {
    min-width: 0;
    align-self: start;
  }

  .target-feed-list.is-masonry {
    display: block;
    position: relative;
  }

  .target-feed-list.is-masonry > .feed-card {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    will-change: transform;
  }

  .target-feed-list > .target-feed-empty-state {
    grid-column: 1 / -1;
  }
}


/* ADIM 187.19.61: gönderi konumu */
.composer-location-button {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--brand-dark);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}

.composer-location-button:hover,
.composer-location-button.has-location {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}

.composer-location-picker {
  position: relative;
  min-width: 190px;
  flex: 1 1 260px;
}

.composer-location-picker[hidden] {
  display: none !important;
}

.composer-location-picker input {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  padding: 0 38px 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
  background: var(--paper-2);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.composer-location-picker input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.composer-location-picker input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 74, 58, .08);
}

.composer-location-picker input[readonly] {
  color: var(--brand-dark);
  font-weight: 800;
}

.composer-location-clear {
  position: absolute;
  top: 50%;
  right: 7px;
  z-index: 3;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  transform: translateY(-50%);
}

.composer-location-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf7;
  box-shadow: 0 12px 28px rgba(31, 45, 39, .16);
}

.composer-location-result {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
}

.composer-location-result:hover,
.composer-location-result:focus {
  outline: none;
  background: var(--brand-soft);
}

.composer-location-result span {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-location-result small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.composer-location-empty {
  padding: 10px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
}

.post-author {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.post-meta-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.25;
}

.post-meta-row .post-meta {
  margin-top: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
}

.post-meta-separator {
  flex: 0 0 auto;
  color: inherit;
}

.post-location {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .composer-actions {
    flex-wrap: wrap;
  }

  .composer-location-picker {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
  }

  .composer-tools {
    gap: 8px;
  }

  .home-page .composer-upload,
  .home-page .composer-location-button {
    width: auto;
    flex: 0 0 auto;
    padding-inline: 12px;
  }
}


/* ADIM 187.19.61: yay/ok tercihi 15 günlük değişiklik onayı */
body.preference-change-modal-open {
  overflow: hidden;
}

.preference-change-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 20px;
}

.preference-change-modal[hidden] {
  display: none !important;
}

.preference-change-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 28, 23, .54);
  backdrop-filter: blur(2px);
}

.preference-change-dialog {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  box-sizing: border-box;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdf7;
  box-shadow: 0 24px 60px rgba(20, 32, 27, .25);
}

.preference-change-eyebrow {
  margin-bottom: 6px;
  color: var(--brand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

.preference-change-dialog h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: 24px;
}

.preference-change-dialog p {
  margin: 10px 0 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.6;
}

.preference-change-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.preference-change-actions button {
  min-height: 39px;
  padding: 0 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.preference-change-confirm {
  border: 0;
  background: var(--brand);
  color: #fff;
}

.preference-change-cancel {
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--brand-dark);
}

/* =========================================================
   ADIM 187.19.65 - MOBIL KULUP/MARKA ODUL SATIRI SIKILASTIRMA
========================================================= */
/*
 * Mobil kulup/marka ust ozetinde madalya ve kupalarin 6'sini tek satirda
 * tutmak icin ikon boyutlari degistirilmez. Yalnizca oduller arasi yatay
 * bosluk ve ikon ile x ayraci arasindaki gereksiz mesafe daraltilir.
 */
@media (max-width: 560px) {
  .public-club-page .club-achievement-summary .achievement-awards,
  .public-brand-page .brand-achievement-summary .achievement-awards {
    flex-wrap: nowrap;
    gap: 7px;
  }

  .public-club-page .club-achievement-summary .achievement-award strong::before,
  .public-brand-page .brand-achievement-summary .achievement-award strong::before {
    margin: 0 1px 0 -1px;
  }
}


/* =========================================================
   ADIM 187.19.71 - MOBILDE SADECE IKI TERCIH ARASI BOSLUGU AZALT
========================================================= */
@media (max-width: 560px) {
  /*
   * 187.19.70'te iki metin satirinin kendi yuksekligi/padding'i fazla
   * sikilastirilmisti. Satirlarin ust ve alt nefesini eski haline birak;
   * yalnizca ikisi de "Diger" iken ikinci satiri biraz yukariya cekerek
   * iki tercih arasindaki boslugu azalt.
   */
  .profile-page .profile-preference-list-text-only .profile-highlight-item + .profile-highlight-item {
    margin-top: -8px;
  }
}


/* =========================================================
   PWA KURULUM SAYFASI - /yukle
   Kalici kurulum alani; bu sayfada popup kullanilmaz.
   ========================================================= */
.pwa-install-page {
  min-height: 100vh;
  background: var(--page, var(--bg));
}

.pwa-install-page .header-inner {
  grid-template-columns: minmax(0, 1fr) auto;
}

.pwa-install-page .header-actions {
  grid-column: 2;
  justify-self: end;
}

.pwa-install-shell {
  width: min(980px, calc(100% - 28px));
  display: grid;
  gap: 18px;
  margin: 32px auto 64px;
}

.pwa-install-hero {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding: 30px 32px;
  overflow: hidden;
  position: relative;
}

.pwa-install-hero::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: -105px;
  border-radius: 50%;
  background: rgba(31, 74, 58, .055);
  pointer-events: none;
}

.pwa-install-app-icon {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: 0 16px 38px rgba(31, 74, 58, .18);
  position: relative;
  z-index: 1;
}

.pwa-install-hero-copy {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.pwa-install-hero h1,
.pwa-install-main-card h2,
.pwa-install-installed-card h2 {
  color: var(--brand-dark);
}

.pwa-install-hero h1 {
  margin: 5px 0 9px;
  font-size: clamp(28px, 4vw, 43px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.pwa-install-hero p {
  max-width: 690px;
  margin: 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

.pwa-install-main-card {
  padding: 30px 32px 32px;
}

.pwa-install-card-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.pwa-install-device-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  border-radius: 15px;
  background: var(--brand-soft);
  font-size: 27px;
}

.pwa-install-device-label {
  display: block;
  margin-bottom: 2px;
  color: var(--accent);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pwa-install-card-heading h2 {
  margin: 0;
  font-size: clamp(21px, 3vw, 29px);
  line-height: 1.2;
}

.pwa-install-device-panel {
  padding: 25px 0 3px;
}

.pwa-install-lead {
  max-width: 760px;
  margin: 0 0 20px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

.pwa-install-primary-button,
.pwa-install-secondary-button {
  min-height: 50px;
  border-radius: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  text-decoration: none;
}

.pwa-install-primary-button {
  width: min(100%, 430px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(31, 74, 58, .16);
}

.pwa-install-primary-button:not(:disabled):hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.pwa-install-primary-button:disabled {
  cursor: default;
  opacity: .56;
  box-shadow: none;
}

.pwa-install-primary-button > span:first-child {
  font-size: 20px;
  line-height: 1;
}

.pwa-install-status {
  margin: 10px 0 0;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.pwa-install-secondary-button {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(31, 74, 58, .24);
  background: var(--paper-2);
  color: var(--brand-dark);
}

.pwa-install-secondary-button:hover {
  border-color: rgba(31, 74, 58, .42);
  background: var(--brand-soft);
}

.pwa-install-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
  transition: box-shadow .2s ease;
}

.pwa-install-steps.is-highlighted {
  box-shadow: 0 0 0 4px rgba(31, 74, 58, .10);
  border-radius: 14px;
}

.pwa-install-steps li {
  min-height: 82px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper-2);
}

.pwa-install-step-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 900;
}

.pwa-install-steps strong,
.pwa-install-steps span {
  display: block;
}

.pwa-install-steps strong {
  color: var(--ink);
  font-size: 15px;
}

.pwa-install-steps li div > span {
  margin-top: 2px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

.pwa-install-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.pwa-install-benefits > div {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(31, 74, 58, .11);
  border-radius: 13px;
  background: rgba(228, 239, 233, .42);
}

.pwa-install-benefits > div > span {
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
}

.pwa-install-benefits strong,
.pwa-install-benefits small {
  display: block;
}

.pwa-install-benefits strong {
  color: var(--brand-dark);
  font-size: 14px;
}

.pwa-install-benefits small {
  margin-top: 4px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.45;
}

.pwa-install-installed-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 30px 32px;
}

.pwa-install-installed-mark {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 900;
}

.pwa-install-installed-card h2 {
  margin: 4px 0 6px;
  font-size: 27px;
}

.pwa-install-installed-card p {
  margin: 0 0 18px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

@media (max-width: 720px) {
  .pwa-install-shell {
    width: min(100% - 18px, 980px);
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 18px;
  }

  .pwa-install-hero {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 18px;
  }

  .pwa-install-app-icon {
    width: 82px;
    height: 82px;
    border-radius: 20px;
  }

  .pwa-install-hero::after {
    width: 180px;
    height: 180px;
    right: -85px;
    top: -95px;
  }

  .pwa-install-hero h1 {
    margin-top: 4px;
    font-size: 25px;
  }

  .pwa-install-hero p {
    grid-column: 1 / -1;
    font-size: 13px;
  }

  .pwa-install-main-card {
    padding: 20px 18px 22px;
  }

  .pwa-install-card-heading {
    gap: 12px;
    padding-bottom: 17px;
  }

  .pwa-install-device-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 13px;
    font-size: 24px;
  }

  .pwa-install-device-panel {
    padding-top: 19px;
  }

  .pwa-install-primary-button {
    width: 100%;
  }

  .pwa-install-steps li {
    min-height: 76px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
  }

  .pwa-install-step-number {
    width: 34px;
    height: 34px;
  }

  .pwa-install-benefits {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 22px;
    padding-top: 20px;
  }

  .pwa-install-benefits > div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 10px;
    padding: 13px 14px;
  }

  .pwa-install-benefits > div > span {
    grid-row: 1 / span 2;
    margin: 0;
    font-size: 20px;
  }

  .pwa-install-installed-card {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 18px;
  }

  .pwa-install-installed-mark {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .pwa-install-installed-card h2 {
    font-size: 22px;
  }
}

/* =========================================================
   ADIM 187.19.74 - HEDEFIMIZ BILGI KATEGORILERI
========================================================= */
.post-target-menu-wrap {
  position: relative;
}

.post-target-category-popover {
  position: absolute;
  z-index: 45;
  top: -5px;
  right: calc(100% + 7px);
  min-width: 138px;
  max-height: min(360px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(26, 43, 35, .16);
  overscroll-behavior: contain;
}

.post-target-category-popover[hidden] {
  display: none !important;
}

.post-target-category-title {
  padding: 6px 9px 5px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.post-target-category-option {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.post-target-category-option:hover,
.post-target-category-option:focus-visible {
  outline: 0;
  background: var(--paper-2);
  color: var(--brand-dark);
}

.target-knowledge-intro {
  margin-bottom: 10px;
}

.target-category-nav {
  width: 100%;
  margin: 0 0 16px;
  padding: 1px 0 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.target-category-nav::-webkit-scrollbar {
  display: none;
}

.target-category-track {
  width: max-content;
  min-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.target-category-button {
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 247, .97);
  box-shadow: 0 2px 7px rgba(27, 37, 33, .06);
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.target-category-button:hover,
.target-category-button:focus-visible {
  border-color: rgba(31, 74, 58, .34);
  background: var(--brand-soft);
  color: var(--brand-dark);
  outline: 0;
}

.target-category-button.is-active,
.target-category-button[aria-current="page"] {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 12px rgba(31, 74, 58, .18);
}

@media (max-width: 560px) {
  .target-category-nav {
    margin-bottom: 10px;
    padding-bottom: 3px;
  }

  .target-category-track {
    gap: 7px;
  }

  .target-category-button {
    min-height: 36px;
    padding: 0 13px;
    font-size: 11px;
  }

  .post-target-category-popover {
    right: calc(100% + 5px);
    min-width: 132px;
  }
}