/* ==========================================================
   FLOWMAXI VALVE SIZING - KATALOG TASARIMI
   Gilroy Font Family | Kurumsal Kırmızı Renk Paleti
   ========================================================== */

/* ===================================
   FONT FACE TANIMLARI - GILROY
   =================================== */
@font-face {                                                                    /* Gilroy font ailesi tanımı */
    font-family: 'Gilroy';                                                      /* Fontun CSS içinde kullanılacak ad */
    src: url('../assets/fonts/Gilroy-Light.ttf') format('truetype');              /* Font dosyasının yolu ve tipi */
    font-weight: 300;                                                           
    font-style: normal;                                                         /* Normal (italik değil) stil */
}

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

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

@font-face {
    font-family: 'Gilroy';                                                      /* Gilroy font ailesi */
    src: url('../assets/fonts/Gilroy-SemiBold.ttf') format('truetype');           /* Font dosyasının yolu ve tipi */
    font-weight: 600;                                                           /* SemiBold kalınlık*/
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';                                                      /* Gilroy font ailesi */
    src: url('../assets/fonts/Gilroy-Bold.ttf') format('truetype');               /* Font dosyasının yolu ve tipi */
    font-weight: 700;                                                           /* Bold Kalınlık*/
    font-style: normal;
}


/* ===================================
   CSS VARIABLES - FLOWMAXI CATALOG
   =================================== */

/* Global değişkenler (tüm sayfa için) */
:root {                                                                        

    /* Flowmaxi Kurumsal Renkler (Katalogtan) */
    --flowmaxi-red: #8B1916;                                                  /* Ana kurumsal kırmızı renk*/
    --flowmaxi-dark-red: #6E1614;                                             /* Daha koyu kırmızı */
    --flowmaxi-accent: #C42D2A;                                               /* Vurgu kırmızısı */
    
    /* Neutral Renkler */
    --white: #FFFFFF;                                                         /* Beyaz renk */
    --light-bg: #F5F5F5;                                                      /* Açık gri arka plan rengi */
    --light-gray: #E8E8E8;                                                    /* Açık gri çizgiler */
    --medium-gray: #CCCCCC;                                                   /* Orto gri */
    --dark-gray: #666666;                                                     /* Koyu gri metin rengi */
    --text-dark: #2C2C2C;                                                     /* Ana metin rengi */
    
    /* Status Colors */
    --success: #2D7A4F;                                                       /* Başarı rengi (yeşil) */
    --success-hover: #236140;                                                 /* Başarı hover */
    --warning: #FFC107;                                                       /* Uyarı rengi (sarı) */
    --danger: #DC3545;                                                        /* Hata rengi (kırmızı) */
    --info: #17A2B8;                                                          /* Bilgi rengi (mavi) */

    /* 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);                           /* Yoğun gölge */
}


/* ===================================
   GLOBAL RESET
   =================================== */
   /* Tüm HTML elemanlarını seç */
* {                                             
    margin: 0;                                  /* Varsayılan dış boşlukları sıfırla */
    padding: 0;                                 /* Varsayılan iç boşlukları sıfırla */
    box-sizing: border-box;                     /* Padding + border genişliğe dahil */
}

body {
    /* Sayfanın ana fontu */
    font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 

    color: var(--text-dark);                    /* Varsayılan yazı rengi */
    line-height: 1.6;                           /* Satır aralığı */
    min-height: 100vh;                          /* Sayfa en az ekran yüksekliği kadar */
    font-weight: 400;                           /* Normal font kalınlığı */
    position: relative;                         /* Pseudo-elementler için referans */
    overflow-x: hidden;                         /* Yatay taşmayı engeller */
    
    /* Görseldeki gibi daha belirgin gri tonları */
    background: 
        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%);
}

