.section-header{
    text-align: center;
    font-weight: 600;
    font-size: 30px;
    margin: 20px 0 5px;
}


#TopShaped {
    clip-path: polygon(0 0, 100% 0%, 100% 40%, 0% 100%);
    background-color: var(--mdb);
    height: 100px;
    display: flex;
}

#TopShapedText {
    color: white;
    font-weight: 500;
    font-size: 20px;
}


#Hero {
    display: flex;
    background-color: #f3f7fb;
    justify-content:center;
    padding:20px 0;
}

#HeroInner {
    width: 1200px;
    display: flex;
    align-items:center;
}
#HeroText {
    width: 50%;
    line-height:1.6
}

#hero-text-header{
    margin-bottom:20px;
}

#HeroImg {
    width: 50%;
}
#HeroImg img {
    width: 80%;
}

#HeroBtn {
    /*outline: 1px solid black;*/
    background-color: var(--mdb);
    color: white;
    text-decoration: none;
}

    #HeroBtn:hover {
        background-color: #6f86a4;
        color: white;
        text-decoration: none;
    }



#Features {
    padding: 40px 0px;
    background: #F3F7FB;
    background: -webkit-linear-gradient(180deg, rgba(243, 247, 251, 1) 0%, rgba(209, 223, 237, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(243, 247, 251, 1) 0%, rgba(209, 223, 237, 1) 100%);
    background: linear-gradient(180deg, rgba(243, 247, 251, 1) 0%, rgba(209, 223, 237, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr ="#F3F7FB", endColorstr="#D1DFED", GradientType=0);
}

#FeaturesHeaderText1 {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
}


#FeaturesHeaderText2 {
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #555555;
    margin: 10px auto 10px;
    width: 50%
}

#FeaturesCardContainer {
    display:flex;
    justify-content:flex-start;
    flex-wrap: wrap;
    margin-top: 20px;
}

.FeaturesCardItem {
    width: 33%
}

.FeaturesCardItemTextContainer {
    padding: 10px;
}

.FeaturesCardItemText1 {
    font-weight: 600
}

.FeaturesCardItemText2 {
    font-weight: 400;
    font-size: 16px;
    text-align: left;
    color: #555555;
    margin: 10px auto 10px;
}

#choose {
    display:flex;
    justify-content:center;
    align-items:center;
    margin:40px 0;
}

#choose-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
}

#choose-inner-header-text1 {
    font-weight: 600;
    font-size: 30px;
    text-align: center;
}

#choose-inner-header-text2 {
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #555555;
    margin: 10px auto 10px;
    width:60%
}


#choose-img {
    width: 50%;
}

#choose-text {
    width: 60%;
    padding: 20px;
}


#ChooseItemCardContainer {
    display: flex;
    flex-wrap: wrap;
    gap:6%;
    
}

.ChooseItemCard {
    width: 47%;
    display: flex;
    margin: 15px 0;
}

.ChooseItemCardImg {
    width: 25px;
    margin-right: 15px;
}

.ChooseItemCardHeader {
    font-weight: 600
}

.ChooseItemCardText {
    font-size: 14px;
}

/* **************** fqa *************** */

#faq-section {
    display: flex;
    justify-content: center;
    padding: 40px 0 ;
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.03) inset;
    -webkit-box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.03) inset;
    -moz-box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.03) inset;
}

#faqInner {
    width: 900px;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    flex-direction: column;
}

#faqHeaderText1 {
    font-weight: 600;
    font-size: 30px;
    text-align: center;
}

#faqHeaderText2 {
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #555555;
    margin: 10px auto 10px;
    width:80%;
}

#FaqTabHeaderContainer {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.faq-tab-item {
    padding: 8px 15px;
    border-radius: 30px;
    outline: 1px solid black;
    cursor: pointer;
}

.faq-tab-item-active {
    background-color: var(--mdb);
    color: white;
}

#faq-row-container {
    margin: 20px 0;
}

