/* ============================================================
   EKLENTİLER — bir iş sitesinin işlevsel parçaları
   cekirdek.css'ten SONRA, tema.css'ten ÖNCE yüklenir.

   Tasarım kararı: bunların ÇOĞU JavaScript İSTEMEZ. Akordiyon
   <details>, lightbox :target, başa-dön scroll-driven animasyon,
   mobil çubuk saf CSS. JS yalnız dört yerde ve toplamı ~2.5 KB.

   KURAL 1: Sektör analizinde gerekmeyen eklenti eklenmez.
   KURAL 2: JS kapalıyken hepsi ya çalışır ya da zararsız görünür.
   KURAL 3: Hepsi token okur; bu dosyada sabit renk yok.
   KURAL 4: Kullanılmayan bloğu teslim kopyasından SİL.

   İçindekiler
     E1  Akordiyon / SSS         <details>        0 KB JS
     E2  Gezinti (sarmalı)                        0 KB JS
     E3  Sabit mobil eylem çubuğu                 0 KB JS
     E4  Başa dön                scroll-driven    0 KB JS
     E5  Galeri büyütme          :target          0.4 KB (odak iyileştirmesi)
     E6  Form durumları          progressive      1.0 KB
     E7  Çerez bildirimi                          0.6 KB
     E8  Sayaç                                    0.5 KB
     E9  Kopyala düğmesi                          0.3 KB
   ============================================================ */

/* ==== E1 — AKORDİYON / SSS ================================
   <details class="ek-sss"><summary>Soru</summary><p>Cevap</p></details>
   JS yok. Klavye ve ekran okuyucu desteği tarayıcıdan gelir.
   SSS içeriği JS kapalıyken de okunabilir — SEO için de doğrusu bu.
   ============================================================ */
.ek-sss {
  border-block-end: 1px solid var(--line);
}
.ek-sss > summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-s);
  padding-inline-end: var(--space-l);
  position: relative;
  font-weight: 600;
  min-block-size: 44px;              /* dokunma hedefi */
  display: flex;
  align-items: center;
}
.ek-sss > summary::-webkit-details-marker { display: none; }
.ek-sss > summary::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--space-2xs);
  inline-size: 10px; block-size: 10px;
  border-inline-end: 2px solid var(--ink-muted);
  border-block-end: 2px solid var(--ink-muted);
  transform: rotate(45deg);
  transition: transform var(--dur-hizli) var(--ease-out);
}
.ek-sss[open] > summary::after { transform: rotate(-135deg); }
.ek-sss > :not(summary) {
  padding-block-end: var(--space-s);
  max-inline-size: var(--measure);
  color: var(--ink-muted);
}

/* ==== E2 — GEZİNTİ =======================================
   <nav class="ek-menu"><a>…</a>…</nav>

   NEDEN <details> DEĞİL: tarayıcı, <details> kapalıyken summary
   dışındaki içeriği kendi UA katmanında gizler. Yazar CSS'i
   (display:flex !important, display:contents dahil) bunu geri
   alamaz — masaüstünde menü kaybolur. Denendi, doğrulandı.

   Bu yüzden gezinti HER ZAMAN görünür; dar ekranda satır atlar.
   6-7 bağlantıya kadar doğru çözüm budur ve sıfır JS ister.
   Daha uzun menüde: bağlantıları bir "Menü" sayfasına taşı ya da
   ikinci satırı ayrı bir şeritte ver — açılır menü kurmayın.
   ============================================================ */
.ek-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-m);
}
.ek-menu a {
  /* Dokunma hedefi İKİ boyutludur. Burada yıllarca yalnız yükseklik
     vardı; ölçümde KADEME'nin menüsünde "Proje" 38x44, "Galeri" 42x44
     çıktı — kısa kelimeler eşiğin altına düşüyor. Yükseklik doğruydu,
     eksik olan genişlikti. */
  min-block-size: 44px;
  min-inline-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 47.99rem) {
  .ek-menu { gap: var(--space-2xs) var(--space-s); font-size: var(--step--1); }
}

/* ==== E3 — SABİT MOBİL EYLEM ÇUBUĞU =======================
   Aciliyet engeli olan sektörlerde (oto servis, veteriner, klinik)
   dönüşümü en çok artıran tek parça. Masaüstünde görünmez.
   ============================================================ */
