/* =========================================================
   Ondokuz Digital — Ana stil dosyası
   ---------------------------------------------------------
   Marka dili: siyah + beyaz + sıcak sarı/turuncu ("dokuz")

   1. Tokenlar
   2. Reset & temel
   3. Doku & sayfa ızgarası
   4. Ortak bileşenler
   5. Header & navigasyon
   6. Hero & 19 monogram
   7. Hakkımızda & atelier kartı
   8. Hizmetler
   9. Neden Biz
   10. Referanslar
   11. SSS
   12. CTA
   13. Footer
   14. Scroll animasyonları
   15. Responsive
   16. Hareket azaltma
   17. Ortak iç sayfa bileşenleri
   18. Hakkımızda sayfası
   19. Hizmetler sayfası
   20. Referanslar sayfası
   21. İletişim sayfası
   22. Yasal ve destek sayfaları
   23. Sosyal bağlantılar
   (17–23, 16'dan önce yer alır; hareket azaltma her şeyi kapsar)
   ========================================================= */

/* ---------- 1. Tokenlar ---------- */
/*
  Koyu tema varsayılandır. Footer açık temada da koyu kalır; bu yüzden
  koyu token seti footer'a da ayrıca uygulanır.
*/
:root,
html[data-theme="dark"],
html[data-theme="light"] .site-footer {
  color-scheme: dark;

  /* Zemin */
  --bg-main: #000000;
  --bg-soft: #070707;
  --bg-deep: #030303;
  --bg-card: #0D0D0D;
  --bg-card-hover: #141414;
  --bg-overlay: rgba(0, 0, 0, 0.82);
  --bg-figure: #070707;

  /* Metin */
  --text-main: #F7F7F3;
  --text-muted: #A8A8A2; /* koyu zeminde okunaklılık için hafif açıldı */
  --text-soft: #D8D8D0;
  --text-faint: rgba(155, 155, 155, 0.6);
  --text-on-brand: #0A0A0A;

  /* Marka renkleri */
  --brand-yellow: #FFC34D;
  --brand-orange: #F5A623;
  --brand-gold: #FFB83D;
  --brand-deep-orange: #FF8A1F;
  --brand-rgb: 255, 195, 77; /* saydam sıcak ışık için */
  --accent-text: #FFC34D; /* küçük metinlerde okunaklı vurgu rengi */
  --accent-quiet: #E9C27A; /* bölüm başlıklarındaki sade, düz vurgu */

  /* Çizgiler: --ink-rgb temaya göre beyaz ya da siyah çizgi rengidir */
  --ink-rgb: 255, 255, 255;
  --border-soft: rgba(255, 255, 255, 0.12);
  --border-faint: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-warm: rgba(255, 195, 77, 0.35);
  --line-faint: rgba(255, 255, 255, 0.03);

  /* Gradientler */
  --gradient-brand: linear-gradient(135deg, #FFC34D 0%, #F5A623 55%, #FF8A1F 100%);
  --gradient-soft: linear-gradient(135deg, rgba(255, 195, 77, 0.16), rgba(245, 166, 35, 0.08));

  /* Doku */
  --grain-opacity: 0.07;
}

/* Açık tema: sıcak krem zemin, koyu metin, sarı/turuncu vurgu */
html[data-theme="light"] {
  color-scheme: light;

  /* Zemin */
  --bg-main: #F7F3EA;
  --bg-soft: #EFE7D8;
  --bg-deep: #E7DDCB;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFF8EB;
  --bg-overlay: rgba(247, 243, 234, 0.86);
  --bg-figure: #FBF8F1;

  /* Metin */
  --text-main: #0A0A0A;
  --text-muted: #5F5A51; /* krem zeminde okunaklılık için hafif koyulaştı */
  --text-soft: #2A2926;
  --text-faint: rgba(111, 106, 97, 0.75);
  --text-on-brand: #0A0A0A;

  /* Marka renkleri */
  --brand-yellow: #F5A623;
  --brand-orange: #E88E16;
  --brand-gold: #D98212;
  --brand-deep-orange: #C76F0D;
  --brand-rgb: 232, 142, 22;
  --accent-text: #B2620A; /* krem zeminde yeterli kontrast için koyulaştırılmış turuncu */
  --accent-quiet: #A2600F;

  /* Çizgiler */
  --ink-rgb: 10, 10, 10;
  --border-soft: rgba(0, 0, 0, 0.12);
  --border-faint: rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.24);
  --border-warm: rgba(232, 142, 22, 0.35);
  --line-faint: rgba(0, 0, 0, 0.045);

  /* Gradientler */
  --gradient-brand: linear-gradient(135deg, #F5A623 0%, #E88E16 55%, #C76F0D 100%);
  --gradient-soft: linear-gradient(135deg, rgba(245, 166, 35, 0.18), rgba(232, 142, 22, 0.08));

  /* Doku */
  --grain-opacity: 0.1;
}

/* Tema dışı sabit tokenlar */
:root {
  /* Tipografi */
  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Ölçüler */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-space: 110px;
  --header-h: 80px;
  --radius: 4px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Reset & temel ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, p, figure {
  margin: 0;
}

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
}

::selection {
  background: var(--brand-yellow);
  color: var(--text-on-brand);
}

:focus-visible {
  outline: 1px solid var(--brand-yellow);
  outline-offset: 4px;
}

/* ---------- 3. Doku & sayfa ızgarası ---------- */
/* İnce film greni */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Açık temada gren kremi grileştirmesin; kâğıt dokusu gibi otursun */
html[data-theme="light"] body::after {
  mix-blend-mode: multiply;
}

/* Container genişliğinde 4 kolonlu yardımcı çizgiler */
.page-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.page-grid span {
  position: absolute;
  inset: 0;
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  border-inline: 1px solid var(--line-faint);
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line-faint) calc(25% - 1px) 25%);
}

/* ---------- 4. Ortak bileşenler ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--text-main);
  color: var(--bg-main);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Logo */
.site-logo {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: none;
  align-items: center;
}

.site-logo img {
  width: 200px;
  height: auto;
}

/* Açık temada beyaz "on/digital" yazısı okunabilsin diye logo koyu kapsül içinde durur.
   Dikey padding az tutulur; kapsül tema butonuyla aynı (~42px) yükseklikte kalır. */
html[data-theme="light"] .site-header .site-logo {
  padding: 7px 16px;
  border-radius: 999px;
  background: #000000;
}

/* Tema değişiminde yumuşak renk geçişi (yalnızca butona basıldığı an aktif) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 0.4s var(--ease),
    border-color 0.4s var(--ease),
    color 0.4s var(--ease),
    fill 0.4s var(--ease),
    stroke 0.4s var(--ease) !important;
}

/* Başlıklardaki vurgu: "dokuz" renginden gelen sıcak ton.
   Bölüm başlıklarında sade ve düz renk; yalnızca hero'da güçlü gradient. */
.text-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
  line-height: 1;
  letter-spacing: -0.015em;
  padding-right: 0.04em;
  color: var(--accent-quiet);
}

.hero__title .text-accent,
.page-hero__title .text-accent {
  font-weight: 300;
  letter-spacing: -0.02em;
  padding-right: 0.06em;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Küçük mono etiketler */
.label,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.label__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-yellow);
}

.eyebrow {
  margin-bottom: 28px;
}

.eyebrow__num {
  color: var(--accent-text);
}

.eyebrow__num::after {
  content: "/";
  margin-left: 12px;
  color: var(--text-faint);
}

