/* ==========================================================
   FLOWMAXI TOOLBOX - KURUMSAL TASARIM VE ARAYÜZ MİMARİSİ 
   Tipografi: Gilroy Font Ailesi | Renk Paleti: Kurumsal Flowmaxi Kırmızısı 
   Responsive Mimari: Mobil, Tablet ve Masaüstü Tam Uyumluluk 
   ========================================================== */

/* ===================================
   FONT FACE TANIMLARI - GILROY
   =================================== */
@font-face {
    font-family: 'Gilroy';                                                  /* Font ailesinin tanımı */
    src: url('../assets/fonts/Gilroy-Light.ttf') format('truetype');        /* Light font dosyası */
    font-weight: 300;                                                       /* Light kalınlık */
    font-style: normal;                                                     /* Normal stil */
}

@font-face {
    font-family: 'Gilroy';                                                  /* Gilroy font ailesi */
    src: url('../assets/fonts/Gilroy-Regular.ttf') format('truetype');      /* Regular font dosyası */
    font-weight: 400;                                                       /* Normal kalınlık */
    font-style: normal;                                                     /* Normal stil */
}

@font-face {
    font-family: 'Gilroy';                                                  /* Gilroy font ailesi */
    src: url('../assets/fonts/Gilroy-Medium.ttf') format('truetype');       /* Medium font dosyası */
    font-weight: 500;                                                       /* Orta kalınlık */
    font-style: normal;                                                     /* Normal stil */
}

@font-face {
    font-family: 'Gilroy';                                                      /* Gilroy font ailesi */
    src: url('../assets/fonts/Gilroy-SemiBold.ttf') format('truetype');         /* SemiBold font dosyası */
    font-weight: 600;                                                           /* Yarı kalın */
    font-style: normal;                                                         /* Normal stil */
}

@font-face {
    font-family: 'Gilroy';                                                      /* Bold font ailesi */
    src: url('../assets/fonts/Gilroy-Bold.ttf') format('truetype');             /* Bold font ailesi */
    font-weight: 700;                                                           /* Kalın font */
    font-style: normal;                                                         /* Normal stil */
}


/* ==========================================================
   TASARIM SİSTEMİ DEĞİŞKENLERİ (CSS VARIABLES) 
   ========================================================== */

/* Proje genelindeki renk, ölçü, gölge ve zamanlama sabitleri */
:root {
    /* Flowmaxi Kurumsal Renkler */
    --flowmaxi-red: #8B1916;                        /* Ana kurumsal renk (kırmızı)*/
    --flowmaxi-dark-red: #6E1614;                   /* Koyu kırmızı ton */
    --flowmaxi-accent: #C42D2A;                     /* Vurgu kırmızısı */

    /* Neutral Renkler */
    --white: #FFFFFF;                               /* Beyaz renk */
    --light-bg: #F5F5F5;                            /* Açık arka plan rengi */
    --light-gray: #E8E8E8;                          /* Açık gri */
    --medium-gray: #CCCCCC;                         /* Orta gri */
    --dark-gray: #666666;                           /* Koyu gri */
    --text-dark: #2C2C2C;                           /* Ana metin rengi */

    /* Status Colors */
    --success: #2D7A4F;                             /* Başarı durumu rengi */
    --warning: #FFC107;                             /* Uyarı rengi */
    --danger: #DC3545;                              /* Hata / tehlike rengi */
    --info: #17A2B8;                                /* Bilgi rengi */

    /* Shadows */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);              /* Hafif gölge */
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.12);            /* Orta gölge */
    --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.15);             /* Güçlü - yoğun gölge */

    /* Layout - Responsive değerler */
    --sidebar-width: 280px;                                     /* Sidebar genişliği */
    --sidebar-collapsed-width: 70px;                            /* Daraltılmış sidebar genişliği */
    --header-height: 160px;                                     /* Header yüksekliği */
    --sidebar-toggle-size: 44px;                                /* Sidebar kontrol butonu standart boyutu */
    --content-max-width: 1400px;                                /* Ana içerik alanı max genişlik */
}


/* ===================================
   GLOBAL RESET
   =================================== */

/* Tarayıcı varsayılan stillerini sıfırla */
* {
    margin: 0;                                  /* Varsayılan dış boşlukları kaldır */
    padding: 0;                                 /* Varsayılan iç boşlukları kaldır */
    box-sizing: border-box;                     /* Ölçü hesaplarını daha kontrollü yap */
}

html {
    font-size: 16px;                            /* 1rem = 16 px olacak şekilde temel boyut */
    scroll-behavior: smooth;                    /* Yumuşak kaydırma efekti */
}

body {
    font-family: 'Gilroy', sans-serif;          /* Birincil kurumsal font ailesi */
    color: var(--text-dark);                    /* Global metin kontrast rengi */
    line-height: 1.6;                           /* Tipografik okunabilirlik katsayısı */
    min-height: 100vh;                          /* Viewport yüksekliği tam ölçekleme */
    font-weight: 400;                           /* Standart font kalınlığı */
    position: relative;                         /* Katmanlama koordinat sistemi başlangıcı */
    overflow-x: hidden;                         /* Yatay kaydırma çubuğunu engelleme */
    background:
        /* Çok katmanlı derinlikli arka plan görseli */
        radial-gradient(ellipse at top left, #E8E8E8 0%, transparent 50%),
        radial-gradient(ellipse at top right, #D0D0D0 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, #DCDCDC 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, #E5E5E5 0%, transparent 50%),
        linear-gradient(135deg, #CACACA 0%, #E0E0E0 25%, #F0F0F0 50%, #D8D8D8 75%, #C8C8C8 100%);
}

/* Arka plana blur efekti ekle */
body::before {
    content: '';
    position: fixed;
    top: -20%;
    left: -20%;
    right: -20%;
    bottom: -20%;
    background:
        radial-gradient(ellipse 1000px 600px at 20% 15%, rgba(200, 200, 200, 0.4) 0%, rgba(220, 220, 220, 0.25) 35%, transparent 65%),
        radial-gradient(ellipse 1200px 700px at 80% 40%, rgba(240, 240, 240, 0.5) 0%, rgba(230, 230, 230, 0.3) 40%, transparent 70%),
        radial-gradient(ellipse 1400px 800px at 50% 85%, rgba(210, 210, 210, 0.45) 0%, rgba(225, 225, 225, 0.28) 45%, transparent 75%);
    
    pointer-events: none;       /* Tıklanabilirliği engelle */
    z-index: 0;                 /* En arkada kalır */
    filter: blur(80px);         /* GPU tabanlı katman bulanıklaştırma efekti */
    opacity: 1;                 /* Katman görünürlük düzeyi */
}

/* Arka plana ince çizgi ekle */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(-35deg, transparent, transparent 150px, rgba(255, 255, 255, 0.25) 150px, rgba(255, 255, 255, 0.25) 155px),
        repeating-linear-gradient(-35deg, transparent, transparent 300px, rgba(255, 255, 255, 0.15) 300px, rgba(255, 255, 255, 0.15) 308px);
    
    pointer-events: none;           /* Etkileşimi kapat */
    z-index: 0;                     /* Arka planda kalır */
    opacity: 0.9;                   /* Hafif şeffaflık */
}


/* ===================================
   HEADER - RESPONSIVE
   =================================== */

/* Sabit üst header tasarımı */
.header {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);  /* Header dikey gradyan geçişi */
    box-shadow: var(--shadow-medium);                       /* Derinlik hissi için orta düzey gölge */
    border-bottom: 3px solid var(--flowmaxi-red);           /* Alt sınır vurgu çizgisi */
    position: fixed;                                        /* Sayfada sabit (sticky) konumlandırma */
    top: 0;                                                 /* En üst hizalama */
    left: 0;                                                /* Sol kenar sabitleme */
    right: 0;                                               /* Sağ kenar sabitleme */
    z-index: 100;                                           /* Üst katman önceliği */
    height: var(--header-height);                           /* Belirlenmiş standart yükseklik */
    display: flex;                                          /* Esnek yerleşim düzeni */
    align-items: center;                                    /* Dikey eksende merkezi hizalama */
}

/* Header içeriğini ortala */
.header .container {
    display: flex;
    justify-content: space-between;         /* Sol logo - sağ bilgi */
    align-items: center;
    max-width: 1400px;                      /* Max genişlik */
    margin: 0 auto;                         /* Ortala */
    padding: 20px 24px 45px 24px;           /* İç boşluk alt kısımda arttır */
    width: 100%;
}

/* Logo alanı */
.logo {
    display: flex;
    flex-direction: column;                 /* Logo ve slogan alt alta */
    gap: 8px;                               /* Aralarındaki boşluk */
    align-items: flex-start;
}

/* Logo görseli */
.logo-img {
    height: 100px;                          /* Logo boyutunu büyüt */
    width: auto;
    object-fit: contain;
    max-width: 300px;
}

.tagline {
    font-size: 11px;                        /* Küçük yazı */
    font-weight: 700;                       /* Kalınlık */
    letter-spacing: 2px;                    /* Harf aralığı */
    color: var(--flowmaxi-red);             /* Kurumsal kırmızı */
    text-transform: uppercase;              /* Büyük harf */
    margin-top: 4px;
}

/* Header sağ bilgi alanı */
.header-info {
    text-align: right;                  /* İçeriği sağa hizala */
    display: flex;                      /* Esnek yerleşim yapısı */
    flex-direction: column;             /* Dikey yönde sırala */
    justify-content: center;            /* Dikeyde merkezi hizala */
    align-items: flex-end;              /* Yatayda sona (sağa) hizala */
    min-width: 0;                       /* Esnek kutu içinde daralmayı destekle */
    flex-shrink: 1;                     /* Alan daraldığında küçült */
}

/* Header başlığı */
.header-info h1 {
    font-size: 22px;                        /* Başlık yazı boyutu */
    font-weight: 700;                       /* Kalın font ağırlığı */
    color: var(--text-dark);                /* Koyu metin rengi */
    margin-bottom: 4px;                     /* Alt boşluk mesafesi */
    letter-spacing: 0.5px;                  /* Karakter arası hassas mesafe */
    white-space: nowrap;                    /* Metni tek satırda tutma zorunluluğu */
    overflow: hidden;                       /* Taşan metni gizle */
    text-overflow: ellipsis;                /* Taşan metin sonuna üç nokta ekle */
}

.version-text {
    text-align: right;
    font-family: 'Gilroy';                  /* Gilroy Light */
    font-weight: 300;
    font-size: 13px;
    color: var(--text-dark);
    opacity: 0.8;
}


/* ===================================
   APP CONTAINER
   =================================== */

/* Header altındaki ana uygulama alanı */
.app-container {
    display: flex;                                          /* Sidebar + main content */
    min-height: calc(100vh - var(--header-height));         /* Kalan ekran yüksekliği */
    margin-top: var(--header-height);                       /* Header kadar boşluk */
    position: relative;
    z-index: 1;
    width: 100%;
}


/* ==========================================================
   YAN MENÜ (SIDEBAR) MİMARİSİ 
   ========================================================== */

/* Sol tarafta konumlandırılmış, daraltılabilir ve responsive uyumlu kontrol paneli */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 100%);
    border-right: 1px solid var(--light-gray);
    box-shadow: var(--shadow-light);
    padding: 24px 16px;
    padding-top: 68px;
    position: fixed;
    top: var(--header-height);
    left: 0;
    height: calc(100vh - var(--header-height));
    overflow-x: hidden;
    /* Prevent horizontal scroll */

    overflow-y: auto;
    z-index: 50;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Smooth width transition */

    display: flex;
    flex-direction: column;
    white-space: nowrap;
    /* Prevent text wrapping */

}

