body {
    background-color: #f7f8fa;
    padding-top: 70px;  
   
}
/*TOPBAR GENEL...*/
.topbar {
    background: #f8f9fa;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #ddd;
    height: 50px; /* daha yüksek görünmesi için */
    line-height: 50px; /* metinleri dikey ortala */
}

    .topbar .contact-info i {
        margin-right: 5px;
        color: #007bff;
    }

    .topbar .social-links a {
        color: #333;
        margin-left: 15px;
        font-size: 18px; /* ikonlar biraz daha büyük */
        transition: color 0.3s ease;
    }

        .topbar .social-links a:hover {
            color: #007bff;
        }



/* NAVBAR GENEL */
.navbar {
    background-color: #025dbc !important;
    padding: 15px 5px; /* iç boşluk */
    transition: all 0.4s ease; /* geçiş efekti */
}

    /* Scroll olunca küçülsün */
    .navbar.shrink {
/*        padding: 8px 30px;*/
        padding: 5px 10px;
        background-color: #03437d !important;
        opacity: 0.9 !important;
    }

/* MARKA (LOGO) */
.navbar-brand {
    /*color: #f1c40f !important;*/ /* logo rengi */
    color: #f8f9fa;
    /* background-color: #025dbc;*/
    border-radius: 10px;
    font-weight: bold;
    font-size: 22px;
    padding-right: 10px;
    transition: color 0.3s ease;
    /* font-family: "Arial Black", "Impact", "Helvetica Neue", "Montserrat ExtraBold", sans-serif;*/
    font-family: 'Poppins', sans-serif;
}

.logo-icon {
    font-size: 1.8rem; /* ikon büyüklüğü */
    color: #3C7EEA; /* ikon rengi, markana uyacak şekilde */
}

.navbar-brand:hover {
    /*        color: #e67e22 !important;*/
    color: #b2c5c4 !important;
}

/* NAV ITEM */
.navbar-nav .nav-link {
    color: #ddd !important;
    /*    color: #3C7EEA !important;*/
    margin: 0 10px;
    margin-right: 40px;
    padding-right: 30px;
    transition: color 0.3s, transform 0.3s;
    font-family: 'Poppins', sans-serif;
}

    .navbar-nav .nav-link.shirink {
        color: #f1c40f !important;
        /*    color: #3C7EEA !important;*/
        margin: 0 10px;
        transition: color 0.3s, transform 0.3s;
    }

    .navbar-nav .nav-link:hover {
        color: #b2c5c4 !important;
        transform: translateY(-2px); /* hover animasyonu */
    }

/* Dropdown genel */
.dropdown-menu {
    /*    background-color: #4f6b88;*/
    background-color: #2c3e50;
    border: none;
    transition: all 0.3s ease;
    width: 300px !important; /* Mobilde ekran dışına çıkmayı engeller */
    white-space: normal; /* Gerekirse satır sonundan alta geçmesini sağlar */
    word-wrap: break-word; /* Uzun kelimeleri kırar */
}

/* Dropdown öğeleri */
.dropdown-item {
    color: #ecf0f1 !important;
    white-space: normal; /* Mobilde satır kırılması */
}

    .dropdown-item:hover {
        background-color: #4a87e2;
        color: #ddd !important;
    }

/* Sadece mobil için */
@media (max-width: 768px) {
    .dropdown-menu {
        width: 100% !important; /* Mobilde ekran genişliğini kaplasın */
        position: static; /* Sağ kaymayı önler */
        float: none;
    }

    .dropdown-item {
        display: block;
        text-align: left;
    }
}

/* ARAMA FORMU */
.form-control {
    border-radius: 30px;
    transition: box-shadow 0.3s ease;
}

    .form-control:focus {
        box-shadow: 0 0 10px rgba(241,196,15,0.6);
        border-color: #f1c40f;
    }

.btn-outline-success {
    border-color: #3C7EEA;
    color: #f1c40f;
    transition: all 0.3s ease;
}

    .btn-outline-success:hover {
        background-color: #f39c12;
        color: #2c3e50;
    }

/* TOGGLER (Mobil Menü Butonu) */
.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1) ' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}




.offcanvas-start {
    width: 250px;
    background-color: #025dbc;
    color: #fff;
}

.offcanvas-body .nav-link,
.offcanvas-body .dropdown-item {
    color: #fff;
}

    .offcanvas-body .nav-link:hover,
    .offcanvas-body .dropdown-item:hover {
        color: #f1c40f;
        background-color: rgba(255,255,255,0.1);
    }

/* Dropdown menü mobilde düzgün açılması için */
.offcanvas .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    background-color: transparent;
    border: none;
}

    .offcanvas .dropdown-menu.show {
        display: block;
    }