/* Butonlar */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}

/* Belirgin buton (CTA): yalnızca boyut ve padding ile güçlenir, glow yok */
.btn--lg {
  gap: 14px;
  min-height: 64px;
  padding: 0 36px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.btn--lg .btn__icon {
  width: 18px;
  height: 18px;
}

.btn--sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.88rem;
}

.btn__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--ease);
}

.btn:hover .btn__icon {
  transform: translate(2px, -2px);
}

/* Ana buton: beyaz zemin + siyah yazı; hover'da marka rengi aşağıdan dolar */
.btn--primary {
  background: var(--text-main);
  color: var(--bg-main);
}

.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient-brand);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}

.btn--primary:hover {
  color: var(--text-on-brand);
}

.btn--primary:hover::before {
  transform: translateY(0);
}

/* İkincil buton: siyah zemin + ince border + beyaz yazı */
.btn--ghost {
  border: 1px solid var(--border-strong);
  background: var(--bg-main);
  color: var(--text-main);
}

.btn--ghost:hover {
  border-color: var(--border-warm);
  color: var(--accent-text);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-strong);
  font-size: 0.95rem;
  font-weight: 500;
  transition: border-color 0.3s, color 0.3s, gap 0.4s var(--ease);
}

.text-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.text-link:hover {
  gap: 14px;
  border-color: var(--accent-text);
  color: var(--accent-text);
}

/* İletişim bilgisi vurgusu: e-postada "@ondokuzdigital.com", telefonda son dört hane.
   --accent-text her iki temada okunaklı sıcak tondur (açık temada koyulaştırılmış turuncu). */
.contact-accent {
  color: var(--accent-text);
  font-weight: 600;
}

/* Bölümler — hero hariç hiçbir bölüm min-height kullanmaz */
.section {
  position: relative;
  padding-block: var(--section-space);
}

/* Her bölüm ince bir çizgiyle açılır */
.section-head,
.about__inner,
.faq__inner {
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
}

.section-head {
  margin-bottom: clamp(44px, 5vw, 64px);
}

.section-head--split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: end;
  gap: 32px 64px;
}

.section-head--split > :last-child {
  justify-self: end;
}

.section-title {
  max-width: 880px;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
}

.section-text {
  max-width: 560px;
  margin-top: 24px;
  font-size: clamp(1rem, 1.2vw, 1.075rem);
  color: var(--text-muted);
}

.section-head--split .section-text {
  margin-top: 0;
}

/* ---------- 5. Header & navigasyon ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  transition: height 0.4s var(--ease);
}

/* Blur pseudo-element'te: header üzerinde backdrop-filter, fixed mobil menüyü kırpmasın */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  border-bottom: 1px solid var(--border-faint);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.site-header.is-scrolled {
  height: 68px;
}

.site-header.is-scrolled::before {
  opacity: 1;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.main-nav {
  display: flex;
  align-items: center;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 36px);
}

.main-nav__link {
  position: relative;
  display: block;
  padding-block: 6px;
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: color 0.3s;
}

.main-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--brand-yellow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}

.main-nav__link:hover,
.main-nav__link.is-active {
  color: var(--text-main);
}

.main-nav__link:hover::after,
.main-nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.main-nav__cta {
  display: none;
}

/* Sağ taraf: tema butonu + CTA + hamburger */
.site-header__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

/* Tema butonu */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.3s, color 0.3s;
}

html[data-theme="light"] .theme-toggle {
  background: var(--bg-card);
}

.theme-toggle:hover {
  border-color: var(--border-warm);
  color: var(--accent-text);
}

.theme-toggle__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Koyu temada güneş (açık temaya geç), açık temada ay (koyu temaya geç) */
.theme-toggle__icon--moon,
html[data-theme="light"] .theme-toggle__icon--sun {
  display: none;
}

html[data-theme="light"] .theme-toggle__icon--moon {
  display: block;
}

.nav-toggle {
  position: relative;
  z-index: 2;
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 46px;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}

.nav-toggle__bar {
  display: block;
  height: 1.5px;
  background: var(--text-main);
  transition: transform 0.4s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
  transform: translateY(4.25px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
  transform: translateY(-4.25px) rotate(-45deg);
}

/* ---------- 6. Hero & 19 monogram ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 72px));
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.hero__content {
  min-width: 0;
}

.hero__title {
  margin-top: 28px;
  font-size: clamp(2.4rem, 5.8vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.hero__text {
  max-width: 540px;
  margin-top: 32px;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  color: var(--text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(56px, 7vw, 88px);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__meta li {
  padding: 20px 0;
}

.hero__meta-num {
  margin-right: 10px;
  color: var(--accent-text);
}

.hero__meta-scroll {
  text-align: right;
}

.hero__meta-scroll a {
  transition: color 0.3s;
}

.hero__meta-scroll a:hover {
  color: var(--text-main);
}

/* Monogram */
.monogram {
  width: 100%;
  max-width: 500px;
  justify-self: end;
}

.monogram__frame {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 60% 45%, rgba(var(--brand-rgb), 0.05), transparent 50%),
    var(--bg-figure);
}

.monogram__svg {
  width: 100%;
  height: 100%;
}

.monogram__stop--yellow { stop-color: var(--brand-yellow); }
.monogram__stop--orange { stop-color: var(--brand-orange); }
.monogram__stop--deep { stop-color: var(--brand-deep-orange); }

.monogram__grid-line {
  stroke: rgba(var(--ink-rgb), 0.04);
}

.monogram__inner {
  stroke: var(--border-faint);
}

.monogram__guides path {
  stroke: rgba(var(--ink-rgb), 0.1);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.monogram__note {
  fill: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.monogram__note--warm {
  fill: var(--accent-text);
}

.monogram__one {
  stroke: var(--text-main);
}

/* Çizgiler varsayılan olarak görünür; animasyon yalnızca ekrana girişte oynar */
.monogram__mark > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.monogram.reveal-in .monogram__mark > * {
  animation: mono-draw 2s var(--ease) 0.3s both;
}

.monogram.reveal-in .monogram__mark > :nth-child(2) { animation-delay: 0.6s; }
.monogram.reveal-in .monogram__mark > :nth-child(3) { animation-delay: 0.9s; }

@keyframes mono-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* "9" etrafında çok hafif sıcak parıltı — yavaşça nefes alır */
.monogram__glow {
  opacity: 0.2;
  animation: mono-breathe 8s ease-in-out infinite;
}

@keyframes mono-breathe {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.28; }
}

.monogram__nodes circle {
  fill: var(--bg-figure);
  stroke: rgba(var(--ink-rgb), 0.7);
  stroke-width: 1.2;
}

.monogram__nodes circle.is-warm {
  stroke: var(--brand-yellow);
}

.monogram__cross {
  stroke: rgba(var(--ink-rgb), 0.6);
  stroke-width: 1.2;
}

.monogram__measure path {
  stroke: rgba(var(--ink-rgb), 0.3);
  stroke-width: 1;
}

.monogram__measure path.is-warm {
  stroke: var(--border-warm);
}

.monogram__measure text {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.monogram__measure text.is-warm {
  fill: var(--accent-text);
}

/* Köşe kayıt işaretleri */
.monogram__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid rgba(var(--ink-rgb), 0.45);
}

.monogram__corner--tl { top: -8px; left: -8px; border-top-width: 1px; border-left-width: 1px; }
.monogram__corner--tr { top: -8px; right: -8px; border-top-width: 1px; border-right-width: 1px; }
.monogram__corner--bl { bottom: -8px; left: -8px; border-bottom-width: 1px; border-left-width: 1px; }
.monogram__corner--br { bottom: -8px; right: -8px; border-bottom-width: 1px; border-right-width: 1px; border-color: var(--accent-text); }

.monogram__caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- 7. Hakkımızda & atelier kartı ---------- */
.about__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
  gap: clamp(48px, 7vw, 112px);
}

