/**
 * Anadolu Üniversitesi Kütüphane - CSS Değişkenleri
 * Tüm renkler, fontlar, spacing ve genel değişkenler
 */

:root {
  /* Layout */
  --header-height: 80px;
  --container-max-width: 1200px;
  /* Yapışkan arama şeridinin içi (search-filter-manager.js yer tutucudan ölçüp
     şeridin kendisine yazar); burası yalnız ölçülmeden önceki varsayılan. */
  --yapiskan-x: 0px;
  --yapiskan-w: auto;
  
  /* Renk Paleti - Light Theme */
  --primary-color: #1F4C8A;
  --primary-dark: #153a6d;
  --primary-light: #3667a6;
  --secondary-color: #C03221;
  --secondary-light: #db4a39;
  --secondary-dark: #a01e11;
  --tertiary-color: #EEF9FC;
  --tertiary-dark: #d5eef5;
  --accent-color: #FFC43D;
  --accent-light: #ffd265;
  --accent-dark: #f5b520;
  
  /* Background Colors */
  --bg-color: #f8f9fa;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: #f8f9fa;
  --new-arrivals-bg: #d5eef5;
  --library-services-bg: #d5eef5;
  --footer-top-bg: #f5f5f5;
  
  /* Text Colors */
  --text-color: #212529;
  --text-muted: #6c757d;
  --text-light: #ffffff;
  
  /* Borders & Shadows */
  --white: #ffffff;
  --light-gray: #f5f5f5;
  --border-color: #eaedf0;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.08);
  
  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  
  /* ============================================================
     BOŞLUK ÖLÇEĞİ  (padding / margin / gap)

     Sitedeki 1056 boşluk değeri elle yazılmıştı, yalnızca 13'ü
     değişken kullanıyordu. En sık geçen 6 değer toplamın %61'i
     (1rem 187, 0.75rem 128, 0.5rem 124, 1.5rem 95, 2rem 58,
     1.25rem 48) ama eski ölçekte 0.75 / 1.25 / 1.5 adımları YOKTU.
     Bu yüzden bileşenler token kullanamıyordu.

     Adlar sayısal: --space-4 = 4 x 0.25rem = 1rem. Araya adım
     eklemek için yeni ad uydurmak gerekmiyor.

     YOĞUNLUK: burası tek değiştirme noktası. --space-birim
     küçültülürse TÜM site birlikte sıkışır. Kutu kutu ayar
     yapılmaz — tutarlılık böyle korunuyor.
     ============================================================ */
  --space-birim: 0.25rem;

  --space-1:  calc(var(--space-birim) * 1);    /* 0.25rem */
  --space-2:  calc(var(--space-birim) * 2);    /* 0.5rem  */
  --space-3:  calc(var(--space-birim) * 3);    /* 0.75rem */
  --space-4:  calc(var(--space-birim) * 4);    /* 1rem    */
  --space-5:  calc(var(--space-birim) * 5);    /* 1.25rem */
  --space-6:  calc(var(--space-birim) * 6);    /* 1.5rem  */
  --space-8:  calc(var(--space-birim) * 8);    /* 2rem    */
  --space-10: calc(var(--space-birim) * 10);   /* 2.5rem  */
  --space-12: calc(var(--space-birim) * 12);   /* 3rem    */

  /* Eski adlar korunuyor: 13 yerde kullanılıyor, kırılmasınlar. */
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-8);
  --spacing-xl: var(--space-12);
  
  /* Transitions */
  --transition: all 0.3s ease;
  --transition-fast: all 0.2s ease;
  --transition-slow: all 0.5s ease;
  
  /* Typography */
  --font-family-primary: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: inherit;
  
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;

  /* ============================================================
     YAZI BOYUTU ÖLÇEĞİ

     Genel Ayarlar > Düzen > "Yazı Boyutu" (yüzde) app.js tarafından
     --font-scale olarak buraya yazılır. 1 = bugünkü hâl.

     NEDEN İKİ ÇARPAN — tek çarpan ÖLÇÜLDÜ ve yetmedi (2026-09-25,
     gerçek tarayıcıda 38 sayfa / 4277 görünür metin elemanı):
     kategori çipindeki sayı rozeti 10.4px. Her şeyi birlikte küçülten
     tek bir çarpan onu 9.4px'e indirir — okunmaz. Bu yüzden küçük
     yazılar KORUNUR, büyükler ayarı izler. Büyütmede ayrım yoktur.

       --carpan-koru    : rozet, çip, menü, tarih/ünvan, form.
                          Küçültmede kıpırdamaz, büyütmede büyür.
       --carpan-serbest : başlık, gövde metni, düğme. Ayarı izler.

     TABAN: hiçbir yazı --font-taban altına inmez. Ölçüldü: tabansız
     %85'te 127 eleman 11px altına iniyordu (bugün 15 tane altında).

       font-size: max(var(--font-taban), calc(0.8rem * var(--carpan-koru)));

     ÖLÇEK 1 İKEN HER DEĞER BUGÜNKÜYLE BİREBİR AYNIDIR — bu yüzden
     jetonlar bağlanırken görünüm değişmez.

     Güvenli aralık ölçüldü: %85 altında yazıların %9'u tabana yapışıyor
     (%75'te dörtte biri), %125 üstünde kart açıklamaları kırpılmaya
     başlıyor. Sınır server.py > _yazi_boyutu_kirp içinde.
     ============================================================ */
  --font-scale: 1;
  --carpan-koru: max(1, var(--font-scale));
  --carpan-serbest: var(--font-scale);
  --font-taban: 11px;

  /* ============================================================
     YAZI OLCEGI - 13 BASAMAK

     Basamaklar uydurulmadi: sitedeki 448 bagli bildirimin deger
     dagilimi olculup en sik gecen tepelere yaslandi. Bu ölçekle
     bildirimlerin %79'u HIC OYNAMADAN yerine oturuyor.

     Jeton sayiyi DEGIL, bitmis bildirimi tasir: carpan ve taban
     iceride. Bilesende tek kelime kalir:
         font-size: var(--fs-6);        <- 0.95rem, olcege uyar
         font-size: var(--fs-4-koru);   <- 0.85rem, kucultmede korunur
     Boylece yeni bilesen yazan kisi taban/carpan kurallarini
     ezberlemek zorunda kalmaz; kural tek yerde, burada.

     -koru sonekli olanlar: cip, rozet, meta, form gibi ZATEN KUCUK
     yazilar. Kucultmede kipirdamaz, buyutmede buyurler.
     Taban yalnizca ilk uc basamakta var: digerleri %85 olcekte
     zaten 11px'in ustunde kaliyor (olculdu).
     ============================================================ */
  --fs-1      : max(min(0.7rem, var(--font-taban)), calc(0.7rem * var(--carpan-serbest)));   /* 0.7rem = 11.2px */
  --fs-1-koru : calc(0.7rem * var(--carpan-koru));
  --fs-2      : max(min(0.75rem, var(--font-taban)), calc(0.75rem * var(--carpan-serbest)));   /* 0.75rem = 12.0px */
  --fs-2-koru : calc(0.75rem * var(--carpan-koru));
  --fs-3      : max(min(0.8rem, var(--font-taban)), calc(0.8rem * var(--carpan-serbest)));   /* 0.8rem = 12.8px */
  --fs-3-koru : calc(0.8rem * var(--carpan-koru));
  --fs-4      : calc(0.85rem * var(--carpan-serbest));   /* 0.85rem = 13.6px */
  --fs-4-koru : calc(0.85rem * var(--carpan-koru));
  --fs-5      : calc(0.9rem * var(--carpan-serbest));   /* 0.9rem = 14.4px */
  --fs-5-koru : calc(0.9rem * var(--carpan-koru));
  --fs-6      : calc(0.95rem * var(--carpan-serbest));   /* 0.95rem = 15.2px */
  --fs-6-koru : calc(0.95rem * var(--carpan-koru));
  --fs-7      : calc(1rem * var(--carpan-serbest));   /* 1rem = 16.0px */
  --fs-7-koru : calc(1rem * var(--carpan-koru));
  --fs-8      : calc(1.1rem * var(--carpan-serbest));   /* 1.1rem = 17.6px */
  --fs-8-koru : calc(1.1rem * var(--carpan-koru));
  --fs-9      : calc(1.25rem * var(--carpan-serbest));   /* 1.25rem = 20.0px */
  --fs-9-koru : calc(1.25rem * var(--carpan-koru));
  --fs-10     : calc(1.5rem * var(--carpan-serbest));   /* 1.5rem = 24.0px */
  --fs-10-koru: calc(1.5rem * var(--carpan-koru));
  --fs-11     : calc(1.75rem * var(--carpan-serbest));   /* 1.75rem = 28.0px */
  --fs-11-koru: calc(1.75rem * var(--carpan-koru));
  --fs-12     : calc(2rem * var(--carpan-serbest));   /* 2rem = 32.0px */
  --fs-12-koru: calc(2rem * var(--carpan-koru));
  --fs-13     : calc(2.5rem * var(--carpan-serbest));   /* 2.5rem = 40.0px */
  --fs-13-koru: calc(2.5rem * var(--carpan-koru));

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;
}

/* Dark Theme Variables */
html[data-theme="dark"] {
  /* Background Colors */
  --bg-color: #121212;
  --bg-card: #1e1e1e;
  --bg-input: #2c2c2c;
  --bg-hover: #2a2a2a;
  --new-arrivals-bg: #1a2533;
  --library-services-bg: #1a2533;
  --footer-top-bg: #222222;
  
  /* Primary Colors Adjustment */
  --primary-color: #3667a6;
  --primary-dark: #1F4C8A;
  --primary-light: #5483c2;
  --secondary-color: #db4a39;
  --secondary-light: #e67565;
  --secondary-dark: #C03221;
  
  /* Tertiary Colors Adjustment */
  --tertiary-color: #1a2533;
  --tertiary-dark: #121a24;
  
  /* Text Colors */
  --text-color: #ffffff;
  --text-muted: #c0c0c0;
  
  /* Borders & Shadows */
  --border-color: #333333;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* Responsive Breakpoints (CSS Custom Properties için) */
:root {
  --breakpoint-mobile: 576px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 992px;
  --breakpoint-wide: 1200px;
}