.faq-row {
    border-top: 1px solid #dddddd;
    margin: 5px 0;
}

    .faq-row:last-child {
        border-bottom: 1px solid #dddddd;
    }


    .faq-row.open .faq-row-header {
        background: rgba(0,0,0,.03);
    }

.faq-row-header {
    padding: 8px 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    user-select: none;
    align-items:center;
}

.faq-row-header-text {
    font-size: 18px;
    font-weight: 400;
}

.faq-row-header-arrow {
    transition: transform .3s ease;
    transform-origin: center;
    display: inline-flex; /* kutu olsun ki transform çalışsın */
    height:30px;
}

.faq-row.open .faq-row-header-arrow {
    transform: rotate(180deg); /* open iken 180° */
}

.faq-row-header-arrow img {
    display: block; /* hizalama için iyi olur */
    /* transition artık gereksiz; dönüşümü wrapper alıyor */
}

.faq-row-answer-container {
    color: #555555;
    font-size: 14px;
    padding: 8px 10px;
    display: none;
    overflow: hidden;
}

/* */

/* **************** Pricing *************** */
#PricingInner {
    /*height: 100vh;*/
    padding: 40px 0;
    background-color: #f2f2f2;
    color: black
}

#pricing-header-text1 {
    font-weight: 600;
    font-size: 32px;
    text-align: center
}

#PricingPlanPopuler {
    background-color: #e06740;
    color: #fff5f0;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 12px;
}

#pricing-header-text2 {
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #555555;
    margin: 10px auto 20px;
}

#PlanCardContainer {
    gap: 20px;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.PlanCardItem {
    width: 300px;
    padding: 10px;
    outline: 1px solid #c4c4c4;
    border-radius: 5px;
    background-color: #e8e8e8;
}

.PlanCardItemHeader {
    font-size: 28px;
    font-weight: 500;
    display:flex;
    gap:10px;
    align-items:center;
}

.PlanCardItemDescription {
    margin: 10px 0px;
    color: #000;
}

.PlanCardItemPriceContainer {
    /*height: 40px;*/
    font-size: 28px;
    font-weight: 600;
    margin-top: 15px;
    display: flex;
    gap: 10px;
    align-items: end;
}

.PlanCardItemDescription2 {
    /*margin: 10px 0;*/
    color:#454545;
    font-size:14px;
    margin-bottom :5px;
    font-weight:200;
}

.btnPricingGetStarted{
    text-align:center;
    outline:1px solid black;
    margin:20px 5px;
    padding:5px 0;
    cursor:pointer;
    border-radius:8px;
}

.plan-card-item-line {
    margin: 30px auto;
    height: 1px;
    border-bottom: 1px solid #c2c2c2;
    width: 95%;
}

.plan-card-feature-header-text {
    font-size: 14px;
    font-weight: 400;
}

.PlanCardItemFeature {
    display: flex;
    align-items: center;
    font-size:12px;
    color:#454545;
    gap: 10px;
    margin: 20px;
}



/* **************** Blogs *************** */

#Blogs {
    display:flex;
    justify-content:center;
    margin-bottom:20px;
}

#BlogsInner {
    max-width: 1200px;
    display: flex;
    justify-content: center;
    flex-direction:column;
}

#BlogHeaderText2 {
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #555555;
    margin: 10px auto 10px;
    width:60%
}

#BlogItemConteiner {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    width: 100%;
    padding: 20px;
}

.BlogItem {
    /*width: 25%;*/
    padding: 10px;
    border-radius: 10px;
    /*outline: 1px solid black;*/
    -webkit-box-shadow: 0px 0px 20px -1px rgba(208, 208, 208, 1);
    -moz-box-shadow: 0px 0px 20px -1px rgba(208, 208, 208, 1);
    box-shadow: 0px 0px 20px -1px rgba(208, 208, 208, 1);
}

