/* Google Font İthalatları */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');

/* Renk Paleti */
:root {
    /* Temel Renkler */
    --white: #ffffff; /* Beyaz - Zemin ve metin arka planı */
    --black: #13052c; /* Siyah - Ana metin ve kontrast */
    --gold: #FFD700; /* Altın - Vurgular ve dikkat çekici alanlar */

    /* Ana Tema Renkleri */
    --dark-blue: #5523dd; /* Koyu Mavi - Tema arka planları */
    --dark-orange: #e3dac9; /* Açık Turuncu - Yumuşak tematik tonlar */

    /* Ekstra Renk Tonları */
    --renk-1: #5523dd; /* Ana tema (Koyu Mavi) */
    --renk-2: #fdc129; /* Devamlılık için */
    --renk-3: #07a8a0; /* Sekonder ton (Mavi) */
    --renk-4: #A23C2A;
    --renk-metin: #2f223f; /* metinler (Mavi) */
    /* Kırmızımsı Kahverengi - Uyarılar ve vurgular */

    /* Uyarı ve Dikkat Tonları */
    --renk-dikkat: #e314a2; /* Dikkat alanları */
 

    --renk-create: #4390dd; /* Dikkat alanları */
    --renk-update: #20ba7f; /* Uyarı alanları */

    --renk-delete: #b63d05; /* Uyarı alanları */
    --renk-date-ekle: #1482e3; /* Dikkat alanları */
    --renk-date-guncelle: #47ad67; /* Uyarı alanları */
    --renk-date-normal: #3d51ab; /* Dikkat alanları */


    /* Diğer Değişkenler */
    --font-1: 'Roboto', sans-serif;
    --font-2: 'Montserrat', sans-serif;
    --font-3: 'Lobster', cursive;
    --font-4: 'Cairo', sans-serif;
    --spacing-small: 5px;
    --spacing-medium: 15px;
    --spacing-large: 30px;
}