/* Büyük yumuşak dalgalı çizgiler - katalog stili */
body::before {
    content: '';                                /* Pseudo-element oluştur */
    position: fixed;                            /* Sayfa kayarken sabit dur */
    top: -20%;
    left: -20%;
    right: -20%;
    bottom: -20%;
   
    background: 
        /* Üst sol büyük dalga - daha koyu */
        radial-gradient(
            ellipse 1000px 600px at 20% 15%,
            rgba(200, 200, 200, 0.4) 0%,
            rgba(220, 220, 220, 0.25) 35%,
            transparent 65%
        ),
        /* Orta sağ dalga - açık ton */
        radial-gradient(
            ellipse 1200px 700px at 80% 40%,
            rgba(240, 240, 240, 0.5) 0%,
            rgba(230, 230, 230, 0.3) 40%,
            transparent 70%
        ),
        /* Alt orta büyük dalga - orta ton */
        radial-gradient(
            ellipse 1400px 800px at 50% 85%,
            rgba(210, 210, 210, 0.45) 0%,
            rgba(225, 225, 225, 0.28) 45%,
            transparent 75%
        ),
        /* Sol alt dalga - koyu */
        radial-gradient(
            ellipse 900px 550px at 15% 95%,
            rgba(195, 195, 195, 0.38) 0%,
            rgba(215, 215, 215, 0.22) 48%,
            transparent 68%
        ),
        /* Sağ üst köşe - açık */
        radial-gradient(
            ellipse 850px 500px at 90% 10%,
            rgba(235, 235, 235, 0.42) 0%,
            rgba(225, 225, 225, 0.25) 45%,
            transparent 70%
        ),
        /* Sol orta - orta koyu */
        radial-gradient(
            ellipse 700px 450px at 10% 50%,
            rgba(205, 205, 205, 0.35) 0%,
            rgba(220, 220, 220, 0.2) 50%,
            transparent 75%
        );

    pointer-events: none;                       /* Tıklanmayı engellemez */
    z-index: 0;                                 /* En arkada kal */
    filter: blur(80px);                         /* Bulanıklık efekti */
    opacity: 1;
}


/* ===================================
   BODY AFTER (İNCE DOKU)
   =================================== */

/* İnce diagonal çizgiler - doku için */
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
        ),

        repeating-linear-gradient(
            -35deg,
            transparent,
            transparent 450px,
            rgba(255, 255, 255, 0.08) 450px,
            rgba(255, 255, 255, 0.08) 460px
        );

    pointer-events: none;
    z-index: 0;
    opacity: 0.9;                                /* Hafif görünürlük */
}


/* ===================================
   CONTAINER
   =================================== */
.container {
    max-width: 1400px;                           /* İçeriğin max genişliği */
    margin: 0 auto;                              /* Ortala */
    padding: 0 24px;                             /* Sağ - sol boşluk */
    position: relative;                          /* Arka planın üstünde */
    z-index: 1;
}


/* ===================================
   HEADER - KATALOG STILINDE
   =================================== */
.header {
    /* Üstten alta doğru açık renkli degrade arka plan */
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);

    padding: 32px 0;                                        /* Üst - alt iç boşluk */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);           /* Header'a hafif gölge vererek sayfadan ayır */
    border-bottom: 3px solid var(--flowmaxi-red);           /* Alt kısımda kurumsal kırmızı çizgi */
    position: relative;                                     /* İç pseudo-element veya z-index için referans */
    margin-bottom: 40px;                                    /* Header ile içerik arasında boşluk */
    z-index: 2;                                             /* Arka plan efektlerinin üzerinde kalması için */
}

.header .container {
    display: flex;                                          /* Logo ve bilgileri yatay hizala*/ 
    justify-content: space-between;                         /* Sağa ve sola yay */
    align-items: center;                                    /* Dikey ortala */
}

.logo {
    display: flex;                                          /* Logo içeriğini flex yap */
    flex-direction: column;                                 /* Logo ve sloganı dikey diz */
    gap: 8px;                                               /* Elemanlar arasında boşluk */
    align-items: flex-start;                                /* Sola hizala */
}

.logo-img {
    height: 140px;                                          /* Logo yüksekliği */
    width: auto;                                            /* Oranı koru */
    object-fit: contain;                                    /* Görseli taşırmadan sığdır */
    max-width: 360px;                                       /* Görselin çok genişlemesini engelle */
}

.tagline {
    font-size: 13px;                                        /* Küçük slogan yazı boyutu */
    font-weight: 700;                                       /* Kalın yazı */
    letter-spacing: 3px;                                    /* Harfler arası boşluk */
    color: var(--flowmaxi-red);                             /* Kurumsal kırmızı renk */
    text-transform: uppercase;                              /* Büyük harf */
    margin-top: 6px;                                        /* Logo ile arası */
    text-align: left;                                       /* Sola hizala */
}

.header-info {
    text-align: right;                                      /* Metinleri sağa hizala */
    display: flex;                                          /* İçeriği flex yap*/
    flex-direction: column;                                 /* Başlık ve açıklamayı dikey diz */
    justify-content: center;                                /* Dikey ortala */
    align-items: flex-end;                                  /* Sağa yasla */
}