/* Offcanvas yalnızca mobilde görünsün */
@media (min-width: 992px) {
    .offcanvas {
        display: none !important;
    }
}


/* SLIDER GENEL */
.carousel {
    position: relative;
    overflow: hidden;
}


/* SLIDE RESİMLERİ */
.carousel-item img {
    height: 600px; /* slider yüksekliği */
    object-fit: cover; /* resmi kırpıp sığdırır */
    transition: transform 1s ease-in-out; /* resim geçişi */
}

.carousel-item {
    position: relative;
}

    .carousel-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black !important;
        opacity: 0.3 !important;
        z-index: 1 !important;
    }




/* CAPTION (başlık ve yazılar) */
.carousel-caption {
    bottom: 100px; /* yukarı kaydırma */
    text-shadow: 0 2px 5px rgba(0,0,0,0.7);
    animation: fadeInUp 1s ease; /* yazılar animasyonlu gelsin */
    position: absolute;
    z-index: 2; /* yazılar overlay üstünde */
}

    .carousel-caption h5 {
        font-size: 2.5rem;
        font-weight: bold;
        color: #fcfcfc;
    }

    .carousel-caption p {
        font-size: 1.2rem;
        color: #fcfcfc;
    }

    .carousel-caption a {
        background-color: #3C7EEA;
        color: #fff;
    }

        .carousel-caption a:hover {
            background-color: #2C5CB5;
            color: #fff;
        }

@media (max-width: 767px) {
    .carousel-caption h5 {
        font-size: 1.7rem; /* başlığı küçült */
    }

    .carousel-caption p {
        font-size: 1rem; /* açıklamayı küçült */
    }

    .carousel-caption {
        bottom: 150px; /* yazıyı biraz yukarı al */
        padding: 1px 2px;
    }
}
/* CAPTION ANİMASYONU */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* İNDİKATÖRLER (altındaki noktalar) */
.carousel-indicators [data-bs-target] {
    width: 40px;
    height: 4px;
    background-color: #ddd;
    border-radius: 2px;
    transition: all 0.4s ease;
}

.carousel-indicators .active {
    background-color: #f1c40f;
}

/* OK BUTONLARI */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 2rem 2rem;
    filter: invert(1) drop-shadow(0 0 5px rgba(0,0,0,0.5));
    transition: transform 0.3s ease;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    transform: scale(1.2); /* hover ile büyüsün */
}



/* Index deki slider alanının hemen altıdaki yan yana 4 kutunun css leri. */
.services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 50px auto;
    max-width: 1200px;
    padding: 20px;
}

.service-box {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
}

    .service-box:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .service-box .icon {
        font-size: 40px;
        margin-bottom: 15px;
    }

    .service-box h3 {
        font-size: 20px;
        margin-bottom: 10px;
        color: #333;
    }

    .service-box button {
        background-color: #3C7EEA;
    }

        .service-box button:hover {
            background-color: #3067c2;
        }

    .service-box p {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
    }

/* Mobil uyum */
@media (max-width: 991px) {
    .services {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .services {
        grid-template-columns: 1fr;
    }
}


/*Hakkımızda vizyon...*/
.about {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 80px 20px;
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); /* Hafif pastel gradient */
    color: #333;
    border-radius: 10px;
    margin-bottom: 50px;
}

.about-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}

.about-left, .about-right {
    flex: 0 0 30%;
}

    .about-left h2 {
        font-size: 32px;
        margin-bottom: 30px;
        color: #444;
    }

.about-point {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards;
}

    .about-point span {
        font-size: 28px;
    }

    .about-point p {
        font-size: 15px;
        line-height: 1.6;
        color: #555;
    }

.about-center {
    flex: 0 0 35%;
    text-align: center;
}

    .about-center img {
        width: 100%;
        max-width: 400px;
        border-radius: 16px;
        box-shadow: 0 6px 25px rgba(0,0,0,0.2);
        transition: transform 0.4s ease;
    }

        .about-center img:hover {
            transform: scale(1.05);
        }

