/* ============================================================
   YAŞAR HUKUK BÜROSU - Tasarım Dili
   ------------------------------------------------------------
   Design read: solo hukuk bürosu için lead-generation landing,
   endişeli yerel müvekkil kitlesi, trust-first koyu editoryal dil.
   Dials: DESIGN_VARIANCE 5 · MOTION_INTENSITY 4 · VISUAL_DENSITY 4

   Renk mantığı: deri ciltli hukuk kitabı + pirinç terazi.
   Sıcak is-siyahı taban, pirinç tek aksan, parşömen metin.
   Tema KİLİTLİ: sadece koyu. Logo beyaz tek varyant olduğu için
   açık tema marka kimliğini bozar.

   Köşe yarıçapı kuralı (tek sistem):
     yüzeyler/kartlar/inputlar = 12px · butonlar/çipler = tam yuvarlak
   ============================================================ */

/* ---------- Fontlar (self-host: KVKK + performans) ---------- */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-latin-ext.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================ TOKENS ============================ */
:root {
  color-scheme: dark;

  /* Yüzeyler: sıcak is-siyahı (saf siyah değil, derinlik korunur) */
  --ink-950: #0B0908;
  --ink-900: #110E0C;
  --ink-850: #16120F;
  --ink-800: #1D1814;
  --line:        #272019;
  --line-strong: #3A3028;

  /* Tek aksan: pirinç. Ofis tabelasının tonundan türetildi. */
  --brass-300: #E8D29A;
  --brass-400: #D9B65C;
  --brass-500: #C9A24A;
  --brass-600: #A8862F;

  /* Metin: parşömen. Saf beyaz değil. */
  --text:      #F4EFE6;   /* 17.0:1 */
  --text-dim:  #BEB4A4;   /*  9.9:1 */
  --text-mute: #8C8375;   /*  5.3:1 - min 14px */

  --focus: var(--brass-400);

  /* Tipografi */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Eğri fotoğrafın genişliğiyle BİRLİKTE ayarlandı: 1024px'te metin sütunu
     daralınca başlık 3 satıra düşüyordu. 1024 -> 46px, 1440 -> 56px. */
  --fs-display: clamp(2.25rem, 1.34rem + 2.4vw, 3.5rem);
  --fs-h2:      clamp(1.875rem, 1.3rem + 2.5vw, 3rem);
  --fs-h3:      clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-body:    1.0625rem;   /* 17px - mobil okunabilirlik tabanı */
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  /* Ritim */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --maxw: 1240px;

  /* Şekil (kilitli sistem) */
  --r-surface: 12px;
  --r-pill: 999px;

  /* Hareket. Eğriler Emil Kowalski kataloğunun birebir değerleri. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* giriş/çıkış */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* ekran içi hareket */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* çekmece/panel */

  --dur-press: 160ms;   /* basma geri bildirimi */
  --dur-fast: 140ms;
  --dur: 240ms;         /* açılır menü, akordiyon: UI bütçesi 300ms altı */
  --dur-panel: 400ms;   /* çekmece sınıfı */
  --dur-reveal: 520ms;  /* sayfa içi giriş: tanıtım sayfası, uzun olabilir */

  --nav-h: 68px;
  --z-nav: 100;
  --z-menu: 110;
  --z-bar: 120;
}

/* ============================ RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  background: var(--ink-950);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  /* Koyu zemin telafisi: açık metin koyu zeminde optik olarak yayılır
     (halation) ve harfler birbirine girer. Hafif pozitif tracking bunu
     geri alır; Türkçe diyakritiklerin okunurluğuna da yarıyor. */
  letter-spacing: 0.008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sayfa seviyesinde overflow kırpması YOK: gerekmiyor.
     Taşabilecek tek şeyler hero parıltısı ve kart filigranları; ikisi de
     kendi kaplarında (.hero, .area) zaten kırpılıyor. Body'de kırpma
     sabit konumlu ögeler için gereksiz risk yaratıyordu. */
  /* mobil alt çubuğun içeriği kapatmaması için */
  padding-bottom: env(safe-area-inset-bottom);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--brass-500); color: var(--ink-950); }

/* ========================= TİPOGRAFİ ========================= */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* 1.12 satır yüksekliği italik inişlerin (y, ş, ğ) kesilmemesi için taban. */
h1 { font-size: var(--fs-display); line-height: 1.12; }
h2 { font-size: var(--fs-h2); }
h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
p { text-wrap: pretty; }

/* Küçük punto koyu zeminde daha çok yayılır, telafi bir tık artar. */
.area p, .step p, .faq__a p, .field .hint, .area__topics li,
.consent label, .footer__notice, .footer__legal { letter-spacing: 0.012em; }

.lede { font-size: 1.1875rem; color: var(--text-dim); line-height: 1.65; }
.muted { color: var(--text-dim); }
.measure { max-width: 62ch; }

/* ========================== LAYOUT ========================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--ink-900); }

.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head p { margin-top: var(--s4); max-width: 58ch; color: var(--text-dim); }

/* Bölüm başlığı altındaki ince pirinç vurgu */
.section__head h2::after {
  content: "";
  display: block;
  width: 54px; height: 2px;
  margin-top: var(--s5);
  background: linear-gradient(90deg, var(--brass-500), transparent);
}

/* ========================== IKONLAR ========================== */
.ico { width: 1.25em; height: 1.25em; flex: none; }
.ico--lg { width: 2rem; height: 2rem; }

