/**
 * site.css — Tasarım sistemi temeli (token katmanı) — BeSecurity2 revizyonu.
 *
 * Marka: koyu lacivert/siyah zemin + royal mavi + kum (sand) vurgu; tek
 * font ailesi Rajdhani (başlıklar 700, gövde 500, buton/etiket 600
 * uppercase). Köşe yarıçapı HER YERDE 0 (köşesiz, keskin görünüm).
 * Hedef: https://themes.muffingroup.com/be/security2/ ile aynı dil.
 *
 * Bu dosya header/footer (layouts/site.php), ana sayfayı (views/site/
 * home.php) VE iç sayfaları (about/areas/area-detail/contact/404) kapsar.
 * Paylaşılan temel katman (reset, tipografi, .container/.section, .kicker,
 * .btn, erişilebilirlik yardımcıları, header, footer) TÜM sayfalarda ortak
 * kaldığından üstte (bölüm 1-8) tanımlanır; ana sayfaya özgü bölümler 9'da,
 * iç sayfalara özgü bölümler 10'da yer alır.
 *
 * İçindekiler:
 *   1. Tokenlar
 *   2. Modern reset
 *   3. Baz tipografi
 *   4. Yerleşim: .container, .section, .section--dark
 *   5. Bileşenler: .kicker, .btn (+ varyantlar), .header-logo
 *   6. Erişilebilirlik yardımcıları
 *   7. Header / gezinme
 *   8. Footer
 *   9. Ana sayfa: hero, hizmet şeridi, split tanıtım, istatistikler,
 *      çalışma alanları (8), CTA bandı
 *  10. İç sayfalar: .page-band, .section-head, .prose, Hakkımızda
 *      (hikaye/ilkeler/ekip), Çalışma Alanları listesi, Alan detay,
 *      İletişim, 404
 */

/* ---------------------------------------------------------------- */
/* 1. Tokenlar                                                       */
/* ---------------------------------------------------------------- */

:root{
  --dark-950:#020411; --dark-900:#0B1020; --dark-800:#15192E; --dark-700:#1D213A;
  --card:#2B304B; --royal:#304581; --blue:#4982D0; --blue-bright:#0089F7;
  --sand:#CFAC6A;        /* altın-kum vurgu: header çizgileri, seçim rengi   */
  --sand-soft:#CFBDA2;   /* temanın bej PANEL zemini (BeSecurity2 split)     */
  --cream:#EAE7E2; --light:#EEF0F2;
  --text-on-dark:#C9CDD8; --muted-on-dark:#8A90A5; --ink:#15192E; --ink-soft:#626262;
  --font:'Rajdhani', system-ui, sans-serif;
  --s1:8.5px; --s2:17px; --s3:25.5px; --s4:34px; --s5:51px; --s6:76.5px; --s7:119px;
  --container:1240px; --radius:0;
}

/* ---------------------------------------------------------------- */
/* 2. Modern reset                                                   */
/* ---------------------------------------------------------------- */

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

*{ margin:0; }

html{ -webkit-text-size-adjust:100%; }

/* Sayfa-içi çapa geçişleri (ör. footer'daki "başa dön") yumuşak kayar;
   hareket azaltma tercihinde tarayıcı varsayılanı (anında) korunur. */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

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

input, button, textarea, select{ font:inherit; color:inherit; }

