/* =========================================================================
   TEMEL RESET / BOX-SIZING
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* =========================================================================
   1. Body & Container
   - Açık gri tonlu zemin, nötr bir his verir.
   ========================================================================== */
body {
    background-color: #f8f9fa; /* Çok açık gri */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #343a40; /* koyu gri yazi rengi */
}

/* =========================================================================
   2. Logo Ayarı
   - Maksimum genişlik veriyoruz, sayfa boyuna göre küçülür.
   ========================================================================== */
.logo-custom {
    max-width: 200px;
    width: 100%;
    height: auto;
}

/* =========================================================================
   3. Demo Hesap Kartı (.demo-card)
   - Hafif gölge ve yuvarlatılmış köşelerle “elevated” his.
   ========================================================================== */
.demo-card {
    background-color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .demo-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 1.75rem rgba(0, 0, 0, 0.1);
    }

    /* Metin stili */
    .demo-card p {
        font-size: 0.9rem;
        letter-spacing: 0.5px;
    }

    .demo-card h2 {
        font-size: 2rem;
        color: #dc3545; /* "İnşaat" kırmızısına yakın */
    }

/* =========================================================================
   4. Buton Stili (.btn-custom)
   - Yarı oval, hover’da renk koyulaşır, ikon ekleyebiliriz.
   ========================================================================== */
.btn-custom {
    border-radius: 50px;
    padding: 0.6rem 1.8rem;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .btn-custom:hover {
        background-color: #c82333 !important; /* Koyu kırmızı ton */
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

/* =========================================================================
   5. Intro Kartı / Video Bölümü (.intro-card)
   - Arka plan rengi olarak kurumsal kırmızı, üstünde yarı saydam overlay
   ========================================================================== */
.intro-card {
    position: relative;
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #dc3545; /* Kurumsal kırmızı arka plan */
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.05);
}

    /* Card’ın tam dolanmasını ve esnek hizalanmasını sağlar */
    .intro-card .row {
        min-height: 400px; /* İstersen farklı bir yükseklik verebilirsin */
    }

/* Üstüne yarı saydam bir katman ekleyelim (örneğin hafif duman/blur hissi) */
.intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/images/map-pattern.svg') no-repeat center center;
    /* 
       Bu aşamada: 
       - /images/map-pattern.svg yerine kendi desen/arka plan görselinizi koyabilirsiniz. 
       - Eğer desen istemezseniz aşağıdaki gibi tek renk veya gradient kullanabilirsiniz:
         background: rgba(0, 0, 0, 0.25);
    */
    background-size: cover;
    background-blend-mode: multiply;
    opacity: 0.35; /* Yarı saydamlık */
    z-index: 1;
}

/* İçerik (Yazı ve Video) kart içinde, overlay’in üzerinde görünsün */
.intro-card .col-md-6 {
    position: relative;
    z-index: 2;
}

/* Başlık ve alt metin stili */
.intro-card h3 {
    font-family: 'Poppins', sans-serif; /* Eğer Poppins kullanmak istersen */
    font-size: 1.75rem;
    color: #ffffff;
    line-height: 1.3;
}

.intro-card p {
    font-size: 1rem;
    color: #f1f1f1;
}

/* =========================================================================
   6. Video Container
   - Yuvarlatılmış köşeler ve gölge eklenerek “kart” efekti
   ========================================================================== */
.video-container {
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1);
}

    .video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* =========================================================================
   7. Responsive Ayarlar (Mobil ve Tablet)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Kartların üzerine gelince değil, basit bir gölge */
    .demo-card:hover {
        transform: none;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
    }

    .intro-card .row {
        min-height: auto;
    }

    .intro-card {
        padding: 1rem 0;
    }

        .intro-card h3 {
            font-size: 1.5rem;
            text-align: center;
        }

        .intro-card p {
            text-align: center;
        }
}