/* Sidebar kapalı durumu (Mini Mode) */
.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
    padding: 24px 12px;                         /* Reduce padding */
    padding-top: 68px;
}

/* Mini Modda Metinleri Gizle */
.sidebar.collapsed .nav-item span:not(.nav-icon),
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .sidebar-footer,
.sidebar.collapsed .toggle-label {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    pointer-events: none;
    position: absolute;
}

/* İkonları Ortala */
.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 12px 0;                            /* Yatay padding'i kaldır, tam ortala */
}


/* Sidebar Toggle Button */
.sidebar-toggle {
    position: fixed;
    top: calc(var(--header-height) + 20px);
    left: 13px;
    width: var(--sidebar-toggle-size);
    height: var(--sidebar-toggle-size);
    background-color: var(--white);
    color: var(--flowmaxi-red);                     /* Kurumsal Kırmızı */

    border: 1px solid #999;
    border-radius: 0.375rem;
    padding: 5px;
    cursor: pointer;
    z-index: 300;
    box-shadow: var(--shadow-heavy);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: all 0.5s ease, left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sidebar-toggle svg {
    width: 38px;                                                    /* SVG ikon genişliği */
    height: 38px;                                                   /* SVG ikon yüksekliği */
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);       /* Dönüş ve ölçekleme için yumuşak geçiş */
}

.sidebar-toggle .line {
    fill: none;                                                     /* Dolgu rengini devre dışı bırak */
    stroke: var(--flowmaxi-red);                                    /* Çizgi rengi kurumsal kırmızı */
    stroke-width: 2;                                                /* Çizgi kalınlığı */
    stroke-linecap: round;                                          /* Çizgi uçlarını yuvarlatma */
    stroke-linejoin: round;                                         /* Çizgi birleşim noktalarını yuvarlatma */
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),    /* Çizgi uzunluk değişimi animasyonu */
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);           /* Çizgi başlangıç pozisyonu kaydırma animasyonu */
}

.sidebar-toggle .line-top-bottom {
    stroke-dasharray: 12 63;
}

/* Sidebar AÇIK iken -> X işareti */
.sidebar-toggle:not(.collapsed) svg {
    transform: rotate(-45deg);
}

.sidebar-toggle:not(.collapsed) .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
}

.sidebar-toggle:focus-visible {
    outline: 0;
}

.sidebar-toggle:hover {
    transform: scale(1.1);
    background-color: rgba(139, 25, 22, 0.05);
}

/* Sidebar açıkken buton sidebar içinde sağda durmalı */
.sidebar:not(.collapsed)~.sidebar-toggle {
    left: calc(var(--sidebar-width) - var(--sidebar-toggle-size) - 25px);
}

/* Sidebar kapalıyken buton sidebar içinde ortada durmalı */
.sidebar.collapsed~.sidebar-toggle {
    left: 13px;
}

/* Nav Menu */
/* Sidebar içindeki ana menü alanı */
.nav-menu {
    flex: 1;                    /* Footer hariç tüm alanı kapla */
    padding: 12px 0;            /* Üst-alt iç boşluk */
}

/* Menü bölüm başlığı */
.nav-section-title {
    display: block;                     /* Satır bazlı görünüm */
    font-size: 11px;                    /* Küçük yazı boyutu */
    font-weight: 700;                   /* Kalın yazı */
    color: var(--dark-gray);            /* Koyu gri */
    text-transform: uppercase;          /* Büyük harf */
    letter-spacing: 2px;                /* Harf aralığı */
    padding: 0 12px 12px;               /* Alt boşluk padding */
    border-bottom: 2px solid var(--light-gray);         /* Alt ayırıcı çizgi */
    margin-bottom: 12px;                                /* Menüden ayrım boşluğu */
}

/* Menü butonu */
.nav-item {
    width: 100%;                        /* Tüm sidebar genişliği */
    display: flex;                      /* İkon + yazı hizalaması */
    align-items: center;                /* Dikey ortalama */
    gap: 12px;                          /* İkon ve yazı arası boşluk */
    padding: 12px 14px;                 /* İç boşluk */
    background: transparent;            /* Arka plan yok */
    border: 2px solid transparent;      /* Hover için hazır border */
    border-radius: 6px;                 /* Köşe yuvarlama */
    color: var(--text-dark);            /* Yazı rengi */
    font-size: 13px;                    /* Yazı boyutu */
    font-weight: 600;                   /* Yarı kalın yazı */
    cursor: pointer;                    /* Tıklanabilir */
    transition: all 0.3s ease;          /* Hover animasyonu */
    text-align: left;                   /* Metni sola hizala */
    margin-bottom: 6px;                 /* Menü öğeleri arası boşluk */
    letter-spacing: 0.3px;              /* Hafif harf aralığı */
}

/* Menü hover efekti */
.nav-item:hover {
    background: rgba(139, 25, 22, 0.05);            /* Hafif kırmızı arka plan */
    border-color: var(--flowmaxi-red);                /* Kırmızı çerçeve */
    color: var(--flowmaxi-red);                       /* Yazı rengi kırmızı */
    transform: translateX(4px);                       /* Yatayda sağa mikro kayma animasyonu */
                                                      /* Sağ kayma efekti */
}