.about-right p {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

/* Fade-in animasyonu */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobil uyumlu */
@media (max-width: 992px) {
    .about-left, .about-center, .about-right {
        flex: 0 0 100%;
        text-align: center;
    }

    .about-left {
        margin-bottom: 30px;
    }

    .about-right p {
        margin-bottom: 15px;
    }
}


/* Derslerimiz alanı temsil eder.*/
/* Dersler alanı */
.courses {
    position: relative; /* çok önemli */
    padding: 50px 20px;
    text-align: center;
    background: linear-gradient(135deg, #3C7EEA 0%, #6BCB77 100%);
    overflow: hidden; /* ::before taşmasın */
}

    .courses h2 {
        color: aliceblue;
        text-align: center;
        /*    background: linear-gradient(135deg, #3C7EEA 0%, #6BCB77 100%);*/
    }

.read-more-btn {
    /* display: inline-block;*/
    /* padding: 8px 14px;
    font-size: 0.85rem;*/
    /*background-color: #007bff;*/
    color: #fff;
    text-decoration: none;
    /*transition: background-color 0.3s ease;*/
    /* position: absolute;*/
    /*bottom: 16px;
    right: 16px;
    border-radius:30px;*/
}

    .read-more-btn:hover {
        /*background-color: #3067c2;*/
        color: #3C7EEA;
    }

.courses::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/umd/img/arkaplan.png'); /* kökten yol verildi */
    background-size: cover;
    background-position: center;
    opacity: 0.2; /* çok koyu olmasın */
    pointer-events: none;
}

.course-box a {
    text-decoration: none; /* alt çizgiyi kaldırır */
    color: inherit; /* başlık rengini korur */
}

.section-title {
    font-size: 32px;
    margin-bottom: 40px;
    font-weight: bold;
    color: #333;
}

/* Grid düzeni */
.course-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PC’de 4 */
    gap: 25px;
}

.course-rowSearch {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC’de 4 */
    gap: 5px;
}
/*.course-box1 {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}*/
/* Kartlar */
.course-box {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}

    .course-box:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    /* Görseller */
    .course-box img {
        width: 90%;
        height: 200px;
        object-fit: cover;
        border-radius: 12px;
        margin-bottom: 15px;
        border: solid;
    }

    /* Başlık & açıklama */
    .course-box h3 {
        text-decoration: none; /* alt çizgiyi kaldırır */
        font-size: 20px;
        margin-bottom: 10px;
        color: #444;
        font-weight: bold;
    }

    .course-box p {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
    }

    .course-box h3:hover {
        color: #3C7EEA;
    }

/* Tablet ve mobil için */
@media (max-width: 992px) {
    .course-row {
        grid-template-columns: repeat(2, 1fr); /* 2 sütun */
    }

    .course-box img {
        height: 160px;
        width: 100%;
        padding: 0;
    }
}

@media (max-width: 576px) {
    .course-row {
        grid-template-columns: repeat(1, 1fr); /* 2 sütun */
    }

    .course-box img {
        height: auto;
        width: 100%;
        padding: 0;
    }

    .course-box h3 {
        font-size: 18px;
        margin-bottom: 5px;
        color: #444;
        font-weight: bold;
    }
}



/*Hero banner video alanı bölgesi css leri*/
.hero-banner {
    position: relative;
    height: 70vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    margin-top: 100px;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* Şeffaf overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4); /* %40 şeffaf siyah */
    z-index: -1;
}

.hero-content {
    text-align: center;
    color: #fff;
    padding: 0 20px;
}

    .hero-content h1 {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 20px;
        text-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }

    .hero-content p {
        font-size: 20px;
        margin-bottom: 30px;
        text-shadow: 0 3px 10px rgba(0,0,0,0.5);
    }

.hero-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #3498db;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s ease;
}

    .hero-btn:hover {
        background: #2980b9;
    }

/* Mobil uyumlu */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .hero-btn {
        font-size: 16px;
        padding: 10px 20px;
    }
}


/*Başarı Hikayeleri*/
.testimonials {
    padding: 60px 20px;
    text-align: center;
    background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); /* Canlı gradient */
}

.section-title {
    font-size: 28px;
    margin-bottom: 20px;
    color: #fff; /* Beyaz başlık gradient üzerinde daha okunaklı */
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.testimonial-slider {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    scroll-behavior: smooth;
    padding-bottom: 10px;
}

.testimonial-item {
    flex: 0 0 30%;
    background: #fff; /* Kutular beyaz kalıyor */
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
    text-align: center;
}

    .testimonial-item:hover {
        transform: translateY(-6px);
    }

    .testimonial-item img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 10px;
        border: 3px solid #f1f1f1;
    }

    .testimonial-item h3 {
        font-size: 18px;
        margin-bottom: 10px;
        color: #444;
    }

    .testimonial-item p {
        font-size: 14px;
        color: #666;
    }

/* Mobil uyumlu */
@media (max-width: 992px) {
    .testimonial-item {
        flex: 0 0 45%; /* mobilde 2 yan yana */
    }
}

@media (max-width: 576px) {
    .testimonial-item {
        flex: 0 0 80%; /* çok küçük ekranlarda tek kutu */
    }
}

/*NEDEN BİZ ALANI...*/
.features {
    padding: 60px 20px;
    text-align: center;
    background: #f0f8ff; /* Hafif canlı arka plan */
}

.section-title {
    font-size: 28px;
    margin-bottom: 40px;
    color: #333;
}

.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.feature-box {
    background: #fff;
    flex: 0 0 22%; /* PC’de 4 yan yana */
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

    .feature-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }

.feature-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.feature-box h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #444;
}

.feature-box p {
    font-size: 14px;
    color: #666;
}

/* Tablet ve mobil */
@media (max-width: 992px) {
    .feature-box {
        flex: 0 0 45%; /* 2 yan yana */
    }
}

@media (max-width: 576px) {
    .feature-box {
        flex: 0 0 80%; /* tek kutu */
    }
}
/*BLOGLAR. PAGE.*/
.blog-card {
    display: block;
    text-decoration: none;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* eşit yükseklik */
    color: inherit; /* link mavi görünmesin */
}

    .blog-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

.blog-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.blog-content {
    padding: 20px;
}

    .blog-content h5 {
        font-size: 18px;
        margin-bottom: 10px;
        color: #007bff;
    }

    .blog-content p {
        font-size: 14px;
        color: #555;
        line-height: 1.5;
    }



/*Eğitmenler Bölümü*/
.teacher-img {
    width: 140px;
    height: 140px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .teacher-img {
        width: 100px;
        height: 100px;
    }
}


/*Blog DeTAY*/
.blog-header {
    margin-bottom: 30px;
}

    .blog-header img {
        width: 70%;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

.blog-content h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #198754;
}

.blog-content p {
    margin-bottom: 20px;
    color: #444;
}

.other-blogs {
    margin-top: 60px;
}

    .other-blogs .card img {
        height: 150px;
        object-fit: cover;
    }



/*KURUCU ÖZEL SAYFASI TASARIM*/
/* Body genel ayarları */