.ek-cubuk { display: none; }
@media (max-width: 47.99rem) {
  .ek-cubuk {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    inset-inline: 0; inset-block-end: 0;
    z-index: 40;
    background: var(--bg-elev);
    border-block-start: 1px solid var(--line);
    padding-block-end: env(safe-area-inset-bottom, 0);
  }
  .ek-cubuk a {
    min-block-size: 52px;
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-3xs);
    font-size: var(--step--1);
    text-decoration: none;
    border-inline-start: 1px solid var(--line);
  }
  .ek-cubuk a:first-child { border-inline-start: 0; }
  .ek-cubuk a[data-birincil] { background: var(--accent); color: var(--accent-ink); }
  /* çubuk içeriği örtmesin */
  /* 52px düğme + 1px üst kenarlık + güvenli alan. 52px yazılıydı; mobil-olc
     son satırın 4px çubuk altında kaldığını ölçtü. */
  body:has(.ek-cubuk) { padding-block-end: calc(53px + env(safe-area-inset-bottom, 0px)); }
}

/* ==== E4 — BAŞA DÖN =======================================
   Scroll-driven animasyonla belirir; JS yok.
   Desteklenmeyen tarayıcıda hep görünür (zararsız).
   ============================================================ */
.ek-yukari {
  position: fixed;
  inset-inline-end: var(--space-s);
  inset-block-end: calc(var(--space-s) + 52px);
  z-index: 30;
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}
@media (min-width: 48rem) { .ek-yukari { inset-block-end: var(--space-s); } }

@keyframes ek-yukari-gor {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: scroll()) {
  .ek-yukari {
    animation: ek-yukari-gor both linear;
    animation-timeline: scroll(root block);
    animation-range: 30vh 60vh;
  }
}

/* ==== E5 — GALERİ BÜYÜTME (:target) =======================
   <a href="#g1"><img …></a>
   <div class="ek-buyut" id="g1"><a class="ek-buyut__kapat" href="#galeri"></a><img …></div>
   JS'siz çalışır; eklentiler.js odak yönetimi ve Esc ekler.
   ============================================================ */
.ek-buyut { display: none; }
.ek-buyut:target {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 50;
  padding: var(--space-m);
  background: var(--bg);
}
.ek-buyut img { max-block-size: 82svh; inline-size: auto; }
.ek-buyut__kapat {
  position: absolute; inset-block-start: var(--space-s); inset-inline-end: var(--space-s);
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  text-decoration: none;
}
.ek-buyut__kapat::before { content: "✕"; }

/* ==== E6 — FORM DURUMLARI =================================
   JS kapalıyken form normal submit eder (action'a gider).
   JS varsa sayfada kalır, durumu buraya yazar.
   ============================================================ */
.ek-form__durum {
  padding: var(--space-xs) var(--space-s);
  border-inline-start: 3px solid var(--line);
  font-size: var(--step--1);
}
.ek-form__durum:empty { display: none; }
.ek-form__durum[data-durum="basarili"] { border-color: var(--accent); }
.ek-form__durum[data-durum="hata"]     { border-color: var(--ink); font-weight: 600; }