.about__action {
  margin-top: 40px;
}

.atelier-card {
  position: relative;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.atelier-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 72px;
  height: 2px;
  background: var(--gradient-brand);
}

.atelier-card__head,
.atelier-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.atelier-card__head {
  border-bottom: 1px solid var(--border-soft);
}

.atelier-card__foot {
  border-top: 1px solid var(--border-soft);
}

.atelier-card__foot em {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
}

.atelier-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.atelier-card__stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 168px;
  padding: 28px 24px;
}

.atelier-card__stat:nth-child(odd) {
  border-right: 1px solid var(--border-soft);
}

.atelier-card__stat:nth-child(-n + 2) {
  border-bottom: 1px solid var(--border-soft);
}

.atelier-card__value {
  font-size: clamp(2.8rem, 5vw, 4.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.05em;
}

.atelier-card__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.atelier-card__stat--accent {
  background: var(--gradient-soft);
}

.atelier-card__stat--accent .atelier-card__value {
  font-weight: 400;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.atelier-card__stat--accent .atelier-card__label {
  color: var(--accent-text);
}

/* ---------- 8. Hizmetler ---------- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 32px 30px 36px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}

/* Küçük sarı/turuncu vurgu çizgisi */
.service-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 29px;
  width: 28px;
  height: 2px;
  background: var(--gradient-brand);
  transition: width 0.5s var(--ease);
}

.service-card:hover {
  border-color: var(--border-warm);
  background: var(--bg-card-hover);
}

.service-card:hover::before {
  width: 56px;
}

.service-card__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  transition: color 0.4s;
}

.service-card:hover .service-card__num {
  color: var(--accent-text);
}

.service-card__title {
  margin-top: auto;
  padding-top: 56px;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
}

.service-card__text {
  max-width: 36ch;
  margin-top: 14px;
  font-size: 1.025rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---------- 9. Neden Biz ---------- */
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
}

.why-card {
  padding-top: 28px;
  border-top: 1px solid var(--border-strong);
}

.why-card__index {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--accent-text);
}

.why-card__title {
  margin-top: 36px;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
}

.why-card__text {
  margin-top: 16px;
  color: var(--text-muted);
}

/* ---------- 10. Referanslar ---------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
}

.logo-grid__item {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 24px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  transition: background-color 0.4s var(--ease);
}

.logo-grid__item:hover {
  background: var(--bg-card);
}

.logo-grid__item img {
  max-height: 44px;
  width: auto;
  filter: grayscale(1) brightness(1.8);
  opacity: 0.55;
  transition: opacity 0.4s;
}

html[data-theme="light"] .logo-grid__item img {
  filter: grayscale(1);
}

.logo-grid__item:hover img {
  opacity: 0.95;
}

/* Gerçek logolar gelene kadar: bilinçli "logo yuvası" görünümü */
.logo-grid__item.is-missing,
.logo-grid__item--placeholder {
  position: relative;
  background-image: repeating-linear-gradient(135deg, transparent 0 10px, var(--line-faint) 10px 11px);
}

.logo-grid__item.is-missing:hover,
.logo-grid__item--placeholder:hover {
  background-color: var(--bg-card);
}

/* Sol üst köşe işareti */
.logo-grid__item.is-missing::before,
.logo-grid__item--placeholder::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--border-strong);
  border-left: 1px solid var(--border-strong);
}

.logo-grid__fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-soft);
  opacity: 0.75;
  transition: opacity 0.4s;
}

.logo-grid__fallback::after {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--brand-yellow);
  transition: width 0.5s var(--ease);
}

.logo-grid__item:hover .logo-grid__fallback {
  opacity: 1;
}

.logo-grid__item:hover .logo-grid__fallback::after {
  width: 40px;
}

.logo-grid__item.is-missing img { display: none; }
.logo-grid__item.is-missing .logo-grid__fallback,
.logo-grid__item--placeholder .logo-grid__fallback { display: flex; }

.references__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 28px;
}

.references__note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.references__note-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-yellow);
}

/* ---------- 11. SSS ---------- */
.faq__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: start;
  gap: clamp(48px, 7vw, 112px);
}

.faq__intro {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

.faq__action {
  margin-top: 36px;
}

.accordion__item {
  border-bottom: 1px solid var(--border-soft);
}

.accordion__item:first-child {
  border-top: 1px solid var(--border-soft);
}

.accordion__heading {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}

.accordion__trigger {
  display: grid;
  grid-template-columns: 48px 1fr 28px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 24px 0;
  text-align: left;
}

.accordion__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-faint);
  transition: color 0.4s;
}

.accordion__question {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--text-soft);
  transition: color 0.4s;
}

.accordion__trigger:hover .accordion__question,
.accordion__item.is-open .accordion__question {
  color: var(--text-main);
}

.accordion__item.is-open .accordion__num {
  color: var(--accent-text);
}

.accordion__icon {
  position: relative;
  width: 28px;
  height: 28px;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  margin-left: -7px;
  background: currentColor;
  transition: transform 0.5s var(--ease), background-color 0.4s;
}

.accordion__icon::after {
  transform: rotate(90deg);
}

.accordion__item.is-open .accordion__icon::before,
.accordion__item.is-open .accordion__icon::after {
  background: var(--brand-yellow);
}

.accordion__item.is-open .accordion__icon::after {
  transform: rotate(0deg);
}

/* Yükseklik animasyonu: grid-template-rows 0fr -> 1fr */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.5s var(--ease), visibility 0s linear 0.5s;
}

.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.5s var(--ease), visibility 0s;
}

.accordion__content {
  overflow: hidden;
}

/* Cevaplar: sorudan bir ton yumuşak ama rahat okunur kontrast ve satır aralığı */
.accordion__content p {
  max-width: 62ch;
  padding: 2px 36px 30px 56px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-soft);
  opacity: 0.82;
}

/* ---------- 12. CTA ---------- */
.cta__panel {
  position: relative;
  padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 72px);
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(ellipse 55% 65% at 100% 100%, rgba(var(--brand-rgb), 0.08), transparent 70%),
    var(--bg-soft);
}

/* Panel içi ince ızgara */
.cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  pointer-events: none;
}

.cta__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid rgba(var(--ink-rgb), 0.45);
}

.cta__corner--tl { top: -8px; left: -8px; border-top-width: 1px; border-left-width: 1px; }
.cta__corner--br { bottom: -8px; right: -8px; border-bottom-width: 1px; border-right-width: 1px; border-color: var(--accent-text); }

.cta__title {
  position: relative;
  max-width: 17ch;
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  letter-spacing: -0.045em;
}

.cta__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: 48px;
}

.cta__text {
  max-width: 480px;
  color: var(--text-muted);
}

/* ---------- 13. Footer ---------- */
.site-footer {
  padding-top: clamp(64px, 8vw, 96px);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-deep);
  color: var(--text-main);
}