/* Founder Hero */
.founder-hero {
    background: linear-gradient(135deg, #198754, #63c76a);
    color: #fff;
    padding: 80px 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

    .founder-hero h1 {
        font-size: 2.8rem;
        font-weight: 700;
    }

    .founder-hero p {
        font-size: 1.1rem;
        max-width: 700px;
        margin: 10px auto 0 auto;
        line-height: 1.6;
    }

    .founder-hero .founder-img {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        border: 5px solid #fff;
        object-fit: cover;
        margin-top: 20px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }

/* Bio Bölümü */
.bio-section h2 {
    color: #198754;
    margin-bottom: 20px;
}

.bio-section p {
    font-size: 1rem;
    line-height: 1.7;
}

/* İstatistik Bölümü */
.stats-section {
    background: #fff;
    padding: 40px 15px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

    .stats-section .stat {
        margin: 20px;
    }

        .stats-section .stat h3 {
            color: #198754;
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .stats-section .stat p {
            font-size: 1rem;
            color: #555;
        }

/* İletişim Bölümü */
.contact-section {
    margin-top: 60px;
    padding: 40px 15px;
    background: #198754;
    color: #fff;
    border-radius: 20px;
    text-align: center;
}

    .contact-section a {
        color: #fff;
        text-decoration: none;
        font-weight: 600;
    }

        .contact-section a:hover {
            text-decoration: underline;
        }

/* Responsive */
@media (max-width: 768px) {
    .founder-hero h1 {
        font-size: 2.2rem;
    }

    .founder-hero .founder-img {
        width: 200px;
        height: 200px;
    }

    .bio-section {
        padding: 40px 10px;
    }
}

/*Education alanı.*/

.ders-detay-page {
    max-width: 900px;
    margin: 50px auto;
    font-family: 'Arial', sans-serif;
    line-height: 1.7;
    color: #333;
    padding: 0 20px;
}

.ders-header h1 {
    font-size: 2.5em;
    color: #198754;
    margin-bottom: 10px;
}

.ders-alt-baslik {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 20px;
}

.ders-banner {
    width: 100%;
    height: 350px;
    border-radius: 15px;
    margin-bottom: 30px;
    object-fit: cover;
}

.ders-section {
    margin-bottom: 40px;
}

    .ders-section h2 {
        font-size: 1.8em;
        color: #0d6efd;
        margin-bottom: 15px;
        border-bottom: 2px solid #0d6efd;
        display: inline-block;
        padding-bottom: 5px;
    }

    .ders-section p {
        color: #666;
    }

    .ders-section ul {
        list-style: disc;
        padding-left: 20px;
    }

        .ders-section ul li {
            margin-bottom: 10px;
            color: #666;
        }

.ders-images {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
}

    .ders-images img {
        width: calc(50% - 7.5px);
        border-radius: 10px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

        .ders-images img:hover {
            transform: scale(1.05);
        }


/*İnstagram iframe*/
.instagram-grid .ratio {
    border-radius: 20px;
    overflow: hidden; /* iframe taşmasını engeller */
    border: 3px solid #3C7EEA; /* mavi çerçeve */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* isteğe bağlı gölge */
}


/*Sık Sorulan Sorular*/
#faq .accordion-button {
    font-weight: 600;
    font-size: 1.1rem;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

    #faq .accordion-button:not(.collapsed) {
        color: #fff;
        background-color: #3C7EEA;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    }

#faq .accordion-item {
    border: none;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
}


/* Google Maps */
.map-section {
    background: #f9f9f9;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}

    .map-section h2 {
        font-weight: 700;
        color: #3C7EEA;
    }

.map-wrapper iframe {
    border: none;
}

/* Mobil için tam ekran */
@media (max-width: 768px) {
    .map-section {
        max-width: 100%;
        padding: 0 10px; /* kenarlardan biraz boşluk */
    }
}


/*eğitmenler sayfası.*/
.trainer-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .trainer-card img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 15px;
        margin-bottom: 15px;
    }

    .trainer-card h4, .trainer-card h3 {
        margin-bottom: 5px;
        color: #3C7EEA;
    }

    .trainer-card p {
        color: #555;
        font-weight: 500;
    }

    /* Hover efekti */
    .trainer-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }

/* Kurucu / Sahibi kartını öne çıkar */
.founder-card {
    width: 300px;
    border: 2px solid #3C7EEA;
}




/*Header özel*/
.page-header {
    background-color: #3C7EEA;
    color: #fff;
    height: 150px; /* sabit yükseklik */
    display: flex; /* ortalamak için flex */
    flex-direction: column;
    justify-content: center; /* dikey ortalama */
    align-items: center; /* yatay ortalama */
    position: relative;
    overflow: hidden;
    padding: 0 20px;
}

    .page-header h1 {
        font-size: 2rem; /* yükseklik azaldığı için daha küçük */
        font-weight: 700;
        margin: 0;
    }

    .page-header p {
        font-size: 1rem;
        color: #f0f0f0;
        margin: 0;
    }

    /* Alt dalga efekti */
    .page-header::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 20px;
        background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff" fill-opacity="0.3" d="M0,128L1440,32L1440,320L0,320Z"></path></svg>') no-repeat bottom;
        background-size: cover;
    }

.mini-logo {
    height: 33px;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
    margin-left: 3px; /* yazı ile img arası boşluk */
    margin-right: 2px; /* img ile sonraki L harfi arası boşluk */
    background-color:white;
}


/*Eğitim Detay sayfaları içinnnn.*/
/* Genel Ders Sayfası Stilleri */
.ders-detay-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

/* Başlıklar */
.ders-header h1 {
    font-size: 2.5rem; /* Masaüstü büyük başlık */
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
}

.ders-header .ders-alt-baslik {
    font-size: 1.1rem;
    color: #555;
    text-align: center;
    margin-bottom: 20px;
}

.ders-section h2 {
    font-size: 1.8rem; /* Alt başlık */
    font-weight: 600;
    color: #222;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #0d6efd; /* Navbar link rengi ile uyumlu */
}

/* Paragraflar ve listeler */
.ders-section p,
.ders-section ul {
    font-size: 1rem;
    color: #333;
}

    .ders-section ul li {
        margin-bottom: 8px;
    }

/* Görseller */
.ders-images img {
    width: 48%;
    margin-right: 2%;
    margin-bottom: 15px;
    border-radius: 8px;
}

    .ders-images img:last-child {
        margin-right: 0;
    }

/* Responsive: Tablet */
@media (max-width: 768px) {
    .ders-header h1 {
        font-size: 2rem;
    }

    .ders-section h2 {
        font-size: 1.5rem;
    }

    .ders-images img {
        width: 100%;
        margin-right: 0;
    }
}

/* Responsive: Mobil */
@media (max-width: 480px) {
    .ders-header h1 {
        font-size: 1.6rem;
    }

    .ders-header .ders-alt-baslik {
        font-size: 0.95rem;
    }

    .ders-section h2 {
        font-size: 1.3rem;
    }

    .ders-section p,
    .ders-section ul li {
        font-size: 0.95rem;
    }
}



/*GALERY*/
.gallery-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.gallery-title {
    text-align: center;
    font-size: 2.5rem;
    color: #0d6efd;
    margin-bottom: 40px;
}

.gallery-category {
    margin-bottom: 50px;
}

    .gallery-category h3 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        color: #333;
    }

/* Genel Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 sütunlu düzen (Hem PC hem mobil) */
    gap: 15px;
}

    .gallery-grid img {
        width: 100%;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        .gallery-grid img:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        }

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.lightbox-img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 8px;
}

.lightbox .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
}

.lightbox-nav span {
    position: absolute;
    top: 50%;
    font-size: 3rem;
    color: #fff;
    cursor: pointer;
    user-select: none;
    padding: 0 15px;
    transform: translateY(-50%);
}

.lightbox-nav .prev {
    left: 10px;
}