button{ cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------------------------------------------------------------- */
/* 3. Baz tipografi                                                  */
/* ---------------------------------------------------------------- */

body{
  font-family:var(--font);
  font-size:15px;
  font-weight:500;
  line-height:1.7;
  color:var(--ink);
  background:var(--light);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1, h2, h3, h4, h5, h6{
  font-family:var(--font);
  font-weight:700;
  line-height:1.15;
  color:var(--ink);
  text-wrap:balance;
  margin-block-end:.5em;
}

p, ul, ol, blockquote{ margin-block-end:var(--s2); }

a{
  color:var(--blue);
  text-decoration:none;
  transition:color .18s ease;
}

a:hover{ color:var(--blue-bright); }

hr{
  border:0;
  border-top:1px solid rgba(21, 25, 46, .12);
  margin-block:var(--s4);
}

::selection{ background:var(--sand); color:var(--dark-950); }

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

/* ---------------------------------------------------------------- */
/* 4. Yerleşim                                                       */
/* ---------------------------------------------------------------- */

.container{
  width:100%;
  max-width:calc(var(--container) + 2 * var(--s3));
  margin-inline:auto;
  padding-inline:var(--s3);
}

.section{ padding-block:var(--s6); }
/* NOT: bölüm dikey boşlukları TÜM sitede tek değerdir (s6 = 76.5px);
   ardışık koyu bölümlerde görünür boşluk daima s6+s6 olur. Büyük ekranda
   s7'ye çıkan eski kural bilinçli kaldırıldı — bölümler arası ritim her
   genişlikte aynı kalsın (kullanıcı talebi: tutarlı boşluklar). */

/* Koyu bölüm zemini dark-800 (#15192E) — #0B1020 fazla koyu bulundu
   (kullanıcı talebi); footer bundan ayrı, dark-950'de kalır. */
.section--dark{
  background:var(--dark-800);
  color:var(--text-on-dark);
}

.section--dark :is(h1, h2, h3, h4, h5, h6){ color:#fff; }

.section--dark a{ color:var(--blue); }

.section--dark a:hover{ color:#fff; }

.section--dark ::selection{ background:var(--sand); color:var(--dark-950); }

.section--dark :focus-visible{ outline-color:var(--sand); }

/* ---------------------------------------------------------------- */
/* 5. Bileşenler                                                     */
/* ---------------------------------------------------------------- */

/* Mavi "eyebrow" etiketi — hero'nun üstünde kullanılır. */
.kicker{
  display:block;
  font-family:var(--font);
  font-size:14px;
  font-weight:600;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--blue);
  margin-block-end:var(--s2);
}

.section--dark .kicker{ color:var(--blue); }

/* Düğmeler — köşesiz, cömert iç boşluk, harf aralıklı büyük harf. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family:var(--font);
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1;
  padding:14px 30px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:none;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease,
             color .18s ease, transform .18s ease;
}

.btn:active{ transform:translateY(0); }

/* Medya çerçevesi — fotoğraflar ve harita için ortak "çift paspartu"
   deseni (kum çizgi kimliğinin görsele taşınmış hâli, köşesiz): dışta
   1px kum çerçeve, 10px içeride ikinci bir yarı saydam kılçizgi.
   Kullanım: görseli taşıyan div/span'e (bg-image kutusu, iframe/img
   sarmalayıcısı) verilir — img/iframe'in KENDİSİNE verilemez (::after
   pseudo'su replaced elementlerde çalışmaz). ::after pointer-events:none
   olduğundan haritanın sürükleme/tıklama etkileşimini engellemez. */
.media-frame{
  position:relative;
  border:1px solid rgba(207, 172, 106, .45);
}

.media-frame::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(207, 172, 106, .30);
  pointer-events:none;
  z-index:1;
}

/* Varyant (harita gibi "üstüne çizgi binmesin" istenen medya): iç
   kılçizgi yerine, arkadan sağ-alt köşeye 12px taşan tamamlayıcı
   çerçeve. z-index:-1 ile çerçevenin içerikle kesişen kısmı medyanın
   ARKASINDA kalır — yalnız dışa taşan kenarlar görünür. */
.media-frame--offset::after{
  inset:12px -12px -12px 12px;
  border-color:rgba(207, 172, 106, .35);
  z-index:-1;
}

/* Birincil eylem: dolu royal mavi.
   NOT: seçiciler BİLİNÇLİ OLARAK ".btn.btn--varyant" (iki sınıf) biçiminde
   — yalnız ".btn--blue" (tek sınıf, özgüllük 0,0,1,0) kullanılsaydı, koyu
   bölümlerdeki (ör. hero, CTA bandı) ".section--dark a" kuralı (özgüllük
   0,0,1,1 — bir sınıf + bir etiket, DAHA YÜKSEK) metin rengini gölgeleyip
   düğme metnini zemniyle AYNI renge (mavi üstünde mavi, görünmez) düşürürdü. */
.btn.btn--blue{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

.btn.btn--blue:hover, .btn.btn--blue:focus-visible{
  background:var(--blue-bright);
  border-color:var(--blue-bright);
  color:#fff;
  transform:translateY(-1px);
}

/* İkincil eylem — koyu zemin üzerinde 1px yarı saydam beyaz çerçeve. */
.btn.btn--outline{
  background:transparent;
  border-color:rgba(255, 255, 255, .4);
  color:#fff;
}

.btn.btn--outline:hover, .btn.btn--outline:focus-visible{
  background:rgba(255, 255, 255, .1);
  border-color:#fff;
  color:#fff;
}

/* Açık zeminler üzerinde (ör. split panel — sand zemin) kullanılan
   siyah dolgulu düğme. */
.btn.btn--black{
  background:#000;
  border-color:#000;
  color:#fff;
}

.btn.btn--black:hover, .btn.btn--black:focus-visible{
  background:var(--dark-800);
  border-color:var(--dark-800);
  color:#fff;
}

/* Logo lockup'ı — koyu header zemininde çalışır.
   Tam yapı:
     <a class="header-logo" href="/">
       <img class="header-logo__mark" src="/assets/img/amblem.svg" alt="" width="273" height="223">
       <span class="header-logo__text">
         <span class="header-logo__name">APHukuk Bürosu</span>
         <span class="header-logo__tag">Ankara</span>
       </span>
     </a> */
.header-logo{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  text-decoration:none;
  color:#fff;
}

.header-logo:hover{ color:#fff; }

.header-logo__mark{
  display:block;
  width:auto;
  height:44px;   /* 273x223 SVG oranını korur */
}

.header-logo__text{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}

.header-logo__name{
  font-family:var(--font);
  font-weight:700;
  font-size:18px;
  line-height:1.15;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
}

.header-logo__tag{
  font-family:var(--font);
  font-weight:600;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--blue);
}

/* ---------------------------------------------------------------- */
/* 6. Erişilebilirlik yardımcıları                                   */
/* ---------------------------------------------------------------- */

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

.skip-link{
  position:absolute;
  top:-3.5rem;
  left:var(--s2);
  z-index:100;
  padding:.75em 1.25em;
  background:var(--sand);
  color:var(--dark-950);
  font-family:var(--font);
  font-weight:600;
  font-size:14px;
  letter-spacing:.04em;
  text-decoration:none;
  border-radius:var(--radius);
  transition:top .18s ease;
}

.skip-link:focus{ top:var(--s2); }

/* ---------------------------------------------------------------- */
/* 7. Header / gezinme                                               */
/* ---------------------------------------------------------------- */

/* Header her sayfada SABİT (fixed) — tema davranışı: scroll'da üstte
   yapışık kalır. Başlangıç zemini sayfa tipine göre değişir (iç sayfa
   opak koyu, ana sayfa transparan overlay); scroll edilince her ikisi de
   .is-stuck ile %92 opak koyu + blur zemine döner (bkz. site.js). */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  background:var(--dark-800);
  border-bottom:1px solid rgba(207, 172, 106, .35);   /* ince kum çizgi — KORUNAN mekanizma */
  transition:background-color .25s ease;
}

/* İç sayfalarda header akıştan çıktığı için içeriğe üst pay.
   79px = logo lockup (44px) + bar dikey padding'i (2×s2=34px) + 1px alt
   border — header'ın gerçek render yüksekliği (her genişlikte ölçüldü;
   lockup sabit olduğundan responsive sapma yok). Lockup/padding değişirse
   güncelle; pay yükseklikten büyük kalırsa header ile içerik arasında
   açık renkli body zemini şerit olarak görünür. */
.site-header:not(.site-header--overlay) + main{
  padding-top:79px;
}

/* Ana sayfa: hero görselinin üstüne binen transparan başlangıç. */
.site-header--overlay{
  background:transparent;
}

/* Scroll sonrası: koyu, hafif saydam, bulanık zemin (temadaki sticky hal). */
.site-header.is-stuck{
  background:rgba(11, 16, 32, .92);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

/* Hero içeriğine üstten header payı (içerik menünün altına girmesin). */
.site-header--overlay + main .home-hero{
  padding-top:120px;
}

.site-header ::selection{ background:var(--sand); color:var(--dark-950); }

.site-header__bar{
  display:flex;
  align-items:stretch;   /* nav, çubuğun tam yüksekliğine uzar — aktif çizgi
                            header'ın alt border'ına oturabilsin diye */
  justify-content:space-between;
  gap:var(--s3);
  padding-block:var(--s2);
}

@media (min-width: 901px){
  .site-header__bar .nav{ display:flex; }   /* yalnız masaüstü — mobilde .nav paneli display:none/block ile yönetilir */
}

.nav ul{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:var(--s4);
  list-style:none;
  margin:0;
  padding:0;
}

.nav li{ display:flex; }

.nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-family:var(--font);
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text-on-dark);
  padding-block:.4rem;
  transition:color .15s ease;
}

.nav a:hover, .nav a:focus-visible{ color:#fff; }

.nav a[aria-current="page"]{ color:#fff; }

/* Aktif sayfa göstergesi — 3px'lik düz kum (sand) çizgi, header'ın alt
   border'ının tam üstüne biner (link çubuk yüksekliğine stretch
   edildiğinden alt kenarı çubuğun içerik altına eşittir; padding-block
   kadar sarkıtmak yeterli — KORUNAN mekanizma, bkz. görev brief'i). */
.nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:calc(var(--s2) * -1);
  height:3px;
  background:var(--sand);
}

.site-header :focus-visible{ outline-color:var(--sand); }

/* Hamburger düğmesi — yalnız ≤900px'te görünür. Üç ince çizgi; açıkken
   (aria-expanded="true") bir "X"e döner. */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.32rem;
  width:2.6rem;
  height:2.6rem;
  padding:0;
  flex-shrink:0;
  background:none;
  border:1px solid transparent;
  border-radius:var(--radius);
}

.nav-toggle__line{
  display:block;
  width:1.4rem;
  height:2px;
  background:#fff;
  transition:transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1){
  transform:translateY(.55rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2){
  opacity:0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3){
  transform:translateY(-.55rem) rotate(-45deg);
}

@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }

  .nav{
    display:none;
    position:absolute;
    inset-inline:0;
    top:100%;
    z-index:30;
    background:var(--dark-700);
    border-bottom:1px solid rgba(207, 172, 106, .35);
    box-shadow:0 16px 28px -16px rgba(2, 4, 17, .55);
  }

  .nav.is-open{ display:block; }

  .nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }

  .nav li{ border-top:1px solid rgba(255, 255, 255, .08); }
  .nav li:first-child{ border-top:0; }

  .nav li{ display:block; }

  .nav a{
    display:block;
    padding:var(--s3);
    font-size:16px;
    letter-spacing:.01em;
  }

  /* Masaüstündeki alt-çizgi yerine mobilde sol kenarlıklı vurgu. */
  .nav a[aria-current="page"]::after{ content:none; }

  .nav a[aria-current="page"]{
    border-left:3px solid var(--sand);
    padding-left:calc(var(--s3) - 3px);
    background:rgba(207, 172, 106, .08);
  }
}