/* 1) Container: sabit yükseklik + taşan kısmı gizle */
.BlogItemImgContainer {
    height: 200px;
    overflow: hidden;
    position: relative; /* (ops) ileride badge vs. konumlamak istersen işe yarar */
}

    /* 2) Görsel: alanı tam doldur, gerekirse keserek sığdır */
    .BlogItemImgContainer img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* doldur ve kırp */
        object-position: center; /* kırpma merkezden olsun */
        display: block; /* olası satır boşluğunu kaldır */
    }


.BlogItemText {
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0px;
    color: #5e5e5e;
}

.BlogItemDescription {
    font-size: 14px;
    color: #8f8f8f;
    line-height:1.6;
}


.swiper-wrapper {
    align-items: stretch;
}


.swiper-slide {
    /* Slide kendi içinde de esnesin */
    height: auto; /* önemli */
    display: flex; /* çocuk elemanı esnetmek için */
}

    .swiper-slide > * {
        /* Kart/inner wrapper tam yüksekliği alsın */
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    /* (Opsiyonel) Kart içeriği için: iç bölümler esnesin */
    .swiper-slide .card,
    .swiper-slide .slide-inner {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    /* (Opsiyonel) Görseller taşmasın, düzenli kırılsın */
    .swiper-slide img {
        max-width: 100%;
        height: auto;
        display: block;
        object-fit: cover; /* görsel alanına göre kırpmak isterseniz */
    }















/* 1) Dots konumu (swiper içinde biraz daha aşağı) */
.myBlogSwiper .swiper-pagination {
    bottom: 6px; /* varsayılan ~10-14px, küçültürsen daha aşağı iner */
}

/* 2) Dots rengi (pasif/aktif) */
.myBlogSwiper .swiper-pagination-bullet {
    background: #c1c7cd; /* pasif renk */
    opacity: 1; /* Swiper’ın 0.2 opaklığını kapatır */
}

.myBlogSwiper .swiper-pagination-bullet-active {
    background: var(--mdb); /* marka rengi; istersen #c55b20 sabitle */
}

/* (Opsiyonel) Boyut ve aralık ayarı */
.myBlogSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 999px; /* istersen 18x6 yapıp “pill” görünümü verebilirsin */
}
.myBlogSwiper {
    padding-bottom: 50px;
}
    /* altta ekstra alan */
    .myBlogSwiper .swiper-pagination {
        bottom: -3px;
    }
/* biraz dışarı taşır */



@media (max-width: 48rem) {

    .section-header {
        font-size: 26px;
    }


    #HeroInner {
        flex-wrap:wrap;
        padding:0 10px;
    }

    #HeroText{width:100%;}

    /*#HeroImg{width:100%;}*/
    #HeroImg{ display:none; }
    #HeroBtn {
        display:block;
        text-align:center;
    }


    #FeaturesHeaderText1 {
        font-size: 26px;
    }


    #FeaturesHeaderText2 {
        /*font-size: 22px;
        font-weight: 600;*/
        width:95%
    }

    .FeaturesCardItem {
        width: 100%
    }
    #choose{
        padding:0 5px;
    }

    #choose-inner {
        flex-wrap: wrap;
    }

    #choose-img {
        width: 100%;
    }

    #choose-text {
        width: 100%;
        padding: 20px;
    }

    #choose-inner-header-text2{
        width:95%;
    }

    .ChooseItemCard {
        width: 100%;
        display: flex;
        margin: 10px 0;
    }

    #faq-section {
        padding:20px 0 10px;
    }

    .faq-row-header-text {
        font-size: 14px;
        font-weight: 400;
    }


    #faqHeaderText2 {
        width: 90%;
    }



    #FaqTabHeaderContainer {
        gap: 10px;
    }

    .faq-tab-item {
        padding: 4px 7px;
        border-radius: 30px;
        outline: 1px solid black;
        cursor: pointer;
        font-size:14px;
    }

/*
    .faq-row-header-arrow img {
        height: 30px;
    }
*/
    #PlanCardContainer {
        flex-wrap: wrap;
    }

    #BlogsInner {
        width: 100%;
    }
    #BlogItemConteiner {
        width: 100%;
    }

    #BlogHeaderText2 {
        width: 95%
    }
}