.lightbox-nav .next {
    right: 10px;
}
/* Responsive: Tablet */
@media (max-width: 768px) {
    .gallery-title {
        text-align: center;
        font-size: 1.5rem;
        color: #0d6efd;
        margin-bottom: 40px;
    }

    .gallery-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 sütunlu düzen (Tablet ve Mobil) */
    }
}

/* Responsive: Mobil */
@media (max-width: 480px) {
    .gallery-title {
        text-align: center;
        font-size: 1rem;
        color: #0d6efd;
        margin-bottom: 40px;
    }

    .gallery-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 sütunlu düzen (Mobil) */
    }
}





/*ana sayfada slider resim görsel geçişleri..*/
.slider-container {
    width: 60%;
}

/* Responsive: Tablet */
@media (max-width: 768px) {
    .slider-container {
        width: 80%;
    }
}

/* Responsive: Mobil */
@media (max-width: 480px) {
    .slider-container {
        width: 90%;
    }
}

/*BASARİ HİKAYELERİ ALANI*/
.success-hero {
    text-align: center;
    background: #f6f8fb;
    padding: 2rem 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.success-filters .form-select,
.success-filters .form-control {
    min-width: 150px;
}

.success-grid .testi-card {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    transition: transform .2s, box-shadow .2s;
}

    .success-grid .testi-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    }

.testi-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}

.submit-story {
    background: #fefefe;
    border-radius: 12px;
    padding: 2rem 1rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}

@media(max-width:767px) {
    .success-filters {
        flex-direction: column;
        gap: .5rem;
    }
}


/*KARİYER ALANI*/
.career-section {
    padding: 60px 20px;
    background: #f9fcff;
}

.career-container {
    max-width: 1100px;
    margin: 0 auto;
}

.career-header {
    text-align: center;
    margin-bottom: 40px;
}

.career-title {
    font-size: 32px;
    font-weight: 700;
    color: #0b3757;
}

.career-subtitle {
    font-size: 17px;
    color: #555;
    margin-top: 15px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.career-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

.career-text {
    flex: 1 1 450px;
}

    .career-text h3 {
        margin-top: 0;
        color: #0b3757;
    }

.career-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

    .career-list li {
        margin-bottom: 12px;
        font-size: 16px;
    }

.career-subhead {
    margin-top: 30px;
}

.career-contact {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.career-btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.career-call {
    background: #0077cc;
    color: #fff;
}

.career-whatsapp {
    background: #25D366;
    color: #fff;
}

.career-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.career-image {
    flex: 1 1 450px;
    text-align: center;
}

    .career-image img {
        max-width: 100%;
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    }

@media (max-width: 768px) {
    .career-title {
        font-size: 26px;
    }

    .career-subtitle {
        font-size: 15px;
    }

    .career-content {
        flex-direction: column;
    }
}


/*Hakkımızda*/
.about-section {
    position: relative;
    background: #f8f9fa; /* Açık gri */
    overflow: hidden;
}

    .about-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%; /* üst yarısı */
        background: #e3f2fd; /* Açık mavi */
        z-index: 0;
        clip-path: polygon(0 0%, 100% 0, 100% 80%, 0 100%);
    }

    .about-section .container {
        position: relative;
        z-index: 1;
    }
.ftco-section {
    padding: 7em 0;
    position: relative;
}

@media (max-width: 767.98px) {
    .ftco-section {
        padding: 6em 0;
    }
}

.ftco-bg-dark {
    background: #090808;
}

.ftco-footer {
    padding: 6em 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #06224f !important;
}

    .ftco-footer .ftco-footer-logo {
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .ftco-footer .ftco-footer-widget h2 {
        font-weight: normal;
        color: #e5e5e5 !important;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: 400;
    }

    .ftco-footer .ftco-footer-widget ul li a span {
        color: #e5e5e5 !important;
    }

    .ftco-footer .ftco-footer-widget .btn-primary {
        background: #fff !important;
        border: 2px solid #fff !important;
    }

        .ftco-footer .ftco-footer-widget .btn-primary:hover {
            background: #fff;
            border: 2px solid #fff !important;
        }

    .ftco-footer a {
        color: #e5e5e5 !important;
    }

        .ftco-footer a:hover {
            color: #e5e5e5 !important;
        }

    .ftco-footer .ftco-heading-2 {
        font-size: 17px;
        font-weight: 400;
        color: #e5e5e5 !important;
    }

    .ftco-footer .categories li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

        .ftco-footer .categories li a span {
            color: #e5e5e5 !important;
        }

.ftco-footer-social li {
    list-style: none;
    margin: 0 10px 0 0;
    display: inline-block;
}

    .ftco-footer-social li a {
        height: 40px;
        width: 40px;
        display: block;
        background: #ffb5b5;
        border-radius: 50%;
        position: relative;
        color: #e5e5e5 !important;
    }

        .ftco-footer-social li a span {
            position: absolute;
            font-size: 20px;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            color: #fff !important;
        }

        .ftco-footer-social li a:hover {
            color: #fff;
        }






.img-services {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-size: cover; /* Resim divi kaplasın, taşabilir */
    background-position: center; /* Resmi ortala */
    background-repeat: no-repeat; /* Tekrar olmasın */
}


/*FOOTER*/
.footer {
    background-color: #025dbc; /* Navbar ile aynı mavi ton */
    color: #fff;
}

    .footer a.footer-link {
        color: #f1f1f1;
        text-decoration: none;
        transition: color 0.3s;
    }

        .footer a.footer-link:hover {
            color: #f1c40f;
        }

    .footer .social-icon i {
        font-size: 1.2rem;
        transition: color 0.3s;
    }

    .footer .social-icon:hover i {
        color: #f1c40f;
    }



    /*ANA SAYFADA AYAR*/
.offer-deal .img {
    width: 100%;
    height: 200px; /* veya istediğin yükseklik */
    background-size: cover; /* görsel div’i tamamen kaplasın */
    background-position: center center; /* ortalı gösterim */
    border: 1px solid #ddd; /* border isteğe bağlı */
    border-radius: 8px; /* istersen hafif yuvarla */
}


/*HERO SECTİON2*/
.hero-section-2 {
    position: relative;
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 40%, rgba(0,212,255,1) 100%);
    padding: 100px 0;
    overflow: hidden;
    color: #fff;
}

/* Metin ve başlık */
.hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #dbd7d3;
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 25px;
}