.header-info h2 {
    font-size: 26px;                                        /* Ana başlık boyutu */
    font-weight: 700;                                       /* Kalın başlık */
    color: var(--text-dark);                                /* Koyu metin rengi */
    margin-bottom: 6px;                                     /* Alt boşluk */
    letter-spacing: 0.5px;                                  /* Hafif harf aralığı */
}

.header-info p {
    font-size: 14px;                                        /* Alt açıklama yazı boyutu */
    font-weight: 500;                                       /* Orta kalınlık */
    color: var(--dark-gray);                                /* Gri ton*/
    letter-spacing: 0.5px;
}


/* ===================================
   CARD SYSTEM - KATALOG TARZINDA
   =================================== */
.card {
    background: var(--white);                               /* Kart arka planı */
    border-radius: 8px;                                     /* Yuvarlatılmış köşeler */
    padding: 32px;                                          /* İç boşluk */
    margin-bottom: 24px;                                    /* Kartlar arası boşluk */
    box-shadow: var(--shadow-light);                        /* Hafif gölge */
    border: 1px solid #E5E5E5;                            /* İnce çerçeve */
    transition: all 0.3s ease;                              /* Hover animayonu */
    position: relative; 
    z-index: 1;
}

.card:hover {
    box-shadow: var(--shadow-medium);                       /* Hover'da daha belirgin gölge */
    transform: translateY(-2px);                            /* Hafif yukarı çıkma efekti */
}

.card h3 {
    color: var(--flowmaxi-red);                             /* Başlık rengi */
    margin-bottom: 24px;                                    /* Alt boşluk */
    font-size: 18px;                                        /* */
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding-bottom: 12px;                                   /* Alt çizgi ie yazı arası boşluk */
    border-bottom: 2px solid var(--light-gray);             /* Başlık altı ayırıcı çizgi */
}


/* ===================================
   TEMİZLE BUTONU (YENİ)
   =================================== */
.btn-clear {
    padding: 8px 20px;
    background: transparent;
    border: 2px solid var(--flowmaxi-red);
    border-radius: 6px;
    color: var(--flowmaxi-red);
    font-size: 11px;
    font-weight: 700;
    font-family: 'Gilroy', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-clear:hover {
    background: var(--flowmaxi-red);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139, 25, 22, 0.2);
}

.btn-clear:active {
    transform: translateY(0);
}


/* ===================================
   INFO BOX
   =================================== */
.info-box {
    /* Bilgi kutusu için yumuşak mavi degrade arka plan */
    background: linear-gradient(135deg, #E8F4F8 0%, #D4EAF0 100%); 

    border-left: 4px solid var(--info);                     /* Sol tarafta bilgi rengiyle vurgu çizgisi */
    padding: 14px 18px;                                     /* iç boşluk ( alt-üst / sağ-sol ) */
    border-radius: 6px;                                     /* Köşeleri yuvarlatır */
    margin-bottom: 20px;                                    /* Altındaki satır arası boşluk*/
    font-size: 13px;                                        /* Yazı boyutu */
    font-weight: 500;                                       /* Orta kalınlık */
    color: var(--text-dark);                                /* Ana metin rengi */
}

.info-box strong {
    color: var(--info);                                     /* Strong etiketlerini info rengi yap */
    font-weight: 700;                                       /* Daha kalın göster */
}


/* ===================================
   FORM ELEMENTS - KATALOG STILI
   =================================== */
.form-grid {
    display: grid;                                                  /* Form elemanlarını grid sistemine al */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));    /* Ekran genişliğine göre otomatik sütun oluştur. */
    gap: 20px;                                                      /* Alanlar arası boşluk */
    margin-bottom: 20px;                                            /* Formun altında boşluk */
}

.form-group {
    display: flex;                                                   /* Label ve input verilerini flex yap */
    flex-direction: column;                                          /* Alt alta diz */
    gap: 8px;                                                        /* Label ve input arasında boşluk */
}

.form-group label {
    font-weight: 600;                                                /* Label yazısını yarı kalın yap */
    font-size: 13px;                                                 /* Label yazı boyutu */
    color: var(--text-dark);                                         /* Koyu metin rengi */
    letter-spacing: 0.3px;                                           /* Hafif harf aralığı */
    text-transform: uppercase;                                       /* Büyük harfli etiket */
}

.required {
    color: var(--flowmaxi-red);                         /* Zorunlu alan yıldızlarını (simgelerini) kırmızı yap */
    font-weight: 700;                                   /* Dikkat çekmesi için kalın */
}