/* Aktif menü */
.nav-item.active {
    background: var(--flowmaxi-red);                /* Kırmızı arka plan */
    color: var(--white);                            /* Beyaz yazı */
    border-color: var(--flowmaxi-red);              /* Kırmızı kenarlık */
    box-shadow: var(--shadow-light);                /* Hafif gölge */
}

/* Menü ikonları */
.nav-icon {
    font-size: 1.2rem;                  /* İkon boyutu */
    width: 24px;                        /* Sabit ikon alanı */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;                     /* Küçülmesini engelle */
}

.nav-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Aktif menü öğesindeki ikonun rengini beyaza çevir */
.nav-item.active .nav-icon img {
    filter: brightness(0) invert(1);
}

/* Hover durumunda ikonu biraz belirginleştir/değiştir (opsiyonel) */
.nav-item:hover:not(.active) .nav-icon img {
    transform: scale(1.1);
}

/* Sidebar Footer */
/* Sidebar alt sabit alan */
.sidebar-footer {
    padding: 16px;                                  /* İç boşluk */
    border-top: 2px solid var(--light-gray);        /* Üst ayırıcı çizgi */
    background: var(--white);                       /* Beyaz arka plan */
    margin-top: auto;                               /* Footer’ı en alta gönder */
}

/* Birim sistemi başlığı */
.unit-system-toggle .toggle-label {
    display: block;                 /* Satır bazlı */
    font-size: 11px;                /* Küçük yazı */
    font-weight: 700;               /* Kalın */
    color: var(--dark-gray);        /* Koyu gri */
    text-transform: uppercase;      /* Büyük harf */
    letter-spacing: 1.5px;          /* Harf aralığı */
    margin-bottom: 10px;            /* Alt boşluk */
}

/* Toggle buton grubu */
.toggle-buttons {
    display: flex;                              /* Yan yana dizim */
    background: var(--light-bg);                /* Açık arka plan */
    border-radius: 6px;                         /* Yuvarlatılmış köşeler */
    padding: 4px;                               /* İç boşluk */
    border: 2px solid var(--light-gray);        /* Çerçeve */
}

/* Toggle tek buton */
.toggle-btn {
    flex: 1;                            /* Eşit genişlik */
    padding: 8px 12px;                  /* İç boşluk */
    background: transparent;            /* Varsayılan arka plan yok */
    border: none;                       /* Kenarlık yok */
    border-radius: 4px;                 /* Köşe yuvarlama */
    color: var(--dark-gray);            /* Yazı rengi */
    font-size: 11px;                    /* Yazı boyutu */
    font-weight: 700;                   /* Kalın yazı */
    cursor: pointer;                    /* Tıklanabilir */
    transition: all 0.2s ease;          /* Geçiş animasyonu */
    text-transform: uppercase;          /* Büyük harf */
    letter-spacing: 0.5px;              /* Harf aralığı */
}

/* Aktif toggle */
.toggle-btn.active {
    background: var(--flowmaxi-red);            /* Aktif arka plan */
    color: var(--white);                        /* Beyaz yazı */
    box-shadow: var(--shadow-light);            /* Hafif gölge */
}


/* ===================================
   MAIN CONTENT - RESPONSIVE
   =================================== */

/* Sidebar yanında yer alan ana içerik alanı */
.main-content {
    flex: 1;                        /* Kalan alanı tam kapasite doldur */
    padding: 32px 40px;             /* İç içerik güvenli alan boşlukları */
    background: transparent;        /* Sayfa arka planının görünmesi için şeffaf zemin */
    min-width: 0;                   /* Grid ve Flex içindeki taşmaları engelle */
    box-sizing: border-box;         /* Boyut hesaplamasına padding ve border dahil et */
    position: relative;             /* Katmanlama için koordinat başlangıcı */
    z-index: 1;                     /* İçerik katmanının öncelik sırası */

    /* SIDEBAR AÇIKKEN: Sol taraftan sidebar genişliği kadar boşluk */
    margin-left: var(--sidebar-width);
    margin-right: 0;
    width: calc(100% - var(--sidebar-width));

    /* SMOOTH GENİŞLEME ANİMASYONU */
    transition: margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        padding-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* DESKTOP - Sidebar Kontrolü */
@media (min-width: 769px) {

    /* Sidebar AÇIKKEN */
    .sidebar:not(.collapsed)~.main-content {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        padding-left: 40px;
    }

    /* Sidebar KAPALIYKEN - TOGGLE BUTON ALANINI BIRAK */
    .sidebar.collapsed~.main-content {
        margin-left: calc(var(--sidebar-toggle-size) + 32px);           /* Toggle buton + boşluk */
        width: calc(100% - var(--sidebar-toggle-size) - 32px);
        padding-left: 40px;
    }
}

/* Mobil ve Tablet (Eski Off-Canvas Tasarımm) */
@media (max-width: 1024px) {

    /* Sidebar: Daima tam genişlik, Collapsed iken ekran dışı (-100%) */
    .sidebar {
        width: var(--sidebar-width) !important;
        transform: translateX(0);
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;         /* Width yerine Transform */
        z-index: 200;
    }

    .sidebar.collapsed {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;
    }

    /* Mini Sidebar metin gizleme kurallarını iptal et (Gereksiz ama güvenli) */
    .sidebar.collapsed .nav-item span:not(.nav-icon),
    .sidebar.collapsed .nav-section-title,
    .sidebar.collapsed .sidebar-footer,
    .sidebar.collapsed .toggle-label {
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        pointer-events: auto !important;
    }

    /* Toggle Buton Hizalamaları */
    .sidebar.collapsed~.sidebar-toggle {
        left: 13px !important;                          /* Eski konuma geri dön */
    }

    .sidebar:not(.collapsed)~.sidebar-toggle {
        left: calc(var(--sidebar-width) - var(--sidebar-toggle-size) - 15px) !important;
    }

    /* Main Content */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 90px !important;
        padding-right: 24px !important;
        padding-bottom: 40px !important;
        padding-left: 24px !important;                  /* Mobilde sol boşluk standart */
    }
}

/* Zoom seviyelerinde hassasiyet için */
@supports (zoom: 1) {
    .main-content {
        contain: layout style;                          /* Tarayıcıya layout izolasyonu sağlar (zoom bug azaltma)*/
    }
}


/* ===================================
   TOOL PANELS
   =================================== */

/* Hesaplama modüllerinin panel yapısı */
.tool-panel {
    display: none;                      /* Varsayılan olarak gizli */
    animation: fadeIn 0.4s ease;        /* Görünür olduğunda animasyon */
}

/* Aktif pnel */
.tool-panel.active {
    display: block;                     /* Sadece aktif paneli göster */
}

/* Fade-in animasyonu */
@keyframes fadeIn {
    from {
        opacity: 0;                         /* Başlangıçta görünmez */
        transform: translateY(20px);        /* Aşağıdan gelir */
    }

    to {
        opacity: 1;                         /* Tam görünür */
        transform: translateY(0);           /* Normal konum */
    }
}

/* Panel başlık alanı */
.panel-header {
    margin-bottom: 28px;                    /* Gövdeyle araya boşluk */
}

/* Panel ana başlığı */
.panel-header h2 {
    font-size: 28px;                        /* Büyük başlık */
    font-weight: 700;                       /* Kalın yazı */
    color: var(--flowmaxi-red);             /* Kurumsal kırmızı */
    margin-bottom: 8px;                     /* Alt boşluk */
    letter-spacing: 0.5px;                  /* Harf aralığı */
    text-transform: uppercase;              /* Büyük harf */
}

/* Panel alt açıklaması */
.panel-header p {
    font-size: 14px;                        /* Açıklama yazı boyutu */
    color: var(--dark-gray);                /* Koyu gri */
    font-weight: 500;                       /* Orta kalınlık */
}

/* Panel içerik gövdesi */
.panel-body {
    background: var(--white);                   /* Beyaz arka plan */
    border-radius: 8px;                         /* Yuvarlatılmış köşeler */
    padding: 32px;                              /* İç boşluk */
    box-shadow: var(--shadow-medium);           /* Kart efekti gölgesi */
    border: 2px solid var(--light-gray);        /* İnce çerçeve */
    position: relative;                         /* İç öğeler için referans */
    z-index: 1;                                 /* Arka plan efektlerinin üstünde */
}