.site-footer__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1em 0.28em;
  padding-bottom: clamp(44px, 6vw, 80px);
  border-bottom: 1px solid var(--border-soft);
  font-size: clamp(2.2rem, 8.4vw, 7.6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.site-footer__cta-text {
  transition: color 0.5s var(--ease);
}

/* Marka rengiyle vurgulanan kelime */
.site-footer__cta-accent {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-footer__cta:hover .site-footer__cta-text {
  color: var(--text-muted);
}

.site-footer__cta-emoji {
  display: inline-block;
  transition: transform 0.6s var(--ease);
}

.site-footer__cta:hover .site-footer__cta-emoji {
  transform: rotate(-12deg);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-block: 56px;
}

.site-footer__brand .site-logo img {
  width: 170px;
}

.site-footer__brand p {
  max-width: 320px;
  margin-top: 20px;
  color: var(--text-muted);
}

.site-footer__heading {
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.site-footer__links {
  display: grid;
  gap: 10px;
}

.site-footer__links a {
  color: var(--text-soft);
  transition: color 0.3s;
}

.site-footer__links a:hover {
  color: var(--accent-text);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.back-to-top {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: border-color 0.3s, color 0.3s;
}

.back-to-top svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-to-top:hover {
  border-color: var(--border-warm);
  color: var(--accent-text);
}

/* ---------- 14. Scroll animasyonları ---------- */
/*
  Güvenli reveal: içerik varsayılan olarak HER ZAMAN görünür.
  JS, eleman ekrana girdiği anda .reveal-in ekler ve kısa bir giriş animasyonu oynar.
  JS çalışmazsa, IntersectionObserver yoksa veya sayfa kaydırılmadan görüntülenirse
  hiçbir içerik gizli kalmaz.
*/
.reveal-in {
  animation: reveal-up 0.9s var(--ease) var(--reveal-delay, 0s) both;
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 15. Responsive ---------- */
@media (max-width: 1100px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 1024px) {
  :root {
    --header-h: 72px;
    --section-space: 88px;
  }

  .site-logo img {
    width: 152px;
  }

  html[data-theme="light"] .site-header .site-logo {
    padding: 6px 12px;
  }

  .nav-toggle {
    display: flex;
  }

  .site-header__cta {
    display: none;
  }

  /* Tam ekran mobil menü */
  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
    padding: calc(var(--header-h) + 24px) var(--gutter) 48px;
    background: var(--bg-main);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s var(--ease), visibility 0s;
  }

  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--border-soft);
  }

  .main-nav__list li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }

  .main-nav.is-open .main-nav__list li {
    opacity: 1;
    transform: none;
  }

  .main-nav.is-open .main-nav__list li:nth-child(1) { transition-delay: 0.06s; }
  .main-nav.is-open .main-nav__list li:nth-child(2) { transition-delay: 0.1s; }
  .main-nav.is-open .main-nav__list li:nth-child(3) { transition-delay: 0.14s; }
  .main-nav.is-open .main-nav__list li:nth-child(4) { transition-delay: 0.18s; }
  .main-nav.is-open .main-nav__list li:nth-child(5) { transition-delay: 0.22s; }

  .main-nav__link {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: clamp(1.8rem, 7vw, 2.6rem);
    font-weight: 500;
    letter-spacing: -0.035em;
  }

  .main-nav__link::after {
    display: none;
  }

  .main-nav__link.is-active {
    color: var(--accent-text);
  }

  .main-nav__cta {
    display: inline-flex;
    align-self: flex-start;
  }

  .hero__inner,
  .about__inner,
  .faq__inner {
    grid-template-columns: 1fr;
  }

  .monogram {
    justify-self: start;
    max-width: 440px;
  }

  .atelier-card {
    max-width: 560px;
  }

  .faq__intro {
    position: static;
  }

  .section-head--split {
    grid-template-columns: 1fr;
  }

  .section-head--split > :last-child {
    justify-self: start;
  }

  .why__grid {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
}

@media (max-width: 720px) {
  :root {
    --section-space: 68px;
  }

  /* Mobilde tema butonu yalnızca ikon; hamburgerle aynı boyutta */
  .theme-toggle {
    width: 46px;
    min-height: 46px;
    padding: 0;
  }

  .theme-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .site-header__actions {
    gap: 8px;
  }

  /* Mobil hero başlığı: biraz daha iri, sıkışmadan güçlü; uzun kelimeler taşmaz */
  .hero__title {
    font-size: clamp(2.45rem, 11vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }

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

  .service-card {
    min-height: 0;
    padding: 28px 22px 32px;
  }

  .service-card::before {
    left: 21px;
  }

  .service-card__title {
    padding-top: 36px;
  }

  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .logo-grid__item {
    min-height: 104px;
  }

  /* Hero butonları: ana buton baskın, ikincil buton okunaklı ama bir kademe geride */
  .hero__actions {
    gap: 10px;
    margin-top: 36px;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .hero__actions .btn--primary {
    min-height: 56px;
    font-size: 1rem;
  }

  .hero__actions .btn--ghost {
    min-height: 52px;
    border-color: rgba(var(--ink-rgb), 0.34);
    font-size: 0.95rem;
  }

  .hero__meta {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 48px;
  }

  .hero__meta-scroll {
    display: none;
  }

  .atelier-card__stat {
    min-height: 128px;
    padding: 22px 20px;
  }

  /* SSS: çok satırlı sorularda numara ve artı ikonu ilk satıra hizalı kalır */
  .accordion__trigger {
    grid-template-columns: 32px minmax(0, 1fr) 24px;
    align-items: start;
    gap: 10px;
    padding: 20px 0;
  }

  .accordion__num {
    padding-top: 4px;
  }

  .accordion__question {
    font-size: 1.04rem;
    line-height: 1.4;
    overflow-wrap: break-word;
  }

  .accordion__icon {
    width: 24px;
    height: 24px;
    margin-top: 1px;
  }

  .accordion__content p {
    padding: 2px 0 24px 42px;
  }

  .cta__bottom {
    margin-top: 36px;
  }

  .cta__bottom .btn {
    width: 100%;
  }

  /* Footer: daha fazla üst boşluk, büyük CTA güçlü ama nefes alıyor */
  .site-footer {
    padding-top: 88px;
  }

  .site-footer__cta {
    gap: 0.12em 0.24em;
    padding-bottom: 56px;
    font-size: clamp(2.5rem, 11.5vw, 3.6rem);
    line-height: 1;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
    padding-block: 48px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__brand .site-logo img {
    width: 150px;
  }

  .page-grid span {
    background: none;
  }
}

@media (max-width: 420px) {
  .hero__meta {
    font-size: 0.66rem;
  }

  .hero__meta-num {
    margin-right: 6px;
  }

  .monogram__caption span:last-child {
    display: none;
  }

  .site-footer__bottom {
    font-size: 0.7rem;
  }
}

/* =========================================================
   17. Ortak iç sayfa bileşenleri
   Hakkımızda ve Hizmetler sayfalarında birlikte kullanılır:
   sayfa girişi (page-hero), metin blokları (prose), süreç adımları (steps).
   ========================================================= */

/* Sayfa girişi */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 72px));
  padding-bottom: 24px;
}

.page-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.page-hero__content {
  min-width: 0;
}

.page-hero__title {
  font-size: clamp(2.4rem, 4.9vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.page-hero__text {
  max-width: 560px;
  margin-top: 32px;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  color: var(--text-muted);
}

/* Metin blokları */
.prose {
  max-width: 64ch;
  margin-top: 32px;
}

.prose p {
  font-size: 1.075rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.prose p + p {
  margin-top: 1.15em;
}

.prose .prose__lead {
  font-size: clamp(1.12rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--text-soft);
}

/* Süreç adımları */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  padding-top: 24px;
  border-top: 1px solid var(--border-strong);
}

.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--gradient-brand);
}

.step__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.step__index {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--accent-text);
}

.step__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.step__title {
  margin-top: 32px;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
}

.step__text {
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 48px;
  }
}