/* ---------------------------------------------------------------- */
/* 8. Footer                                                         */
/* ---------------------------------------------------------------- */

.site-footer{
  background:var(--dark-950);
  color:var(--muted-on-dark);
  font-size:14px;
}

.site-footer ::selection{ background:var(--sand); color:var(--dark-950); }

.site-footer a{
  color:var(--muted-on-dark);
  text-decoration:none;
  transition:color .15s ease;
}

.site-footer a:hover, .site-footer a:focus-visible{ color:var(--blue); }

.footer-main{ padding-block:var(--s6); }

/* Tema düzeni: royal panel | adres | 3 sütunlu link bloğu. Link bloğu
   (.footer-links) kendi iç grid'ini taşır — dar ekranda tek başına tam
   satıra yayılabilsin diye dış grid'den ayrık tutulur. */
.footer-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr 2fr;
  gap:var(--s5);
}

@media (max-width: 1100px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-links{ grid-column:1 / -1; }
}

@media (max-width: 640px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* Royal kutu — telefon CTA'sı (temadaki dikey panel): üstte ikon, ortada
   panelden yönetilen davet metni, altta büyük numara; içerik dikeyde
   ortalanır, grid satırının tam yüksekliğine stretch olur. */
.footer-cta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--s4);
  padding:var(--s5) var(--s4);
  background:var(--royal);
  /* Kutu, footer'ın üst kenarına SIFIR dayanır (kullanıcı talebi):
     .footer-main'in s6 üst padding'ini negatif margin'le geri alır —
     diğer sütunların üst hizası ve kutunun alt kenarı değişmez. */
  margin-block-start:calc(var(--s6) * -1);
}

