/* .testimonial-text SADECE inherit degeriyle bosta duruyordu: body{}
           hicbir font-size tanimlamiyor, dolayisiyla tarayici varsayilanina
           (16px) dusuyordu - sitenin her yerdeki 13-15px govde metninden
           NET olarak daha buyuk goruyordu. Video kartlarindaki alt yazi
           <p> ise sinifsiz - ucretler.css'teki cipak "p{font-size:37px;
           color:white;width:800px;text-align:center;margin:auto 0 50px}"
           kuraliyla karsi karsiya kaliyordu (bu sayfada ucretler.css
           yukleniyor). Ikisini de ayni govde metni olcegine sabitliyoruz. */
        .testimonial-card p {
            margin: 0;
            width: auto;
            max-width: none;
            font-size: 14px;
            font-family: inherit;
            font-weight: 400;
            line-height: 1.6;
            color: #575C6B;
            text-align: left;
        }
        .more-text {
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            margin: 0;
        }
        /* base.html'deki global span{font-size:1.25rem;display:block;font-weight:500;
           margin-bottom:.5rem} kurali burayi da vuruyordu: "..." kendi satirina
           dusup buyuk/kalin goruntuyordu ve kartin yuksekligini sisiriyordu. */
        .dots {
            display: inline;
            font-size: inherit;
            font-family: inherit;
            font-weight: inherit;
            color: inherit;
            margin: 0;
            unicode-bidi: normal;
        }

        .carousel-container {
            position: relative;
            overflow: hidden;
            cursor: grab;
            padding: 0;
            box-sizing: border-box;
        }

        .carousel-container.dragging {
            cursor: grabbing;
        }

        .carousel-wrapper {
            position: relative;
            padding: 0;
        }

        .carousel-navigation {
            pointer-events: none;
        }

        .carousel-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: none;
            padding: 0;
            cursor: pointer;
            pointer-events: auto;
            z-index: 10;
        }

        .carousel-nav-btn img {
            width: 40px;
            height: 40px;
        }

        /* Ucta iken ok artik gercekten disabled; solukluk o durumun gorsel
           karsiligi. Once opaklik JS'ten elle yaziliyordu, dolayisiyla dugme
           odaklanabilir kaliyor ve ekran okuyucuya etkin gorunuyordu. */
        .carousel-nav-btn:disabled {
            opacity: .5;
            cursor: default;
        }

        .carousel-nav-btn:focus-visible {
            outline: 2px solid #3291FF;
            outline-offset: 2px;
            border-radius: 50%;
        }

        .carousel-nav-btn-prev {
            left: -50px;
        }

        .carousel-nav-btn-next {
            right: -50px;
        }

        .carousel-track {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            transition: transform 0.4s ease;
            will-change: transform;
            user-select: none;
        }

        .carousel-track.dragging {
            transition: none;
        }

        .testimonial-card {
            flex: 0 0 clamp(300px, 38vw, 480px);
            min-width: 0;
        }

        /* clamp() alt siniri (300px) dar telefonlarda konteynerden genis
           kalip karti sag kenardan kirpiyordu (metin/buton tasiyordu).
           Dar ekranda tek kart tam genislikte gorunsun diye flex-basis'i
           konteyner genisligine sabitliyoruz - masaustu clamp'ine dokunmuyor. */
        @media (max-width: 600px) {
            .testimonial-card {
                flex-basis: 100%;
            }
        }

        .testimonial-card.testimonials-box:not(:has(.video-container)) {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .testimonial-card img {
            pointer-events: none;
        }

        .video-container {
            position: relative;
            width: 100%;
        }

        .video-container iframe {
            width: 100%;
            height: auto;
            aspect-ratio: 530 / 315;
            display: block;
        }

        /* <div> degil <button>: klavyeyle de oynatilabilmesi icin. Buton
           gorunumunu tasimasin diye tarayici stilleri sifirlaniyor. */
        .video-drag-shield {
            position: absolute;
            inset: 0;
            z-index: 2;
            cursor: grab;
            display: block;
            width: 100%;
            height: 100%;
            padding: 0;
            border: 0;
            background: transparent;
            appearance: none;
            -webkit-appearance: none;
        }

        .video-drag-shield:focus-visible {
            outline: 3px solid #3291FF;
            outline-offset: -3px;
        }

        .video-drag-shield.disabled {
            display: none;
        }

        /* Lazy YouTube facade: poster + play badge until the user clicks */
        .video-container {
            background-size: cover;
            background-position: center;
            background-color: #000;
            aspect-ratio: 530 / 315;
        }

        .video-container iframe {
            position: relative;
            background: transparent;
        }

        .yt-play-badge {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 68px;
            height: 48px;
            z-index: 1;
            pointer-events: none;
            background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23f00' d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.79 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z'/%3E%3Cpath fill='%23fff' d='M45 24 27 14v20'/%3E%3C/svg%3E");
        }

        /* Gri sahne + beyaz 40px kart: siteki diger bolumlerle (Why Us, Press,
           Featured Blogs vb.) ayni tasarim dili. Bu partial sadece index.html'de
           kullanildigi icin dogrudan burada tanimlaniyor, scope sorunu yok. */
        .doctor-experiences-stage {
            background: #F5F6F8;
            margin: 0;
            padding: 0;
        }

        .doctor-carts {
            display: flow-root;
            background: #fff;
            border-radius: 40px;
            margin: 0 20px;
            padding: 0 clamp(20px, 10.5vw, 150px) clamp(28px, 4vw, 48px);
        }

        .doctor-carts .text-center {
            margin: 80px 0 40px;
        }

        .doctor-carts .text-center h2 {
            display: inline-block;
            margin: 0 0 6px;
            font-size: clamp(22px, 3.2vw, 28px);
            line-height: 1.3;
            font-weight: 400;
            color: #0d0f2c;
        }

        .doctor-carts .text-center h2 b {
            font-weight: 600;
            background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .doctor-carts .text-center p {
            margin: 0 auto;
            max-width: 52ch;
            font-size: 15px;
            color: #666D7C;
        }

        .testimonials-box {
            background: #fff;
            padding: 25px;
            border-radius: 16px;
            border: 1px solid rgba(179, 185, 194, 0.4);
        }

        /* .dr-name'in de kendi kurali yoktu: h3.h6 Bootstrap'in 1rem/500'unu
           getiriyor ve icindeki <b> tarayicida buna gore "bolder" (~700)
           hesaplaniyordu; unvan <p>'si de sinifsiz oldugu icin yukaridaki
           ucretler.css sizintisina aciktir. */
        .dr-name h3 {
            margin: 0 0 2px;
            font-size: 15px;
            font-weight: 700;
            line-height: 1.3;
            color: #0B0B0F;
        }

        .dr-name h3 b {
            font-weight: 700;
        }

        .dr-name p {
            margin: 0;
            width: auto;
            max-width: none;
            font-size: 13px;
            font-weight: 400;
            line-height: 1.4;
            color: #666D7C;
            text-align: left;
        }

        /* <button> elemaninin kendisi stilsiz tiklanabilir kabuk; gradyan
           yazi ayni index.html'deki .press-link ("Read the Article") ile
           BIREBIR AYNI CSS'le, icteki <span>'e uygulaniyor - button'un kendi
           metnini boyamaya calismak (onceki iki deneme) tarayicida duz mor
           gosteriyordu, .press-link bir <span> oldugu icin sorunsuz calisiyor. */
        .see-more-btn {
            appearance: none;
            -webkit-appearance: none;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
        }

        .see-more {
            /* base.html'in global span{font-size:1.25rem;display:block;
               font-weight:500;margin-bottom:.5rem} kuralini da eziyoruz. */
            display: inline-flex;
            margin: 0;
            align-items: center;
            font-size: 13px;
            font-weight: 600;
            background: linear-gradient(90deg, #FF6262 0%, #7640E8 55%, #3291FF 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .see-more-btn:hover .see-more {
            text-decoration: underline;
        }