/**
 * ============================================================================
 * SULTAN SERA KURUMSAL KİMLİK - VARIABLES.CSS
 * ============================================================================
 * 
 * Bu dosya, Sultan Sera Kurumsal Kimlik Kılavuzu'nda belirtilen renk, 
 * tipografi ve yerleşim kurallarına tam uyumlu CSS değişkenlerini içerir.
 * 
 * Marka: Sultan Sera Jeotermal Seracılık A.Ş.
 * Holding: MB Holding
 * Hazırlanma Tarihi: 2026
 * ============================================================================
 */

:root {
    /* ============================================================================
   * 1. RENK PALETİ (COLOR SYSTEM)
   * ============================================================================
   * Kılavuz sayfa 7-8: Renk Paleti
   */
    /* --------------------------------------------------------------------------
   * PRIMARY COLORS (Ana Marka Renkleri) - Sayfa 7
   * -------------------------------------------------------------------------- */
    /* Sultan Sera Yeşil - Ana Marka Rengi
   * Pantone: 362 C
   * CMYK: C70 M0 Y100 K9
   * RGB: R78 G142 B51 */
    --brand-green-primary: #4E8E33;
    --brand-green-primary-rgb: 78, 142, 51;
    /* Sultan Sera Açık Yeşil - İkincil Marka Rengi
   * Pantone: 375 C
   * CMYK: C41 M0 Y78 K0
   * RGB: R154 G203 B102 */
    --brand-green-secondary: #9ACB66;
    --brand-green-secondary-rgb: 154, 203, 102;
    /* --------------------------------------------------------------------------
   * HOLDING COLORS (MB Holding Renkleri) - Sayfa 8
   * --------------------------------------------------------------------------
   * DİKKAT: Sadece holding logolu alanlarda kullanılmalıdır
   */
    /* MB Holding Turuncu
   * Pantone: 1375 C
   * CMYK: C0 M40 Y90 K0
   * RGB: R255 G164 B27 */
    --holding-orange: #FFA41B;
    --holding-orange-rgb: 255, 164, 27;
    /* MB Holding Lacivert
   * Pantone: 295 C
   * CMYK: C100 M57 Y0 K40
   * RGB: R0 G66 B124 */
    --holding-navy: #00427C;
    --holding-navy-rgb: 0, 66, 124;
    /* --------------------------------------------------------------------------
   * SURFACE & BACKGROUND COLORS - Sayfa 10-11
   * --------------------------------------------------------------------------
   * Kılavuz Kuralı: Amblem renginin öne çıkması için zemin mutlaka BEYAZ
   */

    --surface-white: #FFFFFF;
    --surface-white-rgb: 255, 255, 255;
    /* Yardımcı zemin renkleri */
    --surface-light-gray: #F5F5F5;
    --surface-medium-gray: #E8E8E8;
    --surface-dark-gray: #CCCCCC;
    /* --------------------------------------------------------------------------
   * TEXT COLORS (Metin Renkleri)
   * -------------------------------------------------------------------------- */

    --text-primary: #2C2C2C; /* Ana metin rengi */
    --text-secondary: #666666; /* İkincil metin */
    --text-on-white: #2C2C2C; /* Beyaz zemin üzeri metin */
    --text-on-green: #FFFFFF; /* Yeşil zemin üzeri metin */
    --text-on-dark: #FFFFFF; /* Koyu zemin üzeri metin */
    /* ============================================================================
   * 2. TİPOGRAFİ HİYERARŞİSİ (TYPOGRAPHY)
   * ============================================================================
   * Kılavuz sayfa 9: Tipografi - Helvetica font ailesi
   */
    /* --------------------------------------------------------------------------
   * FONT FAMILIES (Yazı Tipleri)
   * -------------------------------------------------------------------------- */
    /* Ana font: Helvetica (Bold, Medium, Regular, Light) */
    --font-family-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Alternatif font: Calibri (Sayfa 20-21: Form ve resmi yazışmalarda) */
    --font-family-secondary: Calibri, 'Segoe UI', 'Trebuchet MS', sans-serif;
    /* --------------------------------------------------------------------------
   * FONT WEIGHTS (Ağırlıklar) - Sayfa 9
   * -------------------------------------------------------------------------- */

    --font-weight-bold: 700; /* Helvetica Bold - Başlıklar */
    --font-weight-medium: 500; /* Helvetica Medium - Alt başlıklar */
    --font-weight-regular: 400; /* Helvetica Regular - Gövde metni */
    --font-weight-light: 300; /* Helvetica Light - Yardımcı metinler */
    /* --------------------------------------------------------------------------
   * FONT SIZES (Yazı Boyutları)
   * --------------------------------------------------------------------------
   * 16px = 1rem temel ölçü birimi
   */

    --font-size-h1: 2.5rem; /* 40px - Ana sayfa başlıkları */
    --font-size-h2: 2rem; /* 32px - Bölüm başlıkları */
    --font-size-h3: 1.75rem; /* 28px - Alt başlıklar */
    --font-size-h4: 1.5rem; /* 24px - Küçük başlıklar */
    --font-size-h5: 1.25rem; /* 20px - Mini başlıklar */
    --font-size-h6: 1.125rem; /* 18px */

    --font-size-body: 1rem; /* 16px - Gövde metni */
    --font-size-small: 0.875rem; /* 14px - Küçük metin */
    --font-size-caption: 0.75rem; /* 12px - Dipnotlar, form bilgileri */
    --font-size-tiny: 0.625rem; /* 10px - Çok küçük notlar */
    /* --------------------------------------------------------------------------
   * LINE HEIGHTS (Satır Yükseklikleri)
   * -------------------------------------------------------------------------- */

    --line-height-tight: 1.2; /* Başlıklar için */
    --line-height-normal: 1.5; /* Gövde metni için */
    --line-height-relaxed: 1.75; /* Uzun paragraflar için */
    /* ============================================================================
   * 3. LOGO ÖLÇÜ SİSTEMİ VE YERLEŞİM
   * ============================================================================
   * Kılavuz sayfa 5: Logo inşası ve ölçülendirme
   */
    /* --------------------------------------------------------------------------
   * LOGO CONSTRUCTION (Logo İnşası) - Sayfa 5
   * --------------------------------------------------------------------------
   * Temel "a" birimi: Logo yüksekliğinin 1/8'i
   * Logo toplam yüksekliği: 8a
   * Logo genişliği: 32a (yaklaşık 4:1 oran)
   */

    --logo-unit-a: 8px; /* Temel "a" birimi */
    --logo-height: calc(8 * var(--logo-unit-a)); /* 8a = 64px */
    --logo-width: calc(32 * var(--logo-unit-a)); /* 32a = 256px */
    /* Logo minimum boyutları (Sayfa 6) */
    --logo-min-height: 30px; /* Minimum yükseklik: 30mm (web: 30px) */
    --logo-min-height-web: 80px; /* Web için önerilen minimum */
    /* --------------------------------------------------------------------------
   * SAFE ZONE (Güvenli Alan) - Sayfa 5
   * --------------------------------------------------------------------------
   * Logo etrafında bırakılması gereken minimum boşluk
   * "a" birimine göre tanımlanmıştır
   */

    --safe-zone-unit: var(--logo-unit-a);
    --safe-zone-min: calc(2 * var(--logo-unit-a)); /* 2a - Minimum */
    --safe-zone-standard: calc(4 * var(--logo-unit-a)); /* 4a - Standart */
    --safe-zone-comfortable: calc(6 * var(--logo-unit-a)); /* 6a - Konforlu */
    /* --------------------------------------------------------------------------
   * BASE SPACING SYSTEM ("a" birimi tabanlı)
   * --------------------------------------------------------------------------
   * Tüm boşluklar logo inşasındaki "a" birimiyle uyumludur
   */

    --spacing-unit: 8px; /* Temel birim = "a" */
    --spacing-0: 0;
    --spacing-1: calc(1 * var(--spacing-unit)); /* 8px = 1a */
    --spacing-2: calc(2 * var(--spacing-unit)); /* 16px = 2a */
    --spacing-3: calc(3 * var(--spacing-unit)); /* 24px = 3a */
    --spacing-4: calc(4 * var(--spacing-unit)); /* 32px = 4a */
    --spacing-5: calc(5 * var(--spacing-unit)); /* 40px = 5a */
    --spacing-6: calc(6 * var(--spacing-unit)); /* 48px = 6a */
    --spacing-8: calc(8 * var(--spacing-unit)); /* 64px = 8a */
    --spacing-10: calc(10 * var(--spacing-unit)); /* 80px = 10a */
    --spacing-12: calc(12 * var(--spacing-unit)); /* 96px = 12a */
    --spacing-16: calc(16 * var(--spacing-unit)); /* 128px = 16a */
    /* --------------------------------------------------------------------------
   * CONTAINER & LAYOUT (Konteyner ve Düzen)
   * -------------------------------------------------------------------------- */

    --container-max-width: 1200px;
    --container-padding: var(--spacing-4);
    --section-spacing-small: var(--spacing-6);
    --section-spacing-medium: var(--spacing-8);
    --section-spacing-large: var(--spacing-12);
    /* --------------------------------------------------------------------------
   * BORDER RADIUS (Yuvarlatılmış Köşeler)
   * --------------------------------------------------------------------------
   * Sayfa 14-19: Kartvizit ve uygulamalarda görülen modern yuvarlatılmış köşe estetiği
   */

    --border-radius-none: 0;
    --border-radius-sm: 4px; /* Küçük elemanlar */
    --border-radius-md: 8px; /* Orta elemanlar, butonlar */
    --border-radius-lg: 12px; /* Kartlar, paneller */
    --border-radius-xl: 16px; /* Büyük kartlar */
    --border-radius-2xl: 24px; /* Özel alanlar */
    --border-radius-full: 9999px; /* Yuvarlak butonlar */
    /* ============================================================================
   * 4. LOGO KULLANIM KURALLARI
   * ============================================================================
   * Kılavuz sayfa 10-11: Doğru ve yanlış kullanımlar
   */
    /* --------------------------------------------------------------------------
   * CORRECT USAGE (Doğru Kullanım) - Sayfa 10
   * -------------------------------------------------------------------------- */
    /* BİRİNCİL KULLANIM: Beyaz zemin üzerinde renkli logo */
    --logo-on-white-bg: var(--surface-white);
    --logo-on-white-primary: var(--brand-green-primary);
    --logo-on-white-secondary: var(--brand-green-secondary);
    /* NEGATİF KULLANIM: Koyu yeşil zemin üzerinde beyaz logo */
    /* Sayfa 10: Sadece özel durumlarda (banner, poster vb.) */
    --logo-negative-bg: var(--brand-green-primary);
    --logo-negative-color: var(--surface-white);
    /* --------------------------------------------------------------------------
   * INCORRECT USAGE (Yanlış Kullanım) - Sayfa 11
   * --------------------------------------------------------------------------
   * ASLA YAPILMAMASI GEREKENLER:
   * 
   * ❌ Logo oranlarını bozmak (esneme, sıkıştırma)
   * ❌ Yeşil logoyu turuncu/lacivert zemin üzerine koymak
   * ❌ Logo rengini değiştirmek
   * ❌ Logo elemanlarının yerini değiştirmek
   * ❌ Gölge, dış çizgi, efekt eklemek
   * ❌ Güvenli alanı ihlal etmek
   * ❌ Logoya gradient uygulamak
   * ❌ Logonun arkasına görsel/desen koymak
   */
    /* ============================================================================
   * 5. ARAÇLAR ÜZERİNDE UYGULAMA (Sayfa 12-13)
   * ============================================================================
   * Araç giydirmelerde kullanım kuralları
   */
    /* Araç zemin rengi: Mutlaka BEYAZ */
    --vehicle-bg: var(--surface-white);
    --vehicle-logo-color: var(--brand-green-primary);
    /* Araç yazıları */
    --vehicle-text-primary: var(--brand-green-primary);
    --vehicle-text-secondary: var(--text-primary);
    /* ============================================================================
   * 6. KURUMSAL MATERYALLER
   * ============================================================================
   * Sayfa 14-21: Kartvizit, antetli kağıt, zarf, elektronik imza
   */
    /* --------------------------------------------------------------------------
   * KARTVİZİT (Sayfa 14-15)
   * -------------------------------------------------------------------------- */

    --card-bg-front: var(--surface-white);
    --card-bg-back: var(--brand-green-primary);
    --card-text-front: var(--text-primary);
    --card-text-back: var(--surface-white);
    --card-corner-radius: var(--border-radius-md);
    /* --------------------------------------------------------------------------
   * ANTETLİ KAĞIT (Sayfa 16-17)
   * -------------------------------------------------------------------------- */

    --letterhead-bg: var(--surface-white);
    --letterhead-header-color: var(--brand-green-primary);
    --letterhead-footer-color: var(--holding-navy);
    --letterhead-text: var(--text-primary);
    /* --------------------------------------------------------------------------
   * ZARF (Sayfa 18-19)
   * -------------------------------------------------------------------------- */

    --envelope-bg: var(--surface-white);
    --envelope-print-color: var(--brand-green-primary);
    /* --------------------------------------------------------------------------
   * ELEKTRONİK İMZA (Sayfa 20-21)
   * -------------------------------------------------------------------------- */

    --email-signature-name: var(--brand-green-primary);
    --email-signature-title: var(--text-primary);
    --email-signature-contact: var(--text-secondary);
    --email-signature-font: var(--font-family-secondary); /* Calibri 12pt */
    --email-signature-font-size: 12px;
    /* ============================================================================
   * 7. GÖRSEL ELEMENTLERİ
   * ============================================================================
   */
    /* --------------------------------------------------------------------------
   * SHADOWS (Gölgeler)
   * -------------------------------------------------------------------------- */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* --------------------------------------------------------------------------
   * BORDERS (Kenarlıklar)
   * -------------------------------------------------------------------------- */

    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;
    --border-color-light: var(--surface-medium-gray);
    --border-color-medium: var(--surface-dark-gray);
    --border-color-brand: var(--brand-green-primary);
    /* --------------------------------------------------------------------------
   * TRANSITIONS (Geçişler)
   * -------------------------------------------------------------------------- */

    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    --transition-slower: 500ms ease-in-out;
    /* --------------------------------------------------------------------------
   * Z-INDEX (Katman Sıralaması)
   * -------------------------------------------------------------------------- */

    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    /* --------------------------------------------------------------------------
   * BREAKPOINTS (Responsive Kırılma Noktaları)
   * -------------------------------------------------------------------------- */

    --breakpoint-xs: 375px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ============================================================================
 * 8. YARDIMCI CSS SINIFLARI (UTILITY CLASSES)
 * ============================================================================
 * Tema değişkenlerinin hızlı uygulanması için hazır sınıflar
 */

/* --------------------------------------------------------------------------
 * RENK SINIFLARI
 * -------------------------------------------------------------------------- */

/* Arka plan renkleri */
.bg-brand-green {
    background-color: var(--brand-green-primary);
}

.bg-brand-green-light {
    background-color: var(--brand-green-secondary);
}

.bg-holding-orange {
    background-color: var(--holding-orange);
}

.bg-holding-navy {
    background-color: var(--holding-navy);
}

.bg-white {
    background-color: var(--surface-white);
}

.bg-gray-light {
    background-color: var(--surface-light-gray);
}

/* Metin renkleri */
.text-brand-green {
    color: var(--brand-green-primary);
}

.text-brand-green-light {
    color: var(--brand-green-secondary);
}

.text-holding-orange {
    color: var(--holding-orange);
}

.text-holding-navy {
    color: var(--holding-navy);
}

.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-white {
    color: var(--surface-white);
}

/* --------------------------------------------------------------------------
 * TİPOGRAFİ SINIFLARI
 * -------------------------------------------------------------------------- */

/* Font ağırlıkları */
.font-bold {
    font-weight: var(--font-weight-bold);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-regular {
    font-weight: var(--font-weight-regular);
}

.font-light {
    font-weight: var(--font-weight-light);
}

/* Font aileleri */
.font-primary {
    font-family: var(--font-family-primary);
}

.font-secondary {
    font-family: var(--font-family-secondary);
}

/* Font boyutları */
.text-h1 {
    font-size: var(--font-size-h1);
}

.text-h2 {
    font-size: var(--font-size-h2);
}

.text-h3 {
    font-size: var(--font-size-h3);
}

.text-h4 {
    font-size: var(--font-size-h4);
}

.text-h5 {
    font-size: var(--font-size-h5);
}

.text-h6 {
    font-size: var(--font-size-h6);
}

.text-body {
    font-size: var(--font-size-body);
}

.text-small {
    font-size: var(--font-size-small);
}

.text-caption {
    font-size: var(--font-size-caption);
}

/* --------------------------------------------------------------------------
 * BOŞLUK SINIFLARI
 * -------------------------------------------------------------------------- */

/* Güvenli alan (safe zone) */
.safe-zone {
    padding: var(--safe-zone-standard);
}

.safe-zone-min {
    padding: var(--safe-zone-min);
}

.safe-zone-comfortable {
    padding: var(--safe-zone-comfortable);
}

/* Padding sınıfları */
.p-0 {
    padding: var(--spacing-0);
}

.p-1 {
    padding: var(--spacing-1);
}

.p-2 {
    padding: var(--spacing-2);
}

.p-3 {
    padding: var(--spacing-3);
}

.p-4 {
    padding: var(--spacing-4);
}

.p-5 {
    padding: var(--spacing-5);
}

.p-6 {
    padding: var(--spacing-6);
}

.p-8 {
    padding: var(--spacing-8);
}

/* Margin sınıfları */
.m-0 {
    margin: var(--spacing-0);
}

.m-1 {
    margin: var(--spacing-1);
}

.m-2 {
    margin: var(--spacing-2);
}

.m-3 {
    margin: var(--spacing-3);
}

.m-4 {
    margin: var(--spacing-4);
}

.m-5 {
    margin: var(--spacing-5);
}

.m-6 {
    margin: var(--spacing-6);
}

.m-8 {
    margin: var(--spacing-8);
}

/* --------------------------------------------------------------------------
 * BORDER RADIUS SINIFLARI
 * -------------------------------------------------------------------------- */

.rounded-none {
    border-radius: var(--border-radius-none);
}

.rounded-sm {
    border-radius: var(--border-radius-sm);
}

.rounded-md {
    border-radius: var(--border-radius-md);
}

.rounded-lg {
    border-radius: var(--border-radius-lg);
}

.rounded-xl {
    border-radius: var(--border-radius-xl);
}

.rounded-2xl {
    border-radius: var(--border-radius-2xl);
}

.rounded-full {
    border-radius: var(--border-radius-full);
}

/* --------------------------------------------------------------------------
 * GÖLGE SINIFLARI
 * -------------------------------------------------------------------------- */

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

.shadow-none {
    box-shadow: none;
}

/* ============================================================================
 * 9. KRİTİK NOTLAR VE KURALLAR
 * ============================================================================
 *
 * ⚠️ LOGO KULLANIMI (Sayfa 5, 10-11):
 * -----------------------------------------------------------------------------
 * ✅ DOĞRU:
 * - Logo MUTLAKA beyaz zemin üzerinde kullanılmalı
 * - Logo oranları korunmalı (32a genişlik : 8a yükseklik)
 * - Minimum yükseklik: 30px (web'de 80px önerilir)
 * - Etrafında minimum 2a güvenli alan bırakılmalı
 * - Negatif (beyaz logo) sadece koyu yeşil zemin üzerinde, özel durumlarda
 *
 * ❌ YANLIŞ:
 * - Logo oranlarını esnetmek/bozmak
 * - Yeşil logoyu turuncu veya lacivert zemin üzerine koymak
 * - Logo rengini değiştirmek
 * - Gölge, dış çizgi, efekt eklemek
 * - Güvenli alanı ihlal etmek
 * - Logo elemanlarının yerini değiştirmek
 *
 * ⚠️ RENK KULLANIMI (Sayfa 7-8):
 * -----------------------------------------------------------------------------
 * - Ana marka rengi: Sultan Sera Yeşil (#4E8E33)
 * - İkincil marka rengi: Sultan Sera Açık Yeşil (#9ACB66)
 * - Holding renkleri (turuncu/lacivert) SADECE holding logolu alanlarda
 * - Zemin rengi mutlaka BEYAZ olmalı (amblem öne çıkması için)
 *
 * ⚠️ TİPOGRAFİ (Sayfa 9):
 * -----------------------------------------------------------------------------
 * - Ana font: Helvetica (Bold, Medium, Regular, Light)
 * - Alternatif: Calibri 12pt (form ve resmi yazışmalarda)
 * - Başlıklarda Helvetica Bold kullanılmalı
 *
 * ⚠️ ARAÇ GİYDİRME (Sayfa 12-13):
 * -----------------------------------------------------------------------------
 * - Araçlar mutlaka BEYAZ zemin üzerine giydirme yapılmalı
 * - Logo ve yazılar yeşil renkte olmalı
 *
 * ⚠️ KURUMSAL MATERYALLER (Sayfa 14-21):
 * -----------------------------------------------------------------------------
 * - Kartvizit: Ön yüz beyaz, arka yüz yeşil
 * - Antetli kağıt: Beyaz zemin, yeşil başlık
 * - Zarf: Beyaz zemin üzerine yeşil baskı
 * - E-imza: Calibri 12pt, yeşil isim vurgusu
 *
 * ============================================================================
 */