.footer-cta__icon{ display:inline-flex; color:#fff; }
.footer-cta__icon svg{ width:34px; height:34px; }

.footer-cta__text{
  margin:0;
  font-size:19px;
  font-weight:600;
  line-height:1.5;
  color:#fff;
}

/* NOT: "a.footer-cta__phone" (etiket+sınıf, özgüllük 0,0,1,1) — yalnız
   ".footer-cta__phone" (0,0,1,0) kullanılsaydı yukarıdaki ".site-footer a"
   kuralı (0,0,1,1, DAHA YÜKSEK/eşit ama önce tanımlı) rengi muted griye
   düşürürdü (bkz. .btn--blue'daki AYNI özgüllük notu). */
a.footer-cta__phone{
  font-family:var(--font);
  font-weight:700;
  font-size:32px;
  line-height:1.25;
  color:#fff;
}

a.footer-cta__phone:hover, a.footer-cta__phone:focus-visible{ color:#fff; text-decoration:underline; }

.footer-heading{
  font-family:var(--font);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  margin-block-end:var(--s3);
}

/* Büro adı — temadaki mavi vurgu satırı ("BeSecurity" karşılığı). */
.footer-address__name{
  margin:0 0 var(--s2);
  font-family:var(--font);
  font-size:21px;
  font-weight:700;
  color:var(--blue);
}

.footer-address{
  font-style:normal;
  line-height:1.7;
  color:var(--text-on-dark);
}

.footer-address p{ margin:0; }

/* Zarf ikonu + e-posta — temadaki gibi adresin altında ayrı bir blok. */
.footer-mail{ margin-block-start:var(--s4); }

.footer-mail__icon{ display:block; color:var(--blue); margin-block-end:var(--s2); }
.footer-mail__icon svg{ width:26px; height:26px; }

.footer-links{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s3) var(--s4);
  align-content:start;
}

@media (max-width: 640px){
  .footer-links{ grid-template-columns:1fr; }
}

.footer-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.95rem;
}

.footer-list a{
  display:inline-flex;
  align-items:center;
  gap:.8em;
  font-size:14px;
  color:var(--blue);
}

.footer-list a::before{
  content:"\2192";   /* → */
  color:var(--blue);
  font-size:.9em;
}

.footer-list a:hover, .footer-list a:focus-visible{ color:#fff; }

/* Yasal uyarı satırı (settings/footer_text) — koyu bölümün en altında. */
.footer-legal{
  margin:var(--s5) 0 0;
  padding-block-start:var(--s3);
  border-block-start:1px solid rgba(255, 255, 255, .08);
  font-size:13px;
  color:var(--muted-on-dark);
}

/* Alt satır — koyu zeminde, yasal uyarının hemen altında (ayrı açık
   renkli bar bilinçli kaldırıldı — kullanıcı talebi): solda telif,
   sağda kredi + başa dön. */
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s2) var(--s3);
  margin-block-start:var(--s3);
  font-size:13px;
  color:var(--muted-on-dark);
}

.footer-copyright{ margin:0; color:var(--muted-on-dark); }

.footer-bottom__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s3);
}

/* Tasarım kredisi — koyu zeminde beyaz link (".site-footer a" muted
   rengini sonra-tanımlı eşit özgüllükle ezer). */
.footer-credit{ color:var(--muted-on-dark); }

.footer-credit a{ color:#fff; font-weight:600; }

.footer-credit a:hover, .footer-credit a:focus-visible{ color:var(--blue); }

/* Başa dön — kare düğme (temadaki köşe oku); koyu zeminden bir ton
   açık kart zemini üstünde. */
a.footer-top{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  flex-shrink:0;
  background:var(--card);
  color:#fff;
  transition:background-color .15s ease;
}

a.footer-top:hover, a.footer-top:focus-visible{ background:var(--blue-bright); color:#fff; }

.footer-top svg{ width:20px; height:20px; }

.footer-social{
  display:flex;
  align-items:center;
  gap:var(--s2);
  list-style:none;
  margin:0;
  padding:0;
}

.footer-social a{ display:inline-flex; color:#626262; }

.footer-social a:hover, .footer-social a:focus-visible{ color:var(--blue); }

.footer-social svg{ width:18px; height:18px; }

/* ---------------------------------------------------------------- */
/* 9. Ana sayfa                                                      */
/* ---------------------------------------------------------------- */

/* --- 9.1 Hero -------------------------------------------------------- */
/* Arka plan (görsel/degrade) view'da inline style ile basılır (bkz.
   home.php — setting('hero_bg_image')); burada yalnız yerleşim. */

.home-hero{
  position:relative;
  min-height:86vh;
  display:flex;
  align-items:center;
  color:var(--text-on-dark);
}

/* Parallax görsel katmanı — hero'dan %12 taşkın (translate'te kenar boşluğu
   açılmasın); scroll'da site.js translateY ile yavaşça kaydırır. overflow
   kırpması section'da (aşağıda). Karartma degrade'i katmanın kendi
   ::after'ında: görselle birlikte kayar, ton her karede tutarlı kalır. */
.home-hero{ overflow:hidden; }

.hero-bg{
  position:absolute;
  inset:-12% 0;
  background-position:center;
  background-size:cover;
  will-change:transform;
}

/* Video varyantı (panelden hero_bg_video doluysa) — sarmalayıcı .hero-bg
   aynı kalır (parallax + karartma ortak), video katmanı kaplar. */
.hero-bg__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(2,4,17,.88) 0%, rgba(2,4,17,.55) 45%, rgba(2,4,17,.25) 100%);
}

/* Alt kenarda görsel, sonraki bölümün koyu zeminine (dark-800) yumuşakça
   erir — hero ile hizmet şeridi arasındaki geçiş keskin çizgisiz olur.
   (Bölüm zeminleri #0B1020'den #15192E'ye açıldı — kullanıcı talebi;
   ara duraklar aynı rengin rgb'si: 21,25,46.) */
.home-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:36%;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(21, 25, 46, .45) 55%,
    rgba(21, 25, 46, .85) 82%,
    var(--dark-800) 100%
  );
  pointer-events:none;
}

.home-hero .container{ position:relative; z-index:1; }

.hero-content{ max-width:760px; }   /* başlık 3 satırda kalsın (font aynı; 700-790 aralığı 3 satır, ölçüldü) */

.hero-title{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(44px, 6vw, 76px);
  line-height:1.05;
  color:#fff;
  margin-block-end:var(--s3);
}