.auto-label {
    color: var(--info);                                 /* Otomatik alan etiketi için bilgi rengi */
    font-size: 11px;                                    /* Daha küçük yazı */
    font-weight: 600;                                   /* Yarı kalın */
    text-transform: lowercase;                          /* Küçük harf */
    transition: opacity 0.3s ease;
}

/* Manuel modda otomatik yazılarını gizle */
.auto-label.hidden {
    opacity: 0;
    visibility: hidden;
}

.form-group input,
.form-group select {
    padding: 12px 14px;                                  /* Input iç boşluk */ 
    border: 2px solid var(--light-gray);                 /* Varsayılan çerçeve */
    border-radius: 6px;                                  /* Yuvarlatılmış köşe */
    font-size: 14px;                                     /* Yazı boyutu */
    font-family: 'Gilroy', sans-serif;                   /* Kurumsal font */
    font-weight: 500;                                    /* Orta kalınlık */
    transition: all 0.2s ease;                           /* Focus geçiş animasyonu */
    background: var(--white);                            /* Arka plan */
    color: var(--text-dark);                             /* Yazı rengi */
}

.form-group input:focus,
.form-group select:focus {
    outline: none;                                        /* Tarayıcı varsayılan focus çizgisini kaldırır */
    border-color: var(--flowmaxi-red);                    /* Focus olunca kırmızı çerçeve */
    box-shadow: 0 0 0 3px rgba(139, 25, 22, 0.1);       /* Focus glow efekti */
}

.form-group input::placeholder {
    color: var(--medium-gray);                            /* Placeholder rengi */
    font-weight: 400;                                     /* Normal kalınlık */
}


/* ===================================
   TABS - KATALOG TASARIMI
   =================================== */
.tabs {
    display: flex;                                              /* Sekmeleri yatay diz */
    gap: 8px;                                                   /* Sekmeler arası boşluk */
    margin-bottom: 24px;                                        /* Alt içerik ile mesafe */
    border-bottom: 2px solid var(--light-gray);                 /* Sekme alt çizgisi */
}

.tab-btn {
    padding: 12px 32px;                                         /* Sekme içi boşluk */
    background: transparent;                                    /* Arka plan yok (transparan) */
    border: none;                                               /* Kenarlık yok */
    border-bottom: 3px solid transparent;                       /* Aktif sekme için yer tutucu */
    cursor: pointer;                                            /* Tıklanabilir imleç */
    font-weight: 700;                                           /* Kalın yazı */
    font-size: 13px;                                            /* Sekme yazı boyutu */
    font-family: 'Gilroy', sans-serif;                          /* Kurumsal font */
    color: var(--dark-gray);                                    /* Varsayılan renk */
    transition: all 0.3s ease;                                  /* Hover animasyonu */
    letter-spacing: 1px;                                        /* Harf aralığı */
    text-transform: uppercase;                                  /* Büyük harf */
    margin-bottom: -2px;                                        /* Alt çizgiyle hizala */
}

.tab-btn:hover {
    color: var(--flowmaxi-red);                                 /* Hover rengi */
    background: rgba(139, 25, 22, 0.05);                      /* Hafif arka plan */
}

.tab-btn.active {
    color: var(--flowmaxi-red);                                 /* Aktif sekme rengi */
    border-bottom-color: var(--flowmaxi-red);                   /* Aktif alt çizgi */
    background: transparent;
}

.tab-content {
    display: none;                                              /* Varsayılan olarak gizli */ 
    animation: fadeIn 0.3s ease;                                /* Açılırken animasyon */
}

.tab-content.active {
    display: block;                                             /* Aktif sekme içeriği görünür */
}

