/**
 * AVRİSTAN PLATFORM — Ortak Stil Dosyası
 * =========================================
 * Tüm sayfaların paylaştığı temel stiller burada toplanmıştır.
 * Nav / Footer stilleri → components.js tarafından enjekte edilir.
 * Sayfa‑özgü stiller → ilgili sayfanın kendi <style> bloğunda bulunur.
 */

/* ═══════════════════════════════════════════
   1. GOOGLE FONTS
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400&family=Barlow+Condensed:wght@700;900&family=JetBrains+Mono:wght@400;700&display=swap');


/* ═══════════════════════════════════════════
   2. CSS DEĞİŞKENLERİ (Design Tokens)
═══════════════════════════════════════════ */
:root {
  /* Arka planlar */
  --bg:      #020c1b;
  --bg2:     #071020;
  --bg3:     #0a1628;

  /* Kenarlıklar */
  --border:   rgba(0, 212, 255, .12);
  --borderHi: rgba(0, 212, 255, .45);

  /* Renk paleti */
  --cyan:    #00d4ff;
  --cyanDim: #0891b2;
  --teal:    #0d9488;
  --orange:  #f97316;
  --violet:  #8b5cf6;
  --pink:    #e879f9;
  --green:   #22c55e;
  --red:     #ef4444;
  --yellow:  #eab308;

  /* Metin */
  --text:   #e2e8f0;
  --muted:  #94a3b8;
  --dim:    #64748b;
  --darker: #334155;

  /* Yazı tipleri */
  --mono:    'JetBrains Mono', monospace;
  --display: 'Barlow Condensed', sans-serif;
  --body:    'Barlow', Arial, sans-serif;
}


