/* =============================================================================
   03emlak.net — Tasarım token'ları
   Tek kaynak. Bileşen CSS'inde ham hex / rastgele px KULLANILMAZ.
   Tema: :root = açık · [data-theme="dark"] = koyu · sistem tercihi varsayılan.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- MARKA ----- */
  /* Gold (#C89B3C): vurgu ve birincil eylem. Üzerine DAİMA koyu metin gelir
     (gold + beyaz metin WCAG AA'yı geçmez). */
  --brand-50:  #FBF6EA;
  --brand-100: #F4E8C9;
  --brand-200: #E7D09A;
  --brand-300: #D9B76B;
  --brand-400: #D0A94F;
  --brand-500: #C89B3C;   /* ana marka rengi */
  --brand-600: #AE8330;
  --brand-700: #8C6724;   /* açık zeminde metin için güvenli ton (5.3:1) */
  --brand-800: #6B4E1B;
  --brand-900: #4E3813;

  /* Lacivert (nötr) ölçeği */
  --ink-50:  #EEF3F8;
  --ink-100: #D5E1EC;
  --ink-200: #A7BED4;
  --ink-300: #6E8CAB;
  --ink-400: #4A6C90;
  --ink-500: #2E4E6E;
  --ink-600: #14314C;
  --ink-700: #0F2940;
  --ink-800: #0A1B2A;
  --ink-900: #07131E;

  /* WhatsApp marka yeşili — dış marka, tema değişiminden ETKİLENMEZ.
     Yeşil zemin üzerine daima --wp-900 metin gelir. */
  --wp-300: #4AE37F;
  --wp-500: #25D366;
  --wp-700: #17A94C;
  --wp-900: #06331A;
  --wp-derin: #0B3A22;   /* koyu bant zemini */

  /* ------------------------------------------------- ROLLER (AÇIK TEMA) - */
  /* Sayfa zemini hafif gri: beyaz kartlar ondan ayrışsın (kurumsal düzen). */
  --bg:              #F1F4F8;
  --surface:         #FFFFFF;
  --surface-2:       #F7F9FB;
  --surface-3:       #EFF3F7;
  --surface-ters:    var(--ink-700);   /* koyu bant / footer */

  --text:            #0F2940;          /* lacivert gövde metni — beyazda 13.8:1 */
  --text-2:          #4A5F76;          /* ikincil — beyazda 6.6:1 */
  --text-3:          #63788F;          /* üçüncül — surface-2 üzerinde 4.5:1 */
  --text-ters:       #EEF3F8;

  --border:          #E3EAF1;
  --border-2:        #CEDAE6;
  --border-vurgu:    var(--brand-400);

  --brand:           var(--brand-500);
  --brand-koyu:      var(--brand-600);
  --brand-metin:     var(--brand-700);  /* açık zeminde gold metin */
  --brand-uzeri:     #1F1608;           /* gold zemin üzerindeki metin (8.9:1) */
  --brand-yumusak:   var(--brand-50);   /* rozet zemini */

  --link:            #1D4ED8;
  --link-hover:      #1E40AF;

  --success:         #15803D;
  --success-yumusak: #E7F6EC;
  --success-metin:   #14532D;
  --warning:         #B45309;
  --warning-yumusak: #FEF3E2;
  --warning-metin:   #7C3E06;
  --danger:          #B91C1C;
  --danger-yumusak:  #FDECEC;
  --danger-metin:    #7F1D1D;
  --info:            #1D4ED8;
  --info-yumusak:    #EAF0FE;
  --info-metin:      #1E3A8A;

  --focus:           #2563EB;           /* focus halkası */
  --secim:           #F4E8C9;           /* ::selection */

  /* Gölge (açık temada yumuşak) */
  --golge-1: 0 1px 2px rgba(15, 41, 64, .05), 0 2px 8px rgba(15, 41, 64, .05);
  --golge-2: 0 4px 12px rgba(15, 41, 64, .07), 0 12px 32px rgba(15, 41, 64, .08);
  --golge-3: 0 12px 28px rgba(15, 41, 64, .12), 0 32px 64px rgba(15, 41, 64, .12);
  --golge-brand: 0 8px 24px rgba(200, 155, 60, .32);

  /* Görsel katman üstü karartma (kart üzerindeki metin için) */
  --perde: linear-gradient(to top, rgba(7, 19, 30, .80) 0%, rgba(7, 19, 30, .30) 45%, rgba(7, 19, 30, 0) 100%);

  /* ------------------------------------------------------------ BOŞLUK -- */
  --bo-1:  4px;
  --bo-2:  8px;
  --bo-3:  12px;
  --bo-4:  16px;   /* afyonilan'ın ana birimi */
  --bo-5:  20px;
  --bo-6:  24px;
  --bo-7:  32px;
  --bo-8:  48px;
  --bo-9:  64px;

  /* ---------------------------------------------------------- YARIÇAP --- */
  /* afyonilan ölçeği: 4 / 6 / 8 / 12. Büyük yuvarlaklar (16–28) kartları
     olduğundan iri gösteriyordu. */
  --yr-0:   0;
  --yr-1:   4px;   /* rozet */
  --yr-2:   5px;   /* buton, sekme */
  --yr-3:   8px;   /* kart, bölüm kabuğu */
  --yr-4:   10px;  /* kategori grubu */
  --yr-5:   12px;  /* yan sütun */
  --yr-tam: 999px;

  /* ------------------------------------------------------------- TİPO --- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-sayi: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Ölçek 2026-08-10 revizyonu — DEĞERLER afyonilan.com'dan birebir alındı.
     Gövde 14/1.4 · bölüm başlığı 15/600 · kart başlığı 14/700 · fiyat 16/700 ·
     kategori başlığı 14/700 · kategori satırı 13 · meta 11 · sayaç rozeti 10.5.
     Önceki kurumsal ölçek (taban 16, başlık 30–52) sayfayı iri gösteriyordu. */
  --ts-3xs: 0.65625rem; /* 10.5 — sekme/kategori sayaç rozeti */
  --ts-2xs: 0.6875rem;  /* 11 — kategori rozeti, kart meta, sayı balonu */
  --ts-xs:  0.75rem;    /* 12 — "Tümünü Gör", sekme, ilan bitiş satırı */
  --ts-sm:  0.8125rem;  /* 13 — ikincil gövde, kategori satırı, buton */
  --ts-md:  0.875rem;   /* 14 — taban, kart başlığı, kategori başlığı */
  --ts-lg:  0.9375rem;  /* 15 — bölüm başlığı */
  --ts-xl:  1rem;       /* 16 — fiyat, kart üstü vurgu */
  --ts-2xl: 1.25rem;    /* 20 — sayfa başlığı */
  --ts-3xl: 1.5rem;     /* 24 */
  --ts-4xl: clamp(1.625rem, 1.2rem + 1.9vw, 2.25rem);    /* 26 → 36 (yalnız hero) */

  --sy-sik:  1.2;
  --sy-orta: 1.4;      /* afyonilan gövde satır yüksekliği */
  --sy-genis:1.5;

  --kalin-normal: 400;
  --kalin-orta:   500;
  --kalin-yari:   600;
  --kalin-tam:    700;
  --kalin-cok:    800;

  /* ----------------------------------------------------------- DÜZEN ---- */
  --kap-genis:  1320px;   /* ana kapsayıcı */
  --kap-orta:   1024px;
  --kap-dar:    760px;
  --kenar:      clamp(12px, 2.5vw, 20px);
  --baslik-yuk: 64px;     /* sticky header yüksekliği (afyonilan ile aynı) */

  /* Dokunma hedefi / bileşen yükseklikleri — tek kaynak.
     Buton ve girdi aynı ölçüyü kullanır ki satır içinde hizalansınlar.
     Dokunmatik cihazda aşağıda 44px'e çıkar (WCAG 2.5.5 / iOS hedefi). */
  --dg-yuk-sm:  30px;
  --dg-yuk:     38px;
  --dg-yuk-lg:  44px;
  --girdi-yuk:  38px;
  --girdi-punto: var(--ts-md);   /* dokunmatikte 16px'e çıkar: iOS yakınlaştırmaz */

  /* --------------------------------------------------------- KATMANLAR -- */
  --z-icerik:  0;
  --z-sticky:  100;
  --z-acilir:  1000;
  --z-perde:   1100;
  --z-modal:   1200;
  --z-bildirim:1300;

  /* ---------------------------------------------------------- HAREKET --- */
  --sure-hizli: 120ms;
  --sure-orta:  200ms;
  --sure-yavas: 320ms;
  --egri-giris: cubic-bezier(.2, .8, .3, 1);
  --egri-cikis: cubic-bezier(.4, 0, 1, 1);
}