/* ========================== BUTONLAR ========================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 50px;              /* dokunma hedefi */
  padding: 0 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;           /* CTA tek satır */
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
/* Fiziksel basma: ölçek küçülmesi parmağın altında "iten" hissi verir,
   1px kayma vermiyordu. 0.97 bilinçli olarak hafif. */
.btn:active { transform: scale(0.97); }

/* birincil: pirinç zemin + is-siyahı metin = 8.3:1 */
.btn--primary { background: var(--brass-500); color: var(--ink-950); font-weight: 600; }
.btn--primary:hover { background: var(--brass-400); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--brass-600); background: rgba(201,162,74,.07); }

/* Yeşil kasıtlı olarak koyultuldu: beyaz metinle 4.6:1 (AA).
   WhatsApp markasının açık yeşili 15px metinde 4.26:1'de kalıyordu.
   Hover'da da eşiğin üstünde kalmak için açılmıyor, koyuluyor. */
.btn--wa { background: #1B8450; color: #fff; }
.btn--wa:hover { background: #166F3F; }

.btn--block { width: 100%; }

/* ========================== NAVİGASYON ========================== */
.nav {
  position: fixed;
  inset-inline: 0; top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(11, 9, 8, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.nav[data-scrolled="true"] {
  background: rgba(11, 9, 8, .92);
  border-bottom-color: var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--ink-950); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* 3 sütunlu simetrik grid: logo | linkler | CTA (1fr auto 1fr).
   Eskiden flex + "margin-inline-start:auto" ile linkleri sağa itmeye
   çalışıyordu, ama auto margin yanlış elemana (nav__links, flex
   konteynerin TORUNU, çocuğu değil) tanımlıydı - hiçbir etkisi yoktu.
   Sonuç: linkler+CTA grubu sola yığılıyor, konteynerin merkezine göre
   onlarca piksel kaymış duruyordu. Grid ile orta sütun (linkler) yan
   sütunların genişliğinden bağımsız olarak HER ZAMAN gerçek merkezde
   kalıyor - logo görünür olsun olmasın (marka devri sırasında opacity:0
   iken de layout dengesi bozulmuyor). */
.nav__inner {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s5);
}
.nav__logo { grid-column: 1; justify-self: start; display: flex; align-items: center; flex: none; min-height: 44px; }
.nav__logo img { height: clamp(32px, 2.4vw + 26px, 42px); width: auto; }

/* Marka devri: sayfanın tepesinde hero'daki büyük logo animasyonu markayı
   taşıyor, nav logosu gizli. Aynı işaretin 60px arayla iki kez görünmesi
   hata gibi okunuyordu. Hero geçilince marka nav'a devrediyor.
   data-scrolled'ı IntersectionObserver kuruyor, scroll listener yok. */
.nav__logo {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.nav[data-scrolled="true"] .nav__logo {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Mobil menü açıkken nav gizlendiği için devir mantığı mobilde de geçerli;
   ancak menü içinde ayrı bir marka yok, bu yüzden menü açılışında nav
   logosu her hâlükârda görünür olmalı. */
.menu[data-open="true"] ~ .nav .nav__logo,
.nav:focus-within .nav__logo { opacity: 1; transform: none; pointer-events: auto; }

/* İç sayfalarda (video hero olmayan) marka devri mantığı uygulanamaz:
   devredecek bir hero markası yok, devralacak nav logosu sonsuza kadar
   görünmez kalırdı. body.no-hero-nav bu sayfalarda logoyu baştan sabit
   gösterir. !important bilinçli: dinamik data-scrolled kuralını eziyor,
   tek satırlık dar kapsamlı bir istisna. */
.no-hero-nav .nav__logo {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .nav__logo { transition: none; }
}

/* <nav> sarmalayıcısı (ul'nin ebeveyni) grid'in asıl orta sütunu:
   konumlandırma burada olmalı, ul üzerindeki eski "margin-inline-start:
   auto" bir seviye içeride kaldığı için işlevsizdi. */
nav[aria-label="Ana menü"] { grid-column: 2; justify-self: center; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.6vw, 1.5rem);
  list-style: none;
  padding: 0;
}
.nav__links a {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  padding: .4rem 0;
  transition: color var(--dur) var(--ease-out);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__links a:hover { color: var(--text); }
/* Dokunmatikte tap sahte :hover tetikler ve alt çizgi yapışık kalır.
   Hareket içeren hover'lar gerçek işaretçiyle sınırlanır. */
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover::after { transform: scaleX(1); }
}

.nav__cta { grid-column: 3; justify-self: end; }
.nav__cta .btn { min-height: 42px; padding-inline: 1.15rem; }

.nav__toggle {
  display: none;
  grid-column: 3; justify-self: end;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
}

/* ---- Mobil menü ---- */
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--ink-950);
  display: grid;
  grid-template-rows: var(--nav-h) 1fr auto;
  opacity: 0;
  visibility: hidden;
  /* visibility'yi süreye yayMAyız: yayılırsa t=0'da hâlâ hidden okunur ve
     menü açılır açılmaz odak taşınamaz. Açılışta anında, kapanışta
     solma bittikten sonra geçsin diye gecikme kullanıyoruz. */
  /* Asimetrik: kapanış açılıştan hızlı. Kullanıcı menüyü kapattığında
     sistemin yanıtı beklemeden gelmeli. */
  transition: opacity 160ms var(--ease-out),
              visibility 0s linear 160ms;
}
.menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease-out),
              visibility 0s linear 0s;
}
.menu__head {
  display: flex; align-items: center; justify-content: flex-end;
  padding-inline: var(--gutter);
}
.menu__close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); cursor: pointer;
}
.menu__links {
  list-style: none; margin: 0;
  padding: var(--s6) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s2);
}
.menu__links a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  line-height: 1.5;
  min-height: 48px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transform: translateY(14px);
  opacity: 0;
  /* 420ms menü girişi için uzundu; kademe de 45ms'te gecikmeli hissettiriyordu. */
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.menu[data-open="true"] .menu__links a {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 32ms + 40ms);
}
.menu__foot { padding: var(--gutter); display: grid; gap: var(--s3); }