/* ===================================
   CONVERTER GRID - RESPONSIVE
   =================================== */

/* Dönüştürücü kartlarının responsive grid yerleşimi */
.converter-grid {
    display: grid;                                  /* CSS Grid katman mimarisi kullanımı */
    grid-template-columns: repeat(3, 1fr);          /* 3 sütunlu eşit oranlı dinamik sütun yapısı */
    gap: 20px;                                      /* Izgara öğeleri arası standart boşluk */
    width: 100%;                                    /* Konteyner tam genişlik */
    box-sizing: border-box;                         /* Kutu modeli sınırı */
    margin: 0 auto;                                 /* Grid yapısını yatayda merkezle */
    overflow: visible;                              /* Taşmaların ve efektlerin görünürlüğü */
}

/* 2 sütun için orta ekranlar */
@media (max-width: 1200px) {
    .converter-grid {
        grid-template-columns: repeat(2, 1fr);          /* 2 Sütuna düşür */
    }
}

/* 1 sütun için küçük ekranlar */
@media (max-width: 768px) {
    .converter-grid {
        grid-template-columns: 1fr;                     /* Tek sütuna düşür */
    }
}

/* Tek bir dönüştürücü kart */
.converter-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F8F8 100%);          /* Kart arka plan gradyanı */
    border: 2px solid var(--light-gray);                                        /* Kart çerçevesi */
    border-radius: 8px;                                                         /* Yuvarlatılmış köşeler */
    padding: 24px 20px;                                                         /* İç boşluk */
    transition: all 0.3s ease;                                                  /* Hover animasyonu */
    box-sizing: border-box;
    min-width: 0;                                                               /* Grid taşmalarını engelle */
    width: 100%;                                                                /* Kart tam sütun genişliği */

    /* Grid Layout */
    display: grid;                                          /* İçerik için Grid sistemi */
    grid-template-columns: 1fr 100px;                       /* İki sütunlu asimetrik yerleşim (Değer ve Birim) */
    grid-template-areas:
        "title title"                                       /* Başlık alanı */
        "input1 select1"                                    /* Birinci giriş satırı */
        "arrow swap"                                        /* Araçlar ve yönlendirme alanı */
        "input2 select2";                                   /* İkinci çıkış satırı */
    align-items: center;                                    /* Dikey hizada merkezi yerleşim */
}

/* Kart hover efekti */
.converter-card:hover {
    border-color: var(--flowmaxi-red);                      /* Kırmızı çerçeve */
    transform: translateY(-4px);                            /* Yukarı kalkma efekti */
    box-shadow: var(--shadow-medium);                       /* Kart gölgesi */
}

/* Kart başlığı */
.converter-card h3 {
    grid-area: title;
    font-size: 13px;                                    /* Başlık yazı boyutu */
    font-weight: 700;                                   /* Kalın yazı */
    color: var(--flowmaxi-red);                         /* Kurumsal kırmıızı */
    margin-bottom: 20px;                                /* Alt boşluk */
    text-align: center;                                 /* Ortalanmış yazı */
    letter-spacing: 1.5px;                              /* Harf aralığı */
    text-transform: uppercase;                          /* Büyük harf */
    padding-bottom: 10px;                               /* Alt iç boşluk */
    border-bottom: 2px solid var(--light-gray);         /* Başlık alt çizgisi */
}


/* Ondalık Kontrolleri */
.decimal-controls {
    display: flex;                              /* Esnek hizalama */
    align-items: center;                        /* Dikey ortala */
    gap: 8px;                                   /* İç bileşen mesafesi */
    margin-bottom: 14px;                        /* Alt ayırıcı boşluk */
    padding: 10px 12px;                         /* İç panel boşluğu */
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);          /* Hafif mavi kurumsal gradyan */
    border: 1px solid #BAE6FD;                /* Hassas çerçeve rengi */
    border-radius: 6px;                         /* Köşe yumuşatma */
}

.decimal-label {
    font-size: 11px;                        /* Metin boyutu */
    font-weight: 600;                       /* Yarı kalınlık */
    color: var(--text-dark);                /* Metin rengi */
    text-transform: uppercase;              /* Büyük harf dönüşümü */
    letter-spacing: 0.5px;                  /* Karakter aralığı hassasiyeti */
    white-space: nowrap;                    /* Metni tek satırda sabitleme */
}

.decimal-selector {
    flex: 1;
    padding: 6px 10px;
    background: var(--white);
    border: 2px solid var(--light-gray);
    border-radius: 4px;
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.decimal-selector:hover {
    border-color: var(--flowmaxi-red);
}

.decimal-selector:focus {
    outline: none;
    border-color: var(--flowmaxi-red);
    box-shadow: 0 0 0 3px rgba(139, 25, 22, 0.1);
}

.swap-units-btn {
    grid-area: swap;
    justify-self: center;
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    margin: 8px 0;
}

.swap-units-btn:hover {
    background: transparent;
    transform: scale(1.1);
}

.swap-units-btn:active {
    background: transparent;
    transform: scale(0.9);
}

.swap-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swap-icon img {
    transition: transform 0.3s ease;
}

.swap-units-btn:hover .swap-icon img {
    transform: rotate(180deg);
}

/* Mobil için uyarlama */
@media (max-width: 480px) {
    .decimal-controls {
        gap: 6px;
        padding: 8px 10px;
    }

    .decimal-label {
        font-size: 10px;
    }

    .decimal-selector {
        padding: 5px 8px;
        font-size: 12px;
    }

    .swap-units-btn {
        padding: 5px 10px;
        font-size: 14px;
        min-width: 36px;
    }
}

/* Dönüşüm yönü oku */
.converter-arrow {
    grid-area: arrow;
    text-align: center;                 /* Oku ortala */
    font-size: 1.5rem;                  /* Büyük ikon */
    color: var(--flowmaxi-red);         /* Kırmızı renk */
    margin: 0;                          /* Boşluk grid gap ile yönetilir */
    font-weight: 700;                   /* Kalın görünüm */
}

/* Input + select grubunu saran alan */
.input-group {
    display: contents;                  /* Grid yerleşimi için içeriği serbest bırak */
}

/* Birinci grup yerleşimi */
.converter-card .input-group:nth-of-type(1) input {
    grid-area: input1;
    margin-bottom: 8px;
}

.converter-card .input-group:nth-of-type(1) select {
    grid-area: select1;
    margin-bottom: 8px;
}

/* İkinci grup yerleşimi */
.converter-card .input-group:nth-of-type(2) input {
    grid-area: input2;
    margin-top: 8px;
}

.converter-card .input-group:nth-of-type(2) select {
    grid-area: select2;
    margin-top: 8px;
}

/* Sayısal giriş alanı */
.input-group input {
    flex: 1;                                        /* Kalan alanı doldur */
    min-width: 0;                                   /* Taşmayı önle */
    padding: 10px 12px;                             /* İç boşluk */
    background: var(--white);                       /* Beyaz arka plan */
    border: 2px solid var(--light-gray);            /* Çerçeve */
    border-radius: 6px;                             /* Yuvarlatılmış köşeler */
    color: var(--text-dark);                        /* Yazı rengi */
    font-size: 14px;                                /* Yazı boyutu */
    font-family: 'Gilroy', sans-serif;              /* Font ailesi */
    font-weight: 500;                               /* Orta kalınlık */
    transition: all 0.2s ease;                      /* Focus/hover animasyonu */
}

/* Birim seçimi (select) */
.input-group select {
    flex-shrink: 0;
    min-width: 80px;
    max-width: 100px;
    padding: 12px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--white);
    border: 2px solid var(--light-gray);
    border-radius: 6px;
    color: var(--text-dark);
    font-size: 14px;
    font-family: 'Gilroy', sans-serif;
    font-weight: 700;                               /* Bold yazı kalınlığı */
    cursor: pointer;
    transition: all 0.2s ease;
}


/* ===================================
   TABS
   =================================== */
.tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--light-gray);
    padding-bottom: 12px;
    flex-wrap: wrap;
}

.tab-btn {
    position: relative;
    padding: 10px 18px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--dark-gray);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    z-index: 1;
}

.tab-btn:hover {
    color: var(--white);
}

.tab-btn.active {
    color: var(--white);
}

