/* ==========================================================================
   ARTE — TASARIM DEĞİŞKENLERİ (tokens)
   Tasarım paketindeki "Design tokens" bölümünden birebir alınmıştır.
   Sitedeki hiçbir renk/ölçü elle yazılmaz; buradaki değişkenler kullanılır.
   Kaynak: design_handoff_arte/README.md
   ========================================================================== */

:root {

  /* --- Renkler ----------------------------------------------------------- */
  --renk-koyu:          #14161A;  /* ana metin ve koyu zeminler (antrasit) */
  --renk-koyu-2:        #0E1013;  /* alt bilgi (footer) zemini            */
  --renk-metin-2:       #5C6067;  /* ikincil metin                        */
  --renk-metin-3:       #8A8378;  /* üçüncül metin                        */
  --renk-silik:         #B5AFA5;  /* silik metin / ayraç noktaları        */
  --renk-metin-4:       #9A958C;  /* çok silik etiket                     */

  --renk-turuncu:       #E8621B;  /* marka rengi — SADECE CTA, aktif durum, mikro vurgu */
  --renk-turuncu-koyu:  #C24F12;  /* turuncu üzerine gelince (hover)      */
  --renk-vurgu-zemin:   #FDF0E7;  /* açık turuncu zemin                   */

  --renk-zemin:         #EDEAE4;  /* sayfa zemini                         */
  --renk-panel:         #F6F3EE;  /* kutu/panel zemini (kırık beyaz)      */
  --renk-panel-2:       #F1ECE3;  /* panel üzerine gelince                */
  --renk-tuval:         #F2EFE9;
  --renk-tuval-2:       #FBFAF8;
  --renk-beyaz:         #FFFFFF;

  --renk-ahsap:         #B08256;  /* yalnızca küçük detaylarda            */
  --renk-duvar:         #C9C2B6;  /* plan çizicideki duvar dolgusu        */
  --renk-hata:          #C0392B;  /* hata / çakışma                       */

  /* WhatsApp marka rengi — yalnızca WhatsApp düğmelerinde.
     DİKKAT: Bu yeşilin üzerine BEYAZ yazı okunmuyor (1,98:1).
     Yazı rengi antrasit olmalı (9,13:1).                                */
  --renk-wa:            #25D366;
  --renk-wa-koyu:       #1FBF5B;  /* üzerine gelince */

  /* Koyu zemin üzerindeki metin tonları */
  --acik-metin:         #F6F3EE;
  --acik-metin-72:      rgba(246, 243, 238, .72);
  --acik-metin-60:      rgba(246, 243, 238, .60);
  --acik-metin-50:      rgba(246, 243, 238, .50);
  --acik-metin-40:      rgba(246, 243, 238, .40);
  --acik-cizgi:         rgba(246, 243, 238, .14);
  --acik-cizgi-2:       rgba(246, 243, 238, .28);

  /* Çizgiler */
  --cizgi:              rgba(20, 22, 26, .10);
  --cizgi-8:            rgba(20, 22, 26, .08);
  --cizgi-16:           rgba(20, 22, 26, .16);
  --cizgi-20:           rgba(20, 22, 26, .20);

  /* --- Yazı tipleri ------------------------------------------------------ */
  --yazi-baslik: "Manrope", "Segoe UI", system-ui, sans-serif;   /* 600 / 700 / 800 */
  --yazi-govde:  "Inter", "Segoe UI", system-ui, sans-serif;     /* 400 / 500       */
  --yazi-mono:   ui-monospace, Menlo, Consolas, monospace;       /* etiket ve ölçü  */

  /* Yazı boyutları — masaüstü */
  --p-h1:        58px;   /* ana sayfa H1 */
  --p-h1-alt:    40px;   /* alt sayfa başlık bandı */
  --p-h2:        40px;
  --p-h2-kucuk:  30px;
  --p-h3:        22px;
  --p-govde:     17px;
  --p-govde-2:   15px;
  --p-kucuk:     14px;
  --p-mini:      13px;
  --p-etiket:    11px;   /* mono, büyük harf, letter-spacing .22em */

  /* --- Boşluk ölçeği ------------------------------------------------------ */
  --bo-1:  6px;
  --bo-2:  8px;
  --bo-3: 10px;
  --bo-4: 12px;
  --bo-5: 14px;
  --bo-6: 18px;
  --bo-7: 22px;
  --bo-8: 28px;
  --bo-9: 40px;
  --bo-10: 56px;   /* sayfa kenar boşluğu (masaüstü) */

  /* Bölüm iç boşluğu */
  --bolum-y:    76px;   /* bölümlerin üst/alt boşluğu */
  --kenar:      56px;   /* sol/sağ kenar boşluğu      */
  --en-genis: 1440px;   /* içerik azami genişliği     */

  /* --- Köşe yuvarlaklığı — bilinçli olarak çok az ------------------------- */
  --yari-1: 2px;   /* kesit modülleri     */
  --yari-2: 3px;   /* küçük çip / etiket  */
  --yari-3: 4px;   /* kart / buton        */

  /* --- Gölgeler ----------------------------------------------------------- */
  --golge-panel: 0 24px 80px rgba(20, 22, 26, .16);
  --golge-kart:  0 18px 44px rgba(20, 22, 26, .14);
  --golge-hero:  0 18px 44px rgba(20, 22, 26, .18);
  --golge-mobil: 0 18px 50px rgba(20, 22, 26, .16);

  /* --- Diğer -------------------------------------------------------------- */
  --gecis: .18s ease;
  --dokunma: 44px;            /* mobilde en küçük dokunma hedefi */
  --ust-bant-h: 44px;
  --ust-bar-h:  82px;
}

/* Mobil ölçü düzeltmeleri (390px referans) */
@media (max-width: 900px) {
  :root {
    --p-h1:       34px;
    --p-h1-alt:   28px;
    --p-h2:       28px;
    --p-h2-kucuk: 24px;
    --p-h3:       20px;
    --p-govde:    16px;   /* mobilde gövde 16px, satır 1.7 */
    --kenar:      20px;
    --bolum-y:    48px;
    --ust-bar-h:  52px;
  }
}