@charset "UTF-8";
/* pa-build: 20260912-1434 */
/* ==========================================================================
   ParçaApp — tasarım belirteçleri (Aşama 32)

   TEK KAYNAK. Renk, boşluk, gölge ve köşe yuvarlaklığı burada tanımlanır;
   bileşenler sabit değer yazmaz.

   Bu dosya `app.css`'ten ÖNCE yüklenir ve onun mevcut değişkenlerini
   ezmez — genişletir. 3.798 satırlık mevcut stil dosyası çalışmaya
   devam eder.

   MARKA YÖNÜ: koyu lacivert + turuncu vurgu + açık gri yüzeyler.
   Yeşil YALNIZCA anlamsal durumlarda (uyumlu / doğrulandı / başarılı).
   ========================================================================== */

:root {
    /*
       SURUM DAMGASI.

       Sunucuya hangi CSS surumunun yuklendigini anlamak icin.
       Sayfa kaynagina da yaziliyor; tarayicida Ctrl+U yapip
       "pa-build" arayin.

       Bir kez gerekti: gorseller guncellendi ama CSS klasoru
       yuklenmedi ve "kod calismiyor" gibi gorundu.
    */
    --pa-build: "20260912-1101";

    /* ----------------------------------------------------------------------
       Lacivert ölçeği
       ---------------------------------------------------------------------- */
    --pa-navy-900: #04192d;   /* Logo laciverti; koyu yüzeyler */
    --pa-navy-800: #0a2942;
    --pa-navy-700: #123f6b;
    --pa-navy-100: #dbe3ec;
    --pa-navy-050: #eef2f6;

    /* ----------------------------------------------------------------------
       Turuncu ölçeği

       Logo turuncusu (#fd4600) beyaz zeminde 3.47 kontrast verir; WCAG AA
       normal metin için 4.5 ister. Bu yüzden MARKA rengi ile TIKLANABİLİR
       öğe rengi ayrı:

         --pa-orange-500  marka işareti, koyu zemin, büyük öğe
         --pa-orange-600  buton zemini ve bağlantı metni (5.31 / beyaz)

       Bu ayrım olmadan "markaya sadık kalalım" derken erişilemez bir
       arayüz çıkıyor.
       ---------------------------------------------------------------------- */
    --pa-orange-500: #fd4600;
    --pa-orange-600: #c73600;
    --pa-orange-700: #a32c00;
    --pa-orange-100: #ffe0d4;
    --pa-orange-050: #fff2ed;

    /* ----------------------------------------------------------------------
       Yüzeyler ve metin
       ---------------------------------------------------------------------- */
    --pa-bg:        #f4f6fa;
    --pa-surface:   #ffffff;
    --pa-surface-2: #f8fafc;   /* İkincil yüzey: tablo başlığı, kart içi */
    --pa-border:    #e2e8f0;
    --pa-border-strong: #cbd5e1;
    --pa-text:      #16202c;
    --pa-muted:     #5d6b7c;
    --pa-muted-2:   #8b97a6;   /* Üçüncül metin: zaman damgası, ipucu */

    /* ----------------------------------------------------------------------
       Anlamsal renkler

       YEŞİL MARKA RENGİ DEĞİLDİR. Yalnızca şu durumlarda kullanılır:
       uyumlu, doğrulandı, başarılı. Dekoratif yeşil yok — kullanıcı
       yeşili gördüğünde "bu iyi" diye okumalı, "bu bir düğme" diye
       değil.
       ---------------------------------------------------------------------- */
    --pa-success:     #12a150;
    --pa-success-050: #e7f6ed;
    --pa-warning:     #e0a106;
    --pa-warning-050: #fdf5e3;
    --pa-danger:      #d64545;
    --pa-danger-050:  #fdecec;
    --pa-info:        #1361f0;
    --pa-info-050:    #eaf1fe;

    /* ----------------------------------------------------------------------
       Boşluk ölçeği

       Dört piksellik taban. Sabit değer yazmak yerine ölçek kullanmak,
       ekranlar arası ritmi tutarlı tutuyor: bir yerde 14px başka yerde
       16px boşluk olduğunda göz bunu düzensizlik olarak okuyor.
       ---------------------------------------------------------------------- */
    --pa-space-1: 4px;
    --pa-space-2: 8px;
    --pa-space-3: 12px;
    --pa-space-4: 16px;
    --pa-space-5: 20px;
    --pa-space-6: 24px;
    --pa-space-8: 32px;
    --pa-space-10: 40px;
    --pa-space-12: 48px;

    /* ----------------------------------------------------------------------
       Köşe yuvarlaklığı
       ---------------------------------------------------------------------- */
    --pa-radius-sm: 6px;
    --pa-radius-md: 10px;
    --pa-radius-lg: 14px;
    --pa-radius-xl: 20px;
    --pa-radius-pill: 999px;

    /* ----------------------------------------------------------------------
       Gölgeler

       Üç kademe: yükseklik hiyerarşisi. Her yerde aynı gölgeyi
       kullanmak derinliği yok eder; her kartın farklı gölgesi olması
       da dağınık görünür.
       ---------------------------------------------------------------------- */
    --pa-shadow-sm: 0 1px 2px rgba(10, 37, 64, .06);
    --pa-shadow-md: 0 1px 2px rgba(10, 37, 64, .06), 0 8px 24px rgba(10, 37, 64, .06);
    --pa-shadow-lg: 0 2px 4px rgba(10, 37, 64, .08), 0 16px 40px rgba(10, 37, 64, .10);

    /* ----------------------------------------------------------------------
       Tipografi

       Sistem yazı tipi öncelikli: dosya bağımlılığı yok, ilk boyama
       hızlı. Inter varsa kullanılır, yoksa işletim sisteminin kendi
       yazı tipi devreye girer — ikisi de okunaklı.
       ---------------------------------------------------------------------- */
    --pa-font: "Inter", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
    --pa-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Ölçek: 1.125 oranı. Pazarlama sitelerindeki devasa başlıklar
       burada işe yaramıyor — bu bir katalog, okunması gereken çok
       veri var. */
    --pa-text-xs:  11.5px;
    --pa-text-sm:  13px;
    --pa-text-base: 14.5px;
    --pa-text-md:  16px;
    --pa-text-lg:  19px;
    --pa-text-xl:  23px;
    --pa-text-2xl: 28px;
    --pa-text-3xl: 34px;

    --pa-leading-tight: 1.25;
    --pa-leading-normal: 1.55;

    --pa-weight-normal: 400;
    --pa-weight-medium: 500;
    --pa-weight-semibold: 600;
    --pa-weight-bold: 700;

    /* ----------------------------------------------------------------------
       Ölçüler
       ---------------------------------------------------------------------- */
    --pa-header-h: 68px;
    --pa-tap: 44px;            /* Dokunma hedefi alt sınırı */
    --pa-container: 1600px;

    /* ----------------------------------------------------------------------
       Geriye dönük takma adlar

       Mevcut 3.798 satır bu adları kullanıyor. Hepsini değiştirmek
       yerine yeni ölçeğe bağlıyoruz: eski kod çalışmaya devam ediyor,
       yeni kod yeni adları kullanıyor, ikisi de aynı değeri gösteriyor.

       Tek tek elle değiştirmek 200 dosyaya dokunmak ve her birinde
       hata yapma ihtimali demekti.
       ---------------------------------------------------------------------- */
    --pa-navy:    var(--pa-navy-900);
    --pa-orange:  var(--pa-orange-500);
    --pa-ink:     var(--pa-text);
    --pa-line:    var(--pa-border);
    --pa-white:   #ffffff;
    --pa-green:   var(--pa-success);
    --pa-green-050: var(--pa-success-050);
    --pa-red:     var(--pa-danger);
    --pa-red-050: var(--pa-danger-050);
    --pa-amber:   var(--pa-warning);
    --pa-blue:    var(--pa-info);
    --pa-blue-600: #0f52cf;
    --pa-blue-050: var(--pa-info-050);
    /* Bu degisken app.css'te yedeksiz kullaniliyordu ama HIC
       TANIMLI DEGILDI: `.pa-action-text` rengi gecersiz kaliyor ve
       metin ust ogeden renk aliyordu. Belirtecleri tek dosyada
       toplayinca ortaya cikti. */
    --pa-ink-2:   var(--pa-muted);

    --pa-radius:  var(--pa-radius-md);
    --pa-shadow:  var(--pa-shadow-md);

    /* Birincil aksiyon: kontrast nedeniyle koyu ton */
    --pa-primary:     var(--pa-orange-600);
    --pa-primary-600: var(--pa-orange-700);
    --pa-primary-050: var(--pa-orange-050);
}