@keyframes fadeIn {
    from { 
        opacity: 0;                                             /* Başlangıçta görünmez (gizli) */
        transform: translateY(-10px);                           /* Yukarıdan gelir */
    }

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


/* ===================================
   BUTTONS - KATALOG STILI
   =================================== */
.btn-primary,
.btn-success {
    padding: 14px 40px;                                     /* Butonun iç boşlukları (yükseklik - genişlik ) */
    border: none;                                           /* Varsayılan kenarlıkları kaldır */
    border-radius: 6px;                                     /* Yuvarlatılmış köşeler */
    font-size: 14px;                                        /* Yazı boyutu */
    font-weight: 700;                                       /* Kalın yazı */
    font-family: 'Gilroy', sans-serif;                      /* Kurumsal font */
    cursor: pointer;                                        /* Üzerine gelince el işareti */
    transition: all 0.3s ease;                              /* Hover animasyonları için yumuşak geçiş */
    text-transform: uppercase;                              /* Yazıyı büyük harflere çevir */
    letter-spacing: 1.5px;                                  /* Harfler arası boşluk */
    box-shadow: var(--shadow-light);                        /* Hafif gölge efekti */
}

.btn-primary {
    background: var(--flowmaxi-red);                        /* Ana buton arka plan rengi */ 
    color: var(--white);                                    /* Yazı rengi */
    width: 100%;                                            /* Bulunduğu alanın tamamını kapla */
    margin-top: 16px;                                       /* Üstten boşluk */
}

.btn-primary:hover {
    background: var(--flowmaxi-dark-red);                   /* Hover durumunda daha koyu kırmızı*/
    transform: translateY(-2px);                            /* Hafif yukarı kalkma efekti */
    box-shadow: var(--shadow-medium);                       /* Daha belirgin gölge */
}

.btn-success {
    /* Yeşil tonlarda degrade arka plan */
    background: linear-gradient(135deg, var(--success), var(--success-hover)); 

    color: var(--white);                                    /* Yazı rengi */
    width: 100%;                                            /* Tam genişlik */
    margin-top: 24px;                                       /* Üst boşluk */
}

.btn-success:hover {
    /* Hover durumunda koyulaşan yeşil renk*/
    background: linear-gradient(135deg, var(--success-hover), #1a4d33);
    transform: translateY(-2px);                            /* Yukarı çıkma efekti */
    box-shadow: var(--shadow-medium);                       /* Güçlü gölge */
}


/* ===================================
   CONTROL TYPE VISUAL
   =================================== */
#kontrolTipiGorselWrapper {
    display: flex;                                          /* İçeriği flex sistemine al */
    justify-content: center;                                /* Görseli yatayda ortala */
    margin-top: 24px;                                       /* Üst boşluk */
    padding: 20px;                                          /* İç boşluk */
    background: var(--light-bg);                            /* Açık arka plan */
    border-radius: 8px;                                     /* Yuvarlatılmış köşeler */
    border: 1px solid var(--light-gray);                    /* İnce çerçeve */
}

#kontrolTipiGorsel {
    max-width: 600px;                                       /* Görselin maksimum genişliği */
    width: 100%;                                            /* Responsive davranış */
    height: auto;                                           /* Oranı koru */
    border-radius: 6px;                                     /* Yuvarlatılmış köşeler */
}

/* ===================================
   ACCESSORIES
   =================================== */
.gorsel-wrapper {
    margin-top: 12px;                                        /* Üst boşluk */
    text-align: center;                                      /* Görseli ortalar */
    padding: 12px;                                           /* İç boşluk */
    background: var(--light-bg);                             /* Açık arka plan */
    border-radius: 6px;                                      /* Yuvarlatılmış köşeler */
}

.gorsel-wrapper img {
    max-width: 280px;                                        /* Görselin maksimum genişliği */
    height: auto;                                            /* Oranı koru */
    border-radius: 6px;                                      /* Yumuşatılmış köşeler */
}


/* ===================================
   RESULT SPACER (SONUÇLAR ARASI BOŞLUK)
   =================================== */

/* Ürün özellikleri tablosu ile diğer sonuç panelleri arasına boşluk ekler */
.result-spacer {
    width: 100%;                                /* Tam genişlik */
    height: 40px;                               /* Dikey boşluk yüksekliği */
    margin: 32px 0;                             /* Üst ve alt margin */
    clear: both;                                /* Float temizliği */
    visibility: visible;                        /* Görünür yap */
}


/* ===================================
   RESULTS - KATALOG TARZINDA
   =================================== */
.results-card {
    border-top: 4px solid var(--success);                    /* Üstten başarı vurgusu çizgisi */
    animation: slideIn 0.5s ease;                            /* Kartın aşağıdan yukarı giriş animasyonu */
    padding: 32px;                                           /* İç boşluk artırıldı */
}

@keyframes slideIn {
    from { 
        opacity: 0;                                          /* Başlangıç görünmez */
        transform: translateY(30px);                         /* Aşağıdan başlar */
    }
    to { 
        opacity: 1;                                          /* Tam görünüm */
        transform: translateY(0);                            /* Normal konum  */
    }
}

.result-highlight {
    display: grid;                                                  /* Öne çıkan sonuçlar için grid yapısı */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));    /* Ekrana göre otomatik kolon */
    gap: 16px;                                                      /* Kartlar arası boşluk */
    margin-bottom: 32px;                                            /* ALt boşluk */
}