.tab-btn .background {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 4px;
    width: 100%;
    background-color: var(--flowmaxi-red);
    z-index: -1;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-btn:hover .background,
.tab-btn.active .background {
    height: 100%;
    width: 100%;
    top: 50%;
    border-radius: 6px;                         /* Buton köşelerine uyum sağlar */
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;                             /* Aktif içeriği görünür yap */
    animation: fadeIn 0.3s ease;                /* İçerik geçiş animasyonu */
}


/* ===================================
   FORM ELEMENTS
   =================================== */
.calc-form {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F8F8 100%);      /* Form arka plan gradyanı */
    border: 2px solid var(--light-gray);                                    /* Form çerçevesi */
    border-radius: 8px;                                                     /* Köşe yumuşatma */
    padding: 24px;                                                          /* İç boşluk */
    margin-bottom: 24px;                                                    /* Alt boşluk */
}

.calc-form.wide {
    max-width: 100%;
}

.form-row {
    margin-bottom: 16px;                        /* Satırlar arası mesafe */
}

.form-row label {
    display: block;                             /* Etiketi blok olarak yerleştir */
    font-size: 13px;                            /* Etiket yazı boyutu */
    font-weight: 600;                           /* Vurgulu etiket yapısı */
    color: var(--text-dark);                    /* Koyu metin hiyerarşisi */
    margin-bottom: 8px;                         /* Kontrol elemanı ile mesafe */
    text-transform: uppercase;                  /* Büyük harf kullanımı */
    letter-spacing: 0.5px;                      /* Harf aralığı */
}

.form-row input {
    width: 100%;                                /* Tam genişlikte input alanı */
    padding: 12px 14px;                         /* Veri girişi için iç boşluk */
    background: var(--white);                   /* Temiz beyaz zemin */
    border: 2px solid var(--light-gray);        /* Standart pasif çerçeve */
    border-radius: 6px;                         /* Modern köşe yapısı */
    color: var(--text-dark);                    /* Yüksek kontrastlı metin rengi */
    font-size: 14px;                            /* Standart veri giriş boyutu */
    font-family: 'Gilroy', sans-serif;          /* Kurumsal font ailesi */
    font-weight: 500;                           /* Orta kalınlık */
                                                /* İnce - input alanları */
    transition: all 0.2s ease;                  /* Odak transition efekti */
}

.form-row select {
    width: 100%;                                /* Açılır menü tam genişlik */
    padding: 12px 14px;                         /* Seçim alanı iç boşluğu */
    background: var(--white);                   /* Beyaz zemin renderı */
    border: 2px solid var(--light-gray);        /* Standart çerçeve sistemi */
    border-radius: 6px;                         /* Form köşe yumuşatma */
    color: var(--text-dark);                    /* Seçim metni rengi */
    font-size: 14px;                            /* Metin ölçeği */
    font-family: 'Gilroy', sans-serif;          /* Kurumsal font ailesi */
    font-weight: 700;                           /* Belirgin kalınlık (Bold) */
                                                /* Bold - birim barları */
    transition: all 0.2s ease;                  /* Etkileşim transition protokolü */
}

.form-row input:focus,
.form-row select:focus {
    outline: none;
    border-color: var(--flowmaxi-red);
    box-shadow: 0 0 0 3px rgba(139, 25, 22, 0.1);
}

.form-grid {
    display: grid;                                                      /* Esnek ızgara düzeni */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));        /* Responsive otomatik yerleşim algoritması */
    gap: 16px;                                                          /* Form elemanları arası mesafe */
}

.input-with-unit {
    display: flex;
    gap: 8px;
}

.input-with-unit input {
    flex: 1;
}

.input-with-unit select {
    width: 110px;
    font-family: 'Gilroy', sans-serif;
    font-weight: 700;
}

/* Result Card Unit Selects */
.card-unit-select {
    padding: 4px 8px;
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    background: transparent;
    font-family: 'Gilroy', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-dark);
    cursor: pointer;
}

.calc-btn {
    z-index: 2;                         /* Diğer öğelerin üstünde kal */
    display: block;                     /* Blok seviyesinde yerleşim */
    width: 100%;                        /* Tam genişlik kullanımı */
    max-width: 280px;                   /* Kullanıcı isteğine göre daraltılmış genişlik */
    height: auto;                       /* İçeriğe göre yükseklik */
    outline: none;                      /* Odak çerçevesini kaldır */
    border: none;                       /* Standart kenarlığı kaldır */
    background-color: transparent;      /* Şeffaf zemin */
    color: var(--flowmaxi-red);         /* Kurumsal metin rengi */
    font-size: 18px;                    /* Okunabilir yazı boyutu */
    font-weight: bold;                  /* Vurgulu metin */
    padding: 14px 24px;                 /* İç boşluk dengesi */
    position: relative;                 /* Animasyon parçaları için referans */
    cursor: pointer;                    /* Tıklanabilir ikon */
    text-transform: uppercase;          /* Büyük harf kullanımı */
    letter-spacing: 1.1px;              /* Karakter aralığı */
    transition: all 0.4s ease-in-out;   /* Yumuşak geçiş animasyonu */
    margin: 24px auto 0;                /* Form içinde ortalanmış yerleşim */
    overflow: visible;                  /* Pseudo-elementlerin görünmesini sağlar */
}

.calc-btn::before {
    content: "";
    display: block;                                     /* Blok seviyesinde yerleşim */
    width: 100%;                                        /* Tam genişlik */
    height: 100%;                                       /* Tam yükseklik */
    z-index: 3;                                         /* Ön katmanda tut */
    position: absolute;                                 /* Buton sınırlarına göre mutlak konumlama */
    top: 0;                                             /* Üst hizalama */
    left: 0;                                            /* Sol hizalama */
    transform: scaleX(0.05) scaleY(0.2) translate(850%, 120%);          /* Başlangıçta gizli ve küçültülmüş animasyon */
    border-top: solid 2px var(--flowmaxi-red);          /* Üst dekoratif çerçeve */
    border-left: solid 4px var(--flowmaxi-red);         /* Sol kalın dekoratif çerçeve */
    transition: all .4s ease-in-out;                    /* Etkileşim sırası yumuşak form değişimi */
    pointer-events: none;                               /* Tıklama olaylarını asıl butona geçirme */
}

.calc-btn::after {
    content: "";
    display: block;                     /* Blok bazlı render */
    width: 100%;                        /* Kapsayıcı genişlik */
    height: 100%;                       /* Kapsayıcı yükseklik */
    z-index: 3;                         /* Dekoratif katman önceliği */
    position: absolute;                 /* Serbest konumlandırma */
    top: 0;                             /* Üst sınır */
    left: 0;                            /* Sol sınır */
    transform: translate(-45%, -45%) scaleX(0.05) scaleY(0.2);          /* Karşıt köşede bekleyen animasyon */
    border-bottom: solid 2px var(--flowmaxi-red);                       /* Alt dekoratif çerçeve */
    border-right: solid 4px var(--flowmaxi-red);                        /* Sağ kalın dekoratif çerçeve */
    transition: all .4s ease-in-out;                                    /* Dinamik geçiş efekti */
    pointer-events: none;                                               /* Fare etkileşimini engelle */
}

.calc-btn:hover {
    background-color: transparent;
    color: var(--flowmaxi-red);
    transform: scale(1.02);
}

.calc-btn:hover::before {
    transform: translate(0, 0) scaleX(1) scaleY(1);
    border-top: solid 1px var(--flowmaxi-red);
    border-left: solid 1px var(--flowmaxi-red);
}

.calc-btn:hover::after {
    transform: scaleX(1) scaleY(1) translate(0, 0);
    border-bottom: solid 1px var(--flowmaxi-red);
    border-right: solid 1px var(--flowmaxi-red);
}

.calc-btn:active {
    transform: scale(0.98);
}


/* ===================================
   RESULTS GRID
   =================================== */
.results-grid {
    display: grid;                              /* Sonuçlar için ızgara düzeni */
    grid-template-columns: repeat(3, 1fr);      /* 3 sütunlu standart masaüstü görünümü */
    gap: 16px;                                  /* Kartlar arası güvenlik mesafesi */
    width: 100%;                                /* Panel tam genişlik */
    box-sizing: border-box;                     /* Dış taşma kontrolü */
}