/* ============================ HERO ============================ */
/*
  Kompozisyon: fotoğraf masaüstünde sağ kenara TAŞAR (kutu içinde değil).
  Yuvarlak köşeli fotoğraf kartı şablonun kendisiydi; kenara taşan görsel
  hem daha iddialı hem elimizdeki tek fotoğrafı sonuna kadar kullanıyor.
  Altında çalışma alanı rayı var: dekor değil, asıl giriş kapısı.
*/
.hero { position: relative; }

.hero__top {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 3vw, 2.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* ---- Fotoğraf ---- */
.hero__photo { position: relative; margin: 0; }
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Perde (scrim) ----
   Metin fotoğrafın ÜZERİNDE değil (mobilde altında akıyor, masaüstünde
   ayrı bir sütunda) - yani koyulaştırma kontrast için zorunlu değil,
   sadece fotoğrafın sert kenarını sayfaya eritmek için var. Efektler
   sadeleştirildi: tek katman, dar bant, düşük opaklık. */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* =========== MOBİL (varsayılan) =========== */
/* Fotoğraf tam genişlik, en üstte. CTA fold içinde kalmalı, bu yüzden
   yükseklik viewport'a bağlı ve tavanlı. */
.hero__photo {
  margin-top: calc(var(--nav-h) * -1 - clamp(1.25rem, 3vw, 2.5rem));
  /* vh'ye bağlı: kısa ekranlarda (iPhone SE, 667px) fotoğraf alçalır ki
     arama butonu fold'un altına düşmesin. */
  height: clamp(240px, 38vh, 360px);
  margin-bottom: clamp(1.25rem, 3.5vw, 2rem);
}
.hero__photo img { object-position: 50% 20%; }

/* Tek katman, sadece alt %26'da: fotoğraf sayfaya erir ama kendisi
   açık/net kalır. Önceki sürüm fotoğrafın %84'ünü koyulaştırıyordu. */
.hero__photo::after {
  background: linear-gradient(to top, var(--ink-950) 0%, transparent 26%);
}

.hero__content { position: relative; }

/* ---- Marka şeridi (logo animasyonu) ----
   Video alfa kanalı taşımıyor; logo saf siyah zemin üzerinde beyaz.
   mix-blend-mode: screen siyahı görünmez yapıyor (siyah + zemin = zemin),
   böylece alfa kodlaması olmadan gerçek şeffaflık elde ediliyor.
   Bu yalnızca koyu zeminde geçerli; tema zaten kilitli koyu. */
/* Marka işareti: başlığın üstünde, sola hizalı bir masthead.
   Boyut yükseklikten sürülüyor, genişlik oranla türüyor (CLS yok).

   TAVAN KAYNAK ÇÖZÜNÜRLÜĞÜNE BAĞLI: video 960px geniş. 2x ekranda
   292 CSS px -> 584 cihaz pikseli, yani 0.61x küçültme: keskin kalıyor.
   Daha büyük verilirse upscale başlar ve logo yumuşak/bozuk görünür. */
.hero__brand {
  margin: 0 0 var(--s5);
  --brand-h: 68px;
  height: var(--brand-h);
  width: calc(var(--brand-h) * 2.449);
  max-width: 100%;
}
.hero__brand-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  /* screen harmanı için tanımlı koyu arka plan: şeffaf backdrop'ta
     harman sonucu öngörülemez olurdu. */
  background: var(--ink-950);
}
@media (min-width: 900px) {
  .hero__brand { --brand-h: 112px; margin-bottom: var(--s6); }
}
/* Harman desteklenmiyorsa (çok eski tarayıcı) logo siyah kutu içinde
   kalırdı; o durumda kutuyu zeminle aynı yapıp kenarlarını yumuşatıyoruz. */
@supports not (mix-blend-mode: screen) {
  .hero__brand-media { border-radius: 4px; }
}

.hero h1 { margin-bottom: var(--s4); }
/* Vurguyu RENK taşıyor, italik değil.
   Büyük italik serif hero başlığı yaygın bir AI landing page kalıbı;
   ayrıca büronun kendi tabelası da düz (roman) serif.
   inline-block DEĞİL: olursa sondaki nokta kopup alt satıra düşer. */
.hero h1 em { font-style: normal; color: var(--brass-400); }

.hero__sub { max-width: 46ch; margin-bottom: var(--s5); }
.hero__cta { display: flex; gap: var(--s3); }
/* flex-wrap YOK + min-width:0: 375px'te butonlar alt alta düşüp CTA'yı
   fold'un altına itiyordu. Eşit paylaşıp yan yana kalıyorlar. */
