/* ==========================================================================
   Özel İz Özel Eğitim ve Rehabilitasyon Merkezi
   Tasarım sistemi — palet mevcut kurumsal kimlikten alınmıştır.
   ========================================================================== */

/* --------------------------------------------------------------- TOKENLAR */
:root {
  /* ------------------------------------------------------------------
     Palet, eski sitenin canlı DOM'undan ölçülerek alınmıştır.
       başlık lacivert  rgb(0,10,147)   #000a93
       koyu lacivert    rgb(0,12,63)    #000c3f
       kırmızı vurgu    rgb(221,51,51)  #dd3333
       aktif menü mavi  rgb(16,108,199) #106cc7
       buton gradyanı   #d1651a -> #c1282a -> #d1651a
     ------------------------------------------------------------------ */
  --lacivert:      #000a93;
  --lacivert-koyu: #000c3f;
  --lacivert-2:    #0a1a6b;
  --mavi:          #106cc7;

  --kirmizi:       #dd3333;
  --kirmizi-koyu:  #c1282a;
  --kirmizi-soft:  #fdeeee;

  --turuncu:       #d1651a;
  --turuncu-koyu:  #a94d10;
  --turuncu-soft:  #fdf3ea;

  --gradyan: linear-gradient(90deg, #d1651a 0%, #c1282a 50%, #d1651a 100%);

  /* Eski adlar, bileşenlerin bozulmaması için lacivert kimliğe bağlandı */
  --brand:        var(--lacivert);
  --brand-deep:   var(--lacivert-koyu);
  --brand-dark:   var(--lacivert-koyu);
  --brand-soft:   #eef0fb;
  --brand-tint:   #d6dbf4;
  --red:          var(--kirmizi);
  --red-deep:     var(--kirmizi-koyu);
  --yellow:       #ffd200;

  /* Nötrler — hafif soğuk, lacivertle akraba */
  --ink:          #000c3f;
  --ink-2:        #383838;
  --ink-3:        #6b7280;
  --rule:         #dfe3ee;
  --rule-soft:    #eef0f5;
  --paper:        #ffffff;
  --paper-2:      #f7f8fc;
  --paper-3:      #eef1f8;

  /* Tipografi — eski site: Poppins başlık, Roboto gövde, Playfair hero */
  --display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --body:    "Roboto", "Segoe UI", system-ui, sans-serif;
  --serif:   "Playfair Display", Georgia, serif;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.48rem + 1.35vw, 2.65rem);
  --step-4:  clamp(2.10rem, 1.62rem + 2.40vw, 3.60rem);
  --step-5:  clamp(2.50rem, 1.70rem + 4.00vw, 4.75rem);

  /* Ritim */
  --gap:   clamp(1rem, 0.7rem + 1.5vw, 2rem);
  --bay:   clamp(3.5rem, 2rem + 6vw, 7rem);
  --shell: 1240px;
  --radius: 8px;      /* eski site köşeleri keskin: butonlarda 3px, kartlarda ~6px */
  --radius-lg: 12px;
  --radius-btn: 4px;

  --shadow-sm: 0 1px 2px rgba(0,12,63,.05), 0 3px 8px rgba(0,12,63,.05);
  --shadow-md: 0 4px 12px rgba(0,12,63,.06), 0 14px 32px rgba(0,12,63,.08);
  --shadow-lg: 0 10px 28px rgba(0,12,63,.10), 0 30px 70px rgba(0,12,63,.13);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* `clip`, `hidden`in aksine kaydırma bağlamı oluşturmaz; sticky başlığı bozmaz.
   Kapalı mobil çekmece ekranın sağında durduğu için bu gerekli. */
html { overflow-x: hidden; overflow-x: clip; }

body {
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.014em; }

p { text-wrap: pretty; }

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }

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

::selection { background: var(--brand-tint); color: var(--ink); }