/* Genel Stil */
body {
    font-family: var(--font-4);
    color: var(--dark-blue);
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Yardımcı Sınıflar */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-bold { font-weight: bold; }
.font-medium { font-weight: normal; }

/* Tipografi (Typography) */


/* Başlıklar için Montserrat */
h1, h2, h3 {
    font-family: 'Montserrat', sans-serif; /* Montserrat - Başlıklar için dikkat çekici */
}

/* Paragraflar için Open Sans */
p {
    font-family: 'Open Sans', sans-serif; /* Open Sans - Okunabilir paragraflar için */
}

/* Teknik ve Kod İçeriği için Oxygen */
code, pre {
    font-family: 'Oxygen', sans-serif; /* Oxygen - Teknik içerik ve kod parçaları */
}

/* Modern Etiket ve Kartlar için Rubik */
.card-title, .btn {
    font-family: 'Rubik', sans-serif; /* Rubik - Modern kart ve buton tasarımları */
}

/* Dekoratif Metinler için Lobster */
.slogan {
    font-family: 'Lobster', cursive; /* Lobster - Vurgulu ve dekoratif metinler */
}

/* Arapça ve Çok Dilli İçerik için Cairo */
.arabic-text {
    font-family: 'Cairo', sans-serif; /* Cairo - İki dilli tasarımlar için uygun */
}

/* Footer veya İkincil Metinler */
footer {
    font-family: 'Roboto', sans-serif; /* Roboto - Basit ve modern footer tasarımı */
    font-size: 0.9rem;
}

/* Metin Şekillendirme */
.text-manset, .text-baslik, .text-altbaslik, .text-arabaslik, .text-metin,
.text-metin-2, .text-kategori-baslik, .text-vurgu-normal-bold,
.text-vurgu-italik, .text-onay, .text-success, .text-listele-baslik-1,
.text-listele-baslik-2, .text-listele-baslik-3, .text-datetime-create,
.text-datetime-update, .text-datetime-normal {
    margin: 0px;
    padding: 0px;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

.text-altbaslik {
    color: var(--renk-metin);
}

.text-baslik {
    color: var(--renk-metin);
    font-size: 10px;
    text-align: center;
}

.text-metin-2 {
    padding: 5px;
    color: var(--renk-metin);
    font-size: 12px;
    text-align: center;
}

.text-vurgu-normal-bold {
    color: var(--renk-metin);
    font-size: x-small;
}

.text-vurgu-italik {
    color: var(--renk-metin);
    font-size: xx-small;
}

.text-dikkat {
    color: var(--renk-delete);
}

.text-onay {
    color: var(--renk-1);
    font-size: inherit;
}

.text-success {
    color: var(--renk-1);
    font-size: normal;
    font-weight: bold;
    text-align: left;
}

.text-listele-baslik-1 {
    color: var(--renk-metin);
    font-size: 10px;
    font-weight: bold;
}

.text-listele-baslik-2 {
    color: var(--renk-metin);
    font-size: 12px;
    font-weight: bold;
}

.text-listele-baslik-3 {
    color: var(--renk-metin);
    font-size: 14px;
    font-weight: bold;
}

.text-datetime-create {
    color: var(--renk-create);
    font-size: 10px;
    font-weight: bold;
}

.text-datetime-update {
    color: var(--renk-date-guncelle);
    font-size: 10px;
    font-weight: bold;
}

.text-datetime-normal {
    color: var(--renk-1);
    font-size: 10px;
    font-weight: bold;
}

/* Sınıf ve ID Tanımlamaları */
.logo-home-pozitif {
    margin-left: 20px;
    height: 90px;
}



/* Navbar Genel Ayarları */
.navbar {
    background-color: var(--dark-blue);
    padding: 10px 20px; /* Üst-alt 10px, sağ-sol 20px */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
    justify-content: space-between; /* Sağ-sol düzenli hizalama */
}

.navbar-brand {
    color: var(--dark-orange);
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-right: 15px;
}

    .navbar-brand img {
        margin-right: 10px;
        height: 50px;
        width: auto;
    }

/* Navbar Menü Öğeleri */
.navbar-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px; /* Menü öğeleri arasında çok fazla boşluk olmayacak */
    margin-left: auto;
}

    .navbar-nav .nav-item {
        margin: 0; /* Fazla boşluklar kaldırıldı */
    }

    .navbar-nav .nav-link {
        color: var(--dark-orange);
        font-size: 1rem;
        font-weight: 500;
        padding: 8px 12px; /* Üst-alt 8px, sağ-sol 12px */
        transition: color 0.3s ease, background-color 0.3s ease;
        text-align: center;
        border-radius: 5px; /* Hafif yuvarlatılmış köşeler */
    }

        .navbar-nav .nav-link:hover {
            color: var(--white);
            background-color: var(--dark-orange); /* Hover arka plan rengi */
        }

/* Navbar Toggler */
.navbar-toggler {
    border: none;
    padding: 5px 10px;
    background: none;
    outline: none;
}

.navbar-toggler-icon {
    background-color: var(--white);
    width: 30px;
    height: 3px;
    position: relative;
    display: block;
    border-radius: 5px;
    transition: all 0.3s ease;
}

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
        content: '';
        background-color: var(--white);
        width: 30px;
        height: 3px;
        position: absolute;
        left: 0;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    .navbar-toggler-icon::before {
        top: -10px;
    }

    .navbar-toggler-icon::after {
        top: 10px;
    }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: transparent;
}

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        transform: rotate(45deg) translate(5px, 5px); /* X şekli */
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        transform: rotate(-45deg) translate(5px, -5px); /* X şekli */
    }

/* Dropdown Menü */
.dropdown-menu {
    background-color: var(--dark-blue);
    min-width: 200px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge */
}