.hero__cta .btn { flex: 1 1 0; min-width: 0; padding-inline: 1.1rem; }

/* ---- Çalışma alanı rayı ---- */
.hero__index { border-top: 1px solid var(--line); }
.hero__index-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.hero__index a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 60px;
  padding: var(--s3) 0;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  transition: color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
.hero__index a > span { flex: 1; min-width: 0; }
.hero__index a .ico:first-child { color: var(--brass-500); flex: none; }
.hero__index-arrow {
  color: var(--text-mute);
  flex: none;
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.hero__index a:hover { color: var(--text); }
.hero__index a:hover .hero__index-arrow { color: var(--brass-400); }
@media (hover: hover) and (pointer: fine) {
  .hero__index a:hover .hero__index-arrow { transform: translate(2px, -2px); }
}
.hero__index a:active { background: rgba(255,255,255,.03); }

/* Hücreler arası ince ayırıcılar. Mobilde 2 sütun: sağdakinin solunda
   dikey, üst sıranın altında yatay çizgi. */
.hero__index-row a:nth-child(odd) { padding-inline-end: var(--s3); }
.hero__index-row a:nth-child(even) {
  padding-inline-start: var(--s4);
  border-inline-start: 1px solid var(--line);
}
.hero__index-row a:nth-child(1),
.hero__index-row a:nth-child(2) { border-bottom: 1px solid var(--line); }

/* =========== MASAÜSTÜ =========== */
@media (min-width: 900px) {
  .hero__top {
    padding-bottom: clamp(3.5rem, 6vw, 6rem);
    display: flex;
    align-items: center;
    min-height: clamp(520px, 64vh, 680px);
  }

  /* Fotoğraf akıştan çıkıp sağ kenara taşar. */
  .hero__photo {
    position: absolute;
    inset: 0 0 0 auto;
    width: clamp(400px, 48%, 740px);
    height: auto;
    margin: 0;
  }
  .hero__photo img { object-position: 50% 30%; }
  /* Tek katman, sadece sol %16'da: fotoğraf sağ kenarda kendi başına
     net duruyor, sadece metne baktığı kenar sayfaya erir. */
  .hero__photo::after {
    background: linear-gradient(to right, var(--ink-950) 0%, transparent 16%);
  }

  .hero__content {
    /* Fotoğrafın perdeli kenarına metin dayanmasın: dar masaüstünde
       (900-1000px) sınır çok daralıyordu. */
    width: min(52%, 600px);
    padding-block: clamp(1rem, 3vw, 2.5rem);
    padding-inline-end: var(--s4);
  }
  .hero__cta { flex-wrap: wrap; }
  .hero__cta .btn { flex: 0 0 auto; padding-inline: 1.5rem; }

  /* Ray dört sütuna açılır, hücreler dikey çizgilerle ayrılır. */
  .hero__index-row { grid-template-columns: repeat(4, 1fr); }
  .hero__index a { min-height: 76px; padding-inline: var(--s5); }
  .hero__index-row a:nth-child(odd),
  .hero__index-row a:nth-child(even) {
    padding-inline-start: var(--s5);
    padding-inline-end: var(--s5);
    border-bottom: 0;
    border-inline-start: 1px solid var(--line);
  }
  .hero__index-row a:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
  .hero__index a:hover { background: rgba(201,162,74,.045); }
}

/* ===================== ÇALIŞMA ALANLARI ===================== */
/*
  Kart kurgusu bilinçli olarak "SaaS özellik kartı"ndan uzak:
  yuvarlak çip içinde küçük ikon + etiket baloncukları en yaygın
  şablondu. Burada sembol büyük ve ince çizgili (Phosphor light),
  başlık display serif, konular ise TEK TEK DOKUNULABİLİR satırlar.

  Asıl UX kazancı konu satırları: "nafaka" sorunu olan kişi kartın
  tamamına değil doğrudan "Nafaka"ya dokunup forma düşüyor ve hem
  konu hem mesaj ön dolduruluyor. Uzun kuyruk aramalar için de
  (nafaka avukatı, işe iade davası) ayrı ayrı metin oluyor.
*/
.areas {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(12, 1fr);
}
.area {
  grid-column: span 12;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
@media (min-width: 760px) {
  /* 4 içerik, alternatif genişlikler: 7+5 / 5+7 */
  .area:nth-child(4n+1) { grid-column: span 7; }
  .area:nth-child(4n+2) { grid-column: span 5; }
  .area:nth-child(4n+3) { grid-column: span 5; }
  .area:nth-child(4n+4) { grid-column: span 7; }
}
.area--wide { background:
  radial-gradient(130% 150% at 100% 0%, rgba(201,162,74,.09), transparent 56%),
  var(--ink-850); }
.area:hover { border-color: var(--brass-600); background-color: var(--ink-800); }
.area:focus-within { border-color: var(--brass-500); }

/* ---- Sembol ----
   Çip içinde değil: sağ üstte, ince çizgili, büyük. Kartın kendi
   kompozisyonunun parçası, bir UI ikonu gibi değil. */
.area__sym {
  position: absolute;
  top: clamp(1.1rem, 2.4vw, 1.6rem);
  right: clamp(1.1rem, 2.4vw, 1.6rem);
  width: clamp(46px, 5.6vw, 68px);
  height: clamp(46px, 5.6vw, 68px);
  color: var(--brass-600);
  pointer-events: none;
  transition: color var(--dur) var(--ease-out),
              transform var(--dur-panel) var(--ease-out);
}
.area:hover .area__sym { color: var(--brass-500); }
@media (hover: hover) and (pointer: fine) {
  .area:hover .area__sym { transform: scale(1.04); }
}

/* ---- Başlık ---- */
.area h3 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  /* sembolün altına girmesin */
  padding-inline-end: clamp(58px, 7vw, 84px);
  margin-bottom: var(--s2);
}
.area h3 a { transition: color var(--dur) var(--ease-out); }
.area h3 a:hover { color: var(--brass-400); }

.area > p {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  padding-inline-end: clamp(58px, 7vw, 84px);
  margin-bottom: var(--s5);
}

/* ---- Konu satırları ----
   Baloncuk değil, okunabilir liste. Her satır ayrı bir hedef. */
.area__topics {
  list-style: none;
  padding: 0;
  /* "margin-top: auto" listeyi dibe itiyordu: kısa açıklamalı kartlarda
     ortada boşluk kalıyordu. Liste açıklamanın hemen altında başlar ve
     artan yüksekliği satırlara dağıtır (dokunma hedefi de büyür). */
  margin-top: var(--s5);
  flex: 1;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(44px, 1fr);
}
@media (min-width: 560px) {
  .area--wide .area__topics { grid-template-columns: 1fr 1fr; column-gap: var(--s5); }
}
.area__topics a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;        /* dokunma hedefi */
  font-size: var(--fs-sm);
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
  transition: color var(--dur) var(--ease-out);
}
/* Satır başındaki pirinç işaret: hover/odakta uzar.
   Kutu HER ZAMAN 16px; uzama transform ile yapılıyor.
   width animasyonu iki sorun yaratıyordu: (1) layout tetikleyip
   thrash'e yol açıyor, (2) ::before bir flex ögesi olduğu için
   5px'ten 16px'e büyürken metni 11px sağa itip titretiyordu.
   scaleX derleyici katmanında kalıyor, metin hiç oynamıyor. */