/* Ekran okuyucu */
.gorsel-gizli {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.atla {
  position: absolute; left: 1rem; top: -100%;
  z-index: 200; background: var(--ink); color: #fff;
  padding: .8rem 1.4rem; border-radius: 0 0 10px 10px;
  transition: top .2s var(--ease);
}
.atla:focus { top: 0; }

/* ------------------------------------------------------------- DÜZEN */
.kabuk {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}
@media (max-width: 640px) { .kabuk { width: min(100% - 1.75rem, var(--shell)); } }

.bolum { padding-block: var(--bay); }
.bolum--sicak { background: var(--paper-2); }
.bolum--kum   { background: var(--paper-3); }
.bolum--koyu  { background: var(--ink); color: #d8cec5; }
.bolum--koyu h2, .bolum--koyu h3 { color: #fff; }

/* --------------------------------------- İKİ TONLU BAŞLIK (eski site imzası)
   Eski sitede başlıklar tek cümlede lacivert + kırmızı olarak bölünür:
   "Kurum <span class='vurgu'>etkinliklerimizi</span> incelediniz mi?"        */
h1, h2, h3 { color: var(--lacivert-koyu); }
.vurgu { color: var(--kirmizi); }
.bolum--koyu .vurgu, .hero .vurgu, .sayfa-tepe .vurgu { color: #ff6b6b; }

/* "İz" motifi — artık yalnızca ince bir alt çizgi olarak, kırmızı */
.iz { position: relative; display: inline-block; }
.iz::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.08em;
  height: 3px;
  background: var(--kirmizi);
  border-radius: 2px;
  pointer-events: none;
}
.iz--kalem::after { background: var(--turuncu); }


/* Bölüm etiketi — eski sitedeki gibi küçük, sade üst yazı */
.etiket {
  display: block;
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: .5rem;
}
.bolum--koyu .etiket { color: #b9c0d8; }

.bolum-basi { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.bolum-basi p { font-size: var(--step-1); color: var(--ink-3); margin-top: 1rem; }
.bolum--koyu .bolum-basi p { color: #aab2cc; }

/* Ortalanmış bölüm başlığı — eski sitede sıkça kullanılıyor */
.bolum-basi--orta { max-width: 46rem; margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------- DÜĞMELER */
.dugme {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  font-family: var(--display); font-weight: 600; font-size: var(--step-0);
  padding: .9rem 1.6rem;
  border: 2px solid transparent; border-radius: var(--radius-btn);
  text-decoration: none; cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-position .45s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease);
}
.dugme svg { width: 1.05em; height: 1.05em; flex: none; }
.dugme:hover { transform: translateY(-2px); }
.dugme:active { transform: translateY(0); }

/* Eski sitenin "Telefon" düğmesi: turuncu -> kırmızı -> turuncu, hover'da kayar */
.dugme--dolu {
  background: var(--gradyan);
  background-size: 200% 100%;
  background-position: 0% 0;
  color: #fff;
  box-shadow: 0 6px 18px rgba(193,40,42,.28);
}
.dugme--dolu:hover {
  background-position: 100% 0;
  color: #fff;
  box-shadow: 0 10px 26px rgba(193,40,42,.38);
}

/* Eski sitenin "İletişim" düğmesi: düz kırmızı */
.dugme--kirmizi { background: var(--kirmizi); color: #fff; }
.dugme--kirmizi:hover { background: var(--kirmizi-koyu); color: #fff; }

.dugme--cizgi { border-color: var(--rule); color: var(--lacivert-koyu); background: transparent; }
.dugme--cizgi:hover { border-color: var(--lacivert); color: var(--lacivert); background: var(--brand-soft); }

.dugme--acik { background: #fff; color: var(--lacivert-koyu); }
.dugme--acik:hover { background: var(--brand-soft); color: var(--lacivert); }

.dugme--hayalet { border-color: rgba(255,255,255,.4); color: #fff; }
.dugme--hayalet:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }

/* Metin bağlantısı — ok kayar */
.bag {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--display); font-weight: 600;
  color: var(--kirmizi); text-decoration: none;
}
.bag svg { width: 1em; height: 1em; transition: transform .22s var(--ease); }
.bag:hover { color: var(--kirmizi-koyu); }
.bag:hover svg { transform: translateX(4px); }

/* ------------------------------------------------- ÜST ŞERİT + BAŞLIK BLOĞU
   Eski sitedeki gibi: hero görselinin ÜSTÜNE biner. Üst şerit şeffaf, başlık
   beyaz yüzen bir kutu. Sayfa kaydırılınca üst şerit kapanır, kutu sabitlenir. */
/* Şerit + başlık kutusu: hero görselinin ÜSTÜNE binen sabit blok.
   z-index 90 — hero'nun (2) üstünde, mobil çekmecenin (99) altında kalmalı. */
.site-basi {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
}

/* Şeffaf: arkasında hero görseli (anasayfa) ya da koyu .sayfa-tepe (iç sayfa)
   olduğu için beyaz yazı okunur. Gölge, parlak alanlarda güvence sağlar. */
.ust-serit {
  color: #fff;
  font-size: .84rem;
  overflow: hidden;
  max-height: 46px;
  transition: max-height .3s var(--ease), opacity .25s var(--ease),
              background .3s var(--ease);
  text-shadow: 0 1px 8px rgba(0,8,40,.75), 0 0 2px rgba(0,8,40,.5);
}
.ust-serit__ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 46px; flex-wrap: nowrap;
}
.ust-serit__sol { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust-serit__sag { display: flex; align-items: center; gap: 1.6rem; flex: none; }
.ust-serit a {
  color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
}
.ust-serit a:hover { color: var(--yellow); }
.ust-serit svg { width: 15px; height: 15px; color: var(--kirmizi); flex: none; }

/* Kaydırıldığında: üst şerit katlanır, başlık kutusu tam genişliğe oturur */
.site-basi--kayik .ust-serit { max-height: 0; opacity: 0; }
.site-basi--kayik .tepe__ic { box-shadow: 0 4px 22px rgba(0,12,63,.16); }

@media (max-width: 900px) {
  .ust-serit__sol { display: none; }
  .ust-serit__ic { justify-content: center; }
  .ust-serit__sag { gap: 1.1rem; font-size: .78rem; }
}
@media (max-width: 480px) {
  .ust-serit__sag a:last-child { display: none; }  /* e-posta uzun; telefon kalsın */
}
/* Mobil menü açıkken şerit çekmecenin üstünde asılı kalıyordu. */
body[data-menu="acik"] .ust-serit { visibility: hidden; }

/* ----------------------------------------------------------------- BAŞLIK */
/* Header, hero'nun (z-index:2) ÜSTÜNde kalmalı; yoksa açılır menü linkleri
   hero tarafından örtülüp tıklanamaz hale gelir. */
.tepe { position: relative; z-index: 50; }
.tepe__ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 78px;
  background: #fff;
  padding-inline: clamp(1.1rem, 1.8vw, 1.75rem);
  border-radius: 18px;                       /* yüzen kutu: yumuşak köşeler */
  box-shadow: 0 6px 28px rgba(0,12,63,.18);
  transition: box-shadow .25s var(--ease), min-height .25s var(--ease),
              border-radius .25s var(--ease);
}
@media (max-width: 900px) { .tepe__ic { min-height: 66px; } }

/* Logo görselinin kendisi kurum adını taşır; yanına metin koymuyoruz. */
.marka { display: flex; align-items: center; text-decoration: none; flex: none; }
.marka img { height: 48px; width: auto; }
@media (max-width: 900px) { .marka img { height: 40px; } }
@media (max-width: 380px) { .marka img { height: 34px; } }

/* Gezinme */
.gezinme { display: flex; align-items: center; gap: .1rem; min-width: 0; }
@media (max-width: 1140px) { .gezinme { display: none; } }

/* Aktif sekmede kırmızı alt çizgi, metin mavi — eski sitenin davranışı */
.gezinme a {
  position: relative;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--lacivert-koyu); text-decoration: none;
  padding: .6rem .7rem;
  transition: color .18s var(--ease);
  white-space: nowrap;
}
.gezinme a:hover { color: var(--mavi); }
.gezinme a[aria-current="page"] { color: var(--mavi); }
.gezinme a[aria-current="page"]::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -.15rem;
  height: 3px; background: var(--kirmizi);
}

/* Açılır hizmet menüsü */
.menu-sarmal { position: relative; }
.menu-sarmal > button {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--lacivert-koyu); background: none; border: 0; cursor: pointer;
  padding: .6rem .7rem; white-space: nowrap;
}
.menu-sarmal > button:hover { color: var(--mavi); }
.menu-sarmal > button svg { width: .7em; height: .7em; transition: transform .2s var(--ease); }
.menu-sarmal[data-acik="true"] > button svg { transform: rotate(180deg); }

/* Bu bölümdeki bir sayfadaysak, üst menü öğesi de etkin görünsün */
.menu-sarmal > button[data-etkin] { color: var(--mavi); }
.menu-sarmal > button[data-etkin]::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -.15rem;
  height: 3px; background: var(--kirmizi);
}
.menu-sarmal > button { position: relative; }

/* Açılır / mega menü.
   Buton ile panel arasındaki boşluk, imleç oradan geçerken mouseleave
   tetikleyip menüyü kapatıyordu. `::before` ile görünmez bir köprü kuruyoruz. */
.acilir {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  margin-top: .8rem;
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: 16px;                     /* yüzen başlık kutusuyla uyumlu */
  box-shadow: 0 20px 48px rgba(0,12,63,.16), 0 3px 10px rgba(0,12,63,.06);
  padding: .5rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* Görünmez köprü: butonun altını panelin üstüne bağlar */
.acilir::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -1rem; height: 1.2rem;
}
/* Butona bakan küçük ok ucu */
.acilir::after {
  content: ""; position: absolute;
  top: -7px; left: 50%; margin-left: -6px;
  width: 12px; height: 12px;
  background: #fff;
  border-left: 1px solid var(--rule-soft);
  border-top: 1px solid var(--rule-soft);
  border-radius: 3px 0 0 0;
  transform: rotate(45deg);
}
.menu-sarmal[data-acik="true"] .acilir {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Küçük açılır (Kurumsal) — isimler tek satıra sığsın diye genişçe */
.acilir--sade { width: min(304px, 90vw); display: grid; gap: .12rem; }

/* Mega menü (Hizmetlerimiz) */
.acilir--mega { width: min(920px, 94vw); padding: 1.15rem; }
.acilir__baslik {
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: .8rem;
}
/* minmax(0,1fr): `1fr` varsayılan olarak min-width:auto alır ve uzun hizmet
   adları sütunu şişirip paneli taşırırdı. */
.acilir__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .15rem .6rem;
}

/* `.gezinme a` üst menüde nowrap tanımlar; mega menü de .gezinme içinde olduğu
   için bu miras kalıyor ve uzun hizmet adları komşu sütuna taşıyordu. */
.acilir a {
  display: flex; align-items: center; gap: .7rem;
  padding: .68rem .8rem; border-radius: 10px;
  font-size: .92rem; font-weight: 500; color: var(--ink-2);
  text-decoration: none; line-height: 1.35;
  min-width: 0;
  white-space: normal;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.acilir__ad { min-width: 0; overflow-wrap: break-word; }
.acilir a::after { display: none; }
.acilir a:hover { background: var(--brand-soft); color: var(--brand-deep); }

.acilir__ikon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 6px;
  background: var(--brand-soft); color: var(--lacivert);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.acilir__ikon svg { width: 18px; height: 18px; }
.acilir a:hover .acilir__ikon { background: var(--kirmizi); color: #fff; }

.acilir__nokta {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--rule);
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.acilir a:hover .acilir__nokta { background: var(--kirmizi); transform: scale(1.4); }

.acilir__tum {
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px solid var(--rule-soft);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap;
}
.acilir__tum p { font-size: .86rem; color: var(--ink-3); margin: 0; min-width: 0; }
.acilir__tum .dugme { padding: .6rem 1.1rem; font-size: .85rem; flex: none; white-space: nowrap; }

@media (max-width: 1240px) {
  .acilir--mega { width: min(700px, 92vw); }
  .acilir__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sağ blok — eski sitedeki "İletişim" + "Telefon" ikilisi */
.tepe__sag { display: flex; align-items: center; gap: .55rem; flex: none; }
.tepe__btn {
  padding: .7rem 1.15rem; font-size: .9rem; white-space: nowrap;
  border-radius: var(--radius-btn);
}
.tepe__btn svg { width: 1.15em; height: 1.15em; stroke-width: 1.8; }
.tepe__btn:hover { transform: none; }
@media (max-width: 1320px) { .tepe__btn { padding: .7rem .9rem; } }
@media (max-width: 1140px) { .tepe__sag .dugme { display: none; } }

/* Mobil düğme */
.sandvic {
  display: none; width: 46px; height: 46px;
  background: var(--brand-soft); border: 0; border-radius: 6px;
  cursor: pointer; padding: 0; place-items: center;
}
@media (max-width: 1140px) { .sandvic { display: grid; } }
.sandvic span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--brand-dark); position: relative;
  transition: background .2s var(--ease);
}
.sandvic span::before, .sandvic span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  border-radius: 2px; background: var(--brand-dark);
  transition: transform .28s var(--ease), top .2s var(--ease);
}
.sandvic span::before { top: -6px; }
.sandvic span::after  { top: 6px; }
.sandvic[aria-expanded="true"] span { background: transparent; }
.sandvic[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.sandvic[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Mobil çekmece — kapalıyken ekranın sağında bekler, html'deki overflow-x:clip kırpar.
   Üst boşluk, sabit üst şerit (46px) + başlık kutusundan (66px) daha büyük olmalı;
   aksi hâlde ilk menü öğesi başlığın altına giriyor. */
.cekmece {
  position: fixed; inset: 0; z-index: 99;
  background: #fff;
  padding: 1.15rem 1.5rem 2.5rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .34s var(--ease);
  visibility: hidden;
}
.cekmece[data-acik="true"] { transform: translateX(0); visibility: visible; }
/* Çekmece başlığı: logo (sol) + kapat butonu (sağ) */
.cekmece__bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.cekmece__marka { display: inline-flex; flex: none; text-decoration: none; }
.cekmece__marka img { height: 46px; width: auto; display: block; }
.cekmece__kapat {
  flex: none; width: 46px; height: 46px;
  display: grid; place-content: center;
  background: var(--paper-2); color: var(--ink);
  border: 0; border-radius: 12px; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.cekmece__kapat svg { width: 22px; height: 22px; }
.cekmece__kapat:hover { background: var(--brand-soft); color: var(--brand-deep); }
/* Masaüstünde hiç var olmasın: hem taşma hem de gereksiz DOM yükü */
@media (min-width: 1141px) { .cekmece { display: none; } }
.cekmece nav { display: flex; flex-direction: column; gap: .2rem; }
.cekmece nav > a, .cekmece__grup > button {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--display); font-weight: 600; font-size: 1.18rem;
  color: var(--ink); text-decoration: none;
  padding: 1rem .25rem; border-bottom: 1px solid var(--rule-soft);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; cursor: pointer; text-align: left;
}
.cekmece__grup > button svg { width: .8em; height: .8em; transition: transform .2s var(--ease); }
.cekmece__grup[data-acik="true"] > button svg { transform: rotate(180deg); }
.cekmece__alt {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.cekmece__grup[data-acik="true"] .cekmece__alt { grid-template-rows: 1fr; }
.cekmece__alt > div { overflow: hidden; }
.cekmece__alt > div { padding-block: .35rem; }
.cekmece__alt a {
  display: block; padding: .9rem .25rem .9rem 1.1rem;
  font-size: 1rem; color: var(--ink-2); text-decoration: none;
  border-left: 2px solid var(--rule);
}
.cekmece__alt a:hover { color: var(--brand-deep); border-color: var(--brand); }
.cekmece__ayak { margin-top: 2rem; display: grid; gap: .8rem; }
.cekmece__ayak .dugme { width: 100%; }

/* ------------------------------------------------------------------ HERO */
/* Eski sitedeki drone bina çekimi + serif slogan. */
.hero { position: relative; overflow: hidden; background: var(--lacivert-koyu); }
.hero__zemin { position: absolute; inset: 0; }
.hero__zemin img { width: 100%; height: 100%; object-fit: cover; }
/* Slogan fotoğrafa basılı olduğu için ağır maske yok; yalnızca üstte,
   beyaz başlık kutusunun ve şeffaf üst şeridin okunabilmesi için hafif bir koyulaşma. */
.hero__zemin::after {
  content: ""; position: absolute; inset: 0;
  /* Slogan fotoğrafa GÖMÜLÜ ve beyaz. Üstüne gelen her karartma onu da griye
     çevirdiği için merkez BOŞ bırakılır: yazı saf beyaz kalsın. Karartma yalnızca
     üstte (başlık kutusu için) ve kenarlarda (vinyet) uygulanır. */
  background:
    linear-gradient(180deg, rgba(0,12,63,.34) 0%, rgba(0,12,63,.05) 22%, rgba(0,12,63,0) 42%),
    radial-gradient(ellipse 78% 72% at 50% 50%,
      rgba(0,10,45,0) 46%, rgba(0,10,45,.18) 74%, rgba(0,10,45,.40) 100%);
}
/* Sabit başlık bloğu (şerit 46px + kutu 78px) hero'nun üstüne bindiği için,
   fotoğrafın gömülü sloganı başlığın altında kalsın diye yeterli yükseklik. */
.hero__ic {
  position: relative; z-index: 2;
  min-height: clamp(500px, 45vw, 680px);
}
/* ------------------------------------------------- İSTATİSTİK (lacivert kutu)
   Eski sitedeki "21⁺ Adet Derslik" kutularının ruhu.                         */
.guven {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .guven { grid-template-columns: repeat(2, 1fr); } }

.guven__oge {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow-md);
}
.guven__kutu {
  flex: none;
  width: 76px; height: 76px;
  display: grid; place-content: center;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--lacivert) 0%, var(--lacivert-koyu) 100%);
  background-image:
    radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(135deg, var(--lacivert) 0%, var(--lacivert-koyu) 100%);
  background-size: 7px 7px, 100% 100%;
}
.guven__sayi {
  font-family: var(--display); font-weight: 700;
  font-size: 1.7rem; color: #fff; line-height: 1;
}
.guven__sayi sup { font-size: .58em; top: -.55em; position: relative; color: #fff; }
.guven__baslik {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--lacivert-koyu); line-height: 1.25;
}
.guven__etiket { margin-top: .15rem; font-size: .86rem; color: var(--kirmizi); }
@media (max-width: 480px) {
  .guven__kutu { width: 60px; height: 60px; }
  .guven__sayi { font-size: 1.35rem; }
  .guven__baslik { font-size: .95rem; }
}

/* ----------------------------------------------------------- HİZMET KARTI */
.izgara { display: grid; gap: var(--gap); }
.izgara--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.izgara--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.izgara--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
/* Sabit 4 sütun (hizmet kartları) — daralınca kademeli iner */
.izgara--dort { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .izgara--dort { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .izgara--dort { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .izgara--dort { grid-template-columns: 1fr; } }

.hkart {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); padding: 2rem 1.75rem 1.6rem;
  text-decoration: none; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.hkart::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--gradyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.hkart:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-tint);
}
.hkart:hover::before { transform: scaleX(1); }

.hkart__ikon {
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--lacivert);
  border-radius: 8px; margin-bottom: 1.3rem;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.hkart__ikon svg { width: 27px; height: 27px; }
.hkart:hover .hkart__ikon { background: var(--lacivert); color: #fff; }

.hkart h3 { margin-bottom: .55rem; }
.hkart p {
  font-size: .96rem; color: var(--ink-3); line-height: 1.6;
  flex: 1; margin-bottom: 1.3rem;
}
.hkart__git {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-weight: 600; font-size: .9rem;
  color: var(--kirmizi);
}
.hkart__git svg { width: .95em; height: .95em; transition: transform .25s var(--ease); }
.hkart:hover .hkart__git svg { transform: translateX(4px); }

/* Numara filigranı */
.hkart__no {
  position: absolute; right: 1.2rem; top: .9rem;
  font-family: var(--display); font-weight: 700; font-size: 3.2rem;
  color: var(--lacivert); opacity: .06; line-height: 1;
  pointer-events: none;
}

/* -------------------------------------------------------- KURUM / HAKKINDA */
.ikili {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 900px) { .ikili { grid-template-columns: 1fr; } }

.foto-yigin { position: relative; }
.foto-yigin img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.foto-yigin__ust {
  position: absolute; right: -1.2rem; bottom: -1.8rem;
  width: 46%; border: 7px solid #fff;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
@media (max-width: 560px) { .foto-yigin__ust { display: none; } }

.foto-yigin__pul {
  position: absolute; left: -1.4rem; top: -1.4rem;
  background: var(--brand); color: #fff;
  border-radius: 50%; width: 116px; height: 116px;
  display: grid; place-content: center; text-align: center;
  box-shadow: var(--shadow-md); line-height: 1.05;
  font-family: var(--display);
}
.foto-yigin__pul b { display: block; font-size: 1.9rem; font-weight: 700; }
.foto-yigin__pul span { font-size: .72rem; letter-spacing: .05em; opacity: .92; }
@media (max-width: 560px) { .foto-yigin__pul { width: 88px; height: 88px; left: -.6rem; top: -.6rem; } .foto-yigin__pul b { font-size: 1.4rem; } }

/* -------------------------------------------- Fotoğraf sütunu = metin yüksekliği
   Dikey drone çekimi doğal yüksekliğiyle satırı uzatıyordu. Ana görseli akıştan
   çıkarıp mutlak konumlandırıyoruz; böylece satır yüksekliğini metin belirler. */
.ikili--esit { align-items: stretch; }
.ikili--esit .foto-yigin { min-height: 340px; }
.ikili--esit .foto-yigin > picture:first-of-type {
  position: absolute; inset: 0; display: block;
}
.ikili--esit .foto-yigin > picture:first-of-type img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
}
@media (max-width: 900px) {
  .ikili--esit .foto-yigin { min-height: 0; }
  .ikili--esit .foto-yigin > picture:first-of-type { position: static; }
  .ikili--esit .foto-yigin > picture:first-of-type img {
    height: auto; aspect-ratio: 4 / 3;
  }
}

.deger { display: grid; gap: 1.1rem; margin-top: 2rem; }
.deger__oge { display: flex; gap: 1rem; align-items: flex-start; }
.deger__im {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: var(--brand-soft); color: var(--brand-deep);
  display: grid; place-items: center;
}
.deger__im svg { width: 19px; height: 19px; }
.deger__oge h4 { font-family: var(--display); font-size: 1.03rem; color: var(--ink); margin-bottom: .15rem; }
.deger__oge p { font-size: .95rem; color: var(--ink-3); }

/* Alıntı */
.alinti {
  border-left: 3px solid var(--kirmizi);
  padding: .3rem 0 .3rem 1.5rem;
  margin: 2rem 0;
  font-size: var(--step-1); font-style: italic;
  color: var(--ink); line-height: 1.55;
}
.alinti cite {
  display: block; margin-top: .7rem;
  font-size: .9rem; font-style: normal; color: var(--ink-3);
  font-family: var(--display); font-weight: 500;
}

/* ----------------------------------------------------------------- EKİP */
.ekart {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper-3); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ekart:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ekart__foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--rule); }
.ekart__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transition: transform .55s var(--ease), filter .35s var(--ease);
  filter: saturate(.94);
}
.ekart:hover .ekart__foto img { transform: scale(1.045); filter: saturate(1.05); }
.ekart__bilgi {
  position: absolute; inset: auto 0 0 0;
  padding: 2.6rem 1.1rem .95rem;
  background: linear-gradient(to top, rgba(0,12,63,.93) 30%, transparent);
  color: #fff;
}
.ekart__ad { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.25; }
.ekart__unvan { font-size: .8rem; color: #ff8f8f; margin-top: .18rem; font-weight: 500; }

.ekip-filtre {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-bottom: 2.4rem;
}
.ekip-filtre button {
  font-family: var(--display); font-weight: 500; font-size: .9rem;
  padding: .6rem 1.15rem; border-radius: 100px;
  border: 1px solid var(--rule); background: #fff; color: var(--ink-2);
  cursor: pointer; transition: all .2s var(--ease);
}
.ekip-filtre button:hover { border-color: var(--brand); color: var(--brand-deep); }
.ekip-filtre button[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

/* --------------------------------------------------------------- DUYURU */
.dkart {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dkart:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.dkart__foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-3); }
.dkart__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.dkart:hover .dkart__foto img { transform: scale(1.05); }
.dkart__govde { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.dkart__tarih {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; color: var(--ink-3); margin-bottom: .7rem; font-weight: 500;
}
.dkart__tarih svg { width: .95em; height: .95em; color: var(--brand); }
.dkart h3 { font-size: 1.14rem; margin-bottom: .6rem; }
.dkart p { font-size: .93rem; color: var(--ink-3); flex: 1; }
.dkart__git { margin-top: 1.2rem; font-size: .88rem; }

/* ---------------------------------------------------------------- GALERİ
   Eşit oranlı ızgara: karışık dikey/yatay çekimler tek düzende görünsün.
   Tam çözünürlük ışık kutusunda açılır, kırpma yalnızca küçük görselde. */
.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
}
.galeri figure {
  margin: 0;
  border-radius: var(--radius); overflow: hidden;
  position: relative; cursor: zoom-in; background: var(--paper-3);
}
.galeri picture { display: block; height: 100%; }
.galeri img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .5s var(--ease);
}
.galeri figure:hover img { transform: scale(1.04); }

/* İlk kare vurgulanır: iki sütun x iki satır */
.galeri figure:first-child { grid-column: span 2; grid-row: span 2; }
.galeri figure:first-child img { aspect-ratio: 1 / 1; }
@media (max-width: 640px) {
  .galeri figure:first-child { grid-column: span 1; grid-row: span 1; }
  .galeri figure:first-child img { aspect-ratio: 4 / 3; }
}

/* Duyuru detayındaki dar sütunda vurgulu kare olmasın */
.galeri--dar { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.galeri--dar figure:first-child { grid-column: span 1; grid-row: span 1; }
.galeri--dar figure:first-child img { aspect-ratio: 4 / 3; }
.galeri figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,12,63,.45), transparent 55%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.galeri figure:hover::after { opacity: 1; }
.galeri figcaption {
  position: absolute; left: 1rem; bottom: .9rem; z-index: 2;
  color: #fff; font-size: .88rem; font-weight: 500;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.galeri figure:hover figcaption { opacity: 1; transform: translateY(0); }

/* Işık kutusu */
.kutu {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,8,32,.95);
  display: none; place-items: center; padding: 1.5rem;
}
.kutu[data-acik="true"] { display: grid; }
.kutu img { max-width: 100%; max-height: 86vh; border-radius: 8px; }
.kutu__kapat, .kutu__ok {
  position: absolute; background: rgba(255,255,255,.12); border: 0;
  color: #fff; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s var(--ease);
}
.kutu__kapat:hover, .kutu__ok:hover { background: rgba(255,255,255,.25); }
.kutu__kapat { top: 1.5rem; right: 1.5rem; }
.kutu__ok--geri { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.kutu__ok--ileri { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.kutu__sayac { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: #b3a89e; font-size: .9rem; }

/* --------------------------------------------------------------- SSS */
.sss__gorsel {
  margin: 2.6rem 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
}
.sss__gorsel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.sss__gorsel::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 4px;
  background: var(--gradyan);
}
@media (max-width: 900px) { .sss__gorsel { display: none; } }

.sss { display: grid; gap: .8rem; }
.sss details {
  background: #fff; border: 1px solid var(--rule-soft);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.sss details[open] { border-color: var(--brand-tint); box-shadow: var(--shadow-sm); }
.sss summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.4rem; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 1.03rem;
  color: var(--ink);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--kirmizi); border-bottom: 2px solid var(--kirmizi);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--ease);
}
.sss details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.sss summary:hover { color: var(--brand-deep); }
.sss__cevap { padding: 0 1.4rem 1.35rem; color: var(--ink-3); }

/* ----------------------------------------------------------- İÇ SAYFA ÜST */
/* Sabit başlık bloğunun altında kalmasın diye üstten ek pay. */
.sayfa-tepe {
  position: relative; background: var(--ink); overflow: hidden;
  padding-top: clamp(9rem, 12vw, 11rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.sayfa-tepe__zemin { position: absolute; inset: 0; }
.sayfa-tepe__zemin img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.sayfa-tepe__zemin::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,12,63,.9), rgba(0,12,63,.62));
}
.sayfa-tepe__ic { position: relative; z-index: 2; }
.sayfa-tepe h1 { color: #fff; font-size: var(--step-4); max-width: 22ch; }
.sayfa-tepe__alt { color: #c4b9af; margin-top: 1rem; max-width: 55ch; font-size: var(--step-1); }

/* Kırıntı */
.kirinti { margin-bottom: 1.2rem; }
.kirinti ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; padding: 0; margin: 0;
  font-size: .87rem; color: #a99e94;
}
.kirinti a { color: #d8cec5; text-decoration: none; }
.kirinti a:hover { color: #ff8f8f; }
.kirinti li:not(:last-child)::after { content: "›"; margin-left: .5rem; opacity: .5; }
.kirinti [aria-current] { color: #ff8f8f; }

/* ------------------------------------------------------ HİZMET DETAY DÜZEN */
.detay { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 1000px) { .detay { grid-template-columns: 1fr; } }

.yazi { max-width: 72ch; }
.yazi > * + * { margin-top: 1.15rem; }
.yazi h2 {
  font-size: var(--step-2); margin-top: 2.8rem; padding-top: .3rem;
  scroll-margin-top: 7rem;
}
.yazi h2:first-child { margin-top: 0; }
.yazi h3 { margin-top: 2rem; }
.yazi p { color: var(--ink-2); }
.yazi ul { padding-left: 0; list-style: none; display: grid; gap: .7rem; }
.yazi ul li { position: relative; padding-left: 1.9rem; color: var(--ink-2); }
.yazi ul li::before {
  content: ""; position: absolute; left: .35rem; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--kirmizi);
}
.yazi__giris {
  font-size: var(--step-1); color: var(--ink);
  padding: 1.5rem 1.7rem;
  background: var(--brand-soft);
  border-left: 3px solid var(--kirmizi);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.6;
}

/* Yan sütun */
.yan { position: sticky; top: 7rem; display: grid; gap: 1.2rem; }
@media (max-width: 1000px) { .yan { position: static; } }
.yan__kutu {
  background: #fff; border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); padding: 1.5rem;
}
.yan__kutu h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.yan__liste { display: grid; gap: .1rem; }
.yan__liste a {
  display: flex; align-items: center; gap: .6rem;
  padding: .62rem .7rem; border-radius: 9px;
  font-size: .92rem; color: var(--ink-2); text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.yan__liste a:hover { background: var(--brand-soft); color: var(--brand-dark); }
.yan__liste a[aria-current="page"] {
  background: var(--brand); color: #fff; font-weight: 600;
}
.yan__liste a[aria-current="page"] .acilir__nokta { background: #fff; opacity: 1; }

.yan__cta {
  background: linear-gradient(150deg, var(--lacivert) 0%, var(--lacivert-koyu) 120%);
  color: #fff; border: 0;
}
.yan__cta h3 { color: #fff; }
.yan__cta p { font-size: .93rem; opacity: .93; margin-bottom: 1.2rem; }
.yan__cta .dugme { width: 100%; }

/* İçindekiler */
.icindekiler ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; counter-reset: ic; }
.icindekiler li { counter-increment: ic; }
.icindekiler a {
  display: flex; align-items: center; gap: .7rem;
  padding: .62rem .7rem; border-radius: 10px;
  font-size: .9rem; line-height: 1.35; color: var(--ink-2); text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}
/* Numaralı rozet: 01, 02, 03... aktif/hover'da lacivert dolar */
.icindekiler a::before {
  content: counter(ic, decimal-leading-zero);
  flex: none; width: 1.75rem; height: 1.75rem;
  display: grid; place-content: center;
  font-family: var(--display); font-weight: 700; font-size: .7rem;
  color: var(--brand); background: var(--brand-soft);
  border-radius: 8px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.icindekiler a:hover { background: var(--brand-soft); color: var(--brand-deep); }
.icindekiler a.aktif {
  background: var(--brand-soft); color: var(--brand-deep); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}
.icindekiler a:hover::before,
.icindekiler a.aktif::before { background: var(--brand); color: #fff; }

/* Uyarı kutusu — sağlık içeriği için */
.uyari {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--paper-3); border: 1px dashed var(--rule);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
  font-size: .92rem; color: var(--ink-3);
}
.uyari svg { width: 22px; height: 22px; flex: none; color: var(--brand-deep); margin-top: .1rem; }

/* ----------------------------------------------------------------- CTA */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(125deg, var(--lacivert-koyu) 0%, var(--lacivert) 55%, var(--lacivert-2) 115%);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  color: #fff; text-align: center;
}
.cta::before, .cta::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.07); pointer-events: none;
}
.cta::before { width: 320px; height: 320px; top: -140px; right: -80px; }
.cta::after  { width: 240px; height: 240px; bottom: -130px; left: -60px; }
.cta h2 { color: #fff; max-width: 20ch; margin-inline: auto; position: relative; }
.cta p { margin: 1.1rem auto 2rem; max-width: 52ch; opacity: .94; position: relative; font-size: var(--step-1); }
.cta__eylem { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; position: relative; }

/* ---------------------------------------------------------------- FORM */
.form { display: grid; gap: 1.1rem; }
.alan { display: grid; gap: .45rem; }
.alan label { font-family: var(--display); font-weight: 500; font-size: .92rem; color: var(--ink); }
.alan label span { color: var(--red); }
.alan input, .alan select, .alan textarea {
  width: 100%; padding: .85rem 1rem;
  border: 1px solid var(--rule); border-radius: 11px;
  background: #fff; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: 0; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,10,147,.14);
}
.alan textarea { resize: vertical; min-height: 130px; }
.alan__ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .alan__ikili { grid-template-columns: 1fr; } }
.onay { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--ink-3); }
.onay input { width: 18px; height: 18px; flex: none; margin-top: .18rem; accent-color: var(--brand); }

/* İletişim kartı */
.ikart {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.4rem; background: #fff;
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
}
.ikart__im {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  background: var(--brand-soft); color: var(--brand-deep);
  display: grid; place-items: center;
}
.ikart__im svg { width: 21px; height: 21px; }
.ikart h3 { font-size: 1rem; margin-bottom: .3rem; }
.ikart a, .ikart p { font-size: .95rem; color: var(--ink-3); text-decoration: none; display: block; }
.ikart a:hover { color: var(--brand-deep); }

.harita {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--rule-soft); box-shadow: var(--shadow-sm);
  height: 420px; background: var(--paper-3);
}
.harita iframe { width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------- AYAK */
.ayak { background: var(--ink); color: #a3abc4; padding-top: var(--bay); }
.ayak a { color: #ced4e6; text-decoration: none; transition: color .18s var(--ease); }
.ayak a:hover { color: #fff; }

.ayak__ust {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-bottom: 3.5rem;
}
@media (max-width: 950px) { .ayak__ust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ayak__ust { grid-template-columns: 1fr; } }

/* Logo koyu zeminde okunmuyor; beyaz karta oturtuyoruz. */
.ayak__logo {
  display: inline-block; background: #fff;
  padding: .7rem .9rem; border-radius: var(--radius);
  margin-bottom: 1.3rem;
}
.ayak__logo img { height: 44px; width: auto; }

.ayak__marka p { font-size: .93rem; max-width: 36ch; line-height: 1.7; }
.ayak__rozet {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 1.1rem; padding: .5rem .9rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px; font-size: .8rem; color: #ced4e6;
  white-space: nowrap;
}
@media (max-width: 400px) { .ayak__rozet { white-space: normal; border-radius: var(--radius); } }
.ayak__rozet svg { width: 15px; height: 15px; color: var(--yellow); flex: none; }

.ayak h4 {
  font-family: var(--display); color: #fff; font-size: .84rem;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.3rem;
  font-weight: 600; position: relative; padding-bottom: .7rem;
}
.ayak h4::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 28px; height: 2px; background: var(--kirmizi);
}
.ayak ul { list-style: none; padding: 0; display: grid; gap: .65rem; font-size: .93rem; }
.ayak ul a { display: inline-block; }
.ayak ul a:hover { transform: translateX(3px); }

/* -------------------------------------------- Footer sütunları: <details>
   Masaüstünde her zaman açık ve summary düz başlık gibi görünür.
   Mobilde (<=560px) tıklanabilir akordeon olur. */
.ayak__grup { margin: 0; }
.ayak__grup > summary {
  list-style: none; cursor: default;
  display: flex; align-items: center; justify-content: space-between;
}
.ayak__grup > summary::-webkit-details-marker { display: none; }
.ayak__grup > summary h4 { margin-bottom: 1.3rem; }
.ayak__ok { display: none; }

@media (max-width: 560px) {
  .ayak__grup {
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .ayak__grup > summary {
    cursor: pointer; padding: 1rem 0; user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .ayak__grup > summary h4 {
    margin-bottom: 0; padding-bottom: 0;
  }
  .ayak__grup > summary h4::after { display: none; }
  /* Açılır ok işareti */
  .ayak__ok {
    display: block; width: 10px; height: 10px; flex: none;
    border-right: 2px solid #8a93b0; border-bottom: 2px solid #8a93b0;
    transform: rotate(45deg); margin-top: -4px;
    transition: transform .25s var(--ease);
  }
  .ayak__grup[open] > summary .ayak__ok { transform: rotate(-135deg); margin-top: 2px; }
  .ayak__grup > ul { padding-bottom: 1.1rem; }
}

.ayak__iletisim li { display: flex; gap: .75rem; align-items: flex-start; }
.ayak__iletisim svg { width: 17px; height: 17px; flex: none; color: var(--kirmizi); margin-top: .28em; }
.ayak__tarif { font-size: .85rem; color: var(--yellow) !important; font-weight: 500; }
.ayak__tarif:hover { text-decoration: underline; }

.ayak__sosyal { display: flex; gap: .7rem; margin-top: 1.6rem; }
.ayak__sosyal a {
  width: 42px; height: 42px; border-radius: 8px;
  background: rgba(255,255,255,.07); display: grid; place-items: center;
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.ayak__sosyal a:hover { background: var(--kirmizi); transform: translateY(-2px); }
.ayak__sosyal svg { width: 19px; height: 19px; color: #fff; }

.ayak__alt {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  font-size: .87rem;
}
.ayak__alt nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.ayak__kes { display: none; }
@media (max-width: 560px) {
  .ayak__alt { justify-content: center; text-align: center; }
  .ayak__kes { display: inline; }
}

/* Geliştirici künyesi — en altta, ayrık */
.ayak__gelistirici {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-block: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
}
.ayak__gelistirici img { height: 30px; width: auto; opacity: .9; transition: opacity .2s var(--ease); }
.ayak__gelistirici a:hover img { opacity: 1; }
.ayak__gelistirici span { font-size: .8rem; color: #8a93b0; }
.ayak__gelistirici span a { color: #ced4e6; text-decoration: none; }
.ayak__gelistirici span a:hover { color: #33a3f4; }
@media (max-width: 480px) { .ayak__gelistirici { flex-direction: column; gap: .5rem; } }

/* Yukarı çık */
.yukari {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--gradyan); background-size: 200% 100%; color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .3s var(--ease);
}
.yukari[data-gorunur="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.yukari:hover { background-position: 100% 0; }
.yukari svg { width: 19px; height: 19px; }

/* WhatsApp */
.wa {
  position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center;
  box-shadow: var(--shadow-md); transition: transform .25s var(--ease);
}
.wa:hover { transform: scale(1.07); }
.wa svg { width: 28px; height: 28px; color: #fff; }
@media (max-width: 560px) { .wa { width: 48px; height: 48px; left: 1rem; bottom: 1rem; } .yukari { right: 1rem; bottom: 1rem; } }

/* ------------------------------------------------------- GİRİŞ ANİMASYONU */
.beliren {
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.beliren[data-gorundu="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .beliren { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- YAZDIRMA */
@media print {
  .tepe, .ayak, .yukari, .wa, .cta, .yan { display: none !important; }
  body { color: #000; }
  .detay { grid-template-columns: 1fr; }
}