/* Dinamik kelime — başlıkla AYNI font (Rajdhani; el yazısı denendi,
   daktilo efektiyle uyuşmadığı için iptal edildi — kullanıcı kararı),
   yalnız kum rengiyle ayrışır; site.js daktilo efektiyle kelimeleri
   sırayla yazar/siler (bkz. hero bölümü, home.php). display:block:
   kelime HER ZAMAN kendi satırındadır — yazma/silme sırasında genişlik
   değişse de üstteki/alttaki satırlar hiç kımıldamaz (boşken satır
   yüksekliğini imleç korur). */
.hero-title__dynamic{
  display:block;
  color:var(--sand);
  white-space:nowrap;
}

/* Başlığın devamı (2. bölüm) hep kendi satırında — dinamik kelimenin
   genişliği değişirken devam metni kaymaz (kullanıcı talebi). */
.hero-title__tail{ display:block; }

.hero-title__caret{
  display:inline-block;
  width:3px;
  height:.78em;
  margin-inline-start:.06em;
  vertical-align:-.06em;
  background:var(--sand);
  animation:hero-caret-blink 1.1s step-end infinite;
}

@keyframes hero-caret-blink{
  50%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .hero-title__caret{ display:none; }   /* JS de dönmez — ilk kelime sabit kalır */
}

.hero-text{
  max-width:480px;
  font-size:16px;
  color:var(--text-on-dark);
  margin-block-end:var(--s4);
}

.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
}

/* --- 9.2 Hizmet şeridi ------------------------------------------------- */

/* Üst 80px (hero'ya binen kısım) şeffaf — kartlar hero görselinin üstünde
   durur; gerisi koyu zemine döner. Böylece hero'dan sonraki akış, temadaki
   gibi kesintisiz koyu devam eder. */
.service-strip{
  position:relative;
  z-index:2;
  margin-top:-80px;
  padding-bottom:var(--s6);
  background:linear-gradient(to bottom, transparent 80px, var(--dark-800) 80px);
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--s3);   /* temadaki gibi kartlar arasi belirgin bosluk */
}

@media (min-width: 1100px){
  .service-grid{ grid-template-columns:repeat(5, 1fr); gap:var(--s4); }
}

.service-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  padding:34px 30px;
  min-height:264px;   /* dikey oran — ikon/başlık arası boşluk ölçülü */
  background:var(--royal);
  color:#fff;
  text-decoration:none;
  transition:transform .2s ease, filter .2s ease;
}

.service-grid > .service-card:first-child,
.service-grid > .service-card:nth-child(2n+1){
  border-left:0;
}

@media (min-width: 1100px){
  .service-grid > .service-card:nth-child(2n+1){ border-left:1px solid rgba(255, 255, 255, .1); }
  .service-grid > .service-card:first-child{ border-left:0; }
}

.service-card:hover, .service-card:focus-visible{
  transform:translateY(-4px);
  filter:brightness(1.08);
  color:#fff;
}

.service-card--more{ background:var(--dark-700); }

.service-card__icon{ display:inline-flex; color:#fff; }
/* Büyük boyutta çizgiler ölçeklenip kalınlaşır (24px tuvalde 1.5 → 80px'te
   ~5px); stroke-width CSS'ten düşürülür → efektif ~2.5px, ince ve zarif. */
.service-card__icon svg{ width:80px; height:80px; stroke-width:.75; }

.service-card__title{
  font-family:var(--font);
  font-weight:600;
  font-size:21px;
  line-height:1.35;
  color:#fff;
  margin:0;
  margin-block-start:auto;     /* başlık + çizgi kartın altına yaslanır */
  max-width:min-content;       /* her kelime kendi satırına — "Ceza / Hukuku" */
}

/* "Tüm Çalışma Alanları" kartında başlık doğal kırılır (min-content
   3 satıra bölerdi); üstte durur, ok altta. */
.service-card--more .service-card__title{
  max-width:none;
  margin-block-start:0;
}

.service-card__line{
  width:40px;
  height:2px;
  background:rgba(255, 255, 255, .5);
}

.service-card__arrow{
  margin-block-start:auto;
  font-size:22px;
  line-height:1;
  color:var(--sand);   /* açık kahve/kum ok — temadaki gibi */
}

/* --- 9.3 Split tanıtım --------------------------------------------------- */

/* Split bölüm koyu zeminde ve İÇERİK HİZASINDA durur (temadaki gibi tam
   genişliğe yayılmaz — .container sarmalayıcısı view'da). */
.home-split{
  background:var(--dark-800);
  padding-block:var(--s6);
}

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

@media (min-width: 1000px){
  .split-grid{ grid-template-columns:55fr 45fr; }
}

.split-media{
  position:relative;
  min-height:460px;
  background:var(--dark-800);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Panelden görsel seçildiğinde sol panel fotoğraf olur; başlık, alttaki
   koyu degrade şerit üstünde okunur (temadaki foto-üstü başlık deseni). */
.split-media--photo{
  background-size:cover;
  background-position:center;
}

.split-media__amblem{
  width:300px;
  max-width:60%;
  opacity:.12;
}

.split-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--s3);
  padding:var(--s6);
  background:var(--sand-soft);
  color:#2A2416;
}

.split-panel__title{
  font-family:var(--font);
  font-weight:700;
  font-size:30px;
  line-height:1.15;
  color:#1F1A0E;   /* sand zeminde koyu başlık */
  margin:0;
}

.split-panel__text{
  font-size:15px;
  line-height:1.8;
  color:#2A2416;
  margin:0;
}

/* --- 9.4 İstatistikler --------------------------------------------------- */

/* Üstteki split bölümle AYNI koyu zemin (temada ton değişmez). */
.home-stats{
  padding-block:var(--s6);
  background:var(--dark-800);
  color:var(--text-on-dark);
}

.stats-grid{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:var(--s5);
}