/* Dokunmatik cihaz: sıkı masaüstü ölçeği parmakla kullanılamaz hale gelmesin.
   Girdi puntosu 16'ya çıkar — altındaki değerlerde iOS Safari sayfayı
   otomatik yakınlaştırıyor. */
@media (pointer: coarse) {
  :root {
    --dg-yuk-sm:  36px;
    --dg-yuk:     44px;
    --dg-yuk-lg:  48px;
    --girdi-yuk:  44px;
    --girdi-punto: 1rem;
  }
}

/* ============================================================ KOYU TEMA === */
/* Sistem tercihi: kullanıcı elle seçim yapmadıysa geçerli. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:              #0A1B2A;
    --surface:         #0F2940;
    --surface-2:       #0C2136;
    --surface-3:       #14314C;
    --surface-ters:    #EEF3F8;

    --text:            #EAF1F8;
    --text-2:          #A9BCD0;
    --text-3:          #8298B0;
    --text-ters:       #0F2940;

    --border:          #1B3A57;
    --border-2:        #27506F;

    --brand:           #D9B76B;
    --brand-koyu:      #C89B3C;
    --brand-metin:     #E7D09A;
    --brand-uzeri:     #1F1608;
    --brand-yumusak:   rgba(200, 155, 60, .14);

    --link:            #7FA9FF;
    --link-hover:      #A5C2FF;

    --success:         #34D399;
    --success-yumusak: rgba(52, 211, 153, .14);
    --success-metin:   #6EE7B7;
    --warning:         #FBBF24;
    --warning-yumusak: rgba(251, 191, 36, .14);
    --warning-metin:   #FCD34D;
    --danger:          #F87171;
    --danger-yumusak:  rgba(248, 113, 113, .14);
    --danger-metin:    #FCA5A5;
    --info:            #60A5FA;
    --info-yumusak:    rgba(96, 165, 250, .14);
    --info-metin:      #93C5FD;

    --focus:           #7FA9FF;
    --secim:           rgba(200, 155, 60, .32);

    --golge-1: 0 1px 2px rgba(0, 0, 0, .5);
    --golge-2: 0 2px 6px rgba(0, 0, 0, .45), 0 8px 20px rgba(0, 0, 0, .40);
    --golge-3: 0 12px 32px rgba(0, 0, 0, .55);
    --golge-brand: 0 8px 26px rgba(200, 155, 60, .28);
  }
}

/* Kullanıcının açık tercihi — sistem koyu olsa bile kazanır. */
:root[data-theme="dark"] {
  --bg:              #0A1B2A;
  --surface:         #0F2940;
  --surface-2:       #0C2136;
  --surface-3:       #14314C;
  --surface-ters:    #EEF3F8;

  --text:            #EAF1F8;
  --text-2:          #A9BCD0;
  --text-3:          #8298B0;
  --text-ters:       #0F2940;

  --border:          #1B3A57;
  --border-2:        #27506F;

  --brand:           #D9B76B;
  --brand-koyu:      #C89B3C;
  --brand-metin:     #E7D09A;
  --brand-uzeri:     #1F1608;
  --brand-yumusak:   rgba(200, 155, 60, .14);

  --link:            #7FA9FF;
  --link-hover:      #A5C2FF;

  --success:         #34D399;
  --success-yumusak: rgba(52, 211, 153, .14);
  --success-metin:   #6EE7B7;
  --warning:         #FBBF24;
  --warning-yumusak: rgba(251, 191, 36, .14);
  --warning-metin:   #FCD34D;
  --danger:          #F87171;
  --danger-yumusak:  rgba(248, 113, 113, .14);
  --danger-metin:    #FCA5A5;
  --info:            #60A5FA;
  --info-yumusak:    rgba(96, 165, 250, .14);
  --info-metin:      #93C5FD;

  --focus:           #7FA9FF;
  --secim:           rgba(200, 155, 60, .32);

  --golge-1: 0 1px 2px rgba(0, 0, 0, .5);
  --golge-2: 0 2px 6px rgba(0, 0, 0, .45), 0 8px 20px rgba(0, 0, 0, .40);
  --golge-3: 0 12px 32px rgba(0, 0, 0, .55);
  --golge-brand: 0 8px 26px rgba(200, 155, 60, .28);

  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* =========================================================== KURUMSAL === */
/* Anasayfa kurumsal düzeninin ek rolleri. Değerler iki temada da anlamlı
   kalsın diye rol adıyla tanımlanır; koyu temada aşağıda ezilir. */
:root {
  /* Marka lacivert — başlıklarda kullanılan, gövdeden bir tık canlı ton. */
  --lacivert:        #143A63;
  --lacivert-2:      #1D4C7C;

  /* Gold gradient — birincil düğme ve etkin sekme zemini.
     Alt durak bilinçli olarak koyu: gold zemin üzerindeki BEYAZ metin ancak bu
     tonda okunur kalıyor (düz #C89B3C üzerinde beyaz 3:1'in altında kalır). */
  --gold-gradyan:      linear-gradient(180deg, #CE9A34 0%, #A97420 100%);
  --gold-gradyan-hover:linear-gradient(180deg, #DAA742 0%, #966619 100%);
  --gold-uzeri:        #FFFFFF;

  /* Fiyat gibi gold METİNLER daima koyu tonu kullanır (beyazda 5.3:1). */
  --fiyat: var(--brand-700);

  /* Bölge kartındaki dekoratif harita */
  --harita-zemin: #EAF0E4;
  --harita-cizgi: #C6D2BA;
  --harita-yol:   #D9C08A;

  /* İlan durum rozetleri (kart üstünde renkli etiket).
     Her rengin üzerine beyaz metin gelir; hepsi ≥ 4.5:1. */
  --rz-firsat:      #1B8F45;
  --rz-yeni:        #1B4FA8;
  --rz-kacirilmaz:  #6D2C9C;
  --rz-uygun:       #D14A20;
  --rz-yatirim:     #C2410C;

  /* Kart görselindeki kategori rozeti — renk KÖK kategoriden gelir (47 alt
     kategoriye ayrı renk sürdürülebilir değil). Üzerine daima beyaz metin
     gelir; hepsi beyazda ≥ 4.5:1. */
  --kat-konut:          #1B4FA8;
  --kat-isyeri:         #B8430F;
  --kat-arsa:           #8A6114;
  --kat-bina:           #0E6389;
  --kat-devremulk:      #6D2C9C;
  --kat-turistik-tesis: #0F766E;
  --kat-varsayilan:     #47607A;
  --kat-bos:            #8194A8;   /* ilanı olmayan kategori grubu başlığı */

  /* Hızlı işlem kartlarının ikon renkleri */
  --vurgu-gold:  #C08A28;
  --vurgu-mavi:  #1B5FCC;
  --vurgu-yesil: #1F8F43;
  --vurgu-mor:   #6D2C9C;
  --vurgu-camgobegi: #0E86C6;

  /* Kurumsal düzen ölçüleri */
  --kart-yr:      8px;    /* ilan / bilgi kartı yarıçapı (afyonilan) */
  --bolum-yr:     8px;    /* beyaz bölüm kabuğu yarıçapı (afyonilan) */
  --yan-sutun:    288px;  /* hero yanındaki hızlı kart sütunu genişliği */
  --golge-kart:   0 1px 2px rgba(20, 58, 99, .06), 0 6px 18px rgba(20, 58, 99, .07);
  --golge-yuzen:  0 10px 30px rgba(20, 58, 99, .12), 0 2px 6px rgba(20, 58, 99, .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lacivert:    #CFE0F0;
    --lacivert-2:  #A9C4DE;
    --fiyat:       #E7D09A;
    --vurgu-gold:  #E0B45C;
    --vurgu-mavi:  #6FA8FF;
    --vurgu-yesil: #4FCB7B;
    --vurgu-mor:   #BE8CF0;
    --vurgu-camgobegi: #5CC7F5;
    --harita-zemin:#16324B;
    --harita-cizgi:#27506F;
    --harita-yol:  #6B5322;
    --golge-kart:  0 1px 2px rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .40);
    --golge-yuzen: 0 10px 30px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  --lacivert:    #CFE0F0;
  --lacivert-2:  #A9C4DE;
  --fiyat:       #E7D09A;
  --harita-zemin:#16324B;
  --harita-cizgi:#27506F;
  --harita-yol:  #6B5322;
  --golge-kart:  0 1px 2px rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .40);
  --golge-yuzen: 0 10px 30px rgba(0, 0, 0, .55);
}