.area__topics a::before {
  content: "";
  flex: none;
  width: 16px; height: 1px;
  background: var(--brass-600);
  transform: scaleX(.3125);          /* 5 / 16 */
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.area__topics a:hover,
.area__topics a:focus-visible { color: var(--text); }
.area__topics a:hover::before,
.area__topics a:focus-visible::before { transform: scaleX(1); background: var(--brass-400); }
.area__topics a:active { color: var(--brass-300); }

/* Tek sütunda son satırın çizgisi fazlalık; iki sütunda son İKİ satır. */
.area__topics li:last-child a { border-bottom: 0; }
@media (min-width: 560px) {
  .area--wide .area__topics li:nth-last-child(-n+2) a { border-bottom: 0; }
}

/* İkincil bağlantı: konu satırları "görüşelim" (iletişime gider),
   bu ise "oku" (çalışma alanları sayfasının ilgili bölümüne gider).
   Mevcut dönüşüm akışını DEĞİŞTİRMEZ, sadece ek bir yol sunar. */
.area__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--brass-400);
}
.area__more .ico {
  transition: transform var(--dur) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .area:hover .area__more .ico { transform: translate(2px, -2px); }
  /* .area__more artık .area kartı dışında (calisma-alanlari.html içi
     metin bağlantıları için) de kullanılıyor; kendi hover'ında da aynı
     jest tetiklenmeli. */
  .area__more:hover .ico { transform: translate(2px, -2px); }
}

/* ========================== HAKKINDA ========================== */
/*
  Layout family C: editoryal portre + akan metin.
  Kart yok: ne arka plan dolgusu, ne kenarlık, ne kutu içinde madde listesi.
  Portre kendi başına durur; arkasındaki ince pirinç çizgi onu sayfaya
  bağlayan tek jest.
*/
.about__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: start;
  }
}

.about__portrait {
  position: relative;
  margin: 0;
  max-width: 420px;
}
/* Ofset pirinç çerçeve: portreyi kart yapmadan yerleştiren tek jest.
   Fotoğrafın arkasından çıkar, kutu izlenimi vermez.
   Opaklık .5 -> .3: efektler sadeleştirildi, çizgi artık ima ediyor,
   bağırmıyor. */
.about__portrait::before {
  content: "";
  position: absolute;
  inset: auto auto -14px -14px;
  width: 58%; height: 58%;
  border-inline-start: 1px solid var(--brass-600);
  border-block-end: 1px solid var(--brass-600);
  border-end-start-radius: var(--r-surface);
  opacity: .3;
  pointer-events: none;
}
/* aspect-ratio fotoğrafın GERÇEK oranıyla (1200x1600 = 3/4) birebir
   eşleşiyor: cover hiçbir piksel kırpmıyor, tam kare kadraj aynen
   görünüyor. Kullanıcı talebi: "yakınlaştırma vs yapmadan direkt koy". */
.about__portrait img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-surface);
}
@media (max-width: 899px) {
  .about__portrait { max-width: 320px; margin-inline-start: 10px; }
  /* Ofset mobilde küçülür: 14px'te çerçeve viewport kenarına 6px kalıyordu,
     tasarım jesti gibi değil kaza gibi okunuyordu. */
  .about__portrait::before { inset: auto auto -10px -10px; }
}

.about__body > * + * { margin-top: var(--s5); }
.about__body p { color: var(--text-dim); max-width: 62ch; }

