/* ═══════════════════════════════════════════════════════════════════════════
   DATA-ART — PAYLAŞILAN TASARIM KATMANI
   ───────────────────────────────────────────────────────────────────────────
   20.09.2026 — Ozan'ın "ana sayfa ile hisse sayfaları tasarım anlamında
   KESİNLİKLE konuşmuyor" şikâyetinin KÖK NEDENİ buydu: "Data-Art Nabız"
   hiçbir zaman paylaşılan bir dosya olmadı, 350+ satırın TAMAMI
   templates/index.html'in kendi <style> bloğunda duruyordu. Diğer sayfalar
   (hisse.css, gundem.css) aynı reçeteyi ELDE KOPYALAYARAK taklit etti —
   kopyaların her biri zamanla ayrı yöne sürüklendi (aynı panel reçetesi
   7 ayrı yerde, 3 dosyada birbirinden küçük farklarla yeniden yazılmıştı).

   Bu dosya o reçetenin TEK KAYNAĞI. Kural: bir Data-Art ilkel öğesi
   (tipografi, bölüm başlığı, panel, çip, rozet, iskelet) birden fazla
   sayfada gerekiyorsa BURAYA yazılır; sayfa CSS'i yalnızca kendi
   DELTA'sını (padding/margin/aksan rengi/parıltı konumu) tanımlar.

   Renk kaynağı SADECE tokens.css'teki --bp- önekli token'lar. Ham hex/rgba
   yasak (style-guard bunu zaten denetliyor).
   Yükleme sırası: tokens.css → data-art.css → pages/<sayfa>.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tipografi ilkelleri ─────────────────────────────────────────────── */
.da-display{font-family:'Bricolage Grotesque','Space Grotesk',system-ui,sans-serif;}
.da-num{font-family:'Space Grotesk',monospace,sans-serif;font-variant-numeric:tabular-nums;}

/* ── 2. Sayfa gövdesi + bölüm ritmi ─────────────────────────────────────── */
.da-page{max-width:1360px;margin:0 auto;padding:0 clamp(16px,4vw,40px);position:relative}
.da-page > section{position:relative;z-index:1}
/* Ozan 10.09: 7 .da-section art arda 96px+96px (üst+alt) padding'le gereksiz
   scroll yaratıyordu — bölümler arası ayrım korunacak kadar (tam 0'a inmedi)
   ama önceki tavana göre ~%35 daraltıldı. */
.da-section{padding:clamp(32px,4.5vw,62px) 0}
.da-section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:clamp(20px,3vw,30px)}
.da-eyebrow{font-family:'Space Grotesk',system-ui,sans-serif;font-size:var(--bp-text-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--bp-volume);margin-bottom:8px}
.da-section-title{font-weight:800;letter-spacing:-.025em;font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.04;max-width:20ch}
.da-section-desc{color:var(--bp-text3);max-width:44ch;font-size:var(--bp-text-base);line-height:1.6}

/* ── 3. PANEL — Data-Art'ın merkezî yüzey reçetesi ──────────────────────────
   surface → surface2 degradesi + tek radial parıltı + (opsiyonel) sol aksan
   şeridi. 20.09 öncesi bu blok index.html(.da-recap-panel), hisse.css
   (.da-ai/.da-story/.da-summary/.da-techsum/.da-fund-panel) ve gundem.css
   (.stat-card/.ai-summary-box) içinde ELLE kopyalanmış hâlde duruyordu.
   Sayfa CSS'i artık sadece şu değişkenleri ezer:
     --da-accent      sol şerit rengi   (.da-panel--accent ile birlikte)
     --da-glow-rgb    parıltı rengi (…-rgb token'ı), --da-glow-a  yoğunluğu
     --da-glow-y / --da-glow-x / --da-glow-left / --da-glow-size  konum+boyut
   Not: parıltı konumlandırılmış bir ::before, yani konumsuz alt öğelerin
   ÜZERİNE boyanır — bu yüzden `> *` relative'e çekilir (panelin metni her
   zaman parıltının üstünde kalsın). ── */
