/* ==========================================================================
   THRESHOLD — site stilleri
   --------------------------------------------------------------------------
     01  Header + mobil menu
     02  Hero
     03  Kayan yazi seridi
     04  Sayfa basligi
     05  Rakamlar
     06  Ders kartlari
     07  Program tablosu
     08  Uyelik fiyat kartlari
     09  Kocluk / monogram
     10  Yorumlar
     11  SSS
     12  Form
     13  CTA
     14  Footer
     15  Ortak
   ========================================================================== */

/* Tum basliklar buyuk harf — Anton zaten oyle tasarlanmis */
h1, h2, h3, .header__logo, .btn { text-transform: uppercase; }

/* ==========================================================================
   01  HEADER
   ========================================================================== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  padding-block: var(--s-4);
  border-bottom: 1px solid transparent;
  transition:
    padding-block var(--dur-base) var(--ease-out-quart),
    background-color var(--dur-base) var(--ease-out-quart),
    border-color var(--dur-base) var(--ease-out-quart);
}

.header.is-scrolled {
  padding-block: var(--s-2);
  background-color: color-mix(in srgb, var(--c-bg) 94%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--c-border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  max-width: var(--width-wide);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.header__logo {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
}

.header__logo span { color: var(--c-accent); }

.header__nav {
  display: flex;
  gap: var(--s-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.header__cta { padding: var(--s-3) var(--s-5); }

.burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  color: inherit;
}

.burger span {
  position: absolute;
  left: 11px;
  width: 22px; height: 2px;
  background-color: currentColor;
  transition: transform var(--dur-base) var(--ease-in-out-quart);
}

.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
.burger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 61.99rem) {
  .header__nav, .header__cta { display: none; }
  .burger { display: block; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-8) var(--space-gutter);
  background-color: var(--c-accent);
  color: var(--c-inverse-text);
  transform: translateX(100%);
}

.mobile-menu[hidden] { display: none; }

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.mobile-menu__nav a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.mobile-menu__nav span {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  opacity: 0.55;
}

/* Lime zeminde aktif oge accent olamaz — siyah alti cizili olsun */
.mobile-menu [aria-current="page"] { color: var(--c-inverse-text); }

.mobile-menu__foot {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-6);
  border-top: 2px solid rgb(11 11 12 / 0.25);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

/* ==========================================================================
   02  HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: var(--s-10) var(--space-gutter) var(--s-7);
  overflow: hidden;
}

.hero__media { position: absolute; inset: -8% 0 -8% 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(11 11 12 / 0.94) 0%,
    rgb(11 11 12 / 0.6) 45%,
    rgb(11 11 12 / 0.4) 100%
  );
}

.hero__inner {
  width: 100%;
  max-width: var(--width-wide);
  margin-inline: auto;
}

.hero__label {
  display: inline-block;
  margin-bottom: var(--s-5);
  padding: var(--s-2) var(--s-4);
  background-color: var(--c-accent);
  color: var(--c-inverse-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.hero__title em { font-style: normal; color: var(--c-accent); }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 2px solid var(--c-accent);
}

.hero__text {
  max-width: 44ch;
  font-size: var(--fs-md);
  color: rgb(245 245 243 / 0.82);
}

/* ==========================================================================
   03  KAYAN YAZI SERIDI
   ========================================================================== */
.marquee {
  overflow: hidden;
  padding-block: var(--s-4);
  background-color: var(--c-accent);
  color: var(--c-inverse-text);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  width: max-content;
  white-space: nowrap;
}

.marquee__track span {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.marquee__track i { font-style: normal; font-size: var(--fs-sm); opacity: 0.5; }

/* ==========================================================================
   04  SAYFA BASLIGI
   ========================================================================== */
.page-head {
  padding-block: calc(var(--s-10) + var(--s-6)) var(--s-8);
  border-bottom: 2px solid var(--c-accent);
}

.page-head__title {
  max-width: 16ch;
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

.page-head__text {
  max-width: 54ch;
  margin-top: var(--s-5);
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.crumbs span { color: var(--c-accent); }

/* ==========================================================================
   05  RAKAMLAR
   ========================================================================== */
.figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-5);
}

@media (min-width: 48rem) {
  .figures { grid-template-columns: repeat(4, 1fr); }
}

.figure {
  padding: var(--s-5);
  background-color: var(--c-surface);
  border-left: 3px solid var(--c-accent);
}

.figure b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.figure span {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* ==========================================================================
   06  DERS KARTLARI
   ========================================================================== */
.classes {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-8);
}

@media (min-width: 44rem) { .classes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .classes--3 { grid-template-columns: repeat(3, 1fr); } }

.klass {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  overflow: hidden;
  background-color: var(--c-surface);
  border-radius: var(--radius-md);
}

.klass__media { position: absolute; inset: 0; z-index: 0; }

.klass__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  transition:
    transform var(--dur-slower) var(--ease-out-expo),
    filter var(--dur-slow) var(--ease-out-quart);
}