.result-item {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F8F8 100%);       /* Hafif degrade arka plan */
    padding: 20px;                                                           /* İç boşluk */
    border-radius: 8px;                                                      /* Yuvarlak köşeler */
    text-align: center;                                                      /* Ortalanmış metin */
    border: 2px solid var(--light-gray);                                     /* İnce çerçeve */
    transition: all 0.3s ease;                                               /* Hover animasyonu */
}

.result-item:hover {
    transform: translateY(-4px);                                    /* Hover'da yukarı kalkar */
    box-shadow: var(--shadow-medium);                               /* Belirgin gölge */
    border-color: var(--flowmaxi-red);                              /* Vurgu rengi */
}

.result-item .label {
    display: block;                                                 /* Satır olarak davranır */
    font-size: 11px;                                                /* Küçük etiket yazısı */
    font-weight: 700;                                               /* Kalın yazı */
    color: var(--dark-gray);                                        /* Gri ton */
    margin-bottom: 10px;                                            /* Alt boşluk */
    text-transform: uppercase;                                      /* Büyük harf */
    letter-spacing: 1px;                                            /* Harf aralığı */
}

.result-item .value {
    display: block;                                                 /* Satır bazlı */
    font-size: 28px;                                                /* Büyük değer yazısı */
    font-weight: 700;                                               /* Kalın yazı */
    color: var(--flowmaxi-red);                                     /* Kırmızı vurgu */
    line-height: 1.2;                                               /* Satır yüksekliği */
}

.result-grid {
    display: grid;                                                      /* Sonuç bölümleri için grid */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));        /* Responsive kolon yapısı */
    gap: 24px;                                                          /* Bölümler arası boşluk */
    margin-bottom: 20px;                                                /* Alt boşluk */
    padding: 0 8px;                                                     /* Yatay iç boşluk eklendi */
}

.result-section {
    padding: 24px;                                                      /* İç boşluk */
    background: var(--light-bg);                                        /* Açık arka plan */
    border-radius: 8px;                                                 /* Yuvarlatılmış köşeler */
    border-left: 4px solid var(--flowmaxi-red);                         /* Sol vurgu çizgisi */
    box-shadow: var(--shadow-light);                                    /* Hafif gölge eklendi */
    transition: all 0.3s ease;                                          /* Hover animasyonu */
    
}

 /* Hover efekti */
.result-section:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.result-section.full-width {
    grid-column: 1 / -1;                                                /* Tüm grid genişliğini kaplar */
    margin: 0 8px;                                                      /* Yatay margin eklendi */
}

.result-section h4 {
    color: var(--dark-gray);                                            /* Başlık rengi */
    margin-bottom: 16px;                                                /* Alt boşluk */
    font-size: 15px;                                                    /* Başlık boyutu */
    font-weight: 700;                                                   /* Kalın yazı */
    text-transform: uppercase;                                          /* Büyük harf */
    letter-spacing: 0.5px;
    padding-bottom: 8px;                                                /* Alt padding eklendi */
    border-bottom: 2px solid rgba(139, 25, 22, 0.1);                  /* Alt çizgi eklendi */
}

.result-section p {
    margin-bottom: 10px;                                                /* Satırlar arası boşluk */
    font-size: 13px;                                                    /* Metin boyutu */
    font-weight: 500;                                                   /* Orta kalınlık */
    color: var(--text-dark);
    line-height: 1.6;                                                   /* Satır yüksekliği artırıldı*/
}

.highlight-text {
    color: var(--flowmaxi-red);                                         /* Vurgu rengi */
    font-weight: 700;                                                   /* Kalın yazı */
    font-size: 15px;
}

.product-code {
    font-family: 'Gilroy', sans-serif;                                  /* Kod görünmesi için font*/

    /* Kırmızı degrade arka plan */
    background: linear-gradient(135deg, var(--flowmaxi-red), var(--flowmaxi-dark-red));    

    color: #FFFFFF !important;                                            /* Beyaz yazı rengi */
    padding: 28px;                                                          /* Yazı boyutu */
    border-radius: 6px;                                                     /* Yuvarlatılmış köşeler */
    font-size: 32px;                                                        /* Daha büyük kod yazısı */
    font-weight: 800;                                                       /* Daha kalın */
    text-align: center;                                                     /* Ortalanma yazı */
    word-break: break-all;                                                  /* Uzun kodların satır kayması*/
    letter-spacing: 2.5px;                                                  /* Harf aralığı */
    line-height: 1.7;                                                       /* Satır yüksekliği */
    box-shadow: 0 4px 12px rgba(139, 25, 22, 0.3);                        /* Gölge */
}