/* Bölüm başlığı burada .section__head içinde değil (editoryal düzen),
   ama pirinç çizgi tasarım dilinin parçası: elle aynı jesti uyguluyoruz. */
.about__body h2::after {
  content: "";
  display: block;
  width: 54px; height: 2px;
  margin-top: var(--s5);
  background: linear-gradient(90deg, var(--brass-500), transparent);
}

/* İlk paragraf giriş cümlesi: ölçeği biraz büyük, rengi tam parşömen.
   Bölümün "ne okuyacağım" sorusunu ilk satırda cevaplar. */
.about__lede {
  color: var(--text) !important;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
}

/* İmza bloğu: isim öne çıkar, büro adı sakin kalır. */
.about__sign {
  margin-top: var(--s6) !important;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-mute);
}
.about__sign span {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 2px;
}

/* ============================ SÜREÇ ============================ */
/* Layout family D: yatay ray. Jenerik "Aşama 1/2/3" etiketi yok. */
.steps {
  display: grid;
  gap: var(--s6);
  counter-reset: step;
}
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }

.step { position: relative; padding-top: var(--s6); }
.step::before {           /* ray çizgisi */
  content: "";
  position: absolute; top: 13px; left: 0; right: 0;
  height: 1px; background: var(--line-strong);
}
.step:first-child::before { left: 13px; }
.step:last-child::before  { right: calc(100% - 14px); }
@media (max-width: 819px) {
  .step { padding-top: 0; padding-left: var(--s6); }
  .step::before { top: 13px; bottom: -2rem; left: 13px; right: auto; width: 1px; height: auto; }
  .step:last-child::before { display: none; }
}
.step__dot {
  position: absolute; top: 6px; left: 0;
  width: 15px; height: 15px;
  border-radius: var(--r-pill);
  background: var(--ink-950);
  border: 2px solid var(--brass-500);
}
.step h3 { margin-bottom: var(--s2); }
.step p { color: var(--text-dim); font-size: var(--fs-sm); max-width: 44ch; }

/* ============================= SSS ============================= */
/* Layout family E: akordiyon, ortalı okuma sütunu.
   max-width: 820px bilinçli dar (uzun soru cümleleri daha rahat taranır)
   ama margin-inline:auto eksikti - blok .wrap'ın (1240px) soluna yapışık
   kalıyor, sağda 420px boşlukla dengesiz duruyordu.

   Diğer bölümlerin başlıkları (Hakkında, Çalışma Alanları...) kasıtlı
   olarak sol hizalı - geniş içerik bloklarının üstünde doğal duruyor.
   SSS burada farklı: tek dar sütun. Başlığı sol hizalı bırakıp akordiyonu
   ortalasaydık iki ayrı hizalama ekseni oluşurdu (başlık solda, liste
   ortada). Bu yüzden bu bölüme özel hem başlık hem akordiyon aynı dar
   sütunda ortalanıyor - FAQ bölümleri için yaygın, tutarlı bir kalıp. */
#sss .section__head {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
#sss .section__head h2::after { margin-inline: auto; }

.faq { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) 0;
  background: none; border: 0;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  transition: color var(--dur) var(--ease-out);
}
.faq__q:hover { color: var(--brass-400); }
.faq__q .ico {
  color: var(--brass-500);
  transition: transform var(--dur) var(--ease-out);
}
.faq__q[aria-expanded="true"] .ico { transform: rotate(180deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-drawer);
}
.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  max-width: 62ch;
  padding-bottom: var(--s5);
}