/* ═══════════════════════════════════════════
   3. RESET & TEMEL
═══════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background:   var(--bg);
  color:        var(--text);
  font-family:  var(--body);
  font-size:    15px;
  line-height:  1.6;
  overflow-x:   hidden;
}

/* Scrollbar */
::-webkit-scrollbar              { width: 5px; }
::-webkit-scrollbar-track        { background: var(--bg); }
::-webkit-scrollbar-thumb        { background: #162438; border-radius: 3px; }


/* ═══════════════════════════════════════════
   4. ORTAK ANİMASYONLAR
═══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes scanline {
  0%   { top: -2px;  }
  100% { top: 100%;  }
}

@keyframes pulse {
  0%,100% { opacity: .4; }
  50%     { opacity: 1;  }
}


@keyframes dash {
  to { stroke-dashoffset: -24; }
}

@keyframes dashSlow {
  to { stroke-dashoffset: -36; }
}

@keyframes glimmer {
  0%,100% { opacity: .5; }
  50%     { opacity: 1;  }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes borderPulse {
  0%,100% { border-color: rgba(0,212,255,.14); }
  50%     { border-color: rgba(0,212,255,.45); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Giriş animasyonu gecikme sınıfları */
.d1 { animation: fadeUp .6s .10s both; }
.d2 { animation: fadeUp .6s .25s both; }
.d3 { animation: fadeUp .6s .40s both; }
.d4 { animation: fadeUp .6s .55s both; }


/* ═══════════════════════════════════════════
   5. BUTONLAR
═══════════════════════════════════════════ */
.bp {
  background:    var(--cyan);
  color:         var(--bg);
  border:        0;
  padding:       9px 20px;
  font-family:   var(--body);
  font-size:     11px;
  font-weight:   800;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:        pointer;
  transition:    all .2s;
  white-space:   nowrap;
}
.bp:hover {
  background:  #33dcff;
  box-shadow:  0 0 22px rgba(0,212,255,.45);
}

.bo {
  background:    transparent;
  color:         var(--cyan);
  border:        1px solid rgba(0,212,255,.38);
  padding:       9px 20px;
  font-family:   var(--body);
  font-size:     11px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all .2s;
  white-space:   nowrap;
}
.bo:hover {
  border-color: var(--cyan);
  background:   rgba(0,212,255,.06);
}


/* ═══════════════════════════════════════════
   6. TİPOGRAFİ & BÖLÜM YARDIMCILARI
═══════════════════════════════════════════ */

/* Bölüm etiketi */
.sl {
  font-size:     10px;
  font-weight:   700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:         var(--cyan);
  margin-bottom: 8px;
}

/* Bölüm başlığı */
.h2 {
  font-family:   var(--display);
  font-size:     clamp(24px, 3vw, 36px);
  font-weight:   900;
  letter-spacing:.01em;
  text-transform:uppercase;
  line-height:   1.05;
}

/* İnce aksan çizgisi */
.dl {
  width:      44px;
  height:     1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  margin:     11px 0 18px;
}

/* Merkezi sarmalayıcı */
.wrap {
  max-width: 1060px;
  margin:    0 auto;
  padding:   0 32px;
}


/* ═══════════════════════════════════════════
   7. ETİKET (TAG) BADGELERİ
═══════════════════════════════════════════ */
.tag {
  display:        inline-block;
  padding:        3px 9px;
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius:  2px;
}


/* ═══════════════════════════════════════════
   8. KART / PANEL ORTAK STİLLERİ
═══════════════════════════════════════════ */

/* Hover ile yükselen kart */
.cg {
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.cg:hover {
  transform:    translateY(-3px);
  border-color: var(--borderHi) !important;
  box-shadow:   0 8px 36px rgba(0,212,255,.1);
}


/* ═══════════════════════════════════════════
   9. BREADCRUMB
═══════════════════════════════════════════ */
.bc {
  background:    rgba(0,212,255,.03);
  border-bottom: 1px solid rgba(0,212,255,.07);
  padding:       11px 32px;
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-size:     11px;
}
.bcl {
  color:       var(--dim);
  cursor:      pointer;
  transition:  color .2s;
  text-decoration: none;
}
.bcl:hover { color: var(--cyan); }
.bcs       { color: var(--darker); }
.bcc       { color: var(--cyan); font-weight: 700; }


/* ═══════════════════════════════════════════
   10. HERO BÖLÜMÜ — ORTAK ÖĞELER
═══════════════════════════════════════════ */

/* Arka plan ızgara deseni */
.hbg {
  position:         absolute;
  inset:            0;
  background-image: linear-gradient(rgba(0,212,255,.016) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,212,255,.016) 1px, transparent 1px);
  background-size:  52px 52px;
}

/* Gradient parlama */
.hgl {
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 20% 0%, rgba(0,212,255,.07), transparent 55%);
  pointer-events: none;
}

/* Tarama çizgisi animasyonu */
.sc {
  position:   absolute;
  left:       0;
  right:      0;
  height:     1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.3), transparent);
  animation:  scanline 9s linear infinite;
  pointer-events: none;
}

/* Köşe aksan elemanları */
.cor { position: absolute; width: 28px; height: 28px; }
.ctl { top: 18px; left:  18px; border-top:    1px solid rgba(0,212,255,.42); border-left:  1px solid rgba(0,212,255,.42); }
.ctr { top: 18px; right: 18px; border-top:    1px solid rgba(0,212,255,.42); border-right: 1px solid rgba(0,212,255,.42); }
.cbl { bottom: 18px; left:  18px; border-bottom: 1px solid rgba(0,212,255,.42); border-left:  1px solid rgba(0,212,255,.42); }
.cbr { bottom: 18px; right: 18px; border-bottom: 1px solid rgba(0,212,255,.42); border-right: 1px solid rgba(0,212,255,.42); }