/* Hover: gri tondan renge doner + hafif yakinlasir */
.klass:hover .klass__media img,
.klass:focus-within .klass__media img {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1);
}

.klass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(11 11 12 / 0.95) 15%, rgb(11 11 12 / 0.25) 100%);
}

.klass__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: var(--s-6) var(--s-5) var(--s-5);
}

.klass__tag {
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: var(--s-1) var(--s-3);
  background-color: var(--c-accent);
  color: var(--c-inverse-text);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.klass__body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
}

.klass__body p {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: rgb(245 245 243 / 0.75);
}

.klass__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgb(245 245 243 / 0.18);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  list-style: none;
}

/* ==========================================================================
   07  PROGRAM TABLOSU
   ========================================================================== */
.schedule {
  width: 100%;
  margin-top: var(--s-8);
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.schedule caption {
  margin-bottom: var(--s-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-align: left;
}

.schedule th,
.schedule td {
  padding: var(--s-4) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}

.schedule thead th {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  white-space: nowrap;
}

.schedule tbody th {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.schedule td b {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.schedule td span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.schedule tbody tr:hover { background-color: var(--c-surface); }

/* Dar ekranda tabloyu yatay kaydir — hucreleri sikistirmaktan iyidir */
.schedule__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.schedule__wrap table { min-width: 46rem; }

/* ==========================================================================
   08  UYELIK KARTLARI
   ========================================================================== */
.plans {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-8);
  align-items: start;
}

@media (min-width: 56rem) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}

/* One cikan paket — lime cerceve, hafif yukselmis */
.plan--featured {
  border-color: var(--c-accent);
  background-color: var(--c-surface-2);
}

.plan__tag {
  align-self: flex-start;
  margin-bottom: var(--s-4);
  padding: var(--s-1) var(--s-3);
  background-color: var(--c-accent);
  color: var(--c-inverse-text);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.plan h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-border);
}

.plan__price b {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--c-accent);
}

.plan__price span {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.plan__list {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-6);
  font-size: var(--fs-sm);
  list-style: none;
}

.plan__list li {
  display: flex;
  gap: var(--s-3);
  color: var(--c-text-muted);
}

.plan__list li::before {
  content: "—";
  flex: 0 0 auto;
  color: var(--c-accent);
}

.plan__list li.is-off { opacity: 0.45; }
.plan__list li.is-off::before { content: "×"; color: var(--c-text-muted); }

.plan .btn { margin-top: auto; width: 100%; }

/* ==========================================================================
   09  KOCLAR — monogram, portre yok
   ========================================================================== */
.coaches {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-8);
}

@media (min-width: 44rem) { .coaches { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .coaches { grid-template-columns: repeat(4, 1fr); } }

.coach {
  padding: var(--s-6);
  background-color: var(--c-surface);
  border-top: 3px solid var(--c-accent);
}

.coach__mono {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--c-accent);
}

.coach__name {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  text-transform: uppercase;
}

.coach__role {
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.coach__note {
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* ==========================================================================
   10  YORUMLAR
   ========================================================================== */
.quotes {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-8);
}

@media (min-width: 48rem) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6);
  background-color: var(--c-surface);
  border-radius: var(--radius-md);
}

.quote p { font-size: var(--fs-base); line-height: var(--lh-snug); }

.quote cite {
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.quote cite b { display: block; margin-bottom: var(--s-1); color: var(--c-accent); }

/* ==========================================================================
   11  SSS
   ========================================================================== */
.faq { max-width: var(--width-narrow); margin-top: var(--s-8); }
.faq__item { border-bottom: 1px solid var(--c-border); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  padding-block: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  text-align: left;
  text-transform: uppercase;
  color: inherit;
  transition: color var(--dur-fast) var(--ease-out-quart);
}

.faq__q:hover { color: var(--c-accent); }

.faq__icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 2px;
  background-color: var(--c-accent);
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0deg); }

/* Yukseklik animasyonu: height:auto olmaz, 0fr → 1fr olur */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out-expo);
}

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--s-5); color: var(--c-text-muted); }