/* ============================ İLETİŞİM ============================ */
.contact__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.field label { font-size: var(--fs-sm); font-weight: 500; }
.field .hint { font-size: var(--fs-xs); color: var(--text-mute); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: .8rem 1rem;
  font-size: 1rem;              /* 16px: iOS zoom engeli */
  background: var(--ink-850);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-surface);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-mute); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #4a3e33; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass-500);
  background: var(--ink-800);
  box-shadow: 0 0 0 3px rgba(201,162,74,.16);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A24A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.75rem;
}
.field__error {
  display: none;
  font-size: var(--fs-xs);
  color: #F2A2A2;               /* koyu zeminde 7.4:1 */
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #B4534F; }
.field[data-invalid="true"] .field__error { display: block; }

.consent {
  display: flex; gap: var(--s3); align-items: flex-start;
  margin-bottom: var(--s5);
}
.consent input { width: 20px; height: 20px; min-height: 0; margin-top: .22em; flex: none; accent-color: var(--brass-500); }
.consent label { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.6; }
.consent a { color: var(--brass-400); text-decoration: underline; text-underline-offset: 2px; }

/* Durum mesajı aniden belirmesin: kısa bir yükselerek açılma, durum
   değişiminin fark edilmesini sağlar (ışınlanma yerine). */
.form__status {
  margin-top: var(--s4);
  font-size: var(--fs-sm);
  display: flex; gap: var(--s2); align-items: center;
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s linear var(--dur);
}
.form__status[data-state="success"],
.form__status[data-state="error"] {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s linear 0s;
}
.form__status[data-state="success"] { color: #8FD6AC; }
.form__status[data-state="error"]   { color: #F2A2A2; }

.btn[data-loading="true"] { opacity: .65; pointer-events: none; }

/* Form kaldırıldı: iletişim bölümünün artık tek içeriği. Tam genişlik
   alıp satırları masaüstünde iki sütuna yayıyor, boş yarım sütun kalmasın. */
.contact__direct { grid-column: 1 / -1; display: grid; gap: var(--s4); align-content: start; }
@media (min-width: 640px) {
  .contact__direct { grid-template-columns: 1fr 1fr; }
}
.contact__row {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s5);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  transition: border-color var(--dur) var(--ease-out);
}
a.contact__row:hover { border-color: var(--brass-600); }
.contact__row .ico { color: var(--brass-500); margin-top: .18em; }
.contact__row strong { display: block; font-weight: 500; }
.contact__row span { color: var(--text-dim); font-size: var(--fs-sm); }

/* Harita: contact__grid'in 3. çocuğu, varsayılan grid auto-placement
   onu tek sütuna sıkıştırırdı - 1/-1 ile iki sütunu da kaplıyor.
   Google'ın embed'i parlak beyaz; koyu sayfada göz alıcı bir delik gibi
   durmasın diye hafif ton ayarı var (dekoratif değil, işlevsel). */
.contact__map {
  grid-column: 1 / -1;
  margin: 0;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-surface);
  overflow: hidden;
  border: 1px solid var(--line);
}
.contact__map iframe {
  width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(.2) brightness(.9) contrast(1.05);
}
@media (max-width: 640px) { .contact__map { aspect-ratio: 4 / 3; } }

/* ============================ FOOTER ============================ */
.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s8) var(--s6);
  background: var(--ink-900);
}
.footer__grid { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer img { height: 46px; width: auto; margin-bottom: var(--s4); }
/* h2 "İletişim" sonrası h4 kullanmak başlık seviyesi atlıyordu (a11y). */
.footer h3 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: var(--s4);
}
.footer ul { list-style: none; padding: 0; display: grid; }
/* Dokunma hedefi: 19px'lik satırlar parmakla ıskalanıyordu. */
.footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.footer a { color: var(--text-dim); font-size: var(--fs-sm); transition: color var(--dur) var(--ease-out); }
.footer a:hover { color: var(--brass-400); }

.footer__legal {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-mute);
}
/* TBB reklam yasağı uyarısı: hukuken gerekli, görsel olarak sakin */
.footer__notice {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  /* Nötr çizgi: burası sayfanın en düşük öncelikli metni.
     Pirinç eylem rengidir, yasal uyarıya harcanmaz. */
  border-inline-start: 2px solid var(--line-strong);
  background: rgba(255,255,255,.012);
  font-size: var(--fs-xs);
  color: var(--text-mute);
  line-height: 1.65;
  max-width: 70ch;        /* 78ch rahat okuma bandının dışındaydı */
  border-radius: 0 var(--r-surface) var(--r-surface) 0;
}

/* ===================== MOBİL ARAMA ÇUBUĞU ===================== */
/* Birincil dönüşüm aracı. Sadece mobilde, her zaman erişilebilir. */
.callbar {
  position: fixed;
  inset-inline: 0; bottom: 0;
  z-index: var(--z-bar);
  display: none;
  gap: var(--s2);
  padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
  background: rgba(11,9,8,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform var(--dur-panel) var(--ease-drawer);
}
.callbar[data-visible="true"] { transform: none; }
/* min-width:0 olmadan flex öğeleri içerik genişliğinin altına inemez ve
   çubuk 320px'lik ekranlarda taşar. */
.callbar .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding-inline: 1rem;
}
@media (max-width: 760px) {
  .callbar { display: flex; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* ===================== GİRİŞ HAREKETLERİ ===================== */
/* IntersectionObserver ile tetiklenir. scroll listener YOK. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal][data-shown="true"] { opacity: 1; transform: none; }

/* ==================== ÇALIŞMA ALANLARI SAYFASI ==================== */
/* İç sayfa başlığı: video hero yok, editoryal/metin öncelikli bir giriş
   (Hakkında bölümünün tipografi diliyle tutarlı). */
.pagehead { padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 4rem)); }

.breadcrumb { margin-bottom: var(--s5); }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  list-style: none; padding: 0; margin: 0;
  font-size: var(--fs-xs); color: var(--text-mute);
}
.breadcrumb li:not(:last-child)::after {
  content: "/"; margin-inline-start: var(--s2); color: var(--line-strong);
}
.breadcrumb a { color: var(--text-dim); transition: color var(--dur) var(--ease-out); }
.breadcrumb a:hover { color: var(--brass-400); }

.pagehead__lede { max-width: 62ch; margin-top: var(--s4); }

.pagehead__jump {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.pagehead__jump a {
  font-size: var(--fs-sm); color: var(--text-dim);
  padding: .5rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.pagehead__jump a:hover { color: var(--text); border-color: var(--brass-600); }

/* ---- Her çalışma alanı bölümü ---- */
.practice__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 860px) {
  .practice__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); }
  /* İkon + başlık, gövde kaydırılırken yerinde kalır: uzun madde
     metninde hangi alanı okuduğunu kaybetmemeyi sağlar. */
  .practice__head { position: sticky; top: calc(var(--nav-h) + var(--s6)); align-self: start; }
}
.practice__head { display: flex; align-items: center; gap: var(--s4); }
.practice__sym { width: clamp(44px, 5vw, 56px); height: clamp(44px, 5vw, 56px); color: var(--brass-500); flex: none; }
.practice__head h2 { margin: 0; }
.practice__head h2::after {
  content: ""; display: block; width: 54px; height: 2px;
  margin-top: var(--s4);
  background: linear-gradient(90deg, var(--brass-500), transparent);
}

