/* Tasarım değişkenleri: bütün renkler, yazı tipleri, boyutlar ve boşluklar burada.
   Bir rengi veya ölçüyü değiştirmek için yalnızca bu dosyayı düzenleyin.
   Renk dili (v0.5.4): düz beyaz zemin üzerinde orman yeşili (eylem), yaprak yeşili (doğrulama),
   mercan (acil ve uyarı), bal (vurgu) ve gök mavisi (bilgi). Zeminden ayrılması gereken kutular çok hafif gri. */

:root {
  /* Zeminler */
  --renk-zemin: #ffffff;
  --renk-gri: #f6f7f8;            /* zeminden ayrılması gereken kutular ve paneller (çok hafif gri) */
  --renk-gri-koyu: #eceef0;       /* boş fotoğraf, ikincil kutular */
  --renk-seftali: #fde3cb;        /* ikon dairesi zemini (lekeler kapalı) */
  --renk-tereyag: #fbefc6;        /* ikon dairesi zemini */
  --renk-nane: #eaf5ee;           /* ikon dairesi zemini */
  --renk-gul: #fbdcd5;            /* ikon dairesi zemini */
  --renk-gok-leke: #e4eefb;       /* ikon dairesi zemini */

  /* Metin */
  --renk-murekkep: #13212f;       /* başlıklar ve koyu alanlar */
  --renk-metin: #3a4553;          /* gövde metni */
  --renk-soluk: #6b7480;          /* ikincil metin */

  /* Çizgiler */
  --renk-cizgi: #eceef0;
  --renk-cizgi-koyu: #dcdfe3;
  --renk-iz: #eceef0;             /* ilerleme çubuğunun boş kısmı */

  /* Orman: eylem rengi (düğmeler, bağlantılar) */
  --renk-orman: #155f3f;
  --renk-orman-koyu: #0e4630;
  --renk-orman-acik: #e7f3ec;

  /* Yaprak: doğrulama ve onay rengi */
  --renk-yaprak: #2e8a57;
  --renk-yaprak-koyu: #1f6a42;
  --renk-yaprak-acik: #e8f5ee;
  --renk-yaprak-soluk: #a9d6bb;   /* ilerleme çubuğunda "bildirilen" kısım */
  --renk-yaprak-soluk-2: #cfe9da; /* "bildirilen" çizgilerinin ikinci tonu */
  --renk-yaprak-susu: #7cc08e;    /* dekoratif yapraklar */

  /* Mercan: acil, gecikmiş ve uyarı */
  --renk-mercan: #e3483b;
  --renk-mercan-koyu: #c4352a;
  --renk-mercan-acik: #fde8e6;
  --renk-mercan-zemin: #fff3f1;

  /* Bal: vurgu (elektrik, market, şeftali ikon zemini) */
  --renk-bal: #f0982f;
  --renk-bal-koyu: #b86b12;
  --renk-bal-acik: #fdf0e0;

  /* Gök: bilgi (su, hane onayı) */
  --renk-gok: #3a78d6;
  --renk-gok-acik: #e7effb;

  /* Madalyalar (Ayın hayırseverleri ilk üç) */
  --renk-altin: #e9a325;
  --renk-altin-acik: #fdf2d8;
  --renk-gumus: #8f9aa7;
  --renk-gumus-acik: #eef1f4;
  --renk-bronz: #c47a45;
  --renk-bronz-acik: #f8eadf;

  /* Saydam katmanlar */
  --renk-beyaz-perde: rgba(255, 255, 255, 0.96);
  --renk-koyu-perde: rgba(19, 33, 47, 0.72);
  --renk-bulanik-perde: rgba(245, 237, 226, 0.25);
  --renk-perde: rgba(19, 33, 47, 0.45);           /* açılan pencerenin (dialog) arkasındaki karartma */
  --renk-damar: rgba(255, 255, 255, 0.55);       /* süsleme yapraklarının damarları */

  /* Kayan şeritlerin kenarlarını yumuşatan maske (yalnızca saydamlık; renk değil) */
  --maske-kenar: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);

  /* Başlıktaki vurgu kelimesinin renk geçişi ("doğrudan") */
  --gecis-vurgu: linear-gradient(95deg, #2f9468 0%, #7fa443 48%, #e8913a 100%);

  /* Yazı tipleri */
  --yazi-baslik: "Fraunces", Georgia, "Times New Roman", serif;
  --yazi-govde: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --yazi-el: "Caveat", "Segoe Print", cursive;
  --yazi-kod: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;  /* model kimlikleri, istek önizlemesi */

  /* Yazı boyutları */
  --boyut-dev: clamp(3.3rem, 1.2rem + 6.4vw, 7.1rem);   /* karşılama başlığı */
  --boyut-h1: clamp(2.2rem, 1.4rem + 2.8vw, 3.4rem);
  --boyut-h2: clamp(1.9rem, 1.3rem + 2vw, 2.85rem);
  --boyut-govde: 1.0625rem;
  --boyut-giris: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  --boyut-karsilama-alt: clamp(1.15rem, 0.95rem + 0.6vw, 1.5rem);
  --boyut-el: clamp(1.4rem, 1rem + 1vw, 1.85rem);       /* el yazısı notlar */

  /* Düzen */
  --kapsayici: 1200px;
  --kenar: clamp(16px, 4vw, 32px);
  --bosluk-bolum: clamp(64px, 8vw, 104px);
  --ust-menu-yuksekligi: 76px;
  --panel-ust-yuksekligi: 68px;   /* panellerdeki ince üst çubuk */
  --boyut-panel-sade: 1.1875rem;  /* ihtiyaç sahibi panelinde gövde yazısı (büyük) */

  /* Köşeler ve gölgeler */
  --yaricap-kucuk: 8px;
  --yaricap: 12px;
  --yaricap-buyuk: 20px;
  --yaricap-kocaman: 28px;
  --yaricap-dev: 36px;
  /* Gölgeler kısa ve sıkı tutulur: geniş, yayvan gölge beyaz zemini çevresinde griye boyar (v0.5.5) */
  --golge-kart: 0 1px 2px rgba(19, 33, 47, 0.06), 0 3px 10px rgba(19, 33, 47, 0.05);
  --golge-kart-ust: 0 2px 4px rgba(19, 33, 47, 0.07), 0 6px 16px rgba(19, 33, 47, 0.08);
  --golge-yuzen: 0 6px 18px rgba(19, 33, 47, 0.12);
  --golge-dugme: 0 3px 8px rgba(21, 95, 63, 0.22);
  --golge-yumusak: 0 1px 2px rgba(19, 33, 47, 0.05), 0 3px 10px rgba(19, 33, 47, 0.05);
  --golge-alt-cubuk: 0 -6px 16px rgba(19, 33, 47, 0.06);  /* telefonda ekranın altına yapışan düğme çubuğu */
  --golge-halka: 0 0 0 5px var(--renk-zemin);       /* fotoğrafın üstüne binen ikonların beyaz halkası */
}