/* Arka plan ikonları */
.hero-icon {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 100px;
    opacity: 0.3;
    border-radius: 8px;
}

.icon1 {
    background-color: white;
    top: 10%;
    left: 5%;
    transform: rotate(10deg);
}

.icon2 {
    background-color: white;
    top: 40%;
    left: 15%;
    transform: rotate(-15deg);
}

.icon3 {
    top: 70%;
    left: 0;
    transform: rotate(20deg);
}

/* CTA Buton */
.hero-cta {
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 8px;
}

/* Resim alanı */
.hero-image-wrapper {
    position: relative;
}

.hero-image {
    width: 100%;
    max-height: 450px;
    object-fit: contain;
    border-radius:10px;
}

/* Alt dalgalı divider */
.hero-divider {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: #fff;
    clip-path: polygon(0 0, 60% 40%, 90% 50%, 0 60%);
}

/* Mobil uyum */
@media (max-width: 768px) {
    .hero-section-2 {
        padding: 60px 15px;
    }

    .hero-title {
        font-size: 1rem;
        padding-top: 70px;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-content {
        flex-direction: column;
    }

    .hero-cta-wrapper {
        order: 2;
        margin-top: auto;
        margin-bottom: 20px;
        width: 100%;
        text-align: center;
    }

    .hero-cta {
        width: 90%;
    }

    .hero-divider {
        display: none;
        /*   height: 60px;
        width:100%;
        clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 0%);*/
    }

    .hero-icon {
        width: 35px;
    }
}



/*Web ve Mobil çözümler alanı. resim ortada*/
.solutions-section {
    background-color: #f8f9fa;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #025dbc; /* Navbar ile uyumlu */
    margin-bottom: 0.5rem;
}

.section-subtitle {
    font-size: 1rem;
    color: #555;
    margin-bottom: 2rem;
}

.feature h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: #042862;
}

.feature p {
    font-size: 0.9rem;
    color: #555;
}

.feature i {
    min-width: 50px;
}

.solution-image {
    width: 100%;
    padding-top: 100%; /* Kare oranında görsel */
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
/* Mobilde kolonlar alt alta ve görsel üstte */
@media (max-width: 991px) {

    .section-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #025dbc; /* Navbar ile uyumlu */
        margin-bottom: 0.5rem;
    }
    .solution-image {
        margin-bottom: 2rem;
        padding-top: 60%; /* Daha kısa görsel */
    }

    .feature {
        text-align: center;
        justify-content: center;
        margin-bottom: 1.5rem; /* Aralığı artır */
    }

        .feature i {
            margin-bottom: 0.5rem;
            font-size: 2rem; /* Küçük ikon */
        }

        .feature div h5 {
            font-size: 1rem; /* Küçük başlık */
        }

        .feature div p {
            font-size: 0.85rem; /* Küçük açıklama */
        }
}