.dropdown-item {
    color: var(--white);
    font-size: 0.9rem;
    padding: 8px 12px; /* Daha dengeli padding */
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .dropdown-item:hover {
        background-color: var(--dark-orange);
        color: var(--black); /* Hover durumunda kontrast */
    }

/* Arama Çubuğu */
.form-control {
    border-radius: 5px;
    margin: 5px 0; /* Daha tutarlı bir görünüm */
    border: 1px solid var(--dark-orange); /* Uyumlu çerçeve rengi */
    transition: border-color 0.3s ease;
}

    .form-control:focus {
        border-color: var(--white); /* Focus durumunda beyaz çerçeve */
        outline: none;
    }

/* Üye Ol ve Giriş Butonları */
.navbar-ayarlar {
    display: flex;
    align-items: center;
    gap: 10px; /* Butonlar arasında eşit boşluk */
}

    .navbar-ayarlar .btn {
        font-size: 0.9rem;
        padding: 5px 10px;
        border-radius: 5px;
    }

.btn-outline-warning {
    color: var(--dark-orange);
    border-color: var(--dark-orange);
}

    .btn-outline-warning:hover {
        color: var(--white);
        background-color: var(--dark-orange);
    }

/* Mobil Uyum */
@media (max-width: 768px) {
    .navbar-nav {
        flex-direction: column; /* Dikey hizalama */
        align-items: flex-start;
        width: 100%; /* Tam genişlik */
    }

        .navbar-nav .nav-link {
            width: 100%; /* Dikey menüde tam genişlik */
            text-align: left; /* Sola hizala */
        }

    .dropdown-menu {
        width: 100%; /* Tam genişlik */
        border-radius: 0; /* Köşeler düz */
    }

    .navbar-collapse {
        background-color: var(--dark-blue); /* Mobil menü arka planı */
        border-top: 1px solid var(--dark-orange); /* Ayrım için çizgi */
        margin-top: 10px;
    }

    .navbar-toggler {
        font-size: 1.2rem;
    }

    .navbar-toggler-icon {
        width: 25px; /* Küçük ekran için uygun genişlik */
    }
}

/* Büyük Ekranlar */
@media (min-width: 1200px) {
    .navbar-nav {
        gap: 10px; /* Büyük ekranlarda öğeler arasında daha fazla boşluk */
    }

        .navbar-nav .nav-link {
            padding: 10px 20px; /* Daha geniş padding */
        }
}

/* Footer Ayarları */
footer {
    background-color: var(--dark-blue);
    color: var(--dark-orange);
    padding: 20px 0;
}

/* Sosyal Medya İkonları */
.social-icons a {
    color: var(--white);
    margin: 0 10px;
    font-size: 3rem;
}

.social-icons a:hover {
    color: var(--gold);
}

/* Footer Menüsü */
.footer-section a {
    color: var(--white);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: var(--gold);
}

/* Copyright Bölümü */
.copyright {
    background-color: var(--gold);
    color: var(--black);
    padding: 10px 0;
    font-size: 10px;
    text-align: center;
    margin: 0;
}

/* Slider Ayarları */
.carousel {
    position: relative;
    overflow: hidden;
}

.carousel-item {
    height: 700px;
}

.carousel-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 700px;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Ekstra uyum için */
}

/* Responsive Slider Ayarları */
@media (max-width: 768px) {
    .carousel-item {
        height: 500px;
    }

    .carousel-item img {
        min-height: 500px;
    }
}

@media (max-width: 576px) {
    .carousel-item {
        height: 300px;
    }

    .carousel-item img {
        min-height: 300px;
    }
}

/* Kart Ayarları */
.modern-card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin: 30px;
    height: 240px;
}

.modern-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.modern-card img {
    border-radius: 10px 10px 0 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.modern-card:hover img {
    filter: brightness(0.9);
}

/* Mobil Uyumlu Navbar */
@media (max-width: 768px) {
    .navbar-nav .nav-link {
        padding: 10px 8px;
    }

    .navbar-nav {
        margin-top: 15px;
    }

    .ms-3 {
        margin-top: 10px;
    }
}

/* Kurumsal Design */
#expoler-ust-bar {
    height: auto;
    background-color: darkgoldenrod;
}

.nav-menu-ozellestir {
    font-size: large;
    font-family: Cairo, Roboto;
    font-style: normal;
    font-weight: bold;
}

.kurumsal-bg-1 {
    background-color: var(--renk-1);
}

.kurumsal-bg-2 {
    background-color: var(--renk-2);
}

.kurumsal-bg-3 {
    background-color: #51456B;
}

.kurumsal-bg-4 {
    background-color: #A23C2A;
}

.kurumsal-bg-5 {
    background-color: #20736A;
}

.kurumsal-bg-6 {
    background-color: #c8b9a2;
}

.kurumsal-bg-7 {
    background-color: #f7f1ed;
}

.kurumsal-footer-dark {
    background-color: #417568;
}

.kurumsal-footer-light {
    background-color: #EFE4DC;
}

.kurumsal-copyriht-dark {
    background-color: #285171;
}

.kurumsal-copyriht-light {
    background-color: #EFE4DC;
}

.kurumsal-container {
    font-family: Cairo;
}

/* İkonlar */
.iconlar-1, .iconlar-10, .iconlar-20, .iconlar-30, .iconlar-40, .iconlar-50 {
    width: 10px; /* Her biri için uygun genişlik ayarlanmalı */
}

.sosyalaglar-icon {
    width: 20px;
}

.sosyalaglar-icon:hover {
    width: 25px;
}