@media (min-width: 900px){
  .stats-grid{ grid-template-columns:1fr 1fr; }
}

.stats-lead{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s4);
}

.stats-lead__title{
  font-family:var(--font);
  font-weight:700;
  font-size:40px;
  line-height:1.25;
  color:#fff;
  margin:0;
}

.stats-cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--s3);
}

.stat-card{
  padding:28px;
  background:var(--card);
}

.stat-card__value{
  display:block;
  font-family:var(--font);
  font-weight:700;
  font-size:44px;
  line-height:1;
  color:var(--blue);
}

.stat-card__line{
  display:block;
  width:36px;
  height:2px;
  background:var(--blue);
  margin-block:var(--s2);
}

.stat-card__label{
  display:block;
  font-size:14px;
  color:var(--muted-on-dark);
}

/* --- 9.5 Çalışma Alanları (8) --------------------------------------------- */

.home-areas{ background:var(--cream); }

.areas-head-row{
  display:flex;
  align-items:center;
  gap:var(--s4);
  margin-block-end:var(--s5);
}

.areas-head-row h2{
  font-family:var(--font);
  font-weight:700;
  font-size:34px;
  color:var(--ink);
  white-space:nowrap;
  margin:0;
}

.areas-head-row__line{
  flex:1;
  height:1px;
  background:var(--blue);
}

.areas-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s4);
}

@media (min-width: 640px){
  .areas-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (min-width: 1100px){
  .areas-grid{ grid-template-columns:repeat(4, 1fr); }
}

.area-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  padding:28px;
  background:#fff;
  border:0;
  border-radius:var(--radius);
  transition:box-shadow .2s ease, transform .2s ease;
}

.area-card:hover, .area-card:focus-within{
  box-shadow:0 12px 30px rgba(2, 4, 17, .1);
  transform:translateY(-3px);
}

.area-card__icon{ display:inline-flex; color:var(--blue); }
.area-card__icon svg{ width:36px; height:36px; }

.area-card__title{
  font-size:18px;
  font-weight:600;
  color:var(--ink);
  margin-block-end:0;
}

.area-card__title a{
  color:inherit;
  text-decoration:none;
}

.area-card__title a::after{
  content:"";
  position:absolute;
  inset:0;
}

.area-card__title a:focus-visible{ outline:none; }
.area-card__title a:focus-visible::after{
  outline:2px solid var(--blue);
  outline-offset:3px;
}

.area-card__excerpt{
  flex:1;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft);
  margin-block-end:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}

.area-card__more{
  font-family:var(--font);
  font-size:14px;
  font-weight:600;
  color:var(--blue);
}

/* --- 9.6 CTA bandı --------------------------------------------------------- */

/* Zemin standart koyu bölüm rengi (dark-800) — footer'ın daha koyu
   dark-950 zemininden bilinçle ayrışır (kullanıcı talebi: CTA footer'ın
   devamı gibi görünmesin). */
.cta-band{
  padding-block:var(--s6);
  background:var(--dark-800);
  color:var(--text-on-dark);
  text-align:center;
}

.cta-band__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s3);
  max-width:38rem;
  margin-inline:auto;
}

.cta-band h2{
  font-family:var(--font);
  font-weight:700;
  font-size:36px;
  color:#fff;
  margin:0;
}

.cta-band p{
  max-width:55ch;
  margin:0;
  color:var(--muted-on-dark);
}

/* ---------------------------------------------------------------- */
/* 10. İç sayfalar                                                   */
/* ---------------------------------------------------------------- */

/* --- 10.1 Sayfa başlığı bandı (.page-band) ---------------------------- */
/* Ortak bant: about/areas/area-detail/contact hepsi bunu kullanır
   ("section section--dark" markup'ıyla birlikte — burada bilinçli olarak
   AYNI özgüllükte (tek sınıf) tanımlanan .page-band, dosyada .section--dark
   kuralından SONRA geldiği için zemin/dolgu değerlerini geçersiz kılar,
   bkz. .btn--blue'daki özgüllük notu — burada seçici hilesi yerine kaynak
   sırası kullanılır). Amblem/filigran YOKTUR — bilinçli olarak sade. */

.page-band{
  position:relative;
  background:var(--dark-800);
  background-image:linear-gradient(115deg, rgba(73, 130, 208, .12) 0%, rgba(73, 130, 208, 0) 45%);
  padding-block:90px;
}

.page-band h1{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(40px, 5vw, 56px);
  color:#fff;
  max-width:820px;
  margin:0;
}

.page-band__excerpt{
  max-width:640px;
  margin-block-start:var(--s3);
  margin-block-end:0;
  font-size:16px;
  color:var(--text-on-dark);
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55em;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  margin-block-end:var(--s3);
}