@media (max-width: 1024px) {
  .page-hero__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .page-hero__title {
    font-size: clamp(2.3rem, 10vw, 3rem);
    line-height: 1.05;
    text-wrap: balance;
  }

  .steps {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .step__title {
    margin-top: 24px;
  }
}

/* =========================================================
   18. Hakkımızda sayfası — uzun form editorial akış
   Kart ve büyük grafik yok; ince çizgiler, sol kenar etiketleri,
   okunaklı satır genişliği ve güçlü tipografi.
   ========================================================= */

/* Giriş */
.story-hero {
  padding-top: calc(var(--header-h) + clamp(32px, 5vw, 56px));
}

.story-hero__masthead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: clamp(40px, 6vw, 72px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.story-hero__title {
  max-width: 20ch;
  font-size: clamp(2.6rem, 5.6vw, 5.4rem);
}

.story-hero__lower {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: end;
  gap: clamp(40px, 7vw, 120px);
  margin-top: clamp(40px, 5vw, 64px);
}

.story-hero__intro {
  max-width: 58ch;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.65;
  color: var(--text-soft);
}

.story-hero__note {
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid var(--border-warm);
}

.story-hero__note p {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: var(--text-main);
}

/* İçindekiler */
.toc {
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--border-soft);
}

.toc__list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: -1px;
  padding: 18px 16px 4px 0;
  border-top: 1px solid transparent;
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: color 0.3s, border-color 0.3s;
}

.toc__link:hover {
  border-top-color: var(--brand-yellow);
  color: var(--text-main);
}

.toc__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--accent-text);
}

/* Bölüm: solda etiket, sağda başlık ve metin */
.chapter {
  padding-block: clamp(56px, 7vw, 96px);
}

.chapter__inner {
  display: grid;
  grid-template-columns: minmax(180px, 0.3fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
}

.chapter__rail {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  align-self: start;
}

.chapter__rail .eyebrow {
  margin-bottom: 0;
}

.chapter__body {
  min-width: 0;
}

.chapter__title {
  max-width: 22ch;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.08;
}

/* Uzun metin: rahat satır genişliği ve satır aralığı */
.prose--long {
  max-width: 66ch;
  margin-top: clamp(28px, 3vw, 40px);
}

.prose--long p {
  font-size: clamp(1.04rem, 1.2vw, 1.12rem);
  line-height: 1.8;
  color: var(--text-muted);
  color: color-mix(in srgb, var(--text-soft) 86%, var(--bg-main));
}

/* İlk paragrafta büyük serif ilk harf */
.prose--dropcap > p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  font-family: var(--font-serif);
  font-size: 4.6em;
  font-style: italic;
  font-weight: 300;
  line-height: 0.78;
  color: var(--accent-text);
}

/* "Nasıl Başladı?" bölümündeki sorular */
.questions {
  margin: 1.8em 0;
  padding: 0;
  list-style: none;
  counter-reset: question;
}

.questions li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--border-soft);
  counter-increment: question;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: var(--text-main);
}

.questions li:last-child {
  border-bottom: 1px solid var(--border-soft);
}

.questions li::before {
  content: counter(question, decimal-leading-zero);
  padding-top: 0.55em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--accent-text);
}

/* Metin içinde öne çıkan cümle */
.prose .prose__statement {
  margin: 1.4em 0;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

/* Bölüm kapanış cümlesi */
.prose .prose__closing {
  margin-top: 1.6em;
  padding-left: 20px;
  border-left: 2px solid var(--brand-yellow);
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-main);
}

/* "Çalışma Biçimimiz" sade numaralı liste */
.method {
  max-width: 820px;
  margin: clamp(40px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-strong);
}

.method__item {
  display: grid;
  grid-template-columns: 56px 160px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-soft);
}

.method__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--accent-text);
}

.method__title {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.method__text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Sol kenarda küçük yan not */
.rail-note {
  display: grid;
  gap: 6px;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rail-note span {
  margin-right: 6px;
  color: var(--text-soft);
}

.rail-note__warm span {
  color: var(--accent-text);
}

/* Manifesto */
.manifesto {
  padding-block: var(--section-space);
}

.manifesto__inner {
  position: relative;
  padding-top: 40px;
  border-top: 1px solid var(--border-strong);
}

.manifesto__inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 72px;
  height: 2px;
  background: var(--gradient-brand);
}

.manifesto__title {
  max-width: 16ch;
  font-size: clamp(2.6rem, 6.2vw, 5.8rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.manifesto__text {
  max-width: 46ch;
  margin-top: clamp(32px, 4vw, 48px);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text-soft);
}

.manifesto__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
}

.manifesto__cta-text {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

/* Hakkımızda: responsive */
@media (max-width: 1100px) {
  .toc__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .story-hero__lower,
  .chapter__inner {
    grid-template-columns: 1fr;
  }

  .chapter__inner {
    gap: 20px;
  }

  .chapter__rail {
    position: static;
  }

  .rail-note {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 16px;
  }
}

@media (max-width: 720px) {
  .story-hero__title {
    font-size: clamp(2.3rem, 9.5vw, 3rem);
  }

  .toc__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .chapter__title {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
    text-wrap: balance;
  }

  .prose--dropcap > p:first-child::first-letter {
    font-size: 3.8em;
  }

  .questions li {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .method__item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 6px 12px;
  }

  .method__text {
    grid-column: 2;
  }

  .manifesto__cta .btn {
    width: 100%;
  }
}

/* =========================================================
   19. Hizmetler sayfası
   20. Referanslar sayfası
   21. İletişim sayfası
   22. Yasal ve destek sayfaları
   23. Sosyal bağlantılar
   Sayfa girişi (page-hero), hizmet kartları, süreç adımları (steps),
   "Neden Biz" kartları ve CTA paneli mevcut bileşenlerden gelir.
   Burada yalnızca hizmet sistemi kartı ve karşılaştırma alanı tanımlanır.
   ========================================================= */

/* Hizmet sistemi kartı: Strateji / Tasarım / Üretim / Deneyim */
.system-card {
  width: 100%;
  max-width: 460px;
  justify-self: end;
}

.system-card__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border-soft);
  background:
    linear-gradient(var(--line-faint) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(circle at 50% 48%, rgba(var(--brand-rgb), 0.06), transparent 45%),
    var(--bg-figure);
}

.system-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 2x2 alan haritası; hücre çizgileri ortada kesişir */
.system-card__map {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  margin: 22px;
  border: 1px solid var(--border-soft);
}

.system-card__cell {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 120px;
  padding: 18px;
}

/* Üst hücrelerde etiket dış kenarda (üstte), alt hücrelerde altta durur */
.system-card__cell:nth-child(-n + 2) {
  flex-direction: column-reverse;
  border-bottom: 1px solid var(--border-soft);
}

.system-card__cell:nth-child(n + 3) {
  flex-direction: column;
}

.system-card__cell:nth-child(odd) {
  border-right: 1px solid var(--border-soft);
}

.system-card__cell:nth-child(even) {
  align-items: flex-end;
  text-align: right;
}

/* İlk alanın üst kenarında küçük sıcak vurgu */
.system-card__cell:first-child::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 28px;
  height: 2px;
  background: var(--gradient-brand);
}

