/* ==========================================================================
   BRIGHTLINE DENTAL — site stilleri
   --------------------------------------------------------------------------
     01  Header + mobil menu
     02  Hero (ana sayfa)
     03  Sayfa basligi (ic sayfalar)
     04  Guven seridi
     05  Tedavi kartlari
     06  Adim adim surec
     07  Ekip
     08  Yorumlar
     09  SSS akordiyon
     10  Randevu formu
     11  CTA bandi
     12  Footer
     13  Ortak parcalar
   ========================================================================== */

/* ==========================================================================
   01  HEADER
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding-block: var(--s-4);
  background-color: color-mix(in srgb, var(--c-bg) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    padding-block var(--dur-base) var(--ease-out-quart),
    border-color var(--dur-base) var(--ease-out-quart);
}

.header.is-scrolled {
  padding-block: var(--s-2);
  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 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}

.header__logo svg {
  width: 26px;
  height: 26px;
  color: var(--c-accent);
}

.header__nav {
  display: flex;
  gap: var(--s-6);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

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

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

.burger span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 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; }
}

/* Mobil tam ekran menu */
.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-inverse-bg);
  color: var(--c-inverse-text);
  transform: translateX(100%);
}

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

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

.mobile-menu__nav a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.mobile-menu__nav span {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}

.mobile-menu__foot {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-6);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--fs-sm);
  color: var(--c-inverse-muted);
}

/* Koyu menude aktif oge accent olur, base.css'teki kural yeterli */

/* ==========================================================================
   02  HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-block: calc(var(--s-10) + var(--s-8)) var(--space-section);
  overflow: hidden;
}

/* Sag ustte yumusak mint hale — sayfaya derinlik verir, gorsel maliyeti sifir */
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-accent-soft) 0%, transparent 70%);
  z-index: -1;
}

.hero__grid {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}

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

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  line-height: 1;
  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__text {
  max-width: 46ch;
  margin-top: var(--s-6);
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-7);
}

/* Hasta memnuniyeti rozeti */
.hero__proof {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}

.hero__faces {
  display: flex;
}

.hero__faces img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--c-bg);
}

.hero__faces img + img { margin-left: -12px; }

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

.hero__proof b {
  display: block;
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

@media (max-width: 61.99rem) {
  .hero__media { aspect-ratio: 3 / 2; }
}

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

/* Gorselin uzerine oturan kucuk bilgi karti */
.hero__badge {
  position: absolute;
  left: var(--s-5);
  bottom: var(--s-5);
  right: var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--c-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

.hero__badge svg {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  color: var(--c-accent);
}

.hero__badge p {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--c-text-muted);
}

.hero__badge b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

/* ==========================================================================
   03  SAYFA BASLIGI — ic sayfalarin ustu
   ========================================================================== */
.page-head {
  position: relative;
  padding-block: calc(var(--s-10) + var(--s-7)) var(--s-9);
  background-color: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
}

.page-head::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 55%;
  width: 50vw;
  height: 50vw;
  max-width: 560px;
  max-height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-accent-soft) 0%, transparent 70%);
  z-index: 0;
}

.page-head > * { position: relative; z-index: 1; }

.page-head__title {
  max-width: 18ch;
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

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

/* Kirinti navigasyonu */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.crumbs span { opacity: 0.5; }

/* ==========================================================================
   04  GUVEN SERIDI
   ========================================================================== */
.trust {
  padding-block: var(--s-7);
  background-color: var(--c-inverse-bg);
  color: var(--c-inverse-text);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-5);
}

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

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

.trust__item span {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--c-inverse-muted);
}

/* ==========================================================================
   05  TEDAVI KARTLARI
   ========================================================================== */
.treatments__grid {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-8);
}

@media (min-width: 40rem) {
  .treatments__grid { grid-template-columns: repeat(2, 1fr); }
}

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

.treatment {
  display: flex;
  flex-direction: column;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    transform var(--dur-base) var(--ease-out-quart),
    box-shadow var(--dur-base) var(--ease-out-quart);
}

.treatment:hover,
.treatment:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.treatment__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.treatment__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

/* Hover-cover: mint perde soldan saga acilir */
.treatment__cover {
  position: absolute;
  inset: 0;
  background-color: var(--c-accent);
  mix-blend-mode: multiply;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-slow) var(--ease-out-expo);
}

.treatment:hover .treatment__media img,
.treatment:focus-within .treatment__media img { transform: scale(1.06); }

.treatment:hover .treatment__cover,
.treatment:focus-within .treatment__cover { clip-path: inset(0 0 0 0); }

.treatment__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5) var(--s-5);
}

.treatment__body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
}

.treatment__body p {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.treatment__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}

.treatment__foot b {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--c-accent);
}

.treatment__foot span { color: var(--c-text-muted); }

/* ==========================================================================
   06  ADIM ADIM SUREC
   ========================================================================== */
.steps {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-8);
  counter-reset: step;
}

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

.step {
  position: relative;
  padding-top: var(--s-6);
  border-top: 2px solid var(--c-border);
  counter-increment: step;
}

.step::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  color: var(--c-accent);
}

