/* INDEX PAGE - MAIN SLIDER */

.main-slider:not(.swiper-initialized) .main-slider-item:not(:first-child),
.main-slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none !important;
}
.main-slider:not(.swiper-initialized) .swiper-wrapper {
    display: block;
    min-height: inherit;
}
.main-slider:not(.swiper-initialized) .main-slider-item:first-child,
.main-slider:not(.swiper-initialized) .swiper-slide:first-child {
    width: 100% !important;
}

.main-slider{
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 36px;
    min-height: clamp(400px, 42vw, 500px);
}
.main-slider-item .main-slider-image{
    width: 100%;
    min-height: 220px;
    aspect-ratio: 4 / 3;
}
.main-slider-item{
    width: 100%;
    height: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    place-items: center;
}
.main-slider .swiper-wrapper{
    display: flex !important;
    align-items: flex-start !important;
    padding-bottom: 16px;
}
.main-slider-content{
    padding-left: 8px;
    align-self: start;
    min-height: clamp(280px, 34vw, 360px);
}
.main-slider-item .main-slider-title{
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 14px;
    line-height: 1.2;
}
.main-slider-item .main-slider-title strong{
    font-size: clamp(38px, 5vw, 56px);
    font-weight: 700;
    color: #60a5fa;
    display: block;
    line-height: 1.15;
    font-family: 'Caveat', cursive, sans-serif;
    min-height: clamp(44px, 5vw, 65px);
}
.main-slider-item .main-slider-description{
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.65;
    max-width: 480px;
}
.main-slider-item .main-slider-button{
    box-sizing: border-box;
    padding: 14px 24px;
    border-radius: 8px;
    background: linear-gradient(to right, var(--dark-blue), var(--light-blue));
    color: var(--text-light);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 48px;
    min-width: min(100%, 320px);
    max-width: 100%;
    line-height: 1.2;
    text-decoration: none;
    contain: layout style;
}
.main-slider-item .main-slider-button svg{
    transition: all 0.4s ease;
}
.main-slider-item .main-slider-button:hover svg{
    transform: rotate(90deg);
}
.main-slider-item .main-slider-image img{
    width: 70% !important;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
}
.main-slider-item .main-slider-image-2 img{
    width: 60% !important;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
.main-slider .swiper-pagination{
    position: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 5;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    margin: 0 auto;
    width: fit-content;
    min-height: 31px;
}
.main-slider .swiper-pagination-bullet{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c0c8e0 !important;
    opacity: 1;
    transition: width 0.25s ease, border-radius 0.25s ease, background 0.25s ease;
}
.main-slider .swiper-pagination-bullet-active{
    width: 36px !important;
    height: 7px;
    border-radius: 99px !important;
    background: var(--dark-blue, #1637a5) !important;
}

.slider-content-images{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    position: relative;
}
.slider-content-images img{
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
    border-radius: 6px;
    overflow: hidden;
}
@media (max-width: 992px) {
    .main-slider-item .main-slider-title{
        font-size: 36px;
    }
    .main-slider-item .main-slider-title strong{
        font-size: 48px;
    }
    .main-slider-item .main-slider-description{
        font-size: 20px;
    }
}
@media (max-width: 768px) {
    .main-slider{
        margin-top: 32px;
    }
    .main-slider-item{
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .main-slider-item .main-slider-title{
        font-size: 32px;
    }
    .main-slider-item .main-slider-title strong{
        font-size: 40px;
    }
    .main-slider-image img{
        width: 100% !important;
    }
}

/* =============================================
   YG Brand Strip — hero altı 3 kart
   ============================================= */

.yg-brand-strip{
    padding: 56px 0 0;
}
.yg-brand-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.yg-brand-card{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 24px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(226,232,240,0.9);
    box-shadow: 0 2px 20px -8px rgba(15,23,42,0.08);
    transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), box-shadow 0.32s ease;
    position: relative;
    overflow: hidden;
}
.yg-brand-card::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255,255,255,0) 60%, rgba(59,130,246,0.03) 100%);
    pointer-events: none;
}
.yg-brand-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 24px 48px -16px rgba(15,23,42,0.13);
}
.yg-brand-icon{
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.yg-brand-icon svg{
    width: 25px;
    height: 25px;
}
.yg-brand-icon--blue{
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}
.yg-brand-icon--indigo{
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}
.yg-brand-icon--violet{
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #7c3aed;
}
.yg-brand-card-badge{
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(37,99,235,0.07);
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
    width: fit-content;
}
.yg-brand-card-body h3{
    font-size: 16.5px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.yg-brand-card-body p{
    margin: 0;
    font-size: 13.5px;
    line-height: 1.68;
    color: #64748b;
}
@media (max-width: 860px){
    .yg-brand-grid{ grid-template-columns: 1fr; gap: 14px; }
    .yg-brand-strip{ padding: 40px 0 0; }
}
@media (max-width: 540px){
    .yg-brand-card{ padding: 22px 18px; flex-direction: row; align-items: flex-start; }
    .yg-brand-card-body{ flex: 1; }
}

/* INDEX PAGE - YG DIGITAL */

.yg-digital{
    width: 100%;
    margin-top: 100px;
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(to bottom, rgba(47, 58, 139, 0.15), rgba(47, 58, 139, 0.1),#ffffff,#ffffff);
}
.yg-digital-title{
    font-size: 44px;
    font-weight: 700;
    -webkit-background-clip: text !important;
    color: transparent;
    background-clip: text !important;
    background-image: linear-gradient(to right, 
    var(--dark-blue), 
    var(--dark-blue),
    rgb(47 ,113 ,255), 
    var(--dark-blue),
    var(--dark-blue));
    background-size: 200% 200%;
    animation: title-gradient-shift 3s linear infinite;
    text-align: center;
    margin-bottom: 40px;
}
.yg-digital-description{
    font-size: 15px;
    color: #333;
    text-align: center;
    line-height: 1.25;
    width: 75%;
    margin: 0 auto;
}
@media screen and (max-width: 992px) {
    .yg-digital{
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .yg-digital-title{
        font-size: 36px;
    }
    .yg-digital-description{
        font-size: 14px;
    }
}
@media screen and (max-width: 768px) {
    .yg-digital-title{
        font-size: 32px;
        margin-bottom: 24px;
    }
    .yg-digital-description{
        font-size: 13px;
        width: 100%;
    }
}

/* INDEX PAGE - REFERANSLAR */

.referanslar{
    width: 100%;
    gap: 24px;
}
.referanslar-title{
    font-size: 44px;
    font-weight: 700;
    -webkit-background-clip: text !important;
    color: transparent;
    background-clip: text !important;
    background-image: linear-gradient(to right, 
    var(--dark-blue), 
    var(--dark-blue),
    rgb(47 ,113 ,255), 
    var(--dark-blue),
    var(--dark-blue));
    background-size: 200% 200%;
    animation: title-gradient-shift 3s linear infinite;
    text-align: center;
    margin-bottom: 36px;
    margin-top: 64px;
}
.referanslar .referans{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    padding: 4px 16px;
}
.referanslar .referans img{
    width: 100%;
    height: 80px;
    object-fit: contain;
    object-position: center;
}
.referanslar-button{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    background: linear-gradient(to right, var(--dark-blue), var(--light-blue));
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.4s ease-in-out;
    width: fit-content;
    margin: 24px auto 0 auto;
    cursor: pointer;
    margin-bottom: 80px;
}
.referanslar-button svg{
    transition: all 0.4s ease-in-out;
}
.referanslar-button:hover svg{
    transform: rotate(90deg);
}

@media screen and (max-width: 992px) {
    .referanslar-title{
        font-size: 36px;
    }
}

@media screen and (max-width: 768px) {
    .referanslar-button{
        margin-bottom: 36px;
    }
}

/* INDEX PAGE - CARDS */

.cards{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    row-gap: 50px;
    margin-top: 120px !important;
}
.cards .card{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 48px 16px 24px 16px;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
    position: relative;
}
.cards .card:hover{
    transform: translateY(-2px);
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid var(--dark-blue);
}
.cards .card-icon{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}
.cards .card:hover .card-icon{
    border: 1px solid var(--dark-blue);
}
.cards .card-icon img{
    width: 40px;
    height: 40px;
    filter: brightness(0) saturate(100%) invert(15%) sepia(36%) saturate(5318%) hue-rotate(220deg) brightness(91%) contrast(89%);
    transition: all 0.4s ease-in-out;
}
.cards .card-title{
    font-size: 18px;
    font-weight: 400;
    color: var(--text-dark);
    text-align: center;
}
.cards .card-description{
    font-size: 14px;
    color: #6b7280;
    text-align: center;
    padding: 0 12px;
}

@media screen and (max-width: 992px) {
    .cards{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 768px) {
    .cards{
        grid-template-columns: repeat(1, 1fr);
    }
}

/* INDEX PAGE - SSS */

/* =============================================
   SSS / FAQ Section
   ============================================= */
.sss {
    width: 100%;
    background: #f8f9fc;
    padding: 80px 0;
}

.sss-layout {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
}

/* Left column */
.sss-left {
    position: sticky;
    top: 96px;
}

.sss-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--light-blue);
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 20px;
    padding: 4px 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.sss-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.18;
    -webkit-background-clip: text !important;
    color: transparent;
    background-clip: text !important;
    background-image: linear-gradient(135deg,
        var(--dark-blue),
        var(--light-blue),
        var(--dark-blue));
    background-size: 200% 200%;
    animation: title-gradient-shift 3s linear infinite;
    margin-bottom: 16px;
}

.sss-sub {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 28px;
}

.sss-more-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--light-blue);
    text-decoration: none;
    transition: gap 0.2s ease, opacity 0.2s ease;
}

.sss-more-link:hover {
    gap: 10px;
    opacity: 0.8;
}

/* Right column — contains .faq-list from component */
.sss-right {
    width: 100%;
}

/* Responsive */
@media (max-width: 992px) {
    .sss-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .sss-left {
        position: static;
    }
    .sss-title {
        font-size: 32px;
    }
}

@media (max-width: 576px) {
    .sss {
        padding: 56px 0;
    }
    .sss-title {
        font-size: 28px;
    }
}

/* INDEX PAGE - COMMENTS */

.comments{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 7%;
    padding: 48px 0;
}

.comments-right-title{
    font-size: 48px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 24px;
}
.comments-right-subtitle{
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-dark);
    max-width: 95%;
}
.comments .left{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.comments .left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.comments .left .dot-pattern{
    position: absolute;
    bottom: -50px;
    right: -40px;
    z-index: -1;
}
.comments .left .dot-pattern img{
    width: 128px;
    height: 128px;
    object-fit: cover;
}
.comments-content{
    position: absolute;
    top: 30%;
    left: 5%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(to right, var(--dark-blue), var(--light-blue));
    border-radius: 8px;
    color: #fff;
    max-width: 75%;
    animation: jump 2s linear infinite alternate;
    z-index: 1;
}
.comments-content::after{
    content: "";
    position: absolute;
    bottom: 0px;
    left: -21px;
    width: 0;
    height: 0;
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 32px solid var(--dark-blue);
    transform: rotate(135deg);
    z-index: -1;
}
.comments-content svg{
    width: 96px;
    height: auto;
    animation: bulp 1s linear infinite alternate;
}
.comment-text{
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    font-weight: 400;
}
.comment-author-name{
    text-align: right;
    font-size: 14px;
    margin-top: 16px;
}
.comment{
    display: none;
}
.comment.active{
    display: block;
}

@media screen and (max-width: 992px) {
    .comments{
        grid-template-columns: repeat(1, 1fr);
    }
    .comments .left{
        width: 75%;
        margin: 0 auto;
    }
    .comments-content {
        left: -17%;
        top: 45%;
    }
    .comments-right-title{
        font-size: 32px;
    }
    .comments-right-subtitle{
        font-size: 16px;
    }
    .comments-content svg{
        width: 64px;
    }
    .comment-text{
        font-size: 15px;
    }
    .comment-author-name{
        font-size: 13px;
    }
}

@media screen and (max-width: 768px) {
    .comments .left{
        width: 100%;
    }
    .comments-content {
        top: 0%;
        left: 0;
        max-width: 95%;
    }
    .comments .left .dot-pattern{
        right: 0;
        bottom: -40px;
    }
    .comment-text{
        font-size: 14px;
    }
    .comment-author-name{
        font-size: 12px;
    }
}

/* =============================================
   REFERANSLAR MARQUEE - Modern Redesign
   ============================================= */
   .refs-marquee-section{padding:64px 0 48px;background:#fff;overflow:hidden;}
   .refs-marquee-head{text-align:center;max-width:560px;margin:0 auto 44px;}
   .refs-marquee-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--light-blue);background:#eef2ff;border:1px solid #c7d2fe;border-radius:20px;padding:5px 14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;}
   .refs-marquee-title{font-size:36px;font-weight:800;line-height:1.2;letter-spacing:-0.02em;margin-bottom:14px;-webkit-background-clip:text !important;color:transparent;background-clip:text !important;background-image:linear-gradient(135deg,var(--dark-blue),var(--light-blue),var(--dark-blue));background-size:200% 200%;animation:title-gradient-shift 3s linear infinite;-webkit-text-fill-color:transparent;}
   .refs-marquee-sub{font-size:14px;color:#8892a4;line-height:1.7;max-width:440px;margin:0 auto;}
   .refs-marquee-footer{display:flex;justify-content:center;margin-top:28px;}
   @media(max-width:768px){.refs-marquee-section{padding:56px 0;}.refs-marquee-title{font-size:26px;}}
   
   /* Marquee seridi */
   .referanslar-marquee-wrap{margin:0;overflow:hidden;padding:6px 0;}
   .referanslar-marquee{
       overflow: hidden;
       -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
       mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
   }
   .referanslar-marquee-track{
       display: flex;
       align-items: center;
       width: max-content;
       gap: 14px;
       padding: 10px 0;
       animation: yg-ref-marquee 48s linear infinite;
       animation-play-state: running;
       will-change: transform;
   }
   .referanslar-marquee:hover .referanslar-marquee-track{
       animation-play-state: paused;
   }
   @keyframes yg-ref-marquee{
       from{ transform: translateX(0); }
       to{ transform: translateX(-50%); }
   }
   .referanslar-marquee .referans-marquee-item{
       flex: 0 0 auto;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 14px 24px;
       background: #fff;
       border: 1.5px solid #eaecf0;
       border-radius: 14px;
       transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
   }
   .referanslar-marquee .referans-marquee-item:hover{
       border-color: #c0ccf8;
       box-shadow: 0 4px 16px rgba(22, 55, 165, 0.08);
       transform: translateY(-3px);
   }
   .referanslar-marquee .referans-marquee-item img{
       height: 36px;
       width: auto;
       max-width: 128px;
       object-fit: contain;
       filter: grayscale(0.8) opacity(0.5);
       transition: filter 0.3s ease;
   }
   .referanslar-marquee .referans-marquee-item:hover img{
       filter: grayscale(0) opacity(1);
   }
   
   #cursor-follower{
       position: fixed;
       left: 0;
       top: 0;
       width: 8px;
       height: 8px;
       margin: -4px 0 0 -4px;
       border-radius: 50%;
       background: radial-gradient(circle at 28% 28%, #93c5fd, #2563eb 55%, #1d4ed8);
       pointer-events: none;
       z-index: 999999;
       opacity: 0;
       transition: opacity 0.2s ease;
       box-shadow:
           0 0 0 1.5px rgba(255,255,255,0.95),
           0 0 0 2.5px rgba(37,99,235,0.25),
           0 2px 16px rgba(29,78,216,0.4);
       will-change: transform;
   }
   #cursor-follower.is-on{ opacity: 1; }
   /* Sadece ince işaretçi yoksa gizle (dokunmatikli laptop’ta fare varken yanlışlıkla gizlenmesin) */
   @media not (any-pointer: fine){
       #cursor-follower{ display: none !important; }
   }
   
   /* Scroll reveal — içerik her zaman görünür, animasyon isteğe bağlı */
   .reveal-on-scroll{
       opacity: 1;
       transform: none;
   }
   .reveal-on-scroll.is-revealed{
       opacity: 1;
       transform: none;
   }
   .reveal-on-scroll.reveal-delay-1{ transition-delay: 0.14s; }
   .reveal-on-scroll.reveal-delay-2{ transition-delay: 0.28s; }
   .reveal-on-scroll.reveal-delay-3{ transition-delay: 0.42s; }
   
   .sss .container > a.yg-outline-cta{
       margin: 24px auto 0;
   }
   /* E-ticaret modulleri section layout */
   .e-ticaret-modulleri-section{ padding: clamp(64px, 8vw, 80px) 0; background: #f8faff; }
   .e-ticaret-modulleri-cta-wrap{ display: flex; justify-content: center; margin-top: 36px; }
   .e-ticaret-modulleri-button.yg-outline-cta{ font-size: 0.9rem; }
   .index .e-ticaret-modul .e-ticaret-modul-button.yg-outline-cta{
       margin-top: 6px;
   }
   .main-slider .main-slider-button.yg-outline-cta{
       justify-content: center;
   }
   .main-slider .main-slider-button.yg-outline-cta:hover svg{
       transform: rotate(90deg);
   }

   @media (prefers-reduced-motion: no-preference) {
       .main-slider.swiper-initialized .main-slider-item .main-slider-image img {
           animation: jump 1500ms ease-in-out infinite alternate forwards;
       }
   }
   
   /* Slider kicker badge */
   .slider-kicker{
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 5px 13px;
       background: rgba(37,99,235,0.08);
       color: #2563eb;
       border-radius: 999px;
       font-size: 11.5px;
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;
       margin-bottom: 18px;
       border: 1px solid rgba(37,99,235,0.14);
   }

   /* Slider — telefon / e-posta kaydı (cam kart, net hiyerarşi) */
   .main-slider-lead{
       position: relative;
       isolation: isolate;
       display: flex;
       flex-wrap: wrap;
       align-items: stretch;
       gap: 12px;
       margin-top: 24px;
       max-width: 540px;
       padding: 16px 16px 14px;
       border-radius: 18px;
   }
   .main-slider-lead::before{
       content: "";
       position: absolute;
       inset: 0;
       border-radius: 18px;
       z-index: 0;
       background: linear-gradient(145deg,
           rgba(255,255,255,0.97) 0%,
           rgba(248,250,252,0.94) 45%,
           rgba(241,245,249,0.92) 100%);
       border: 1px solid rgba(226,232,240,0.95);
       box-shadow:
           0 1px 0 rgba(255,255,255,1) inset,
           0 12px 40px -8px rgba(30,64,175,0.12),
           0 4px 16px -4px rgba(15,23,42,0.08);
   }
   .main-slider-lead > *{
       position: relative;
       z-index: 1;
   }
   .main-slider-lead input[type="email"],
   .main-slider-lead input[type="tel"]{
       flex: 1 1 200px;
       min-height: 50px;
       padding: 0 18px;
       border-radius: 12px;
       border: 1px solid #e2e8f0;
       font-size: 15px;
       font-weight: 500;
       color: #0f172a;
       background: #fff;
       box-shadow:
           0 1px 2px rgba(15,23,42,0.04) inset,
           0 2px 8px rgba(15,23,42,0.04);
       transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
   }
   .main-slider-lead input[type="email"]::placeholder,
   .main-slider-lead input[type="tel"]::placeholder{
       color: #94a3b8;
       font-weight: 400;
   }
   .main-slider-lead input[type="email"]:hover,
   .main-slider-lead input[type="tel"]:hover{
       border-color: #cbd5e1;
   }
   .main-slider-lead input[type="email"]:focus,
   .main-slider-lead input[type="tel"]:focus{
       outline: none;
       border-color: #3b82f6;
       box-shadow:
           0 0 0 4px rgba(59,130,246,0.18),
           0 1px 2px rgba(15,23,42,0.04) inset;
       transform: translateY(-1px);
   }
   .main-slider .main-slider-lead-submit.yg-outline-cta{
       flex: 0 0 auto;
       min-height: 50px;
   }
.main-slider .main-slider-lead-submit.yg-outline-cta:disabled{
    opacity: 0.5;
    cursor: wait;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}
   .main-slider-lead-hint{
       width: 100%;
       font-size: 12px;
       line-height: 1.45;
       color: #64748b;
       margin: 2px 0 0;
       letter-spacing: 0.01em;
   }
   
   
   
   /* =============================================
      Value Tabs — dikey sidebar + panel grid stacking
      ============================================= */
   .value-tabs-section{
       padding: 80px 0 80px;
       position: relative;
       overflow: hidden;
       background-color: #f8fafc;
       background-image: url(https://yg.digital/public/images/eticaret-yazilimi.webp);
       background-repeat: no-repeat;
       background-size: cover;
       background-position: top;
       margin-top: 80px;
       min-height: clamp(520px, 55vw, 720px);
   }
   .value-tabs-section::before{
       content: "";
       position: absolute;
       inset: 0;
       background:
           radial-gradient(ellipse 90% 60% at 50% -15%, rgba(59,130,246,0.04), transparent 58%),
           radial-gradient(ellipse 60% 40% at 100% 50%, rgba(99,102,241,0.06), transparent 50%),
           linear-gradient(180deg, #f8fafcab 0%, #ffffff33 45%, #f1f5f929 100%);
       z-index: 0;
   }
   .value-tabs-section .container{
       position: relative;
       z-index: 1;
   }
   /* Intro */
   .vt-intro{
       text-align: center;
       max-width: 680px;
       margin: 0 auto 48px;
   }
   .vt-intro-tag{
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 6px 14px;
       background: rgba(37,99,235,0.08);
       color: #2563eb;
       border-radius: 999px;
       font-size: 12px;
       font-weight: 700;
       letter-spacing: 0.04em;
       text-transform: uppercase;
       margin-bottom: 16px;
       border: 1px solid rgba(37,99,235,0.14);
   }
   .vt-intro > p{
       margin: 0;
       font-size: 1.05rem;
       line-height: 1.65;
       color: #64748b;
   }
   /* 2-kolon layout */
   .vt-body{
       display: grid;
       grid-template-columns: 310px 1fr;
       gap: 20px;
       align-items: start;
   }
   /* Sol dikey nav */
   .vt-nav{
       display: flex;
       flex-direction: column;
       gap: 4px;
       background: rgba(255,255,255,0.78);
       backdrop-filter: blur(14px);
       -webkit-backdrop-filter: blur(14px);
       border-radius: 20px;
       border: 1px solid rgba(226,232,240,0.95);
       padding: 10px;
       box-shadow:
           0 1px 0 rgba(255,255,255,1) inset,
           0 12px 40px -16px rgba(15,23,42,0.1);
   }
   .value-tab{
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 11px 13px;
       border-radius: 13px;
       border: 1px solid transparent;
       background: transparent;
       color: #475569;
       font-size: 13px;
       font-weight: 500;
       cursor: pointer;
       text-align: left;
       width: 100%;
       transition:
           background 0.22s ease,
           color 0.22s ease,
           border-color 0.22s ease,
           box-shadow 0.22s ease;
   }
   .value-tab:hover{
       background: rgba(37,99,235,0.05);
       border-color: rgba(37,99,235,0.1);
       color: #1e293b;
   }
   .value-tab.is-active{
       background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #1d4ed8 100%);
       color: #fff;
       border-color: rgba(255,255,255,0.1);
       box-shadow:
           0 1px 0 rgba(255,255,255,0.2) inset,
           0 8px 24px -6px rgba(29,78,216,0.4);
   }
   .vt-ti{
       width: 36px;
       height: 36px;
       flex-shrink: 0;
       border-radius: 10px;
       background: rgba(37,99,235,0.08);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background 0.22s ease;
   }
   .vt-ti svg{
       width: 17px;
       height: 17px;
   }
   .value-tab.is-active .vt-ti{
       background: rgba(255,255,255,0.18);
   }
   .vt-tb{
       flex: 1;
       min-width: 0;
       display: flex;
       flex-direction: column;
       gap: 2px;
   }
   .vt-tb strong{
       font-size: 13px;
       font-weight: 700;
       line-height: 1.3;
       color: inherit;
       display: block;
   }
   .vt-tb span{
       font-size: 11.5px;
       font-weight: 400;
       color: #94a3b8;
       line-height: 1.3;
       display: block;
   }
   .value-tab.is-active .vt-tb span{
       color: rgba(255,255,255,0.65);
   }
   .vt-arrow{
       flex-shrink: 0;
       opacity: 0;
       transform: translateX(-4px);
       transition: opacity 0.2s ease, transform 0.2s ease;
   }
   .value-tab:hover .vt-arrow,
   .value-tab.is-active .vt-arrow{
       opacity: 1;
       transform: none;
   }
   /* Sağ panel sarmalayıcı */
   .vt-panels-wrap{
       background: #fff;
       border-radius: 22px;
       padding: 32px 28px;
       border: 1px solid rgba(226,232,240,0.95);
       box-shadow:
           0 0 0 1px rgba(59,130,246,0.05),
           0 24px 56px -20px rgba(15,23,42,0.13),
           0 1px 0 rgba(255,255,255,1) inset;
       position: relative;
       overflow: hidden;
   }
   .vt-panels-wrap::before{
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 3px;
       background: linear-gradient(90deg, #3b82f6, #60a5fa, #a78bfa);
   }
   /* CSS grid stacking — tab değişiminde sayfa kayması olmaz */
   .vt-panels-grid{
       display: grid;
   }
   .value-tab-panel{
       grid-area: 1 / 1;
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
       transition: opacity 0.38s cubic-bezier(0.22,1,0.36,1);
   }
   .value-tab-panel.is-active{
       opacity: 1;
       visibility: visible;
       pointer-events: auto;
   }
   /* Panel başlık satırı */
   .vt-panel-head{
       display: flex;
       align-items: flex-start;
       gap: 16px;
       margin-bottom: 24px;
       padding-bottom: 20px;
       border-bottom: 1px solid #f1f5f9;
   }
   .vt-ph-icon{
       width: 46px;
       height: 46px;
       border-radius: 13px;
       background: linear-gradient(135deg, rgba(37,99,235,0.09), rgba(99,102,241,0.07));
       border: 1px solid rgba(37,99,235,0.12);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }
   .vt-ph-icon svg{
       width: 21px;
       height: 21px;
       stroke: #2563eb;
   }
   .vt-panel-head > div{
       flex: 1;
       min-width: 0;
   }
   .vt-panel-head h3{
       font-size: clamp(1.05rem, 1.8vw, 1.3rem);
       font-weight: 800;
       color: #0f172a;
       margin: 0 0 4px;
       letter-spacing: -0.02em;
       text-align: left;
   }
   .vt-panel-head p{
       margin: 0;
       font-size: 13.5px;
       color: #64748b;
       line-height: 1.5;
   }
   /* Feature kart grid */
   .value-tab-columns{
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 14px;
   }
   .value-tab-columns > div{
       padding: 18px 20px;
       border-radius: 14px;
       background: linear-gradient(160deg, #f8fafc 0%, #ffffff 60%);
       border: 1px solid #eef2f7;
       position: relative;
       overflow: hidden;
       transition:
           transform 0.28s cubic-bezier(0.22,1,0.36,1),
           box-shadow 0.28s ease,
           border-color 0.22s ease;
   }
   .value-tab-columns > div::before{
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 3px;
       bottom: 0;
       border-radius: 3px 0 0 3px;
       background: linear-gradient(180deg, #3b82f6, #a78bfa);
       opacity: 0;
       transition: opacity 0.22s ease;
   }
   .value-tab-columns > div:hover{
       transform: translateY(-3px);
       border-color: rgba(59,130,246,0.18);
       box-shadow: 0 10px 28px -8px rgba(15,23,42,0.1);
   }
   .value-tab-columns > div:hover::before{
       opacity: 1;
   }
   .value-tab-panel.is-active .value-tab-columns > div{
       animation: yg-col-rise 0.5s cubic-bezier(0.22,1,0.36,1) backwards;
   }
   .value-tab-panel.is-active .value-tab-columns > div:nth-child(1){ animation-delay: 0.04s; }
   .value-tab-panel.is-active .value-tab-columns > div:nth-child(2){ animation-delay: 0.10s; }
   .value-tab-panel.is-active .value-tab-columns > div:nth-child(3){ animation-delay: 0.16s; }
   .value-tab-panel.is-active .value-tab-columns > div:nth-child(4){ animation-delay: 0.22s; }
   @keyframes yg-col-rise{
       from{ opacity: 0; transform: translateY(16px); }
       to{ opacity: 1; transform: none; }
   }
   .value-tab-columns h4{
       font-size: 13.5px;
       font-weight: 700;
       color: #1e293b;
       margin: 0 0 7px;
       letter-spacing: -0.01em;
   }
   .value-tab-columns p{
       margin: 0;
       font-size: 13px;
       line-height: 1.65;
       color: #64748b;
   }
   /* Responsive */
   @media (max-width: 1060px){
       .vt-body{ grid-template-columns: 280px 1fr; }
   }
   @media (max-width: 840px){
       .vt-body{ grid-template-columns: 1fr; gap: 16px; }
       .vt-nav{ flex-direction: row; flex-wrap: wrap; gap: 6px; }
       .value-tab{ flex: 1 1 calc(50% - 6px); }
       .vt-tb span,.vt-arrow{ display: none; }
       .vt-ti{ width: 30px; height: 30px; border-radius: 8px; }
       .vt-ti svg{ width: 15px; height: 15px; }
   }
   @media (max-width: 540px){
       .value-tab{ flex: 1 1 100%; }
       .value-tab-columns{ grid-template-columns: 1fr; }
       .vt-panels-wrap{ padding: 22px 16px; }
   }
   
/* =============================================
   FLOAT SHOWCASE — Modern zigzag feature rows
   ============================================= */
.float-showcase-section{
    padding: clamp(72px, 9vw, 72px) 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}
/* Subtle background decoration */
.float-showcase-section::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse 60% 40% at 10% 30%, rgba(59,130,246,0.04) 0%, transparent 65%),
        radial-gradient(ellipse 50% 35% at 90% 70%, rgba(99,102,241,0.04) 0%, transparent 65%);
    pointer-events: none;
}
/* Row layout */
.float-showcase-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 6vw, 72px);
    align-items: center;
    margin-bottom: clamp(64px, 10vw, 112px);
    position: relative;
}
/* Thin divider between rows */
.float-showcase-row:not(:last-child)::after{
    content: '';
    position: absolute;
    bottom: calc(-1 * clamp(32px, 5vw, 56px));
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #c7d2fe, transparent);
}
.float-showcase-row:last-child{ margin-bottom: 0; }
.float-showcase-row--reverse .float-showcase-text{ order: 2; }
.float-showcase-row--reverse .float-showcase-visual{ order: 1; }

/* Kicker pill — same pattern as other sections */
.float-showcase-kicker{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--light-blue);
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 20px;
    padding: 5px 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}
/* Title with gradient em */
.float-showcase-title{
    margin: 0 0 16px;
    font-size: clamp(1.75rem, 3.5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #0f172a;
}
.float-showcase-title em{
    font-style: normal;
    -webkit-background-clip: text !important;
    color: transparent;
    background-clip: text !important;
    background-image: linear-gradient(135deg, var(--dark-blue) 0%, var(--light-blue) 100%);
    -webkit-text-fill-color: transparent;
}
.float-showcase-lead{
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.72;
    color: #64748b;
    max-width: 36em;
}
/* Feature bullets */
.float-showcase-feats{
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.float-showcase-feats li{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
    line-height: 1.4;
}
.fsc-feat-dot{
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dark-blue), var(--light-blue));
}

/* Visual frame */
.float-showcase-frame{
    position: relative;
}
/* Gradient glow behind image */
.float-showcase-glow{
    position: absolute;
    inset: -16px;
    border-radius: 28px;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(59,130,246,0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.float-showcase-float-wrap{
    position: relative;
    z-index: 1;
    border-radius: clamp(16px, 2.5vw, 24px);
    overflow: hidden;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
    border: 1.5px solid #e2e8f8;
    box-shadow:
        0 2px 0 rgba(255,255,255,0.9) inset,
        0 20px 52px -16px rgba(22,55,165,0.14);
    animation: float-showcase-bob 5.5s ease-in-out infinite;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.float-showcase-row:hover .float-showcase-float-wrap{
    box-shadow:
        0 2px 0 rgba(255,255,255,0.9) inset,
        0 28px 60px -14px rgba(22,55,165,0.2);
}
.float-showcase-float-wrap img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
@keyframes float-showcase-bob{
    0%, 100%{ transform: translate3d(0, 0, 0); }
    50%{ transform: translate3d(0, -10px, 0); }
}
/* Floating stat badge */
.float-showcase-badge{
    position: absolute;
    bottom: -16px;
    left: -16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #e2e8f8;
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: 0 8px 28px -8px rgba(22,55,165,0.16);
    animation: float-showcase-bob 5.5s ease-in-out 0.8s infinite;
}
.float-showcase-badge--right{
    left: auto;
    right: -16px;
}
.fsc-badge-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--dark-blue) 0%, var(--light-blue) 100%);
    color: #fff;
    flex-shrink: 0;
}
.float-showcase-badge div{
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.fsc-badge-num{
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #0f172a;
}
.fsc-badge-label{
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    line-height: 1;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px){
    .float-showcase-row,
    .float-showcase-row.float-showcase-row--reverse{
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .float-showcase-row--reverse .float-showcase-text,
    .float-showcase-row--reverse .float-showcase-visual{ order: unset; }
    .float-showcase-row--reverse .float-showcase-visual{ order: -1; }
    .float-showcase-badge{ bottom: -12px; left: 12px; }
    .float-showcase-badge--right{ left: auto; right: 12px; }
}
@media (max-width: 520px){
    .float-showcase-title{ font-size: 1.65rem; }
    .float-showcase-lead{ font-size: 14px; }
}
   
   /* =============================================
      STAT STRIP — Modern redesign
      ============================================= */
   .stat-strip-section{
       padding: clamp(64px, 8vw, 64px) 0;
       background: #fff;
       position: relative;
       overflow: hidden;
   }
   /* Subtle radial glow in bg */
   .stat-strip-section::before{
       content: '';
       position: absolute;
       top: -60px;
       left: 50%;
       transform: translateX(-50%);
       width: 700px;
       height: 340px;
       background: radial-gradient(ellipse at center, rgba(59,130,246,0.06) 0%, transparent 70%);
       pointer-events: none;
   }
   .stat-strip-header{
       text-align: center;
       max-width: 560px;
       margin: 0 auto clamp(36px, 5vw, 52px);
       padding: 0 12px;
       position: relative;
   }
   /* Tag badge — matches refs-marquee-tag / platforms-tag */
   .stat-strip-tag{
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-size: 11px;
       font-weight: 700;
       color: var(--light-blue);
       background: #eef2ff;
       border: 1px solid #c7d2fe;
       border-radius: 20px;
       padding: 5px 14px;
       text-transform: uppercase;
       letter-spacing: 1px;
       margin-bottom: 16px;
   }
   .stat-strip-title{
       margin: 0 0 14px;
       font-size: clamp(1.65rem, 3.2vw, 2.15rem);
       font-weight: 800;
       letter-spacing: -0.03em;
       line-height: 1.15;
       -webkit-background-clip: text !important;
       color: transparent;
       background-clip: text !important;
       background-image: linear-gradient(135deg, var(--dark-blue) 0%, var(--light-blue) 55%, var(--dark-blue) 100%);
       background-size: 200% 200%;
       animation: title-gradient-shift 3s linear infinite;
       -webkit-text-fill-color: transparent;
   }
   .stat-strip-lead{
       margin: 0;
       font-size: 14px;
       line-height: 1.7;
       color: #8892a4;
       max-width: 420px;
       margin: 0 auto;
   }
   /* 3-col grid */
   .stat-strip-grid{
       list-style: none;
       margin: 0;
       padding: 0;
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: clamp(16px, 3vw, 24px);
       position: relative;
   }
   /* Card */
   .stat-strip-card{
       position: relative;
       padding: clamp(28px, 4vw, 36px) clamp(20px, 2.5vw, 28px) clamp(24px, 3.5vw, 30px);
       border-radius: 20px;
       background: #fff;
       border: 1.5px solid #eaecf0;
       text-align: center;
       transition:
           transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
           box-shadow 0.35s ease,
           border-color 0.3s ease;
       overflow: hidden;
   }
   /* Gradient top accent line */
   .stat-strip-card::before{
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 3px;
       background: linear-gradient(90deg, var(--dark-blue, #1637a5) 0%, var(--light-blue, #2563eb) 100%);
       border-radius: 20px 20px 0 0;
       opacity: 0;
       transition: opacity 0.3s ease;
   }
   /* Subtle inner glow */
   .stat-strip-card::after{
       content: '';
       position: absolute;
       inset: 0;
       border-radius: 20px;
       background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59,130,246,0.05) 0%, transparent 70%);
       pointer-events: none;
       opacity: 0;
       transition: opacity 0.3s ease;
   }
   .stat-strip-card:hover{
       transform: translateY(-5px);
       border-color: #c7d2fe;
       box-shadow: 0 16px 40px -12px rgba(29, 78, 215, 0.15);
   }
   .stat-strip-card:hover::before{ opacity: 1; }
   .stat-strip-card:hover::after{ opacity: 1; }
   /* Icon badge */
   .stat-strip-icon{
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 44px;
       height: 44px;
       border-radius: 12px;
       background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
       color: var(--light-blue, #2563eb);
       margin-bottom: 16px;
       transition: background 0.3s ease, transform 0.3s ease;
   }
   .stat-strip-card:hover .stat-strip-icon{
       background: linear-gradient(135deg, var(--dark-blue, #1637a5) 0%, var(--light-blue, #2563eb) 100%);
       color: #fff;
       transform: scale(1.08);
   }
   /* Counter value */
   .stat-strip-value{
       display: block;
       margin: 0 0 6px;
       font-size: clamp(2.4rem, 5.5vw, 3.2rem);
       font-weight: 800;
       font-variant-numeric: tabular-nums;
       letter-spacing: -0.04em;
       line-height: 1;
       -webkit-background-clip: text !important;
       color: transparent;
       background-clip: text !important;
       background-image: linear-gradient(135deg, var(--dark-blue, #1637a5) 0%, var(--light-blue, #2563eb) 50%, #3b82f6 100%);
   }
   .stat-strip-label{
       display: block;
       font-size: 0.95rem;
       font-weight: 700;
       color: #1e293b;
       letter-spacing: -0.01em;
       margin-bottom: 8px;
   }
   .stat-strip-desc{
       margin: 0;
       font-size: 0.82rem;
       line-height: 1.6;
       color: #8892a4;
   }
   @media (max-width: 768px){
       .stat-strip-grid{
           grid-template-columns: 1fr;
           max-width: 380px;
           margin: 0 auto;
       }
       .stat-strip-card{ text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
       .stat-strip-card:hover{ transform: none; }
   }
   
   /* Müşteri yorumları — site mavileri (CSS değişkenleri), gölgesiz */
   /* =============================================
      TESTIMONIALS - Modern Redesign
      ============================================= */
   
   .testimonials-section {
       padding: 80px 0;
       background: linear-gradient(180deg, #fff 0%, #f4f7ff 50%, #fff 100%);
       position: relative;
       overflow: hidden;
   }
   
   /* Dekoratif blob */
   .testimonials-section::before {
       content: '';
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       width: 600px;
       height: 600px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(66, 109, 255, 0.06) 0%, transparent 65%);
       pointer-events: none;
   }
   
   /* Header */
   .testimonials-header {
       text-align: center;
       max-width: 560px;
       margin: 0 auto 48px;
       padding: 0 12px;
   }
   
   .testimonials-tag {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-size: 11px;
       font-weight: 700;
       color: var(--light-blue);
       background: #eef2ff;
       border: 1px solid #c7d2fe;
       border-radius: 20px;
       padding: 5px 14px;
       text-transform: uppercase;
       letter-spacing: 1px;
       margin-bottom: 16px;
   }
   
   .testimonials-header h2.testimonials-title,
   .vt-intro h2.value-tabs-main-title {
       font-size: clamp(1.75rem, 4vw, 2.6rem);
       font-weight: 800;
       letter-spacing: -0.02em;
       margin: 0 0 14px;
       line-height: 1.2;
       -webkit-background-clip: text !important;
       color: transparent;
       background-clip: text !important;
       background-image: linear-gradient(135deg,
           var(--dark-blue, #1637a5),
           var(--light-blue, #1d4ed7),
           var(--dark-blue, #1637a5));
       background-size: 200% 200%;
       animation: title-gradient-shift 3s linear infinite;
       -webkit-text-fill-color: transparent;
   }
   
   .testimonials-header p {
       margin: 0;
       font-size: 15px;
       line-height: 1.65;
       color: #8892a4;
   }
   
   /* Carousel */
   .testimonials-carousel {
       position: relative;
       max-width: 1140px;
       margin: 0 auto;
   }
   
   .tc-viewport {
       position: relative;
       overflow: hidden;
       padding: 24px 0 80px;
       -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
       mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
   }
   
   .testimonials-swiper {
       width: 100%;
       overflow: hidden;
   }
   
   .testimonials-swiper .swiper-wrapper {
       align-items: stretch;
   }
   
   .testimonials-swiper .swiper-slide {
       width: min(660px, 88vw);
       height: auto;
       box-sizing: border-box;
   }
   
   /* Kart */
   .testimonial-card {
       width: 100%;
       height: 100%;
       box-sizing: border-box;
       border-radius: 22px;
       border: 1.5px solid #eaecf0;
       background: #fff;
       transform: scale(0.9);
       opacity: 0.38;
       transition:
           transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
           opacity 0.45s ease,
           border-color 0.4s ease,
           box-shadow 0.4s ease,
           background 0.4s ease;
   }
   
   .swiper-slide-active {
       z-index: 2;
   }
   
   .swiper-slide-active .testimonial-card {
       transform: scale(1);
       opacity: 1;
       border-color: transparent;
       background: linear-gradient(145deg, var(--dark-blue, #1637a5) 0%, #2151d8 55%, var(--light-blue, #1d4ed7) 100%);
       box-shadow: none;
   }
   
   /* Kart gövdesi */
   .testimonial-card-body {
       padding: 32px 30px 28px;
       display: flex;
       flex-direction: column;
       height: 100%;
       box-sizing: border-box;
   }
   
   /* Yıldızlar */
   .testimonial-stars {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 3px;
       margin-bottom: 20px;
       color: #e5c84a;
   }
   
   .swiper-slide-active .testimonial-stars {
       color: #fde68a;
   }
   
   /* Büyük açılış tırnağı */
   .testimonial-qmark {
       font-family: Georgia, "Times New Roman", serif;
       font-size: 72px;
       line-height: 0.6;
       height: 36px;
       text-align: center;
       color: rgba(22, 55, 165, 0.12);
       margin-bottom: 10px;
       display: block;
       font-weight: 700;
       user-select: none;
   }
   
   .swiper-slide-active .testimonial-qmark {
       color: rgba(255, 255, 255, 0.3);
   }
   
   /* Alıntı */
   .testimonial-quote {
       margin: 0 0 auto;
       padding: 0;
       border: none;
       flex: 1;
   }
   
   .testimonial-quote p {
       margin: 0;
       text-align: center;
       font-size: 15px;
       line-height: 1.65;
       font-weight: 400;
       color: #6b7280;
       font-style: italic;
   }
   
   .swiper-slide-active .testimonial-quote p {
       color: rgba(255, 255, 255, 0.88);
       font-weight: 400;
   }
   
   /* Footer: avatar + ÅŸirket */
   .testimonial-footer {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 12px;
       padding-top: 24px;
       margin-top: 24px;
       border-top: 1px solid #f1f3f8;
   }
   
   .swiper-slide-active .testimonial-footer {
       border-top-color: rgba(255, 255, 255, 0.18);
   }
   
   .testimonial-avatar {
       width: 44px;
       height: 44px;
       border-radius: 50%;
       overflow: hidden;
       background: linear-gradient(135deg, var(--dark-blue), var(--light-blue));
       display: flex;
       align-items: flex-end;
       justify-content: center;
       flex-shrink: 0;
       border: 2px solid rgba(22, 55, 165, 0.15);
   }
   
   .testimonial-avatar img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: top center;
       filter: brightness(0) invert(1);
   }
   
   .swiper-slide-active .testimonial-avatar {
       border-color: rgba(255, 255, 255, 0.4);
       background: rgba(255, 255, 255, 0.18);
   }
   
   .swiper-slide-active .testimonial-avatar img {
       filter: brightness(0) invert(1);
   }
   
   .testimonial-author {
       font-size: 13px;
       font-weight: 700;
       color: #374151;
       margin: 0;
       letter-spacing: 0.02em;
   }
   
   .swiper-slide-active .testimonial-author {
       color: rgba(255, 255, 255, 0.95);
   }
   
   /* Nav çubuğu */
   .testimonials-nav {
       position: absolute;
       left: 50%;
       bottom: 12px;
       transform: translateX(-50%);
       display: flex;
       align-items: center;
       gap: 12px;
       z-index: 5;
       padding: 8px 18px;
       border-radius: 999px;
       background: rgba(255, 255, 255, 0.96);
       border: 1px solid #e4e8f4;
       box-shadow: 0 4px 20px rgba(22, 55, 165, 0.08);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
   }
   
   .tc-nav {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       border: 1.5px solid #dde3f0;
       background: #fff;
       color: var(--dark-blue);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.22s ease;
       flex-shrink: 0;
   }
   
   .tc-nav:hover {
       border-color: var(--light-blue);
       background: #eef2ff;
       transform: scale(1.08);
   }
   
   .tc-nav:active {
       transform: scale(0.94);
   }
   
   .tc-nav.swiper-button-disabled {
       opacity: 0.3;
       pointer-events: none;
   }
   
   .tc-nav--prev:hover svg { transform: translateX(-2px); }
   .tc-nav--next:hover svg { transform: translateX(2px); }
   .tc-nav svg { transition: transform 0.2s ease; }
   
   /* Pagination dots */
   .tc-nav-dots {
       display: flex;
       align-items: center;
       gap: 5px;
   }
   
   .tc-nav-dots .swiper-pagination-bullet {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: #c0c8e0;
       opacity: 1;
       transition: all 0.25s ease;
       cursor: pointer;
   }
   
   .tc-nav-dots .swiper-pagination-bullet-active {
       width: 20px;
       border-radius: 99px;
       background: var(--dark-blue);
   }
   
   /* Responsive */
   @media (max-width: 768px) {
       .testimonials-section { padding: 60px 0; }
       .testimonials-swiper .swiper-slide { width: min(380px, 86vw); }
       .testimonial-card-body { padding: 26px 24px 22px; }
   }
   
   @media (max-width: 480px) {
       .testimonials-section { padding: 52px 0; }
       .testimonial-card { border-radius: 18px; }
       .testimonial-card-body { padding: 22px 20px 20px; }
       .testimonials-nav { padding: 7px 14px; gap: 10px; }
       .tc-nav { width: 32px; height: 32px; }
   }
   
   @media (prefers-reduced-motion: reduce){
       .referanslar-marquee-track{
           animation: none !important;
       }
       .reveal-on-scroll,
       .reveal-on-scroll.is-revealed{
           opacity: 1 !important;
           transform: none !important;
           transition: none !important;
       }
       .value-tab-panel.is-active .value-tab-columns > div{
           animation: none !important;
       }
       .testimonials-swiper .swiper-wrapper{
           transition-duration: 0.01ms !important;
       }
       .testimonials-header h2.testimonials-title,
       .vt-intro h2.value-tabs-main-title{
           animation: none;
           color: var(--dark-blue, #1637a5);
           background-image: none;
           -webkit-background-clip: unset;
           background-clip: unset;
           -webkit-text-fill-color: currentColor;
       }
    .float-showcase-float-wrap,
    .float-showcase-badge{
        animation: none !important;
    }
    .float-showcase-row:hover .float-showcase-float-wrap{
        transform: none !important;
    }
       .stat-strip-card:hover{
           transform: none;
       }
   }

/* Masaüstü: below-fold bölümlerde render maliyetini düşür (mobil etkilenmez) */
@media (min-width: 993px) {
    .yg-brand-strip,
    .value-tabs-section,
    .e-ticaret-modulleri-section,
    .float-showcase-section,
    .stat-strip-section,
    .refs-marquee-section,
    .testimonials-section {
        content-visibility: auto;
        contain-intrinsic-size: auto 520px;
    }
}