.breadcrumb a{ color:var(--blue); }
.breadcrumb a:hover, .breadcrumb a:focus-visible{ color:#fff; }
.breadcrumb__sep{ color:var(--muted-on-dark); }
.breadcrumb [aria-current="page"]{ color:var(--muted-on-dark); }

/* --- 10.2 Bölüm başlığı deseni (.section-head) ------------------------ */
/* Ana sayfadaki ".areas-head-row" (başlık + sağa uzanan çizgi) deseninin
   iç sayfalarda tekrar kullanılan genel biçimi — kicker + h2 solda, ince
   --blue çizgi sağa doğru uzar. Koyu zeminlerde (.section--dark içinde)
   başlık otomatik beyaza döner. */

.section-head{
  display:flex;
  align-items:flex-end;
  gap:var(--s4);
  margin-block-end:var(--s5);
}

.section-head__text{
  display:flex;
  flex-direction:column;
  gap:.3em;
}

.section-head h2{
  font-family:var(--font);
  font-weight:700;
  font-size:32px;
  color:var(--ink);
  white-space:nowrap;
  margin:0;
}

.section--dark .section-head h2{ color:#fff; }

.section-head__line{
  flex:1;
  height:1px;
  min-width:40px;
  background:var(--blue);
  margin-block-end:.4em;
}

/* --- 10.3 .prose (Hakkımızda hikaye, ekip biyografisi, alan gövdesi) --- */

.prose{
  font-size:15px;
  line-height:1.8;
  color:var(--ink-soft);
}

.prose > *:last-child{ margin-block-end:0; }

.prose p{ margin-block-end:var(--s3); }

.prose h2, .prose h3{
  font-family:var(--font);
  font-weight:700;
  color:var(--ink);
  line-height:1.25;
  margin-block:var(--s4) var(--s2);
}

.prose h2{ font-size:26px; }
.prose h3{ font-size:20px; }

.prose ul, .prose ol{
  margin-block-end:var(--s3);
  padding-inline-start:1.3em;
}

.prose li{ margin-block-end:.4em; }

.prose blockquote{
  margin-block:var(--s4);
  margin-inline:0;
  padding-inline-start:var(--s3);
  border-left:3px solid var(--blue);
  font-style:italic;
  color:var(--ink);
}

.prose a{ color:var(--blue); text-decoration:underline; text-underline-offset:.15em; }
.prose a:hover, .prose a:focus-visible{ color:var(--blue-bright); }

.prose strong{ color:var(--ink); font-weight:700; }

/* --- 10.4 Hakkımızda ---------------------------------------------------- */

.about-story{ background:var(--cream); }

/* Büro tanıtımı: görsel (panelden story_image) + metin %50-%50 yan yana;
   görsel boşken view tek sütunlu .story-prose basar (bkz. about.php).
   Görsel sütunu metin yüksekliğine stretch olur, cover ile kırpılır. */
.story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s5);
  align-items:stretch;
}

.story-media{
  background-position:center;
  background-size:cover;
  min-height:320px;
}

@media (max-width: 900px){
  .story-grid{ grid-template-columns:1fr; }
  .story-media{ min-height:0; aspect-ratio:3 / 2; }
}

.about-values{ background:var(--dark-800); }

.values-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s3);
}

@media (min-width: 640px){
  .values-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (min-width: 1100px){
  .values-grid{ grid-template-columns:repeat(4, 1fr); }
}

.value-card{
  padding:28px;
  background:var(--card);
}

.value-card__title{
  font-family:var(--font);
  font-weight:600;
  font-size:17px;
  color:#fff;
  margin:0;
}

.value-card__line{
  display:block;
  width:36px;
  height:2px;
  background:var(--blue);
  margin-block:var(--s2);
}

.value-card__desc{
  font-size:14px;
  line-height:1.6;
  color:var(--muted-on-dark);
  margin:0;
}

.about-team{ background:var(--light); }

.team-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s4);
}

@media (min-width: 640px){
  .team-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (min-width: 1100px){
  .team-grid{ grid-template-columns:repeat(4, 1fr); }
}

.team-card{
  background:#fff;
  padding-block-end:var(--s3);
  transition:box-shadow .2s ease, transform .2s ease;
}

.team-card:hover{
  box-shadow:0 12px 30px rgba(2, 4, 17, .1);
  transform:translateY(-3px);
}

/* .media-frame sarmalayıcısı (bkz. about.php) — span'i blok akışına alır;
   çift çerçeve deseni burada, fotoğraf içinde kalır. */
.team-card__frame{ display:block; }

.team-card__photo{
  display:block;
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
}

/* Fotoğrafsız üye: lacivert zemin üstünde ortalanmış amblem.svg (monogram
   YERİNE — bkz. about.php docblock). */
.team-card .avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--dark-800);
}

.avatar-fallback__mark{ width:80px; height:auto; opacity:.85; }

.team-card__name{
  font-family:var(--font);
  font-weight:700;
  font-size:18px;
  color:var(--ink);
  margin:var(--s3) var(--s3) 0;
}

.team-card__title{
  display:block;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--blue);
  margin:.5em var(--s3) var(--s2);
}

.team-card__bio{
  margin-inline:var(--s3);
  font-size:14px;
}

/* --- 10.5 Çalışma Alanları listesi -------------------------------------- */
/* .area-card / .area-card__* ana sayfa (bölüm 9.5) ile PAYLAŞILIR —
   burada yalnız liste sayfasına özgü zemin ve daha geniş (3 sütun) ızgara
   kırılımı tanımlanır (iki sınıflı seçici, home'daki 4 sütunluk kuralı
   özgüllükle geçersiz kılar). */

.areas-list{ background:var(--cream); }

.areas-grid.area-grid--wide{ gap:var(--s4); }

@media (min-width: 1100px){
  .areas-grid.area-grid--wide{ grid-template-columns:repeat(3, 1fr); }
}

/* --- 10.6 Alan detay ------------------------------------------------------ */

.area-detail-section{ background:#fff; }

.area-detail-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s5);
}

@media (min-width: 1000px){
  .area-detail-grid{ grid-template-columns:2fr 1fr; align-items:start; }
}

.area-detail-aside{
  display:flex;
  flex-direction:column;
  gap:var(--s4);
}

@media (min-width: 1000px){
  .area-detail-aside{ position:sticky; top:var(--s3); }
}

.other-areas{ background:var(--light); }

.other-areas__title{
  font-family:var(--font);
  font-weight:700;
  font-size:16px;
  color:var(--ink);
  padding:var(--s3);
  margin:0;
}

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