.step h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  margin-bottom: var(--s-2);
}

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

/* ==========================================================================
   07  EKIP
   ========================================================================== */
.team__grid {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-8);
}

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

.member__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--c-accent-soft);
}

.member__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out-expo);
}

.member:hover .member__media img { transform: scale(1.05); }

/* Biyografi alttan kayarak girer */
.member__bio {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-7) var(--s-4) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--c-inverse-text);
  background: linear-gradient(to top, rgb(15 36 43 / 0.92), transparent);
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    opacity var(--dur-base) var(--ease-out-expo);
}

.member:hover .member__bio,
.member:focus-within .member__bio {
  transform: translateY(0);
  opacity: 1;
}

@media (hover: none) {
  .member__bio { position: static; transform: none; opacity: 1;
                 background: none; color: var(--c-text-muted); padding: var(--s-3) 0 0; }
}

.member__name {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

.member__role {
  font-size: var(--fs-sm);
  color: var(--c-accent);
}

/* ==========================================================================
   08  YORUMLAR
   ========================================================================== */
.reviews { background-color: var(--c-surface); }

.reviews__grid {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-8);
}

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

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

.review__stars {
  display: flex;
  gap: 2px;
  color: var(--c-accent);
}

.review__stars svg { width: 16px; height: 16px; }

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

/* Not: burada <footer> DEGIL div kullaniyoruz. Sayfada ikinci bir <footer>
   olursa site altbilgisiyle karisir; testteki "footer her sayfada ayni mi"
   kontrolu de yanlis elemani yakalar. */
.review__by {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.review__by img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.review__by span {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.review__by b {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

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

.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);
  font-weight: var(--fw-medium);
  text-align: left;
  color: inherit;
  transition: color var(--dur-fast) var(--ease-out-quart);
}

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

/* Arti isareti — acikken eksiye doner */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 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 icin grid-template-rows hilesi:
   height:auto animasyonu calismaz, 0fr → 1fr calisir. */
.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);
  font-size: var(--fs-base);
  color: var(--c-text-muted);
}

/* ==========================================================================
   10  RANDEVU FORMU
   ========================================================================== */
.booking__grid {
  display: grid;
  gap: var(--s-8);
}

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

.booking__aside {
  display: grid;
  gap: var(--s-6);
  align-content: start;
}

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

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

.form {
  padding: var(--s-6);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  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-sm);
  font-weight: var(--fw-medium);
}

.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);
  font-size: var(--fs-base);
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    box-shadow 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);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

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

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

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

/* Gonderim sonrasi mesaj — JS gosterir */
.form__success {
  display: none;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-5);
  border-radius: var(--radius-sm);
  background-color: var(--c-accent-soft);
  font-size: var(--fs-sm);
}

.form__success.is-visible { display: flex; }

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

/* ==========================================================================
   11  CTA BANDI
   ========================================================================== */
.cta {
  position: relative;
  padding-block: var(--space-section);
  background-color: var(--c-inverse-bg);
  color: var(--c-inverse-text);
  overflow: hidden;
  text-align: center;
}

.cta::before {
  content: "";
  position: absolute;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  height: 90vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(18 165 148 / 0.22) 0%, transparent 65%);
}

.cta > * { position: relative; }

.cta h2 {
  max-width: 20ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

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

.cta .cluster { margin-top: var(--s-7); }

.cta .btn--ghost {
  border-color: rgb(246 249 249 / 0.35);
  color: var(--c-inverse-text);
}

.cta .btn--ghost:hover {
  background-color: var(--c-inverse-text);
  color: var(--c-inverse-bg);
}

/* ==========================================================================
   12  FOOTER
   ========================================================================== */
.footer {
  padding-block: var(--s-9) var(--s-6);
  background-color: var(--c-surface);
  border-top: 1px solid var(--c-border);
}

.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.4fr 1fr 1fr; }
}

.footer__mark {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.footer__mark svg { width: 26px; height: 26px; color: var(--c-accent); }

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

.footer h3 {
  margin-bottom: var(--s-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  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);
}

/* ==========================================================================
   13  ORTAK PARCALAR
   ========================================================================== */

/* Bolum ustu etiket + baslik */
.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);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

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

/* Rozet */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-full);
  background-color: var(--c-accent-soft);
  color: var(--c-accent-hover);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.badge svg { width: 14px; height: 14px; }

/* Gorsel asagidan yukari acilir */
.js .reveal-clip { clip-path: inset(0 0 100% 0); }

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

/* Buton — token'lardaki yumusak koseye uy */
.btn { border-radius: var(--radius-full); text-transform: none;
       letter-spacing: var(--ls-normal); font-size: var(--fs-sm); }

/* Kucuk yardimcilar — satir ici style yazmamak icin */
.section--surface { background-color: var(--c-surface); }
.mt-7 { margin-top: var(--s-7); }

/* Yuvarlak koseli gorsel kutulari */
.media--rounded { border-radius: var(--radius-lg); }
.media--rounded-sm { border-radius: var(--radius-md); }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--3x2 { aspect-ratio: 3 / 2; }

/* ==========================================================================
   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);
}