/*SERVİSLER HİZMETLER EN SON*/
.service-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 120px 20px;
    color: #fff;
}

    .service-hero .overlay {
        position: absolute;
        inset: 0;
        background: rgba(2, 93, 188, 0.75); /* #025dbc saydam */
    }

    .service-hero .container {
        position: relative;
        z-index: 2;
    }

    .service-hero h1 {
        font-size: 46px;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .service-hero p {
        font-size: 20px;
        max-width: 700px;
        margin: 0 auto;
    }

/* Detail Section */
.service-detail {
    padding: 80px 20px;
    max-width: 1100px;
}

    .service-detail h2 {
        font-size: 32px;
        color: #025dbc;
        margin-bottom: 20px;
        text-align: center;
    }

    .service-detail .intro p {
        font-size: 18px;
        color: #555;
        line-height: 1.6;
        text-align: center;
        margin-bottom: 50px;
    }

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.feature-box {
    background: #fff;
    padding: 30px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all .3s ease;
}

    .feature-box i {
        font-size: 40px;
        color: #025dbc;
        margin-bottom: 15px;
    }

    .feature-box h3 {
        font-size: 22px;
        margin-bottom: 10px;
        color: #025dbc;
    }

    .feature-box p {
        font-size: 15px;
        color: #666;
    }

    .feature-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

/* Call to Action */
.call-to-action {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg,#025dbc,#013a77);
    border-radius: 16px;
    color: #fff;
}

    .call-to-action h2 {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .call-to-action p {
        font-size: 18px;
        margin-bottom: 25px;
    }

.btn-main {
    display: inline-block;
    padding: 14px 35px;
    background: #fff;
    color: #025dbc;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}

    .btn-main:hover {
        background: #f1f1f1;
        transform: scale(1.05);
    }
/* Mobil uyum */
@media (max-width: 768px) {
    .service-hero h1 {
        font-size: 28px !important;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .service-hero p {
        font-size: 15px !important;
        max-width: 100%;
        margin: 0 auto;
    }

    .service-detail h2 {
        font-size: 25px !important;
        color: #025dbc;
        margin-bottom: 20px;
        text-align: center;
    }

    .service-detail .intro p {
        font-size: 15px !important;
        color: #555;
        line-height: 1.6;
        text-align: center;
        margin-bottom: 50px;
    }
}


/* Hero */
.references-hero {
    position: relative;
    background: url('/Site/images/references-bg.jpg') ;
    padding: 120px 20px;
    color: #fff;
    text-align: center;
}

    .references-hero .overlay {
        position: absolute;
        inset: 0;
        background: rgba(2, 93, 188, 0.7);
    }

/* Grid */
.references-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.ref-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

    .ref-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .ref-card:hover img {
        transform: scale(1.05);
    }

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

    .ref-card h3 {
        color: #025dbc;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .ref-card p {
        font-size: 14px;
        color: #555;
        line-height: 1.5;
    }

/* CTA */
.references .call-to-action {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg,#025dbc,#013a77);
    border-radius: 16px;
    color: #fff;
}

    .references .call-to-action h2 {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .references .call-to-action p {
        font-size: 18px;
        margin-bottom: 25px;
    }

.references .btn-main {
    display: inline-block;
    padding: 14px 35px;
    background: #fff;
    color: #025dbc;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}

    .references .btn-main:hover {
        background: #f1f1f1;
        transform: scale(1.05);
    }

/* Responsive */
@media (max-width: 768px) {
    .references-hero h1 {
        font-size: 28px;
    }

    .references-hero p {
        font-size: 15px;
    }

    .ref-card h3 {
        font-size: 18px;
    }

    .ref-card p {
        font-size: 13px;
    }
}
/*PAKETLERİMİZ FİYATLAR ALANI:::*/
/* File: css/services-cards.css */
/*:root {
    --bg: #f8fafc;
    --card-bg: #ffffff;
    --muted: #6b7280;
    --accent: #0ea5a4;
    --card-radius: 14px;
}*/

.services-hero {
    padding: 48px 16px;
    background: var(--bg);
}

/*.container {
    max-width: 1200px;
    margin: 0 auto;
}*/

.section-header {
    text-align: center;
    margin-bottom: 28px;
}

    .section-header h2 {
        font-size: 28px;
        margin: 0 0 6px;
    }

    .section-header p {
        color: var(--muted);
        margin: 0;
    }

.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.service-card  {
    background-color: lightgreen;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transition: transform .3s, box-shadow .3s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .service-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    }

.card-title {
    font-size: 20px;
    margin-bottom: 12px;
}

.card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

    .card-features li {
        margin-bottom: 6px;
        font-size: 14px;
    }

.card-note {
    font-size: 13px;
    color: var(--muted);
}

@media (max-width: 1000px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}


.btn-cta {
    background: #25D366; /* WhatsApp ton */
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    align-self: flex-end; /* sağa yaslamak için */
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

    .btn-cta:hover {
        background: #329958; /* daha koyu mavi */
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(13,110,253,0.4);
    }