/* ============================================================
   Oymadere Köyü — tasarım değişkenleri
   ------------------------------------------------------------
   SİTENİN TÜM GÖRSEL DEĞERLERİ BU DOSYADADIR.
   site.css içinde ham renk kodu (#333) veya sabit px boşluk
   geçmez; hepsi buradan var() ile okunur. Tasarımı değiştirmek
   için yalnızca bu dosyaya dokunmak yeter, PHP'ye hiç girmeyin.
   ============================================================ */

:root {
  /* --- Renk: açık tema --- */
  --renk-zemin:        #f3ede2;   /* sayfa zemini */
  --renk-kart:         #f3ede2;   /* kutu zemini */
  --renk-metin:        #1f1a12;   /* gövde yazısı */
  --renk-metin-soluk:  #6d6353;   /* ikincil yazı */
  --renk-vurgu:        #2c5233;   /* yeşil: menü, başlık bantları */
  --renk-vurgu-metin:  #f3ede2;   /* vurgu üzerine yazı */
  --renk-vurgu-2:      #9a5a26;   /* turuncu: sayı ve tarih vurgusu */
  --renk-cizgi:        #1f1a12;   /* güçlü kenar */
  --renk-cizgi-soluk:  #cfc4b0;   /* ayırıcı çizgi */
  --renk-bos-1:        #e4dac6;   /* görsel yüklenene kadarki zemin */
  --renk-bos-2:        #d8ccb4;
  --renk-tehlike:      #8f2f22;   /* yıkıcı işlem */
  --renk-odak:         #9a5a26;   /* klavye odak halkası */
  --renk-nokta:        #ffffff;   /* kuşak göstergesi; mix-blend ile ters çevrilir */
  --renk-perde:        rgba(20, 16, 10, .93);  /* lightbox zemini */
  --renk-perde-metin:  #f2ede3;
  /* Perdenin ÜSTÜNDEKİ katmanlar. Perde her temada koyu olduğu için bu
     dördü tema değiştiğinde de aynı kalır; ayrıca renk değil saydamlık
     taşıdıkları için altındaki fotoğrafın rengine uyum sağlarlar. */
  --renk-perde-cizgi:  rgba(255, 255, 255, .16);  /* perde içi ayırıcı */
  --renk-perde-kenar:  rgba(255, 255, 255, .40);  /* tuş kutusu kenarı */
  --renk-perde-dugme:  rgba(255, 255, 255, .55);  /* perde düğmesi kenarı */
  --renk-perde-dolgu:  rgba(0, 0, 0, .45);        /* perde düğmesi zemini */
  --renk-koyu-vurgu:   rgba(0, 0, 0, .22);        /* koyu bant üzerinde açık öge */

  /* Kâğıt dokusu. Ham renk içermez: SVG filtresi gri gürültü üretir,
     %3,5 saydamlıkla zeminin üstüne serilir. Dosya değil veri adresi,
     yani ek istek yok. CSP'de img-src içinde data: zaten açık. */
  --doku-kagit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");

  /* --- Tipografi --- */
  --yazi-baslik: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --yazi-govde:  "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Gövde 17px: hedef kitle yaşlı, 16px alt sınırın üstünde duruyoruz. */
  --olcu-1:  0.8125rem;   /* 13px  üst şerit, küçük etiket */
  --olcu-2:  0.9375rem;   /* 15px  yardımcı yazı */
  --olcu-3:  1.0625rem;   /* 17px  gövde */
  --olcu-4:  1.1875rem;   /* 19px  vurgulu gövde */
  --olcu-5:  1.375rem;    /* 22px  kutu başlığı */
  --olcu-6:  1.75rem;     /* 28px  bölüm başlığı */
  --olcu-7:  2.25rem;     /* 36px  sayfa başlığı */
  --olcu-8:  3rem;        /* 48px  ana sayfa başlığı */

  --kalinlik-normal: 400;
  --kalinlik-orta:   500;
  --kalinlik-kalin:  600;
  --kalinlik-agir:   700;

  --satir-sik:  1.2;
  --satir-orta: 1.45;
  --satir-genis: 1.65;   /* uzun metin için */

  --harf-aralik-genis: .14em;   /* büyük harf üst şerit */

  /* --- Boşluk (4px adımlı) --- */
  --bosluk-1: 0.25rem;   /*  4 */
  --bosluk-2: 0.5rem;    /*  8 */
  --bosluk-3: 0.75rem;   /* 12 */
  --bosluk-4: 1rem;      /* 16 */
  --bosluk-5: 1.5rem;    /* 24 */
  --bosluk-6: 2rem;      /* 32 */
  --bosluk-7: 3rem;      /* 48 */
  --bosluk-8: 4rem;      /* 64 */

  /* --- Ölçüler --- */
  --genislik-sayfa:  75rem;   /* 1200px  içerik kabı */
  --genislik-metin:  38rem;   /* uzun metin satır uzunluğu (~70 karakter) */
  --dokunma-hedefi:  2.75rem; /* 44px  en küçük tıklama alanı */
  --dokunma-genis:   3.25rem; /* 52px  ana düğmeler */
  --alt-menu-boyu:   4.25rem; /* telefon alt menüsünün yüksekliği */

  --yaricap-yok:  0;
  --yaricap-kucuk: 2px;
  --yaricap-orta:  4px;

  --cizgi-ince:  1px;
  --cizgi-kalin: 2px;
  --odak-kalinlik: 3px;
  --odak-mesafe:   2px;

  --golge-yok: none;
  --golge-perde: 0 0 0 100vmax var(--renk-perde);

  /* --- Hareket --- */
  --sure-kisa:  150ms;
  --sure-orta:  250ms;
  --yumusama:   cubic-bezier(.2, .7, .3, 1);

  /* --- Katman sırası --- */
  --kat-taban:    0;
  --kat-yapisik:  10;   /* sticky başlık */
  --kat-perde:   100;   /* lightbox */
  --kat-ustu:    110;   /* lightbox düğmeleri */
}

/* --- Renk: koyu tema ---
   Yalnızca renkler değişir; ölçü, boşluk ve tipografi ortak kalır.
   Site şimdilik açık temayla yayında; koyu tema alt yapısı hazır. */
@media (prefers-color-scheme: dark) {
  :root {
    --renk-zemin:       #17140f;
    --renk-kart:        #17140f;
    --renk-metin:       #efe7d8;
    --renk-metin-soluk: #a89c86;
    --renk-vurgu:       #6f9c72;
    --renk-vurgu-metin: #17140f;
    --renk-vurgu-2:     #d59a5f;
    --renk-cizgi:       #efe7d8;
    --renk-cizgi-soluk: #3a332a;
    --renk-bos-1:       #26211a;
    --renk-bos-2:       #2f2921;
    --renk-tehlike:     #e0776a;
    --renk-odak:        #d59a5f;
  }
}

/* --- Kırılma noktaları ---
   CSS değişkeni media query içinde kullanılamıyor; değerler burada
   yazılı dursun ki site.css'teki sayılar nereden geldiği belli olsun.
     dar   : 40rem  (640px)  telefon üstü
     orta  : 52rem  (832px)  tablet
     genis : 64rem (1024px)  masaüstü
*/