/* ==========================================================================
   12  FORM
   ========================================================================== */
.contact__grid { display: grid; gap: var(--s-8); }

@media (min-width: 62rem) {
  .contact__grid { grid-template-columns: 1fr 1.15fr; gap: var(--s-9); }
}

.info-block { margin-bottom: var(--s-6); }

.info-block dt {
  margin-bottom: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent);
}

.info-block dd { font-size: var(--fs-base); line-height: var(--lh-snug); }

.form {
  padding: var(--s-6);
  background-color: var(--c-surface);
  border-radius: var(--radius-md);
}

.form__grid { display: grid; gap: var(--s-5); }

@media (min-width: 40rem) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .form__field--full { grid-column: 1 / -1; }
}

.form__field { display: flex; flex-direction: column; gap: var(--s-2); }

.form__field label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.form__field input,
.form__field select,
.form__field textarea {
  padding: var(--s-3) var(--s-4);
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
}

.form__field textarea { resize: vertical; min-height: 7rem; }

.form .btn { margin-top: var(--s-6); width: 100%; }

.form__note {
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.form__success {
  display: none;
  gap: var(--s-4);
  padding: var(--s-6);
  background-color: var(--c-accent-soft);
  border-left: 3px solid var(--c-accent);
  font-size: var(--fs-sm);
}

.form__success.is-visible { display: flex; }
.form__success svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--c-accent); }

/* ==========================================================================
   13  CTA
   ========================================================================== */
.cta {
  position: relative;
  padding-block: var(--space-section);
  overflow: hidden;
  text-align: center;
}

.cta__media { position: absolute; inset: -8% 0 -8% 0; z-index: -2; }
.cta__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(11 11 12 / 0.86);
}

.cta h2 {
  max-width: 16ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

.cta p { max-width: 46ch; margin: var(--s-5) auto 0; color: var(--c-text-muted); }
.cta .cluster { margin-top: var(--s-7); }

/* ==========================================================================
   14  FOOTER
   ========================================================================== */
.footer {
  padding-block: var(--s-9) var(--s-6);
  border-top: 2px solid var(--c-accent);
}

.footer__top {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--c-border);
}

@media (min-width: 48rem) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr; } }

.footer__mark {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  text-transform: uppercase;
}

.footer__about {
  max-width: 36ch;
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.footer h3 {
  margin-bottom: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  list-style: none;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  margin-top: var(--s-6);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* ==========================================================================
   15  ORTAK
   ========================================================================== */
.section--light {
  background-color: var(--c-inverse-bg);
  color: var(--c-inverse-text);
  --c-text: var(--c-inverse-text);
  --c-text-muted: var(--c-inverse-muted);
  --c-border: rgb(11 11 12 / 0.14);
  --c-surface: #FFFFFF;
}

.section--light .t-label,
.section--light .info-block dt,
.section--light .footer h3 { color: var(--c-inverse-text); }

.section--light .btn--ghost { border-color: rgb(11 11 12 / 0.25); }
.section--light .btn--ghost:hover {
  background-color: var(--c-inverse-text);
  color: var(--c-inverse-bg);
}

.section__head { max-width: var(--width-narrow); }
.section__head .t-label { margin-bottom: var(--s-4); }

.section__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

.section__head p {
  margin-top: var(--s-5);
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

.t-label {
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}

.btn {
  border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}

.btn--primary { background-color: var(--c-accent); color: var(--c-inverse-text); }
.btn--primary:hover { background-color: var(--c-accent-hover); }
.btn--ghost { border: 1px solid var(--c-border); color: var(--c-text); }
.btn--ghost:hover { background-color: var(--c-text); color: var(--c-bg); }

.js .reveal-clip { clip-path: inset(0 0 100% 0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal-clip { clip-path: none !important; }
}

.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x5 { aspect-ratio: 4 / 5; }

/* ==========================================================================
   DIL DEGISTIRICI
   --------------------------------------------------------------------------
   Gercek bir baglanti — JS'siz calisir, arama motoru gorur.
   Her sayfa Turkce karsiligina isaret eder (about.html → tr/hakkimizda.html),
   bu yuzden href sayfaya gore degisir; test bu ogeyi karsilastirma disi tutar.
   ========================================================================== */
.lang-switch {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart);
}

.lang-switch:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

@media (max-width: 61.99rem) {
  .header .lang-switch { display: none; }
}

.mobile-menu .lang-switch {
  align-self: flex-start;
  margin-top: var(--s-4);
}