/* Sosyal Ağlar Bölümü */
#sosyalaglar {
    background-color: rgba(100, 149, 237, 0.39);
    min-height: 80px;
}

/* Logo */
.logo {
    height: 100px;
    width: auto;
}

/* Panel Kullanıcı */
#panel-login-giris {
    background-position: center;
    background-color: #5D65A7;
    height: 100px;
    background-image: url(/Design/drawing/icon_logo-spot-001.png);
    background-repeat: no-repeat;
}

.login-1-giris {
    background-position: center;
}

/* Label/Etişketler */
#icerik {
    background-color: wheat;
}

#label-1, #label-2, #label-3, #label-4, #label-5, #label-gonderildi, #label-silindi, #label-uyar {
    height: 80px;
    color: white;
    background-color: #006666; /* Örnek olarak */
}

.etiket_urunadi_1 {
    padding: 15px;
    color: white;
    background-color: #B95A4D;
}

/* Kurumsal Alan */
#slogan {
    min-height: 120px;
    background-color: #ffd800; /* İki tanımlama vardı, sonuncu geçerli olur */
    top: 0px;
    left: 0px;
}

#slogan h1 {
    margin-top: 47px; /* Büyük harf düzeltildi */
    font-family: 'Lobster', cursive;
}

#sol_menu {
    background-color: #d07f7f;
    min-height: 250px;
}

.yatay_menu {
    background-color: #EFE4DC;
    min-height: 50px;
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}

.oge {
    height: 32px;
    width: 32px;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.oge a img {
    height: 40px;
    width: 40px;
    border-radius: 5px;
    transition: all 0.5s;
}

.oge a img:hover {
    height: 40px;
    width: 40px;
}

.sosyalag-img {
    width: 40px;
    height: 40px;
    text-align: right;
    margin-left: 10px;
    line-height: 30px;
    margin-top: 20px;
}

.sosyalag-img:hover {
    width: 30px;
    height: 30px;
}

.resimler {
    width: auto;
    height: auto;
    border: dotted 1px;
}

.resimler:hover {
    width: 90%;
    height: auto;
    border: dotted 1px;
    filter: grayscale(0);
    transform: translate3d(5px, 0, 0); /* translate3d tamamlandı */
}

.menuler {
    padding: 5px 0px 5px 0px;
    margin: 20px auto 0px auto;
    width: auto;
    text-align: right;
}

.menuler-img {
    width: 50px;
    height: 50px;
    text-align: right;
    margin-left: 10px;
    line-height: 30px;
    margin-top: 10px;
}

/* X ve Y Sınıfları */
.x-1, .xy-1, .xyz-1 {
    margin: 0px;
    padding: 0px;
    font-family: Cairo;
    color: #413170;
    font-size: xx-large;
    font-weight: bold;
    text-align: left;
}

.x-2, .xy-2, .xyz-2 {
    margin: 0px;
    padding: 0px;
    font-family: Cairo;
    color: #413170;
    font-size: x-large;
    font-weight: bold;
    text-align: left;
}

.x-3, .xy-3, .xyz-3 {
    margin: 0px;
    padding: 0px;
    width: auto;
    font-family: Cairo;
    color: #413170;
    font-size: large;
    font-weight: normal;
    text-align: left;
}

.x-4, .xy-4, .xyz-4 {
    margin: 0px;
    padding: 0px;
    width: auto;
    font-family: Cairo;
    color: #413170;
    font-size: medium;
    font-weight: normal;
    text-align: left;
}

.x-5, .xy-5, .xyz-5 {
    margin: 0px;
    padding: 0px;
    width: auto;
    font-family: Cairo;
    color: #413170;
    font-size: small;
    font-weight: normal;
    text-align: left;
}

.x-6, .xy-6, .xyz-6 {
    margin: 0px;
    padding: 0px;
    width: auto;
    font-family: Cairo;
    color: #413170;
    font-size: x-small;
    font-weight: normal;
    text-align: left;
}

.x-7, .xy-7, .xyz-7 {
    margin: 0px;
    padding: 0px;
    font-family: Cairo;
    color: #413170;
    font-size: xx-small;
    font-weight: normal;
    text-align: left;
}

.x-8, .xy-8, .xyz-8 {
    margin: 0px;
    padding: 0px;
    font-family: Cairo;
    color: #413170;
    font-size: xx-small;
    text-align: left;
}

.x-9, .xy-9, .xyz-9 {
    margin: 0px;
    padding: 0px;
    font-family: Cairo;
    color: #413170;
    font-size: inherit;
    font-weight: normal;
    text-align: left;
}

/* Tablo Sınıfları */
.tbl_left {
    margin: 0px;
    padding: 5px;
    font-family: Cairo;
    color: #413170;
    font-size: small;
    text-align: left;
    text-indent: 5px;
    height: auto;
}

.tablo_left_sol_S { /* Boşluk kaldırıldı */
    margin: 0px;
    padding: 5px 15px 5px 5px;
    height: 30px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #413170;
    font-size: medium;
    font-weight: normal;
    text-align: left;
}

.table-right { /* Sınıf ismi düzeltilmeli */
    margin: 10px;
    padding: 10px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #5E5A92;
    font-size: medium;
    text-align: left;
    height: 50px;
}

/* Metin Şekillendirme */
.dikkat, .dikkat-1, .dikkat-2 {
    margin: 0px;
    padding: 5px 15px 5px 5px;
    height: 30px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #CC3300;
    font-size: medium;
    font-weight: normal;
    text-align: left;
}

/* Box Plan */
.box-plan {
    margin: 30px;
    padding: 30px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: white; /* Yazı rengi beyaz */
    font-size: medium;
    font-weight: normal;
    text-align: left;
    background-color: var(--dark-blue); /* Zemin rengi mavi */
    border-radius: 10px; /* Köşeleri yuvarlatılmış */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Hafif gölge */
    transition: transform 0.3s, box-shadow 0.3s; /* Yumuşak geçiş animasyonu */
}

.box-plan:hover {
    transform: translateY(-5px); /* Yukarıya doğru hafif hareket */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4); /* Daha belirgin gölge */
    cursor: pointer; /* Fare imlecini işaretçiye dönüştür */
    color: #ffcc00; /* Yazı rengi altın sarısı */
}