.da-panel{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--bp-surface) 0%,var(--bp-surface2) 100%);
  border:1px solid var(--bp-border);
  border-radius:var(--bp-radius-20);
}
.da-panel::before{
  content:'';position:absolute;pointer-events:none;border-radius:50%;
  top:var(--da-glow-y,-45%);
  right:var(--da-glow-x,-8%);
  left:var(--da-glow-left,auto);
  width:var(--da-glow-size,250px);height:var(--da-glow-size,250px);
  background:radial-gradient(circle,rgba(var(--da-glow-rgb,var(--bp-brand-rgb)),var(--da-glow-a,.11)),transparent 70%);
}
/* SINIR (20.09, /metodoloji turunda bulundu): bu kural yalnizca ELEMENT
   cocuklarini korur. Panelin dogrudan icinde duran CIPLAK METIN DUGUMLERI
   (ornegin `<div class="da-panel">Formul<br>...</div>`) boyama sirasinda
   konumlandirilmis ::before pariltisinin ALTINDA kalir. Boyle bir panel
   yazarken ya metni bir elemana sar ya da sayfa CSS'inde
   `isolation:isolate` + `::before{z-index:-1}` deltasini tanimla
   (bkz. pages/metodoloji.css). */
.da-panel > *{position:relative}
.da-panel--accent{border-left:3px solid var(--da-accent,var(--bp-brand))}

/* Panel içi tipografi (ana sayfanın "Bugün ne oldu?" panelinden genelleştirildi) */
.da-recap-tag{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',system-ui,sans-serif;font-size:var(--bp-text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--bp-accent-cyan);margin-bottom:14px;position:relative}
.da-recap-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--bp-accent-cyan);box-shadow:0 0 8px rgba(var(--bp-accent-cyan-rgb),.6);animation:daPulseDot 1.8s ease-in-out infinite}
.da-recap-headline{font-weight:800;letter-spacing:-.02em;font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 16px;position:relative}
.da-recap-body{font-size:var(--bp-text-lg);line-height:1.75;color:var(--bp-text2);max-width:76ch;position:relative}
.da-recap-body strong{color:var(--bp-text);font-weight:700}
.da-recap-body .up{color:var(--bp-al);font-weight:700}
.da-recap-body .down{color:var(--bp-sat);font-weight:700}
.da-det-badge{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-family:'Space Grotesk',monospace,sans-serif;font-size:var(--bp-text-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--bp-text3);border:1px solid var(--bp-border2);border-radius:var(--bp-radius-pill);padding:5px 11px;position:relative}

@keyframes daPulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.72)}}

/* ── 4. Rozet + çip ─────────────────────────────────────────────────────── */
.da-badge{display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk',system-ui,sans-serif;font-size:var(--bp-text-xs);letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:var(--bp-radius-pill);border:1px solid var(--bp-border2);color:var(--bp-text2);background:var(--bp-surface)}
.da-chip-row{display:flex;flex-wrap:wrap;gap:9px;flex:none}
/* 20.09: `text-decoration:color` GEÇERSİZ bir değerdi (kopyalama hatası) —
   .da-chip bir <a> üzerinde kullanılıyor, yani altı çizili kalması gerekirdi;
   ana sayfa JS'i her çipe inline `style="text-decoration:none"` basarak bunu
   farkında olmadan maskeliyordu. Şablondan kullanan ilk sayfada patlardı. */
.da-chip{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',monospace,sans-serif;font-size:var(--bp-text-sm);font-weight:700;background:var(--bp-surface2);border:1px solid var(--bp-border);border-radius:var(--bp-radius-pill);padding:7px 7px 7px 13px;text-decoration:none;color:var(--bp-text);transition:border-color var(--bp-dur-base) var(--bp-ease-standard),background var(--bp-dur-base) var(--bp-ease-standard)}
.da-chip:hover{border-color:var(--bp-accent-cyan);background:rgba(var(--bp-accent-cyan-rgb),.08)}
.da-chip-badge{font-size:var(--bp-text-xs);padding:3px 8px;border-radius:var(--bp-radius-pill);font-weight:700}

/* ── 5. Yükleniyor / hata / boş durumlar (asla-boş-sayfa ilkesi) ────────── */
.da-skel{position:relative;overflow:hidden;background:var(--bp-surface2);border-radius:var(--bp-radius-md)}
.da-skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(var(--bp-text-rgb),.06),transparent);animation:daShimmer 1.5s infinite}
@keyframes daShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.da-state-msg{display:flex;align-items:center;gap:10px;padding:18px 20px;border:1px dashed var(--bp-border2);border-radius:var(--bp-radius-lg);color:var(--bp-text3);font-size:var(--bp-text-base);background:var(--bp-surface)}
.da-state-msg.da-state-err{border-color:rgba(var(--bp-sat-rgb),.4);color:var(--bp-sat)}
.da-state-msg button{margin-left:auto;background:var(--bp-surface2);border:1px solid var(--bp-border2);color:var(--bp-text);border-radius:var(--bp-radius);padding:6px 12px;font-size:var(--bp-text-sm);font-weight:600;cursor:pointer;font-family:inherit;flex-shrink:0}