.practice__body > * + * { margin-top: var(--s5); }
.practice__body p { color: var(--text-dim); max-width: 68ch; }

/* Konu etiketleri: burada tıklanabilir form kısayolu DEĞİL (zaten detay
   sayfasındayız) - sadece kapsamı özetleyen sakin etiketler. */
.practice__topics {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
.practice__topics li {
  font-size: var(--fs-sm); color: var(--text-dim);
  padding: .4rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.02);
}

/* ---- Alan içi mini SSS: native <details>/<summary> ----
   Ana SSS bölümü JS akordiyonu kullanıyor; burada native element tercih
   edildi (JS'siz de çalışır, tarayıcı erişilebilirliği hazır gelir). */
.practice__faq { border-top: 1px solid var(--line); }
.practice__faq details { border-bottom: 1px solid var(--line); }
.practice__faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) 0;
  color: var(--text);
  font-size: 1rem; font-weight: 500; line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease-out);
}
.practice__faq summary::-webkit-details-marker { display: none; }
.practice__faq summary:hover { color: var(--brass-400); }
.practice__faq summary .ico {
  color: var(--brass-500); flex: none;
  transition: transform var(--dur) var(--ease-out);
}
.practice__faq details[open] summary .ico { transform: rotate(180deg); }
.practice__faq details p {
  color: var(--text-dim); font-size: var(--fs-sm);
  max-width: 62ch;
  padding-bottom: var(--s4);
}

/* ---- Sayfa sonu CTA: tek seferlik, bilinçli ortalı kapanış şeridi ---- */
.practice-cta__inner { max-width: 720px; margin-inline: auto; text-align: center; }
.practice-cta__inner h2 { margin-bottom: var(--s4); }
.practice-cta__inner p { color: var(--text-dim); max-width: 56ch; margin: 0 auto var(--s6); }
.practice-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }

/* ===================== ERİŞİLEBİLİRLİK ===================== */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* "top" bir layout özelliğidir: her karede yeniden yerleşim tetikler.
   Aynı hareket transform ile GPU üzerinde yapılır. */
.skip {
  position: absolute; top: var(--s3); left: var(--gutter);
  z-index: 200;
  background: var(--brass-500); color: var(--ink-950);
  padding: .75rem 1.25rem; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600;
  transform: translateY(calc(-100% - var(--s3) - 8px));
  transition: transform var(--dur) var(--ease-out);
}
.skip:focus { transform: none; }

/* Azaltılmış hareket = DAHA AZ ve YUMUŞAK hareket, sıfır değil.
   Önceki hali her geçişi .01ms'e indiriyordu; bu, hover ve odak
   geri bildirimini de yok ediyordu. Artık konum değişiklikleri anında
   tamamlanıyor, anlamayı kolaylaştıran renk/opaklık geçişleri kalıyor.
   transform listede olmadığı için arama çubuğu, caret dönüşü ve basma
   geri bildirimi hâlâ ÇALIŞIR, sadece anında gerçekleşir. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color,
                         border-color, box-shadow, outline-color !important;
    transition-duration: 160ms !important;
    scroll-behavior: auto !important;
  }
  /* Konum temelli girişler tamamen kapalı: içerik baştan yerinde. */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .menu__links a { transform: none !important; transition-delay: 0s !important; }
}

@media print {
  .nav, .callbar, .menu, .hero::before { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================ BLOG ============================ */
.blog-grid {
  display: grid;
  gap: var(--s5);
}
@media (min-width: 700px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
.blog-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.blog-card:hover { border-color: var(--brass-600); background-color: var(--ink-800); }
.blog-card:focus-within { border-color: var(--brass-500); }

.blog-card__tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brass-500);
}

.blog-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: var(--s3) 0;
}
.blog-card h3 a { transition: color var(--dur) var(--ease-out); }
.blog-card h3 a:hover { color: var(--brass-400); }

.blog-card p { color: var(--text-dim); font-size: var(--fs-sm); flex: 1; }

.blog-card__meta {
  display: flex;
  gap: var(--s3);
  font-size: var(--fs-xs);
  color: var(--text-mute);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

/* ---- Makale (uzun form içerik) ----
   .about__body h2::after ile aynı pirinç çizgi jesti; makale içi
   başlıklar da editoryal düzenin bir parçası, section__head değil. */
.article { max-width: 72ch; margin-inline: auto; }
.article > * + * { margin-top: var(--s5); }

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}

.article h2 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: var(--s8) !important;
}
.article h2::after {
  content: "";
  display: block;
  width: 54px; height: 2px;
  margin-top: var(--s4);
  background: linear-gradient(90deg, var(--brass-500), transparent);
}
.article h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-top: var(--s7) !important;
}
.article p { color: var(--text-dim); line-height: 1.7; }
.article ul, .article ol { color: var(--text-dim); padding-inline-start: 1.25em; }
.article ul > li + li, .article ol > li + li { margin-top: var(--s3); }
.article li { line-height: 1.65; }
.article strong { color: var(--text); }
.article a { color: var(--brass-400); text-decoration-color: var(--brass-600); text-underline-offset: 3px; }
.article a:hover { color: var(--brass-300); }

.article__disclaimer {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--ink-850);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.article__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}