/* ===================================
   PRODUCT FEATURES TABLE
   =================================== */

/*  Ürün özellikleri bölümü - ekstra boşluk */
#product-features-section {
    margin-bottom: 40px !important;                         /* Alt boşluk zorla */
    padding-bottom: 24px;                                   /* İç boşluk */
}

/* Ürün özellikleri tablosunun ana kapsayıcısı */
.product-features-table {                                  
    display: grid;                                          /* İçeriği CSS Grid düzenine al */
    grid-template-columns: repeat(2, 1fr);                  /* 2 adet eşit genişlikte sütun oluştur */
    gap: 1px;                                               /* Hücreler arası 1px boşluk (çizgi efekti) */
    background: var(--medium-gray);                         /* Hücre arasındaki çizgi rengini belirle */
    border-radius: 6px;                                     /* Tablo köşelerini yuvarla */
    overflow: hidden;                                       /* Taşan içeriği gizle */
    margin-top: 16px;                                       /* Üsttennboşluk bırak */
    box-shadow: var(--shadow-light);                        /* Gölge eklendi */
}

/* Özellik adlarını gösteren hücreler */
.feature-label {                                            
    background: #E8E8E8;                                  /* Etiket hücresinin arka plan rengi */
    padding: 14px 18px;                                     /* İç boşluk (dikey / yatay) */
    font-weight: 700;                                       /* Kalın yazı */
    color: var(--text-dark);                                /* Yazı rengi */
    font-size: 12px;                                        /* Yazı boyutu */
    text-transform: uppercase;                              /* Tüm harfleri büyüğe çevir */
    letter-spacing: 0.5px;                                  /* Harfler arası boşluk */
}

/* Özellik değerlerini gösteren hücreler */
.feature-value {                                            
    background: var(--white);                               /* Beyaz arka plan */
    padding: 14px 18px;                                     /* İç boşluk */
    font-size: 13px;                                        /* Yazı boyutu */
    font-weight: 600;                                       /* Yarı kalın yazı*/
    color: var(--text-dark);                                /* Yazı rengi */
}


/* ===================================
   LOADING & ERROR
   =================================== */

/* Yükleniyor alanı kapsayıcısı */
.loading {                                                  
    text-align: center;                                     /* İçeriği ortala */
    padding: 40px;                                          /* İç boşluk */
    background: var(--white);                               /* Arka plan rengi */
    border-radius: 8px;                                     /* Köşeleri yuvarla */
    margin: 20px 0;                                         /* Üstten ve alttan boşluk */
    box-shadow: var(--shadow-light);                        /* Hafif gölge efekti*/
}

/* Yükleniyor efekti */
.spinner {                                                  
    border: 4px solid var(--light-gray);                    /* Dış çember rengi */
    border-top: 4px solid var(--flowmaxi-red);              /* Üst kısım (dönen kısım) rengi */
    border-radius: 50%;                                     /* Daire şekli */
    width: 50px;                                            /* Genişlik */
    height: 50px;                                           /* Yükseklik */
    animation: spin 1s linear infinite;                     /* Sürekli dönen animasyon */
    margin: 0 auto 16px;                                    /* Ortala ve alt boşluk bırak */
}

/* Spinner dönme animasyonu */
@keyframes spin {                                           
    0% { transform: rotate(0deg); }                         /* Başlangıç açısı */
    100% { transform: rotate(360deg); }                     /* Tam tur döndürür */
}

/* Yükleniyor yazısı */
.loading p {                                                
    font-size: 14px;                                        /* Yazı boyutu */
    font-weight: 600;                                       /* Yazı kalınlığı */
    color: var(--dark-gray);                                /* Yazı rengi */
    letter-spacing: 0.5px;                                  /* Harf aralığı */
}

/* Hata mesajı kutusu */
.error-message {                                            
    background: #FFE5E5;                                  /* Açık kırmızı arka plan */
    color: #A30000;                                       /* Koyu kırmızı yazı rengi */
    padding: 14px 18px;                                     /* İç boşluk */
    border-radius: 6px;                                     /* Köşeleri yuvarla */
    border-left: 4px solid var(--danger);                   /* Sol tarafta vurgu çizgisi */
    margin: 20px 0;                                         /* Üst-alt boşluk */
    font-weight: 600;                                       /* Yazı kalınlığı */
    font-size: 13px;                                        /* Yazı boyutu */
    animation: shake 0.5s;                                  /* Titreme animasyonu */
}