/* ── 6. Data-Art imza dokuları ──────────────────────────────────────────── */
/* Diyagonal kesim — bir bölümü ayrı bir görsel blok yapar (mockup-c .score-section) */
.da-clip-block{
  background:var(--bp-surface);
  clip-path:polygon(0 3.5%, 100% 0, 100% 97%, 0 100%);
  margin:0 0 -40px;
  padding-top:clamp(70px,9vw,130px);
  padding-bottom:clamp(60px,8vw,110px);
}
/* Grain — mockup-c-dataart.html'den birebir */
.da-grain{
  position:fixed;inset:0;pointer-events:none;z-index:50;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:3px 3px;
  opacity:.4;
  mix-blend-mode:overlay;
}

/* ── Kanonik footer (20.09) ────────────────────────────────────────────────
   templates/_footer.html'in stil katmani. 20.09'a kadar index.html'in <style>
   blogunda gomuluydu; footer 19 sayfada tek kaynaga toplaninca (bkz.
   _footer.html basligi) buraya tasindi — index.html'deki kopyalar silindi.
   .bp-footer-link de ayni gerekceyle buraya geldi (index.html:73). */
/* margin-top/font-size/color 20.09'da buraya TASINDI: 16 sayfa CSS'i, footer tek
   kaynaga toplanmadan onceki donemden kalma bir `footer{...}` ELEMENT kurali
   tasiyordu ve bunlar olu degildi — .da-footer bu ozellikleri hic set etmedigi
   icin element kurali kazaniyordu. Canli olcum: margin-top /gundem 0px, /ozet
   20px, /yasal + /hisseler 32px — ayni kanonik footer uc farkli mesafede
   duruyordu. Cogunluk (15/17) 32px oldugu icin kanonik deger o. Ayrica
   yasal.css `footer a{margin:0 6px}` veriyordu: link araligi YALNIZ o sayfada
   farkliydi. */
.da-footer{padding:clamp(48px,6vw,80px) 0 clamp(28px,4vw,44px);margin-top:32px;font-size:var(--bp-text-sm);color:var(--bp-text3)}
.da-footer-inner{max-width:900px;margin:0 auto;text-align:center;padding:0 16px}
.da-footer-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px;font-weight:700;font-size:var(--bp-text-md);color:var(--bp-text)}
.da-footer-links{display:flex;justify-content:center;column-gap:4px;row-gap:0;flex-wrap:wrap;margin-bottom:16px;font-size:var(--bp-text-sm)}
.da-footer-note{font-size:var(--bp-text-xs);color:var(--bp-text3);text-align:center;padding:10px 12px;margin-bottom:16px;border:1px solid var(--bp-border);border-radius:var(--bp-radius-md);background:rgba(var(--bp-volume-rgb),.05);line-height:1.6}
.da-footer-disclaimer{color:var(--bp-text3);font-size:var(--bp-text-xs);margin-bottom:4px;line-height:1.6;max-width:600px;margin-left:auto;margin-right:auto}
.da-footer-copy{color:var(--bp-text3);font-size:var(--bp-text-xs);margin-top:8px}
/* Dokunma hedefi (20.09): footer linkleri 20.4px yuksekti — WCAG 2.5.8'in
   24x24 tabanini bile gecmiyordu ve mobilde /gizlilik (KVKK) + /yasal +
   /iletisim sayfalarina giden TEK yol bu menu (bp-mobile-nav'da yoklar).
   min-height 44px + yatay padding ile kutu buyutuldu; satir araligi (row-gap)
   16'dan 0'a cekildi cunku o bosluk artik linkin KENDI kutusunun icinde —
   boylece hedefler buyurken satirlar birbirine girmiyor. column-gap 16->4,
   padding 8px iki yandan geldigi icin gorunur aralik ~20px'te kaliyor. */