.system-card__index {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.system-card__label {
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text-main);
}

/* Dört alanın kesişim noktası */
.system-card__core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--border-warm);
  border-radius: 50%;
  background: var(--bg-figure);
  transform: translate(-50%, -50%);
}

.system-card__core::before {
  content: "";
  position: absolute;
  inset: -22px;
  border: 1px dashed rgba(var(--ink-rgb), 0.2);
  border-radius: 50%;
}

.system-card__core span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-text);
}

/* Alt ölçek çizgisi */
.system-card__scale {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px 20px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.system-card__scale-line {
  flex: 1;
  height: 8px;
  border-right: 1px solid rgba(var(--ink-rgb), 0.3);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.3);
  background: repeating-linear-gradient(90deg, rgba(var(--ink-rgb), 0.3) 0 1px, transparent 1px 10%);
}

.system-card__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid rgba(var(--ink-rgb), 0.45);
}

.system-card__corner--tl { top: -8px; left: -8px; border-top-width: 1px; border-left-width: 1px; }
.system-card__corner--br { bottom: -8px; right: -8px; border-bottom-width: 1px; border-right-width: 1px; border-color: var(--accent-text); }

.system-card__caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.system-card__caption-warm {
  color: var(--accent-text);
}

/* Bütünsel Bakış: metin + karşılaştırma */
.holistic__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: clamp(40px, 7vw, 112px);
}

.holistic__inner .prose {
  margin-top: 0;
}

.compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}

.compare__col {
  position: relative;
  padding: 28px 26px 18px;
  border-radius: var(--radius);
}

/* "Parça parça": kesik çizgili sınır, soluk metin */
.compare__col--before {
  border: 1px dashed var(--border-strong);
}

/* "Bütünsel": dolu yüzey, sıcak vurgu çizgisi */
.compare__col--after {
  border: 1px solid var(--border-warm);
  background: var(--bg-card);
}

.compare__col--after::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 56px;
  height: 2px;
  background: var(--gradient-brand);
}

.compare__title {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.compare__col--after .compare__title {
  color: var(--accent-text);
}

.compare__list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.compare__list li + li {
  border-top: 1px solid var(--border-faint);
}

.compare__list li::before {
  flex: none;
  width: 14px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.compare__col--before .compare__list li::before {
  content: "—";
  color: var(--text-faint);
}

.compare__col--after .compare__list li {
  color: var(--text-main);
}

.compare__col--after .compare__list li::before {
  content: "+";
  color: var(--accent-text);
}

.compare__arrow {
  align-self: center;
  padding: 0 18px;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--accent-text);
}

/* Hizmetler: responsive */
@media (max-width: 1024px) {
  .system-card {
    justify-self: start;
    max-width: 420px;
  }

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

@media (max-width: 720px) {
  .system-card__frame {
    aspect-ratio: auto;
  }

  .system-card__map {
    margin: 18px;
  }

  .system-card__cell {
    min-height: 116px;
    padding: 14px;
  }

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

  .compare__arrow {
    justify-self: center;
    padding: 12px 0;
    transform: rotate(90deg);
  }

  .compare__col {
    padding: 24px 20px 14px;
  }
}

/* =========================================================
   20. Referanslar sayfası
   21. İletişim sayfası
   22. Yasal ve destek sayfaları
   23. Sosyal bağlantılar
   Sayfa girişi, logo grid'i, hizmet kartları, numaralı liste (method),
   CTA paneli ve köşe/alt yazı stilleri (system-card__*) mevcut
   bileşenlerden gelir. Burada arşiv kartı, destek grid'i,
   yaklaşım yerleşimi ve proje tipleri listesi tanımlanır.
   ========================================================= */

/* Arşiv kartı: tipografik katalog sayfası */
.archive-card {
  width: 100%;
  max-width: 460px;
  justify-self: end;
}

.archive-card__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border-soft);
  background:
    linear-gradient(var(--line-faint) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(circle at 70% 85%, rgba(var(--brand-rgb), 0.06), transparent 50%),
    var(--bg-figure);
}

.archive-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.archive-card__rows {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin: 0 22px;
  padding: 0;
  list-style: none;
}

.archive-card__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}

.archive-card__row:first-child {
  border-top: 1px solid var(--border-soft);
}

/* Dergi dizgisi gibi kademeli girinti */
.archive-card__row:nth-child(even) .archive-card__word {
  padding-left: 14%;
}

.archive-card__index {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.archive-card__word {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--text-main);
}

.archive-card__row--warm .archive-card__index {
  color: var(--accent-text);
}

.archive-card__row--warm .archive-card__word {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.archive-card__scale {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 20px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.archive-card__scale-line {
  flex: 1;
  height: 8px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.3);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.3);
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(var(--ink-rgb), 0.3) calc(12.5% - 1px) 12.5%);
}

/* Destek alanları: hizmet kartı bileşeniyle dörtlü grid */
.support__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Yaklaşım: solda metin, sağda numaralı liste */
.collaboration__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(48px, 7vw, 112px);
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
}

.method--compact {
  margin-top: 0;
}

.method--compact .method__item {
  grid-template-columns: 48px 130px minmax(0, 1fr);
}

/* Proje tipleri: yatay editorial satırlar */
.type-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-strong);
}

.type-list__item {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 0.9fr) minmax(0, 1.1fr) 40px;
  align-items: center;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border-soft);
}

/* Hover'da üst kenarda kısa sıcak çizgi belirir */
.type-list__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-brand);
  transition: width 0.5s var(--ease);
}

.type-list__item:hover::before {
  width: 56px;
}

.type-list__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--accent-text);
}

.type-list__title {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  letter-spacing: -0.03em;
}

.type-list__text {
  max-width: 48ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.type-list__arrow {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--text-faint);
  transition: color 0.3s, transform 0.4s var(--ease);
}

.type-list__item:hover .type-list__arrow {
  color: var(--accent-text);
  transform: translateX(4px);
}

/* Referanslar: responsive */
@media (max-width: 1100px) {
  .support__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .archive-card {
    justify-self: start;
    max-width: 420px;
  }

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

@media (max-width: 720px) {
  .archive-card__frame {
    aspect-ratio: auto;
  }

  .archive-card__rows {
    margin: 22px 18px;
  }

  .logo-grid--archive,
  .support__grid {
    grid-template-columns: 1fr;
  }

  .logo-grid--archive .logo-grid__item {
    min-height: 112px;
  }

  .method--compact .method__item {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .type-list__item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 26px 0;
  }

  .type-list__text {
    grid-column: 2;
  }

  .type-list__arrow {
    display: none;
  }
}

/* =========================================================
   21. İletişim sayfası
   22. Yasal ve destek sayfaları
   23. Sosyal bağlantılar
   Sayfa girişi, tipografik kart (archive-card), numaralı liste (method),
   accordion ve CTA paneli mevcut bileşenlerden gelir. Burada brief kartı
   varyantı, form, iletişim bilgileri kartı ve geniş liste tanımlanır.
   ========================================================= */

/* İletişim masası kartı: satır sonlarında kontrol kutuları */
.archive-card--desk .archive-card__row {
  grid-template-columns: 36px minmax(0, 1fr) 14px;
  align-items: center;
}

.archive-card__check {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(var(--ink-rgb), 0.4);
}

.archive-card__check--done {
  border-color: transparent;
  background: var(--gradient-brand);
}

.archive-card__check--done::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 4px;
  height: 7px;
  border-right: 1.5px solid var(--text-on-brand);
  border-bottom: 1.5px solid var(--text-on-brand);
  transform: rotate(45deg);
}