/* Butonlar */
.btn_kayit, .btn_sil, .btn_bilgi, .btn_guncelle, .btn-custom, .wave-btn, .custom-btn {
    /* Genel Buton Stilleri */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-align: center;
    text-decoration: none; /* Link butonlarda alt çizgiyi kaldırmak için */
}

/* Kaydet Butonu */
.btn_kayit {
    color: #114A5B;
    font-size: medium;
    width: 200px;
    height: 44px;
    padding: 5px 0px 0px 5px;
    font-family: Cairo;
}

/* Sil Butonu */
.btn_sil {
    color: #B95A4D;
    font-size: medium;
    width: 200px;
    height: 44px;
    padding: 5px 0px 0px 5px;
    font-family: Cairo;
}

/* Bilgi Butonu */
.btn_bilgi {
    color: #00CC99;
    font-size: medium;
    width: 300px;
    height: 44px;
    padding: 5px 0px 0px 5px;
    font-family: Cairo;
}

/* Güncelle Butonu */
.btn-guncelle, .btn_guncelle {
    color: #B95A4D;
    font-size: medium;
    width: 200px;
    height: 44px;
    padding: 5px 0px 0px 5px;
    font-family: Cairo;
}

/* Wave Buton */
.wave-btn {
    position: relative;
    overflow: hidden;
    background: #ff7f50;
    color: white;
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 50px;
    transition: background 0.3s ease-in-out;
}

.wave-btn:hover {
    background: #ff6347;
}

.wave-btn:after {
    content: '';
    position: absolute;
  /*  width: 300px;
    height: 300px;*/
    top: 50%;
    left: 50%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s ease-out;
    pointer-events: none;
}

.wave-btn:active:after {
    transform: translate(-50%, -50%) scale(1);
}