/* girdi hata durumu YALNIZ etkileşimden sonra gösterilir */
.ek-form input:user-invalid,
.ek-form textarea:user-invalid,
.ek-form select:user-invalid {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.ek-form [aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* bal küpü — insan görmez, ekran okuyucu atlar, bot doldurur */
.ek-form__kupu {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* ==== E7 — ÇEREZ BİLDİRİMİ ================================
   YALNIZ analitik veya üçüncü parti çerez varsa eklenir.
   Zorunlu olmayan çerez yoksa bu eklentiyi KOYMA — gereksiz
   çerez bandı hem dönüşüm düşürür hem de yanlış beyandır.
   ============================================================ */
.ek-cerez {
  position: fixed;
  inset-inline: var(--space-s); inset-block-end: var(--space-s);
  z-index: 60;
  max-inline-size: 34rem;
  display: grid; gap: var(--space-xs);
  padding: var(--space-s);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  font-size: var(--step--1);
}
.ek-cerez[hidden] { display: none; }
.ek-cerez__eylem { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

/* ==== E8 — SAYAÇ ==========================================
   <span class="ek-sayac" data-hedef="1200">1200</span>
   JS kapalıyken son değer zaten HTML'de yazılı — kaybolmaz.
   prefers-reduced-motion altında animasyon yok.
   ============================================================ */
.ek-sayac { font-variant-numeric: tabular-nums; }

/* ==== E9 — KOPYALA ========================================
   <button class="ek-kopya" data-kopya="TR00 0000 …">Kopyala</button>
   JS yoksa buton gizlenir (kopyalanacak metin sayfada zaten var).
   ============================================================ */
.ek-kopya { display: none; }
.js-var .ek-kopya { display: inline-flex; align-items: center; gap: var(--space-3xs); min-block-size: 44px; }

/* --- AZALTILMIŞ HAREKET ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ek-sss > summary::after { transition: none !important; }
  .ek-yukari { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* --- BASKI -------------------------------------------------- */
@media print {
  .ek-cubuk, .ek-yukari, .ek-cerez, .ek-kopya, .ek-menu { display: none !important; }
  .ek-sss > :not(summary) { display: block !important; }   /* SSS baskıda açık */
  .ek-sss > summary::after { display: none; }

}

/* ==== E10 — LOGO ŞERİDİ (MARQUEE) =========================
   Çift yönlü, dikişsiz, sonsuz. SIFIR JavaScript.

   Dikişsizlik sırrı: her şeridin içeriği İKİ KEZ basılır; -50%
   ötelemede kusursuz döngülenir. Tek kez basarsan zıplar.

     <div class="ek-serit">
       <div class="ek-serit__ray"> …logolar… …logolar (tekrar)… </div>
     </div>
     <div class="ek-serit ek-serit--ters"> … </div>
   ============================================================ */
/* Kenar solması yalnız mask DESTEKLENİYORSA uygulanır. Koşulsuz yazılırsa
   maskeyi tanımayan tarayıcı bildirimi atar ve şerit keskin kenarla biter —
   çirkin ama çalışır; asıl risk, ileride maske ile içerik kırpılırsa
   desteklenmeyen tarayıcıda o içeriğin görünmemesidir. @supports ile
   niyet açıkça yazılmış oluyor (Y6). */
.ek-serit { overflow: clip; }
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .ek-serit {
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  }
}
.ek-serit__ray {
  display: flex;
  inline-size: max-content;
  gap: var(--ek-serit-ara, var(--space-xl));
  align-items: center;
  will-change: transform;
  animation: ek-kaydir-sol var(--ek-serit-sure, 55s) linear infinite;
}
.ek-serit--ters .ek-serit__ray { animation-name: ek-kaydir-sag; }

@keyframes ek-kaydir-sol { from { transform: translate3d(0,0,0); }    to { transform: translate3d(-50%,0,0); } }
@keyframes ek-kaydir-sag { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }

@media (hover: hover) and (pointer: fine) {
  .ek-serit:hover .ek-serit__ray { animation-play-state: paused; }
}
.ek-serit img, .ek-serit svg {
  block-size: var(--ek-serit-boy, 2.75rem);
  inline-size: auto;
  opacity: 0.85;
  transition: opacity var(--dur-hizli) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ek-serit img:hover, .ek-serit svg:hover { opacity: 1; }
}

/* ==== E11 — HOVER KART ====================================
   Kart kalkar, kenarı aksana döner, görsel yavaşça büyür.
   Saf CSS. En ucuz "premium" hissi.

     <article class="ek-kart">
       <div class="ek-kart__cerceve"><img …></div>
       <h3 class="ek-kart__baslik">…</h3>
     </article>
   ============================================================ */
.ek-kart { border: 1px solid var(--line); background: var(--bg-elev); }
.ek-kart__cerceve { overflow: clip; }
.ek-kart__cerceve img { inline-size: 100%; block-size: auto; display: block; }

@media (hover: hover) and (pointer: fine) {
  .ek-kart {
    transition: transform var(--dur-orta) var(--ease-out),
                border-color var(--dur-orta) var(--ease-out);
  }
  .ek-kart:hover { transform: translateY(-6px); border-color: var(--accent); }

  .ek-kart__cerceve img { transition: transform var(--dur-yavas) var(--ease-out); }
  .ek-kart:hover .ek-kart__cerceve img { transform: scale(1.05); }

  .ek-kart__baslik { transition: color var(--dur-hizli) var(--ease-out); }
  .ek-kart:hover .ek-kart__baslik { color: var(--accent); }
}
/* klavye kullanıcısı da görsün */
.ek-kart:focus-within { border-color: var(--accent); }

/* ==== E12 — AURORA BUTON ==================================
   Kenarında yavaşça dönen konik gradyan. Saf CSS.
   @property olmadan konik gradyan animasyonu olmaz — destek
   yoksa buton sade kalır, bozulmaz.
   ============================================================ */
@property --ek-aci { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.ek-aurora { position: relative; isolation: isolate; }
.ek-aurora::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--ek-aci),
    var(--accent) 0deg, transparent 90deg, transparent 270deg, var(--accent) 360deg);
}
@supports (background: conic-gradient(from 0deg, red, blue)) {
  @media (prefers-reduced-motion: no-preference) {
    .ek-aurora::before { animation: ek-aurora-don 4.5s linear infinite; }
  }
}
@keyframes ek-aurora-don { to { --ek-aci: 360deg; } }

/* --- E10-E12 azaltılmış hareket ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ek-serit__ray { animation: none !important; transform: none !important; }
  .ek-serit { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .ek-aurora::before { animation: none !important; }
}
@media print {
  .ek-serit__ray { animation: none !important; }
  .ek-aurora::before { display: none; }
}