/* 2 sütun için orta ekranlar */
@media (max-width: 1024px) {
    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1 sütun için küçük ekranlar */
@media (max-width: 768px) {
    .results-grid {
        grid-template-columns: 1fr;
    }
}

.result-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F8F8 100%);          /* Kart arka plan gradyanı */
    border: 2px solid var(--light-gray);                                        /* Standart kart çerçevesi */
    border-radius: 8px;                                                         /* Kurumsal köşe yumuşatma */
    padding: 18px;                                                              /* İçerik güvenli alan boşluğu */
    text-align: center;                                                         /* Verileri merkezi hizalama */
    transition: all 0.3s ease;                                                  /* Hover durumunda yumuşak geçiş */
    box-sizing: border-box;                                                     /* Boyutlandırma kontrolü */
    min-width: 0;                                                               /* Izgara içinde daralmayı destekle */
    width: 100%;                                                                /* Sütun tam genişlik */
}

.result-card:hover {
    border-color: var(--flowmaxi-red);
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.result-card.highlight {
    background: linear-gradient(135deg, var(--flowmaxi-red) 0%, var(--flowmaxi-dark-red) 100%);
    border-color: var(--flowmaxi-red);
}

.result-card.highlight .result-label,
.result-card.highlight .result-value,
.result-card.highlight .result-unit {
    color: var(--white);
}

.result-label {
    display: block;             /* Etiketi blok olarak yerleştir */
    font-size: 11px;            /* Küçük etiket boyutu */
    font-weight: 600;           /* Yarı kalın font */
    color: var(--dark-gray);    /* Yardımcı metin rengi */
    text-transform: uppercase;  /* Profesyonel büyük harf */
    letter-spacing: 1px;        /* Karakter arası boşluk */
    margin-bottom: 8px;         /* Değer ile mesafe */
}

.result-value {
    display: block;                 /* Değeri blok olarak yerleştirme */
    font-size: 24px;                /* Büyük rakam ölçeği */
    font-weight: 700;               /* Kalın vurgulu font */
    color: var(--flowmaxi-red);     /* Kurumsal vurgu rengi */
    margin-bottom: 4px;             /* Birim ile mesafe */
}

.result-unit {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--dark-gray);
    margin-top: 4px;
}

.card-unit-select {
    width: auto;
    max-width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: 'Gilroy', sans-serif;
    font-weight: 600;
    border: 2px solid var(--light-gray);
    border-radius: 6px;
    background-color: var(--white);
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-unit-select:hover {
    border-color: var(--flowmaxi-red);
}

.card-unit-select:focus {
    outline: none;                                        /* Varsayılan odak çerçevesini kaldır */
    border-color: var(--flowmaxi-red);                    /* Kurumsal odak rengi */
    box-shadow: 0 0 0 3px rgba(139, 25, 22, 0.1);       /* Glow efekti */
}

.result-value.status-ok {
    color: var(--success);                  /* Başarılı/Güvenli durum rengi (Yeşil) */
}

.result-value.status-warning {
    color: var(--warning);                  /* Dikkat gerektiren durum rengi (Sarı) */
}

.result-value.status-danger {
    color: var(--danger);                   /* Kritik/Hatalı durum rengi (Kırmızı) */
}


/* ===================================
   INFO BOX
   =================================== */
.info-box {
    background: #e9f5f8;
    border: 1.5px solid #b4e3fe;
    border-radius: 8px;
    padding: 20px;
    margin-top: 24px;
}

.info-box h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--flowmaxi-red);
    margin-bottom: 12px;                /* Başlık altı boşluk */
    text-transform: uppercase;          /* Büyük harf */
    letter-spacing: 0.5px;              /* Harf aralığı */

}

.info-box p {
    font-size: 13px;                /* Metin boyutu */
    color: var(--text-dark);        /* Metin rengi */
    margin-bottom: 8px;             /* Paragraf altı boşluk */
    line-height: 1.6;               /* Satır yüksekliği */

}

.info-box ul {
    margin-left: 20px;
    margin-top: 12px;
}

.info-box li {
    font-size: 13px;
    color: var(--text-dark);
    margin-bottom: 6px;
}


/* ===================================
   FOOTER
   =================================== */
.footer {
    background: linear-gradient(180deg, #F5F5F5 0%, #ECECEC 100%);          /* Footer arka plan gradyanı */
    border-top: 3px solid var(--flowmaxi-red);                                  /* Üst kırmızı çizgi */
    color: var(--text-dark);                                                    /* Metin rengi */
    text-align: center;                                                         /* Metni ortala */
    padding: 20px 0;                                                            /* İç boşluk */
    margin-top: 40px;                                                           /* Üst boşluk */
    font-weight: 500;                                                           /* Orta kalınlık */
    font-size: 13px;                                                            /* Yazı boyutu */
    position: relative;                                                         /* Pseudo-elementler için */
    z-index: 2;                                                                 /* Önde kalmasını sağla */

    /* SIDEBAR AÇIKKEN: Sol taraftan sidebar genişliği kadar boşluk */
    margin-left: var(--sidebar-width);
    margin-right: 0;
    width: calc(100% - var(--sidebar-width));

    /* SMOOTH ANİMASYON */
    transition: margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        padding-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Sidebar AÇIKKEN */
.sidebar:not(.collapsed)~* .footer {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding-left: 0;
}

/* Sidebar KAPALIYKEN - TOGGLE BUTON ALANINI BIRAK */
.sidebar.collapsed~* .footer,
body:has(.sidebar.collapsed) .footer {
    margin-left: calc(var(--sidebar-toggle-size) + 32px);
    width: calc(100% - var(--sidebar-toggle-size) - 32px);
    padding-left: 0;
}

.footer a {
    color: var(--flowmaxi-red);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.footer a:hover {
    border-bottom-color: var(--flowmaxi-red);                           /* Alt çizgi rengini aktif et */
}


/* ===================================
   SCROLLBAR
   =================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--light-bg);                    /* Scroll kanalı arka planı */
}

::-webkit-scrollbar-thumb {
    background: var(--medium-gray);                 /* Scroll çubuğu rengi */
    border-radius: 5px;                             /* Köşe yuvarlama */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--flowmaxi-red);                /* Hoverda kırmızı renk */
}


/* ===================================
   RESPONSIVE - TABLETLER (768px - 1024px)
   =================================== */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 260px;                     /* Tablet genişlik optimizasyonu */
        --header-height: 140px;                     /* Tablet yükseklik optimizasyonu */
    }

    .logo-img {
        height: 80px;                               /* Tablet logo ölçeği */
        max-width: 250px;                           /* Sığdırma sınırı */
    }

    .tagline {
        font-size: 10px;                            /* Tablet slogan boyutu */
        letter-spacing: 1.5px;                      /* Harf aralığı */
    }

    .header-info h1 {
        font-size: 20px;                            /* Tablet başlık boyutu */
    }

    .panel-header h2 {
        font-size: 24px;                            /* Tablet panel başlığı */
    }

    .panel-body {
        padding: 24px;                              /* Güvenli alan daraltma */
    }
}