/* Form + iletişim bilgileri yerleşimi */
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}

/* Form */
.contact-form {
  --field-error: var(--brand-deep-orange);
  min-width: 0;
}

html[data-theme="light"] .contact-form {
  --field-error: var(--accent-text);
}

.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.field--full {
  grid-column: 1 / -1;
}

.field__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field__req {
  color: var(--accent-text);
}

.field__input {
  width: 100%;
  min-height: 58px;
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-main);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.field__input::placeholder {
  color: var(--text-faint);
}

.field__input:hover {
  border-color: var(--border-strong);
}

/* Odak: sıcak sarı kenarlık ve ince halka; glow yok */
.field__input:focus,
.field__input:focus-visible {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 1px var(--brand-yellow);
}

.field__input--textarea {
  min-height: 176px;
  resize: vertical;
  line-height: 1.6;
}

/* Özel açılır liste oku */
.field__select {
  position: relative;
}

.field__select .field__input {
  padding-right: 52px;
  cursor: pointer;
}

.field__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Hata durumu */
.field.is-invalid .field__input {
  border-color: var(--field-error);
}

.field.is-invalid .field__input:focus {
  box-shadow: 0 0 0 1px var(--field-error);
}

.field__error {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--field-error);
}

.field__error:empty {
  display: none;
}

/* KVKK onay kutusu
   Yerel checkbox görünmez ama tıklanabilir biçimde özel kutunun üstünde durur;
   klavye ve ekran okuyucu davranışı korunur. */
.field--consent {
  margin-top: 4px;
}

.consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
}

.consent__input,
.consent__box {
  grid-row: 1;
  grid-column: 1;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
}

.consent__input {
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}

.consent__box {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--bg-card);
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}

.consent__input:hover + .consent__box {
  border-color: var(--text-muted);
}

/* Odak: sıcak sarı kenarlık ve ince halka */
.consent__input:focus-visible + .consent__box {
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 1px var(--brand-yellow);
}

.consent__input:checked + .consent__box {
  border-color: transparent;
  background: var(--gradient-brand);
}

.consent__input:checked + .consent__box::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--text-on-brand);
  border-bottom: 2px solid var(--text-on-brand);
  transform: rotate(45deg);
}

.field.is-invalid .consent__box {
  border-color: var(--field-error);
}

.consent__text {
  grid-row: 1;
  grid-column: 2;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  cursor: pointer;
}

.consent__link {
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-main);
  transition: color 0.3s, border-color 0.3s;
}

.consent__link:hover {
  border-color: var(--brand-yellow);
  color: var(--accent-text);
}

.field--consent .field__error {
  padding-left: 36px;
}

.contact-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}

.contact-form__hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.contact-form__hint span {
  color: var(--accent-text);
}

/* Gönderim bilgi mesajı */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--border-warm);
  border-left: 2px solid var(--brand-yellow);
  border-radius: var(--radius);
  background: var(--gradient-soft);
}

.form-status[hidden] {
  display: none;
}

.form-status:focus {
  outline: none;
}

.form-status p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-main);
}

.form-status__mark {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--gradient-brand);
}

.form-status__mark::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  width: 5px;
  height: 8px;
  border-right: 1.5px solid var(--text-on-brand);
  border-bottom: 1.5px solid var(--text-on-brand);
  transform: rotate(45deg);
}

/* Gönderim hatası: aynı kutu, hata rengiyle ve "!" işaretiyle */
.form-status--error {
  border-color: var(--field-error);
  background: transparent;
}

.form-status--error .form-status__mark {
  background: var(--field-error);
}

.form-status--error .form-status__mark::after {
  content: "!";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  color: var(--text-on-brand);
  transform: none;
}

/* Gönderim sürerken buton */
.contact-form [type="submit"][disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Spam tuzağı alanı: ekran dışında, klavye ve ekran okuyucudan gizli */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* İletişim bilgileri kartı */
.contact-card {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  padding: 28px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.contact-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 56px;
  height: 2px;
  background: var(--gradient-brand);
}

.contact-card__intro {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.contact-card__list {
  margin: 0;
}

.contact-card__row {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-soft);
}

.contact-card__row dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.contact-card__row dd {
  margin: 8px 0 0;
  font-size: 1.05rem;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.contact-card__link {
  border-bottom: 1px solid var(--border-strong);
  transition: color 0.3s, border-color 0.3s;
}

.contact-card__link:hover {
  border-color: var(--brand-yellow);
  color: var(--accent-text);
}

.contact-card__social {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.contact-card__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.contact-card__note .references__note-dot {
  flex: none;
  margin-top: 0.5em;
}

/* İlk adım: geniş numaralı liste */
.method--wide {
  max-width: none;
  margin-top: 0;
}

.method--wide .method__item {
  grid-template-columns: 56px minmax(200px, 0.8fr) minmax(0, 1.2fr);
  padding: 24px 0;
}

.method--wide .method__title {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}

/* İletişim: responsive */
@media (max-width: 1024px) {
  .archive-card--desk {
    justify-self: start;
  }

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

  .contact-card {
    position: static;
    max-width: 560px;
  }
}

@media (max-width: 720px) {
  .contact-form__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .field__input {
    font-size: 1rem;
  }

  .field__input--textarea {
    min-height: 152px;
  }

  .contact-form__footer .btn {
    width: 100%;
  }

  .contact-card {
    padding: 24px 20px;
  }

  .method--wide .method__item {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 20px 0;
  }
}

/* =========================================================
   22. Yasal ve destek sayfaları
   23. Sosyal bağlantılar
   Gizlilik Politikası, Kullanım Şartları ve Site Haritası.
   Künye satırı (story-hero__masthead), eyebrow, sayfa başlığı ve
   uzun metin (prose--long) mevcut bileşenlerden gelir.
   ========================================================= */

/* Footer'da bulunulan sayfa (ana menüde aktif bağlantı olmayan sayfalar için) */
.site-footer__links a[aria-current="page"] {
  color: var(--accent-text);
}

/* Giriş */
.legal-hero__title {
  max-width: 22ch;
}

.legal-hero__lower {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: end;
  gap: 24px clamp(40px, 7vw, 120px);
  margin-top: clamp(32px, 4vw, 48px);
}

.legal-hero__intro {
  max-width: 60ch;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.7;
  color: var(--text-soft);
}

.legal-hero__meta {
  justify-self: end;
  padding-left: 18px;
  border-left: 1px solid var(--border-warm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Metin gövdesi: solda içindekiler, sağda numaralı bölümler */
.legal {
  padding-block: clamp(56px, 7vw, 96px) var(--section-space);
}

.legal__inner {
  display: grid;
  grid-template-columns: minmax(200px, 0.3fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
}

.legal__toc {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  align-self: start;
}

.legal__toc-label {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.legal__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal__toc-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text-muted);
  transition: color 0.3s;
}

.legal__toc-link span {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--accent-text);
}

.legal__toc-link:hover {
  color: var(--text-main);
}

.legal__body {
  min-width: 0;
}

.legal-section {
  scroll-margin-top: calc(var(--header-h) + 24px);
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-soft);
}

.legal-section__title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.legal-section__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--accent-text);
}

.legal-section .prose--long {
  margin-top: 20px;
}

/* Bölüm 09: iletişim bilgileri */
.legal-contact {
  max-width: 66ch;
  margin: 28px 0 0;
  border-top: 1px solid var(--border-soft);
}

.legal-contact__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}