.bp-footer-link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--bp-text3);text-decoration:none;transition:color var(--bp-dur-base) var(--bp-ease-standard)}
@media (hover: hover) and (pointer: fine){
  .bp-footer-link:hover{color:var(--bp-text)}
}
.bp-footer-link:focus-visible{color:var(--bp-text)}

/* ── Satır-içi prose linki (20.09) ─────────────────────────────────────────
   ÖLÇÜLMÜŞ BULGU, stil tercihi değil: cümle içindeki linkler yalnızca RENKLE
   ayırt ediliyordu (`color:var(--bp-*);text-decoration:none`, başka ipucu yok)
   ve sitede global bir `a:hover{text-decoration:underline}` kuralı da YOK.
   WCAG 2.1 **1.4.1 Use of Color (A seviyesi)** rengi tek ayırt edici olarak
   ancak link metni çevresindeki metne karşı **≥3:1** kontrast taşıyorsa kabul
   eder. Ölçüm (relatif parlaklık, aynı formül tools/contrast-check.py):
       --bp-brand (#b8c3ff) vs --bp-text2 (#c7c5cd) = **1.00:1**
       --bp-accent-cyan (#22d3ee) vs --bp-text2     = **1.06:1**
       en iyi hâli: cyan vs --bp-text3              = 1.75:1
   Yani periwinkle link ile gövde metni parlaklık olarak BİREBİR aynı — renk
   körlüğünde ya da gri ekranda link, düz metinden ayırt edilemiyordu.
   Ölçüt eşiğin YARISININ altında olduğu için renk ayarıyla kapatılamaz;
   renk-dışı bir ipucu ZORUNLU. Kesikli alt çizgi zaten sitede vardı
   (hisse.html:1277 el-yazımı) — kanonikleştirildi.
   Ayrıca kanonik renk taksonomisini uygular: prose-içi REFERANS = cyan
   (CTA/buton `--bp-brand` kalır, bkz. 20.09 /gizlilik turu ölçümü). */
.da-link{
  color:var(--bp-accent-cyan);
  text-decoration:none;
  border-bottom:1px dashed currentColor;
  transition:border-bottom-color var(--bp-dur-base) var(--bp-ease-standard),color var(--bp-dur-base) var(--bp-ease-standard);
}
/* Durum kuralı varyantın ALTINDA (K-G) */
@media (hover: hover) and (pointer: fine){
  .da-link:hover{color:var(--bp-text);border-bottom-style:solid}
}
.da-link:focus-visible{color:var(--bp-text);border-bottom-style:solid}