/* ===================================
   RESPONSIVE - MOBİL (768px ve altı)
   MOBİL DÜZELTMELERİ
   =================================== */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 280px;
        --header-height: 110px;                 /* Daha kompakt header */
    }

    /* Header - MOBİL DÜZELTMELERİ */
    .header .container {
        flex-direction: column;                 /* Mobilde dikey yerleşim */
        text-align: center;                     /* Metinleri ortalama */
        gap: 2px;                               /* Bileşenler arası dar mesafe */
        padding: 6px 12px 4px;                  /* Mobil için optimize edilmiş iç boşluk */
        justify-content: center;                /* İçeriği merkezleme */
    }

    .logo {
        align-items: center;
        margin-bottom: 2px;
    }

    .logo-img {
        height: 45px;
        max-width: 160px;
    }

    .tagline {
        font-size: 6.5px;
        letter-spacing: 0.3px;
        text-align: center;
        margin-top: 2px;
    }

    .header-info {
        align-items: center;                    /* Yatayda merkezi hizalama */
        text-align: center;                     /* Metin merkezi hizalama */
        min-width: 0;                           /* Taşmayı engelle */
        width: 100%;                            /* Tam genişlik */
        padding: 0;                             /* Boşlukları sıfırla */
    }

    .header-info h1 {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        margin-bottom: 0;
    }

    .header-info p {
        font-size: 9px;
        white-space: nowrap;
        margin-top: 0;
    }

    /* Sidebar Toggle - MOBİL DÜZELTMELERİ */
    .sidebar-toggle {
        display: flex;
        left: 12px;
        top: calc(var(--header-height) + 12px);                     /* Header altında */
        width: 40px;
        height: 40px;
        z-index: 70;
    }

    .sidebar-toggle svg {
        width: 32px;
        height: 32px;
    }

    .sidebar:not(.collapsed)~.sidebar-toggle {
        left: calc(var(--sidebar-width) - 40px - 12px);
    }

    /* Main Content - MOBİLDE DÜZELTME */
    .main-content {
        margin-left: 0 !important;                  /* Mobilde yan boşluğu sıfırla */
        padding: 68px 16px 20px !important;         /* Üstten güvenli alan bırakma (Sidebar toggle için) */
        width: 100% !important;                     /* Tam genişlik renderı */
        transition: none !important;                /* Animasyon yükünü mobilde devredışı bırak */
    }

    /* Panel Header - Sidebar toggle altında başlasın */
    .panel-header {
        margin-top: 0;
        padding-top: 0;
    }

    .panel-header h2 {
        font-size: 18px;
        margin-top: 0;
    }

    .panel-header p {
        font-size: 12px;
    }

    .panel-body {
        padding: 16px;
        overflow: visible;
    }

    /* Sidebar - Mobil */
    .sidebar {
        width: var(--sidebar-width);
        transform: translateX(calc(-1 * var(--sidebar-width)));
        position: fixed;
        z-index: 60;
    }

    .sidebar:not(.collapsed) {
        transform: translateX(0);
    }

    /* Converter Grid - MOBİLDE */
    .converter-grid {
        grid-template-columns: 1fr;             /* Mobilde tek sütunlu linear akış */
        max-width: 100%;                        /* Ekran dışına taşmayı engelle */
        gap: 16px;                              /* Kartlar arası dar mesafe */
    }

    .converter-card {
        width: 100%;                        /* Kart tam genişlik */
        max-width: 100%;                    /* Kısıtlamayı kaldırma */
        padding: 14px;                      /* Mobil için daraltılmış iç boşluk */
    }

    .converter-card h3 {
        font-size: 12px;                    /* Daha küçük başlık ölçeği */
        margin-bottom: 12px;                /* Alt boşluk optimizasyonu */
        padding-bottom: 8px;                /* Ayırıcı boşluk */
    }

    /* Tabs */
    .tabs {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        padding: 8px 12px;
        font-size: 10px;
        flex-shrink: 0;
    }

    /* Form */
    .form-grid {
        grid-template-columns: 1fr;
    }

    .calc-form {
        padding: 16px;
    }

    /* Results */
    .results-grid {
        grid-template-columns: 1fr;
    }

    .result-card {
        padding: 16px;
    }

    /* Footer - MOBİLDE */
    .footer {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 16px 12px;
        padding-left: 12px !important;
        font-size: 12px;
    }
}


/* ===================================
   RESPONSIVE - KÜÇÜK MOBİL (480px ve altı)
   =================================== */
@media (max-width: 480px) {
    :root {
        --header-height: 105px;
    }

    .header .container {
        padding: 5px 10px 3px;
        gap: 1px;
    }

    .logo-img {
        height: 42px;               /* Mobil görüntüleme için ölçeklenmiş logo boyutu */
        max-width: 150px;           /* Sığdırma sınırlaması */
    }

    .tagline {
        font-size: 6px;             /* Okunabilir minimum boyutta slogan */
        letter-spacing: 0.2px;      /* Daralan alan için optimize edilmiş karakter aralığı */
    }

    .header-info h1 {
        font-size: 12px;
    }

    .header-info p {
        font-size: 8.5px;
    }

    .sidebar-toggle {
        width: 36px;
        height: 36px;
        font-size: 18px;
        top: calc(var(--header-height) + 10px);
    }

    .main-content {
        padding: 60px 12px 16px !important;
    }

    .nav-item {
        padding: 10px 12px;
        font-size: 12px;
    }

    .nav-icon {
        font-size: 1.1rem;                  /* Simge ölçekleme */
        width: 20px;                        /* Sabit genişlik sınırlaması */
    }

    .panel-header h2 {
        font-size: 16px;
    }

    .panel-header p {
        font-size: 11px;
    }

    .panel-body {
        padding: 12px;
    }

    .converter-card {
        padding: 12px;
    }

    .converter-card h3 {
        font-size: 11px;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }

    .converter-arrow {
        font-size: 1.5rem;
        margin: 8px 0;
    }

    .input-group input,
    .input-group select {
        padding: 8px 10px;
        font-size: 13px;
    }

    .tab-btn {
        padding: 8px 12px;
        font-size: 10px;
    }

    .calc-form {
        padding: 12px;
    }

    .form-row label {
        font-size: 11px;
    }

    .form-row input,
    .form-row select {
        padding: 10px 12px;
        font-size: 13px;
    }

    .calc-btn {
        padding: 12px 20px;
        font-size: 12px;
    }

    .result-card {
        padding: 12px;
    }

    .result-label {
        font-size: 10px;
    }

    .result-value {
        font-size: 18px;
    }

    .result-unit {
        font-size: 10px;
    }

    .info-box {
        padding: 14px;
    }

    .info-box h3 {
        font-size: 12px;
    }

    .info-box p,
    .info-box li {
        font-size: 11px;
    }

    .footer {
        padding: 14px 10px;
        font-size: 11px;
    }
}


/* ===================================
   LANDSCAPE MOBİL (Yatay Mod)
   =================================== */
@media (max-width: 768px) and (orientation: landscape) {
    :root {
        --header-height: 80px;
    }

    .header .container {
        flex-direction: row;            /* Yatay modda yan yana yerleşim */
        padding: 6px 16px;              /* Geniş ekran iç boşluğu */
        gap: 8px;                       /* Komponentler arası mesafe */
    }

    .logo-img {
        height: 45px;
    }

    .tagline {
        display: none;
    }

    .header-info h1 {
        font-size: 13px;
    }

    .header-info p {
        font-size: 9px;
    }

    .main-content {
        padding: 20px 16px !important;
    }

    .sidebar-toggle {
        top: calc(var(--header-height) + 8px);
    }
}


/* ===================================
   PRINT STYLES
   =================================== */
@media print {

    .sidebar,
    .sidebar-toggle,
    .footer {
        display: none !important;           /* Baskıda gizle */
    }

    .main-content {
        margin-left: 0 !important;          /* Sol boşluğu kaldır */
        width: 100% !important;             /* Tam genişlik */
        padding: 0 !important;              /* İç boşluğu sıfırla */
    }

    .panel-body {
        box-shadow: none !important;              /* Gölgeyi kaldır */
        border: 1px solid #ddd !important;      /* Basit çerçeve */
    }

    body::before,
    body::after {
        display: none !important;           /* Arka plan efektlerini gizle */
    }
}


/* ===================================
   UTILITY CLASSES
   =================================== */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.mt-1 {
    margin-top: 8px !important;
}

.mt-2 {
    margin-top: 16px !important;
}

.mt-3 {
    margin-top: 24px !important;
}

.mb-1 {
    margin-bottom: 8px !important;
}

.mb-2 {
    margin-bottom: 16px !important;
}

.mb-3 {
    margin-bottom: 24px !important;
}

.p-1 {
    padding: 8px !important;
}

.p-2 {
    padding: 16px !important;
}

.p-3 {
    padding: 24px !important;
}


/* ===================================
   ACCESSIBILITY - ERİŞİLEBİLİRLİK PROTOKOLLERİ
   =================================== */
.sr-only {
    position: absolute;                     /* Görsel akıştan çıkararak mutlak konumlama */
    width: 1px;                             /* Genişliği sıfırla */
    height: 1px;                            /* Yüksekliği sıfırla */
    padding: 0;                             /* Boşlukları temizle */
    margin: -1px;                           /* Ekran dışına gönder */
    overflow: hidden;                       /* İçeriği gizle */
    clip: rect(0, 0, 0, 0);                 /* Kırpma alanı ile tamamen gizle */
    white-space: nowrap;                    /* Tek satırda tut */
    border-width: 0;                        /* Kenarlıkları temizle */
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--flowmaxi-red);             /* Klavye odağında kurumsal çerçeve */
    outline-offset: 2px;                                /* Çerçeve ile eleman arası mesafe */
}

/* Reduce motion için */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ===================================
   HIGH CONTRAST MODE
   =================================== */