.legal-contact__row dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.legal-contact__row dd {
  margin: 0;
  font-size: 1.02rem;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.legal-contact__link {
  border-bottom: 1px solid var(--border-strong);
  transition: color 0.3s, border-color 0.3s;
}

.legal-contact__link:hover {
  border-color: var(--brand-yellow);
  color: var(--accent-text);
}

/* Yayın öncesi kontrol notu */
.legal-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 66ch;
  padding: 18px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.legal-note .references__note-dot {
  flex: none;
  margin-top: 0.55em;
}

/* Sayfa sonu yönlendirme */
.legal-next {
  padding-bottom: var(--section-space);
}

.legal-next__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px 48px;
  padding-top: 40px;
  border-top: 1px solid var(--border-strong);
}

.legal-next__inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 72px;
  height: 2px;
  background: var(--gradient-brand);
}

.legal-next__title {
  max-width: 24ch;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.08;
}

.legal-next__text {
  max-width: 52ch;
  margin-top: 16px;
  color: var(--text-muted);
}

.legal-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 24px;
}

/* Site haritası: editorial bağlantı arşivi */
.sitemap {
  padding-block: clamp(56px, 7vw, 96px) var(--section-space);
}

.sitemap-group {
  display: grid;
  grid-template-columns: minmax(200px, 0.3fr) minmax(0, 1fr);
  gap: 20px clamp(32px, 6vw, 96px);
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
}

.sitemap-group + .sitemap-group {
  margin-top: clamp(56px, 7vw, 88px);
}

.sitemap-group__head .eyebrow {
  margin-bottom: 0;
}

.sitemap-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-strong);
}

.sitemap-link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) 32px;
  align-items: center;
  gap: 8px 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border-soft);
}

/* Hover/odakta üst kenarda kısa sıcak çizgi */
.sitemap-link::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-brand);
  transition: width 0.5s var(--ease);
}

.sitemap-link:hover::before,
.sitemap-link:focus-visible::before {
  width: 56px;
}

.sitemap-link__name {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sitemap-link__title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-main);
  transition: color 0.3s;
}

.sitemap-link__path {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.sitemap-link__text {
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.sitemap-link__arrow {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--text-faint);
  transition: color 0.3s, transform 0.4s var(--ease);
}

.sitemap-link:hover .sitemap-link__title,
.sitemap-link:focus-visible .sitemap-link__title {
  color: var(--accent-text);
}

.sitemap-link:hover .sitemap-link__arrow,
.sitemap-link:focus-visible .sitemap-link__arrow {
  color: var(--accent-text);
  transform: translateX(4px);
}

/* Bulunulan sayfa */
.sitemap-link[aria-current="page"] .sitemap-link__path {
  color: var(--accent-text);
}

/* Yasal sayfalar: responsive */
@media (max-width: 1024px) {
  .legal-hero__lower,
  .legal__inner,
  .sitemap-group {
    grid-template-columns: 1fr;
  }

  .legal-hero__meta {
    justify-self: start;
  }

  .legal__toc {
    position: static;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-soft);
  }

  .legal__toc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

@media (max-width: 720px) {
  .legal-hero__title {
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }

  .legal__toc-list {
    grid-template-columns: 1fr;
  }

  .legal-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
  }

  .legal-section__title {
    gap: 12px;
  }

  .legal-contact__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .legal-next__inner {
    grid-template-columns: 1fr;
  }

  .legal-next__inner .btn {
    width: 100%;
  }

  .sitemap-link {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 10px 16px;
    padding: 22px 0;
  }

  .sitemap-link__text {
    grid-column: 1;
  }

  .sitemap-link__arrow {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
    padding-top: 4px;
  }
}

/* =========================================================
   23. Sosyal bağlantılar (Instagram / WhatsApp)
   Header ikonları (geniş ekran), mobil menü bağlantıları,
   footer "Sosyal" kolonu ve WhatsApp hızlı iletişim butonu.
   ========================================================= */

.social-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-icon__dot {
  fill: currentColor;
  stroke: none;
}

/* Header: tema butonu yanında küçük yuvarlak ikonlar */
.header-socials {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-social-link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-main);
  color: var(--text-main);
  transition: border-color 0.3s, color 0.3s;
}

html[data-theme="light"] .header-social-link {
  background: var(--bg-card);
}

.header-social-link:hover {
  border-color: var(--border-warm);
  color: var(--accent-text);
}

/* Mobil menü içindeki bağlantılar (yalnızca hamburger menüde görünür) */
.mobile-socials {
  display: none;
}

/* Footer: "Sosyal" kolonu; dış bağlantı işareti */
.footer-social-link::after {
  content: "↗";
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--text-faint);
  transition: color 0.3s;
}

.footer-social-link:hover::after {
  color: var(--accent-text);
}

/* WhatsApp hızlı iletişim butonu
   main içinde sticky: sayfa boyunca sağ altta durur, footer'a gelindiğinde
   içeriğin sonunda kalır ve footer ile çakışmaz. Negatif üst boşluk,
   butonun sayfa akışında ek yer kaplamasını önler. */
.whatsapp-float {
  position: sticky;
  bottom: 24px;
  z-index: 50;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: -52px 24px 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--accent-text);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
  transition: border-color 0.3s, transform 0.4s var(--ease);
}

.whatsapp-float:hover {
  border-color: var(--border-warm);
  transform: translateY(-2px);
}

.whatsapp-float .social-icon {
  width: 22px;
  height: 22px;
}

/* Sosyal: responsive */
@media (max-width: 1279px) {
  /* Orta genişlikte header kalabalıklaşmasın */
  .header-socials {
    display: none;
  }
}

/* Orta genişlik (1025–1279px): masaüstü header'ının taşmaması için.
   1280px ve üstü ile 1024px ve altındaki (hamburger) düzen etkilenmez. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .site-logo img {
    width: 180px;
  }

  .main-nav__list {
    gap: 18px;
  }

  .main-nav__link {
    font-size: 0.88rem;
  }
}

/* 1025–1179px: header CTA'sı gizlenir; aynı bağlantı sayfa içindeki
   CTA'larda ve footer'da bulunur. */
@media (min-width: 1025px) and (max-width: 1179px) {
  .site-header__cta {
    display: none;
  }
}

@media (max-width: 1024px) {
  .mobile-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
  }

  .mobile-social-link {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-strong);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.3s, border-color 0.3s;
  }

  .mobile-social-link:hover {
    border-color: var(--brand-yellow);
    color: var(--accent-text);
  }
}

@media (max-width: 720px) {
  .whatsapp-float {
    bottom: 16px;
    width: 46px;
    height: 46px;
    margin: -46px 14px 0 auto;
  }

  .whatsapp-float .social-icon {
    width: 20px;
    height: 20px;
  }
}

@media print {
  .whatsapp-float {
    display: none;
  }
}

/* Çok dar ekranlar (≤360px): logo, tema butonu ve hamburger yan yana sığsın */
@media (max-width: 360px) {
  .site-logo img {
    width: 134px;
  }

  html[data-theme="light"] .site-header .site-logo {
    padding: 5px 10px;
  }
}

/* ---------- 16. Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}