/* ═══════════════════════════════════════════
   11. VERİ TABLOSU
═══════════════════════════════════════════ */
.data-table {
  width:           100%;
  border-collapse: collapse;
}
.data-table th {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--dim);
  padding:        10px 14px;
  border-bottom:  1px solid rgba(0,212,255,.1);
  text-align:     left;
  background:     rgba(0,0,0,.2);
}
.data-table td {
  font-size:     12px;
  color:         var(--muted);
  padding:       11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align:middle;
  transition:    background .2s;
}
.data-table tr:hover td {
  background: rgba(0,212,255,.03);
}


/* ═══════════════════════════════════════════
   12. İLERLEME ÇUBUĞU
═══════════════════════════════════════════ */
.prog {
  height:        4px;
  background:    rgba(255,255,255,.07);
  border-radius: 2px;
  overflow:      hidden;
}
.prog-fill {
  height:        100%;
  border-radius: 2px;
  transition:    width 1s ease;
}

/* 3px varyant */
.prog-bar {
  height:        3px;
  background:    rgba(255,255,255,.07);
  border-radius: 2px;
  overflow:      hidden;
  margin:        8px 0;
}
.prog-fill-bar {
  height:     100%;
  border-radius: 2px;
}


/* ═══════════════════════════════════════════
   13. YARDIMCI SINIFLAR
═══════════════════════════════════════════ */

/* Monospace veri değeri */
.mono {
  font-family: var(--mono);
  font-size:   11px;
  color:       var(--cyan);
}

/* Trend okları */
.trend-up { color: var(--green);  font-family: var(--mono); font-size: 11px; font-weight: 700; }
.trend-dn { color: var(--red);    font-family: var(--mono); font-size: 11px; font-weight: 700; }

/* Durum noktası */
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Ortak bölüm dolgusu */
.section-pad { padding: 72px 32px; }

/* Bölüm ayırıcı */
.section-divider { border-top: 1px solid rgba(0,212,255,.08); margin: 0; }

/* Form elemanları — çok sayfada kullanılıyor */
input[type="text"],
input[type="email"],
input[type="search"],
select,
textarea {
  background:  rgba(255,255,255,.04);
  border:      1px solid rgba(0,212,255,.2);
  color:       var(--text);
  padding:     12px 16px;
  font-size:   13px;
  font-family: var(--body);
  outline:     none;
  transition:  border .2s;
  width:       100%;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(0,212,255,.55);
}
input::placeholder, textarea::placeholder {
  color: var(--dim);
}
select option {
  background: #071020;
  color:      var(--text);
}
label {
  display:        block;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--dim);
  margin-bottom:  6px;
}


/* ═══════════════════════════════════════════
   14. RİSK / DURUM ETİKETLERİ
═══════════════════════════════════════════ */
.risk-high  { color: var(--red);    background: rgba(239,68,68,.12);  border: 1px solid rgba(239,68,68,.25);  }
.risk-med   { color: var(--yellow); background: rgba(234,179,8,.12);  border: 1px solid rgba(234,179,8,.25);  }
.risk-low   { color: var(--green);  background: rgba(34,197,94,.12);  border: 1px solid rgba(34,197,94,.25);  }
.risk-watch { color: var(--orange); background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.25); }


/* ═══════════════════════════════════════════
   15. ORTAK GRAFİK KARTI
═══════════════════════════════════════════ */
.chart-card {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: 2px;
  overflow:      hidden;
}
.chart-card .cc-bar   { height: 2px; }
.chart-card .cc-inner { padding: 22px; }
.chart-card .cc-title {
  font-family:   var(--display);
  font-size:     16px;
  font-weight:   900;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:         #fff;
  margin-bottom: 4px;
}
.chart-card .cc-sub {
  font-size:     11px;
  color:         var(--dim);
  margin-bottom: 18px;
}


/* ═══════════════════════════════════════════
   16. DUYARLI TASARIM (Responsive)
═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .section-pad { padding: 48px 20px; }
  .bc { padding: 11px 20px; }
  .cor { display: none; }
}

@media (max-width: 640px) {
  .h2 { font-size: clamp(20px, 6vw, 28px); }
  .hbg { display: none; } /* performans */
}