@media (prefers-contrast: high) {

    .panel-body,
    .converter-card,
    .result-card {
        border-width: 3px;
    }

    .nav-item:hover,
    .nav-item.active {
        border-width: 3px;
    }
}


/* ===================================
   ANİMASYON TANIMLARI
   =================================== */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}


/* ===================================
   LOADING SPINNER (Opsiyonel)
   =================================== */
.loading-spinner {
    display: inline-block;                          /* Akış içinde blok yerleşim */
    width: 40px;                                    /* Spinner genişliği */
    height: 40px;                                   /* Spinner yüksekliği */
    border: 4px solid var(--light-gray);            /* Arka plan halkası */
    border-top-color: var(--flowmaxi-red);          /* Dönen aktif parça rengi */
    border-radius: 50%;                             /* Tam daire formu */
    animation: spin 1s linear infinite;             /* Kesintisiz dönme animasyonu */
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ===================================
   TOOLTIP (Opsiyonel)
   =================================== */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 8px 12px;
    background: var(--text-dark);
    color: var(--white);
    font-size: 12px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

[data-tooltip]:hover::after {
    opacity: 1;
}


/* ===================================
   SON - PERFORMANS OPTİMİZASYONU
   =================================== */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;                    /* Taşma kontrolü */
    height: auto;                       /* En-boy oranını koruma */
    display: block;                     /* Inline boşluklarını temizle */
}

/* GPU hızlandırma ve Render Optimizasyonu */
.sidebar,
.main-content,
.sidebar-toggle {
    will-change: transform;
    transform: translateZ(0);
}


/* ===================================
   UTILITY CLASSES
   =================================== */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.mt-1 {
    margin-top: 8px !important;
}

.mt-2 {
    margin-top: 16px !important;
}

.mt-3 {
    margin-top: 24px !important;
}

.mb-1 {
    margin-bottom: 8px !important;
}

.mb-2 {
    margin-bottom: 16px !important;
}

.mb-3 {
    margin-bottom: 24px !important;
}

.p-1 {
    padding: 8px !important;
}

.p-2 {
    padding: 16px !important;
}

.p-3 {
    padding: 24px !important;
}

/* Input hata durumu */
.input-error {
    border: 1.6px solid #fab2ad !important;         /* Hata durum çerçeve rengi */
    background-color: #feeceb !important;           /* Hata durum arka planı */
    animation: shake 0.5s;                            /* Dikkat çekici sarsıntı efekti */
}

/* Sayfa İçi Hata Bildirim Alanı */
.error-banner {
    display: none;                          /* Varsayılan gizli durum */
    margin-bottom: 20px;                    /* Alt öğelerle mesafe */
    padding: 12px 16px;                     /* Bilgi alanı iç boşluğu */
    background: #fff9e6;                  /* Uyarı sarısı arka plan */
    border-left: 5px solid #ffe699;       /* Sol vurgu çizgisi */
    color: #6d6d6d;                       /* Metin rengi */
    border-radius: 6px;                     /* Köşe yumuşatma */
    font-size: 13px;                        /* Metin ölçeklendirmesi */
    font-weight: 600;                       /* Vurgulu metin */
    font-family: 'Gilroy', sans-serif;      /* Kurumsal font ailesi */
    box-shadow: var(--shadow-light);        /* Hafif derinlik gölgesi */
}

.error-banner.visible {
    display: block;
    animation: slideDownFade 0.3s ease-out;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
        /* Sarsıntı ekefti (Sağ) */
    }
}

/* Giriş İpucu Yazısı */
.input-hint {
    display: block;                 /* Blok seviyesinde yerleşim */
    margin-top: 4px;                /* Üstteki elemandan ayrım */
    font-size: 11px;                /* Yardımcı metin boyutu */
    color: var(--medium-gray);      /* İkincil metin rengi */
    font-weight: 500;               /* Orta ağırlıkta font */
}


/* ===================================
   BİRİM SEÇİM PANELİ 
   =================================== */

.unit-selector-panel {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 2px solid #BAE6FD;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

.unit-selector-panel h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--flowmaxi-red);
    margin-bottom: 16px;                    /* Başlık altı boşluk */
    text-transform: uppercase;              /* Büyük harf */
    letter-spacing: 0.5px;                  /* Harf aralığı */
    display: flex;                          /* Esnek yerleşim */
    align-items: center;                    /* Dikey ortalama */
    gap: 8px;                               /* İkon ve yazı arası */
}

.unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.unit-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.unit-item label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.unit-item select {
    width: 100%;                                /* Tam genişlik */
    padding: 8px 10px;                          /* İç boşluk */
    background: var(--white);                   /* Beyaz arka plan */
    border: 2px solid var(--light-gray);        /* Çerçeve */
    border-radius: 4px;                         /* Köşe yuvarlama */
    color: var(--text-dark);                    /* Yazı rengi */
    font-size: 12px;                            /* Yazı boyutu */
    font-weight: 600;                           /* Yarı kalın yazı */
    cursor: pointer;                            /* Tıklanabilir */
    transition: all 0.2s ease;                  /* Hover animasyonu */
}

.unit-item select:hover {
    border-color: var(--flowmaxi-red);
}

.unit-item select:focus {
    outline: none;
    border-color: var(--flowmaxi-red);
    box-shadow: 0 0 0 3px rgba(139, 25, 22, 0.1);
}


/* ===================================
   RESPONSIVE - BİRİM PANELİ
   =================================== */

@media (max-width: 1024px) {
    .unit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .unit-selector-panel {
        padding: 16px;
    }

    .unit-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .unit-selector-panel h4 {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .unit-selector-panel {
        padding: 12px;
    }

    .unit-item label {
        font-size: 10px;
    }

    .unit-item select {
        padding: 6px 8px;
        font-size: 11px;
    }
}

/* Gelişmiş Seçenekler Bölümü */
.advanced-toggle {
    display: flex;                      /* Esnek hizalama */
    align-items: center;                /* Dikey ortalama */
    justify-content: space-between;     /* Başlık ve ikon arası boşluk */
    padding: 12px 16px;                 /* İç içerik alanı */
    background: #f8f9fa;              /* Nötr arka plan */
    border: 1px solid #e9ecef;        /* İnce ayırıcı çerçeve */
    border-radius: 8px;                 /* Köşe yumuşatma */
    margin: 15px 0;                     /* Bloklar arası mesafe */
    cursor: pointer;                    /* Etkileşim göstergesi */
    transition: all 0.3s ease;          /* Durum değişim animasyonu */
    font-size: 14px;                    /* Başlık metin boyutu */
    font-weight: 600;                   /* Vurgulu metin ağırlığı */
    color: var(--text-dark);            /* Metin hiyerarşisi rengi */
}

.advanced-toggle:hover {
    background: #f1f3f5;
    border-color: var(--flowmaxi-red);
}

.advanced-toggle i {
    transition: transform 0.3s ease;            /* İkon dönüş animasyonu */
    color: var(--flowmaxi-red);                 /* İkon kurumsal vurgu rengi */
}

.advanced-toggle.active i {
    transform: rotate(180deg);                  /* Aktif durumda ikonu ters çevir */
}

.advanced-content {
    display: none;                          /* Varsayılan kapalı durum */
    padding: 20px;                          /* Panel iç boşluğu */
    background: #ffffff;                  /* Panel zemin rengi */
    border: 1px solid #e9ecef;            /* Sınır belirleyici çerçeve */
    border-radius: 8px;                     /* Köşe radüsü */
    margin-bottom: 20px;                    /* Alt içerikten ayrım */
    animation: slideDown 0.3s ease-out;     /* Panel açılış animasyonu */
}

.advanced-content.visible {
    display: block;                         /* Script tetiklemesiyle görünürlük kazandır */
}

@keyframes slideDown {
    from {
        opacity: 0;                         /* Animasyon başlangıcı: Şeffaf */
        transform: translateY(-10px);       /* Animasyon başlangıcı: Üst konum */
    }

    to {
        opacity: 1;                         /* Animasyon bitişi: Opak */
        transform: translateY(0);           /* Animasyon bitişi: Doğal konum */
    }
}

.form-grid {
    display: grid;                              /* İkili ızgara sistemi */
    grid-template-columns: repeat(2, 1fr);      /* 2 sütunlu eşit yerleşim */
    gap: 15px;                                  /* Komponentler arası güvenlik boşluğu */
}

@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;             /* Dar ekranlarda tek sütunlu linear yerleşim */
    }
}