/* Custom Buton */
.custom-btn {
    background: #4e17ef;
    color: white;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: normal;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

.custom-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.custom-btn:active {
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}


:root {
    --slider-gap: 20px;
    --animation-duration: 20s;
    --animation-timing: linear;
    --slider-width: 100%;
    --card-min-width: 200px;
    --card-padding: 20px;
    --card-border-radius: 10px;
}

.card-slider-track {
    display: flex;
    gap: var(--slider-gap);
    animation: slide var(--animation-duration) var(--animation-timing) infinite;
    will-change: transform;
    transition: animation-play-state 0.3s ease;
}

    .card-slider-track:hover {
        animation-play-state: paused;
    }

@keyframes slide {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Temel Kart Stili */
.card-slider {
    overflow: hidden;
    width: 100%;
}

.card {
    min-width: var(--card-min-width);
   
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    }

/* Responsive Düzenlemeler */

/* Büyük Tablet ve Küçük Ekranlar (örneğin, 1024px) */
@media (max-width: 1024px) {
    :root {
        --slider-gap: 15px;
        --animation-duration: 18s;
        --card-min-width: 180px;
        --card-padding: 18px;
    }
}

/* Tablet ve Küçük Ekranlar (örneğin, 768px) */
@media (max-width: 768px) {
    :root {
        --slider-gap: 10px;
        --animation-duration: 16s;
        --card-min-width: 160px;
        --card-padding: 16px;
    }

    .card-slider-track {
        animation: slide-mobile 16s var(--animation-timing) infinite;
    }

    @keyframes slide-mobile {
        0% {
            transform: translate3d(0, 0, 0);
        }

        100% {
            transform: translate3d(-120%, 0, 0);
        }
    }
}

/* Mobil Cihazlar (örneğin, 480px) */
@media (max-width: 480px) {
    :root {
        --slider-gap: 5px;
        --animation-duration: 14s;
        --card-min-width: 140px;
        --card-padding: 14px;
    }

    .card-slider-track {
        animation: slide-mobile 14s var(--animation-timing) infinite;
    }

    @keyframes slide-mobile {
        0% {
            transform: translate3d(0, 0, 0);
        }

        100% {
            transform: translate3d(-140%, 0, 0);
        }
    }
}






.card {
    flex: 0 0 auto;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.card img {
    border-radius: 15px 15px 0 0;
}

.card-body {
    text-align: center;
    padding: 20px;
}

.card-title {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.card-text {
    color: #6c757d;
    font-size: 0.9rem;
}

.btn-custom {
    background-color: #007bff;
    color: white;
    border-radius: 25px;
    padding: 8px 20px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.btn-custom:hover {
    background-color: #0056b3;
}

/* Yükleme Ekranı */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #d0d2e1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Logo İkonu */
.logo-icon {
    width: 250px; /* İstediğiniz boyuta göre ayarlayın */
    height: auto; /* İstediğiniz boyuta göre ayarlayın */
    margin-bottom: 20px; /* Alev animasyonu ile araya boşluk ekler */
    animation: heartbeat 1.5s infinite;
}

/* Kalp Atışı Animasyonu */
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.2);
    }
}

/* Alev Animasyonu */
.flame {
    position: relative;
    width: 60px;
    height: 80px;
    margin-bottom: 20px;
}

.flame span {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 15px;
    height: 15px;
    background: radial-gradient(circle, #ff7e00, #ff4500, #ff6347);
    border-radius: 50%;
    transform: translateX(-50%);
    animation: burn 1s infinite ease-in-out;
    opacity: 0.8;
}

.flame span:nth-child(1) {
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.flame span:nth-child(2) {
    width: 25px;
    height: 25px;
    animation-delay: 0.3s;
}

.flame span:nth-child(3) {
    width: 30px;
    height: 30px;
    animation-delay: 0.6s;
}

/* Yanan Efekt */
@keyframes burn {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translateX(-50%) scale(1.3);
        opacity: 0.6;
    }

    100% {
        transform: translateX(-50%) scale(1.5);
        opacity: 0;
    }
}

/* Loading Metni */
.loading-overlay p {
    font-size: 20px;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    animation: flicker 1.5s infinite ease-in-out;
    margin-top: 10px;
}

/* Flicker Efekti */
@keyframes flicker {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Ekstra Modern Dokunuş: Arka Planda Parlayan Işıklar */
.loading-overlay::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 223, 0, 0.2) 0%, rgba(255, 140, 0, 0.2) 60%, transparent 100%);
    animation: rotateBackground 10s linear infinite;
    z-index: -1;
}

@keyframes rotateBackground {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Örnek İçerik */
.content {
    display: none; /* Yükleme tamamlandıktan sonra gösterilecek */
   
    text-align: left;
}

/* Yükleme Tamamlandıktan Sonra İçeriği Göster */
.loaded .content {
    display: block;
}


.panel-ikon{
    width:50px;
}




/*kategoriler stili projeler*/
.table td, .table th {
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: #f8f9ff;
    transition: 0.2s ease;
}

.btn i {
    pointer-events: none;
}

.card {
    transition: all .2s ease;
}

    .card:hover {
        transform: translateY(-2px);
    }

.img-thumbnail {
    border: 2px solid #eee;
}