.other-areas__list li{ border-block-end:1px solid #ddd; }
.other-areas__list li:last-child{ border-block-end:0; }

.other-areas__link{
  display:flex;
  align-items:center;
  gap:.7em;
  padding:14px var(--s3);
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}

.other-areas__link:hover, .other-areas__link:focus-visible{
  background:#fff;
  color:var(--blue);
}

.other-areas__icon{ display:inline-flex; flex-shrink:0; color:var(--blue); }
.other-areas__icon svg{ width:18px; height:18px; }

/* Royal CTA kutusu — footer'daki ".footer-cta" ile AYNI dil (dolu royal
   zemin, beyaz metin), ayrı bir bileşen olarak (aside içinde, farklı
   bağlamda) tekrar tanımlanır. */
.cta-box{
  padding:30px;
  background:var(--royal);
  color:#fff;
}

.cta-box__title{
  font-family:var(--font);
  font-weight:700;
  font-size:20px;
  color:#fff;
  margin:0 0 .5em;
}

.cta-box__text{
  font-size:14px;
  line-height:1.6;
  color:rgba(255, 255, 255, .75);
  margin:0 0 var(--s3);
}

.cta-box__phone{ margin:0 0 var(--s3); }

.cta-box__phone a{
  font-family:var(--font);
  font-weight:700;
  font-size:22px;
  color:#fff;
  text-decoration:none;
}

.cta-box__phone a:hover, .cta-box__phone a:focus-visible{ text-decoration:underline; }

/* --- 10.7 İletişim ------------------------------------------------------- */

/* Tema düzeni: bölümün dikey section padding'i SIFIR — beyaz form kartı
   üstte page-band'e, altta footer'a bitişik durur (".section" s6 kuralını
   sonra-tanımlı eşit özgüllükle ezer); sağ bilgi sütunu kendi üst/alt
   payını .contact-side'da taşır. */
.contact-main{ background:var(--dark-800); padding-block:0; }

.form-success{
  background:var(--royal);
  color:#fff;
  padding:var(--s3) var(--s4);
  margin-block-end:var(--s4);
}

.form-success p{ margin:0; }

/* Sütunlar stretch (varsayılan): beyaz kart, sağ sütun daha uzun olsa da
   bölümün alt kenarına kadar iner (temadaki görünüm — kart alt kısmı boş
   beyaz kalabilir, bilinçli). */
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s5);
}

@media (min-width: 960px){
  .contact-grid{ grid-template-columns:7fr 5fr; }
}

.contact-form-card{
  background:#fff;
  padding:40px;
}

/* "h2." öneki ŞART: bölüm ".section--dark" olduğundan
   ".section--dark :is(h1..h6)" kuralı (0,0,1,1) başlığı beyaza boyar —
   beyaz kart üstünde görünmez oluyordu. h2+sınıf aynı özgüllüğe çıkar,
   sonra tanımlandığı için kazanır (bkz. .btn--blue'daki aynı desen). */
h2.contact-form-card__title{
  font-family:var(--font);
  font-weight:700;
  font-size:24px;
  color:var(--ink);
  margin:0 0 var(--s4);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s3);
  margin-block-end:var(--s4);
}

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

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

.form-field label{
  display:block;
  font-size:13px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--ink);
  margin-block-end:.5em;
}

.form-field input, .form-field textarea{
  width:100%;
  padding:12px;
  border:1px solid #d5d5d5;
  border-radius:var(--radius);
  font-family:var(--font);
  font-size:15px;
  color:var(--ink);
  background:#fff;
  transition:border-color .15s ease;
}

.form-field input:focus-visible, .form-field textarea:focus-visible,
.form-field input:focus, .form-field textarea:focus{
  outline:none;
  border-color:var(--blue);
}

.form-field textarea{ resize:vertical; min-height:140px; }

.form-field.has-error input, .form-field.has-error textarea{ border-color:#C0392B; }

.form-error{ margin-block-start:.4em; font-size:13px; color:#C0392B; }

.form-field--kvkk{ display:flex; flex-direction:column; gap:.7em; }

.kvkk-disclosure summary{
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:var(--blue);
}

.kvkk-disclosure__body{
  margin-block-start:.6em;
  max-height:180px;
  overflow-y:auto;
  padding-inline-end:.5em;
  font-size:13px;
  line-height:1.7;
  color:var(--ink-soft);
}

.checkbox-field{
  display:flex;
  align-items:flex-start;
  gap:.6em;
  font-size:14px;
  color:var(--ink);
}

.checkbox-field input{ width:auto; margin-block-start:.2em; }

.contact-form__submit{ width:100%; }

.contact-side{
  padding-block:var(--s6);
  color:var(--text-on-dark);
}

.contact-side__title{
  font-family:var(--font);
  font-weight:700;
  font-size:22px;
  color:#fff;
  margin:0;
}

.contact-side__line{
  display:block;
  width:60px;
  height:1px;
  background:var(--blue);
  margin-block:var(--s3);
}

.contact-details{
  display:flex;
  flex-direction:column;
  gap:var(--s4);
}

.contact-details__label{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-on-dark);
  margin-block-end:.4em;
}

.contact-details__value{
  font-size:15px;
  line-height:1.6;
  color:var(--text-on-dark);
  margin:0;
}

.contact-details__value a{ color:var(--blue); }
.contact-details__value a:hover, .contact-details__value a:focus-visible{ color:#fff; }

/* Harita şeridi — .section--dark varsayılanı (--dark-800) zaten istenen
   zemin olduğundan üzerine yazmaya gerek yok. */
/* Harita — sağ bilgi sütununun en altında (Çalışma Saatleri'nin altı);
   iframe doğrudan yüklenir ("Haritayı Yükle" opt-in'i kullanıcı kararıyla
   kaldırıldı, 2026-08-22); önceki tam genişlik alt şerit de yok. */
.contact-side__map{ margin-block-start:var(--s4); }

.contact-map__iframe{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  border:0;
}

/* --- 10.8 404 -------------------------------------------------------------- */

.not-found{
  background:var(--dark-950);
  min-height:70vh;
  display:flex;
  align-items:center;
}

.not-found__inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s3);
  max-width:640px;
}

.not-found h1{
  font-family:var(--font);
  font-weight:700;
  font-size:48px;
  color:#fff;
  margin:0;
}

.not-found__text{
  font-size:15px;
  color:var(--muted-on-dark);
  margin:0;
}