/* ── Form denetimleri: onay kutusu + açılır liste (21.09) ──────────────────
   ÖLÇÜLMÜŞ BULGU, refactor değil. Canlıda (375px, getComputedStyle) sitedeki
   TÜM yerel form denetimleri tarandı; aynı ilkel öğe DÖRT ayrı el-yazımı
   reçeteyle çiziliyordu ve ikisi kullanıcıya görünür kusur veriyordu:

   1) `accent-color` — 5 KVKK onay kutusundan YALNIZ /iletisim'inki kanonik:
        cfKvkk        -> rgb(184,195,255) = --bp-brand   ✔
        heroSubKvkk / ozSubKvkk / hisseSubKvkk / artSubKvkk -> `auto`
      `auto`, `color-scheme:dark` altında TARAYICININ kendi mavisini basar
      (canlıda işaretlenip ekran görüntüsüyle doğrulandı) — yani abone olmak
      için işaretlenmesi ZORUNLU olan kutu, 4 yüzeyde Data-Art paletinin
      tamamen DIŞINDA bir renkle yanıyordu. Ölü-palet taramaları bunu
      göremez: değer CSS'te bir yerde YAZMIYOR, tarayıcı varsayılanı.

   2) `<select>` — üç farklı görünüm aynı anda canlıydı:
        /tarama  .filter-group select -> appearance:none + kendi SVG oku, 16px
        /tarama  .sort-select         -> appearance:auto (yerli ok), 12px
        /ozet    #dateSelector        -> appearance:auto (yerli ok), 12px
        /iletisim .cf-input(select)   -> appearance:auto (yerli ok), 16px
      İlk ikisi AYNI filtre çubuğunda yan yana duruyor. Ayrıca 16px altı
      font, iOS Safari'de odaklanınca sayfayı otomatik YAKINLAŞTIRIR — bu
      kuralın kendisi zaten tarama.css:131'de yazılı ("iOS input-zoom
      onlemi, min 16px"), ama kardeş kuralına hiç uygulanmamıştı.

   Ok işareti bir data: URI olduğu için içinde var() ÇALIŞMAZ; token adı
   değil LİTERALİ yazılır (%23909097 = --bp-text3). Aynı istisna
   tarama.css'te de belgeli — tek kaynak artık burası. */
.da-check{
  accent-color:var(--bp-brand);
  width:16px;height:16px;
  flex-shrink:0;margin-top:1px;cursor:pointer;
}
.da-select{
  appearance:none;-webkit-appearance:none;
  font-family:inherit;
  font-size:var(--bp-text-lg);          /* 16px — iOS odak-yakınlaştırma eşiği */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23909097' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
}

/* ═══════════════════════════════════════════════════════════════════════
   DOKUNMA HEDEFİ — WCAG 2.5.8 (Target Size Minimum, AA): 24×24 CSS px
   21.09 (CPO) — canlı 375×812 ölçümü (elementFromPoint isabet testi, 14
   yüzey) 189 gerçek ihlal buldu. Ölçüm YALNIZ `getBoundingClientRect` ile
   yapılamaz; iki kör nokta var ve ikisi de bu turda yanlış-pozitif üretti:
     1) sözde-öğeyle genişletilmiş isabet alanı (`.ls-warning-close::before`
        zaten 44×44 halo koyuyor — öğe 13×16 görünür ama hedef 44×44'tür),
     2) aynı yere giden DAHA BÜYÜK bir ata (bilanco/temettu `.stock-card`
        role="link" olarak tüm kartı /hisse/<t>'ye götürüyor; içindeki
        `.sc-ticker-link` eşdeğer-kontrol muafiyetine girer).
   Bu yüzden ölçüt "kutunun boyu" değil, MERKEZDEN ±12px'teki noktaların
   gerçekten bu öğeye isabet edip etmediğidir.
   Muaf olanlar (kasıtlı, düzeltilmedi): cümle içi satır-içi bağlantılar
   (`.da-link`, prose `.jargon-term`) — WCAG "inline" istisnası. ═════════ */

/* Simge/kapat düğmeleri: GÖRSEL boyut değişmez, yalnız isabet alanı büyür.
   Yoğun arayüzde (yan yana rozetler) halo'lar çakışabileceği için gerçek
   büyütme gereken yerlerde .da-tap kullanılır, halo DEĞİL. */
.da-tap-halo{position:relative}
.da-tap-halo::before{
  content:'';position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}

/* Bağımsız (cümle içinde OLMAYAN) CTA bağlantısı / kontrol. */
.da-tap{
  display:inline-flex;align-items:center;gap:4px;
  min-height:24px;
}

/* Abone çubuğu "×" kapat düğmesi — 20.09'a kadar ozet.html/hisse.html/
   blog_article.html'de ÜÇ AYRI el-yazımı inline stil vardı ve üçü üç farklı
   boyut veriyordu (17.3×22.5 · 22.5×22 · 19×22). Tek kaynak. */
.da-close{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;min-height:32px;
  padding:0;
  background-color:transparent;
  border:none;
  color:var(--bp-text3);
  font-size:var(--bp-text-xl);
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
}
.da-close:hover{color:var(--bp-text2)}