/* ================================================================
   90matik - Tasarim belirtecleri (design tokens)

   Tum renk, olcu ve gecis degerleri burada tanimlanir. Bir rengi
   degistirmek istediginizde sadece bu dosyaya dokunmaniz yeterlidir;
   degisiklik tum siteye yansir.

   Marka renkleri PRD 5.1'den alinmistir.
   ================================================================ */

:root {
  /* --- Marka -------------------------------------------------
     --brand      : dolgu ve kenarlik sarisi (dugmeler, seritler)
     --brand-ink  : yazi ve ikon rengi

     Ikisi koyu temada ayni renk. Aydinlik temada ayriliyorlar:
     beyaz uzerinde sari yazi okunmuyor, o yuzden orada --brand-ink
     koyu bir kehribara donuyor. Yeni kod yazarken kural basit:
     zemin boyuyorsan --brand, yazi boyuyorsan --brand-ink.        */
  --brand:            #FFD400;
  --brand-ink:        #FFD400;
  --brand-hover:      #FFE04D;
  --brand-active:     #E6BE00;
  --brand-dim:        rgba(255, 212, 0, 0.12);
  --brand-glow:       rgba(255, 212, 0, 0.25);
  --on-brand:         #101010;   /* sari uzerine yazi rengi */

  /* --- Yuzeyler ----------------------------------------------
     Katman katman acilan bir koyu tema. Yukseldikce aydinlanir,
     boylece kartlarin "one cikma" hissi olusur.                */
  --bg:               #080808;
  --surface-1:        #0E0E0E;
  --surface-2:        #151515;
  --surface-3:        #1C1C1C;
  --surface-4:        #222222;
  --surface-hover:    #1A1A1A;

  /* --- Kenarliklar -------------------------------------------
     Duz gri yerine saydam beyaz kullaniyoruz; her arka plan
     tonunun uzerinde dogal duruyor.                            */
  --border:           rgba(255, 255, 255, 0.07);
  --border-strong:    rgba(255, 255, 255, 0.13);
  --border-brand:     rgba(255, 212, 0, 0.35);

  /* --- Cam yuzeyler -------------------------------------------
     Ust cubuk ve mobil alt menu arkalarindaki icerigi bulaniklastirip
     yariya kadar gosteriyor. Saydam olduklari icin yuzey renklerinden
     ayri duruyorlar: tema degisince bunlarin da degismesi gerekir. */
  --glass-header:     rgba(8, 8, 8, 0.82);
  --glass-nav:        rgba(10, 10, 10, 0.94);

  /* --- Metin -------------------------------------------------- */
  --text:             #F2F2F2;
  --text-muted:       #AAAAAA;
  --text-dim:         #6E6E6E;
  --text-inverse:     #0A0A0A;

  /* --- Durum renkleri ----------------------------------------- */
  --success:          #2ECC71;
  --success-dim:      rgba(46, 204, 113, 0.14);
  --danger:           #FF4D4F;
  --danger-dim:       rgba(255, 77, 79, 0.14);
  --warning:          #FFA726;
  --warning-dim:      rgba(255, 167, 38, 0.14);
  --info:             #3B9EFF;
  --info-dim:         rgba(59, 158, 255, 0.14);
  --live:             #FF3B30;

  /* --- Level / rozet renkleri --------------------------------- */
  --tier-bronze:      #CD7F32;
  --tier-silver:      #C0C0C0;
  --tier-gold:        #FFD400;
  --tier-legendary:   #B14CFF;

  /* --- Tipografi ---------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.8125rem;  /* 13px */
  --fs-base:  0.9375rem;  /* 15px */
  --fs-md:    1rem;       /* 16px */
  --fs-lg:    1.125rem;   /* 18px */
  --fs-xl:    1.375rem;   /* 22px */
  --fs-2xl:   1.75rem;    /* 28px */
  --fs-3xl:   2.25rem;    /* 36px */

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.6;
  --lh-relaxed: 1.72;

  /* --- Bosluk olcegi (4px tabanli) ---------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* --- Kose yuvarlakligi -------------------------------------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-full: 9999px;

  /* --- Golgeler ----------------------------------------------- */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-brand: 0 4px 20px rgba(255, 212, 0, 0.18);

  /* --- Gecisler ------------------------------------------------ */
  --t-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Duzen olculeri ------------------------------------------ */
  --header-h:      52px;
  --mobilenav-h:   58px;
  --sidebar-w:     248px;
  --widgets-w:     330px;
  --content-max:   1340px;
  --feed-max:      620px;

  /* --- Katman sirasi ------------------------------------------- */
  --z-base:     1;
  --z-sticky:   50;
  --z-header:   100;
  --z-dropdown: 200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ================================================================
   AYDINLIK TEMA

   Yalnizca renkler degisiyor; olcu, yazi tipi ve gecis degerleri
   ortak kaliyor. Bu yuzden yeni bir sayfa eklendiginde aydinlik tema
   icin ayrica bir sey yazmak gerekmiyor: belirtecleri kullanan her
   sey kendiliginden uyuyor.

   Temayi <html data-tema="acik"> nitelendirmesi aciyor. Niteligi
   sunucu basiyor (bkz. tema() yardimcisi), boylece sayfa aydinlik
   olarak dogar; once koyu gorunup sonra beyaza atlamaz.

   Forum temasi da bu dosyayi yukluyor, dolayisiyla forum da ayni
   anda aydinlaniyor.
   ================================================================ */
[data-tema="acik"] {
  /* Marka sarisi zeminde ayni kaliyor: kimligi o sari tasiyor.
     Yazi icin kehribara donuyor, beyazda okunabilsin.             */
  --brand-ink:        #8A6B00;
  --brand-dim:        rgba(255, 212, 0, 0.22);
  --brand-glow:       rgba(214, 178, 0, 0.30);

  /* Yuzeyler: koyu temada yukseldikce aydinlaniyordu, burada tersi
     islemiyor. Onun yerine sayfa yumusak gri, kartlar bembeyaz;
     "one cikma" hissini golge veriyor.                            */
  --bg:               #F1F3F5;
  --surface-1:        #FFFFFF;
  --surface-2:        #FFFFFF;
  --surface-3:        #F4F5F7;
  --surface-4:        #E9ECEF;
  --surface-hover:    #F1F3F5;

  --border:           rgba(16, 20, 26, 0.10);
  --border-strong:    rgba(16, 20, 26, 0.18);
  --border-brand:     rgba(180, 148, 0, 0.45);

  --glass-header:     rgba(255, 255, 255, 0.86);
  --glass-nav:        rgba(255, 255, 255, 0.95);

  --text:             #14171C;
  --text-muted:       #59616D;
  --text-dim:         #868E99;
  --text-inverse:     #FFFFFF;

  /* Durum renkleri biraz koyulasti: canli tonlar beyaz uzerinde
     kontrastsiz kaliyordu.                                        */
  --success:          #1B9E52;
  --success-dim:      rgba(27, 158, 82, 0.12);
  --danger:           #D32F2F;
  --danger-dim:       rgba(211, 47, 47, 0.10);
  --warning:          #B36A00;
  --warning-dim:      rgba(179, 106, 0, 0.12);
  --info:             #1565C0;
  --info-dim:         rgba(21, 101, 192, 0.10);
  --live:             #D32F2F;

  --tier-gold:        #B08A00;
  --tier-silver:      #8A8F96;

  /* Golgeler: siyahin %45'i beyaz zeminde kir gibi duruyor.       */
  --shadow-sm:    0 1px 2px rgba(16, 20, 26, 0.08);
  --shadow-md:    0 2px 10px rgba(16, 20, 26, 0.10);
  --shadow-lg:    0 10px 28px rgba(16, 20, 26, 0.14);
  --shadow-brand: 0 4px 18px rgba(214, 178, 0, 0.28);
}

/* Hareket azaltma tercihini onemsiyoruz (erisilebilirlik). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
}