/* Hata titreme animasyonu */
@keyframes shake {                                          
    0%, 100% { transform: translateX(0); }                  /* Normal konum */
    25% { transform: translateX(-8px); }                    /* Sola kaydır */
    75% { transform: translateX(8px); }                     /* Sağa kaydır */
}


/* ===================================
   FOOTER
   =================================== */
/* Sayfa alt bilgi alanı */
.footer {                                                                   
    background: linear-gradient(180deg, #F5F5F5 0%, #ECECEC 100%);      /* Dikey gradyan */
    border-top: 3px solid var(--flowmaxi-red);                              /* Üst kırmızı çizgi */
    color: var(--text-dark);                                                /* Yazı rengi */
    text-align: center;                                                     /* Ortalanmış içerik */
    padding: 20px 0;                                                        /* Dikey iç boşluk */
    margin-top: 40px;                                                       /* Üstten boşluk */
    font-weight: 500;                                                       /* Yazı kalınlığı */
    font-size: 13px;                                                        /* Yazı boyutu */
}

/* Footer içindeki linkler */
.footer a {                                                                 
    color: var(--flowmaxi-red);                                             /* Link rengi */
    text-decoration: none;                                                  /* Alt çizgiyi kaldırır */
    font-weight: 700;                                                       /* Kalın yazı */
    border-bottom: 1px solid transparent;                                   /* Hover için hazır çizgi */
    transition: border-color 0.3s ease;                                     /* Yumuşak geçiş */
}

/* Footer link hover durumu */
.footer a:hover {                                                           
    border-bottom-color: var(--flowmaxi-red);                               /* Alt çizgiyi görünür yapar */
}


/* ===================================
   UTILITY CLASSES
   =================================== */

/* Başarı rengi */
.text-success {                                             
    color: var(--success) !important;                       /* Yeşil renk (öncelikli) */
    font-weight: 700;                                       /* Kalın yazı */
}

 /* Hata rengi */
.text-danger {                                             
    color: var(--danger) !important;                        /* Kırmızı renk */
    font-weight: 700;                                       /* Kalın yazı */
}

/* Uyarı rengi */
.text-warning {                                             
    color: var(--warning) !important;                       /* Sarı/turuncu renk */
    font-weight: 700;                                       /* Kalın yazı */
}

/* Gizleme yardımcı sınıfı */
.hidden {                                                   
    display: none !important;                               /* Elemanı tamamen gizler */
}


/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Desktop - Geniş Ekranlar */
@media (min-width: 769px) {
    .result-grid {
        gap: 28px;                              /* Desktop'ta daha fazla gap */
    }
    
    .result-section {
        padding: 28px;                          /* Desktop'ta daha fazla padding */
    }
    
    #product-features-section {
        margin-bottom: 48px !important;         /* Desktop'ta daha fazla boşluk */
    }
}

/* Tablet ve mobil ekranlar */
@media (max-width: 768px) {                                 
    .header .container {
        flex-direction: column;                             /* Elemanları lat alta diz */
        text-align: center;                                 /* Ortala */
        gap: 16px;                                          /* Elemanlar arası boşluk */
    }

    .header-info {
        text-align: center;                                 /* Başlık bilgilerini ortala */
    }

    .logo-img {
        height: 90px;                                       /* Logo yükekliğini küçült */
    }

    .form-grid { 
        grid-template-columns: 1fr;                         /* Formu tek sütuna düşür */
    }

    .result-highlight,
    .result-grid {
        grid-template-columns: 1fr;
        padding: 0;                                         /* Mobilde padding kaldırıldı */
    }

    .result-section {
        margin: 0;                                          /* Mobilde margin kaldırıldı */
    }

    .result-section.full-width {
        margin: 0;
    }

    .product-features-table {
        grid-template-columns: 1fr;                         /* Özellik tablosunu alt alta diz */
    }

    .btn-primary,
    .btn-success {
        padding: 12px 28px;                                 /* Buton iç boşluklarını küçültür */
        font-size: 13px;                                    /* Yazı boyutunu küçült */
    }

    .card {
        padding: 20px;                                      /* Kart iç boşlupunu azalt */
    }

    /* Mobilde spacer'ı küçült */
    .result-spacer {
        height: 24px;
        margin: 20px 0;
    }

    #product-features-section {
        margin-bottom: 32px !important;
    }
}

/* BORU HIZI RENKLENDİRME */
.speed-green { 
    color: #198754 !important; 
    font-weight: 700 !important;
}

.speed-orange { 
    color: #ffa600 !important; 
    font-weight: 700 !important;
}

.speed-red { 
    color: #dc3545 !important; 
    font-weight: 700 !important;
}