/* =====================================================
   BANNER SECTION — Sitenin mevcut CSS yapısına uygun
   Renkler: #000000 (yazı) | #2b71b8 (marka/buton)
   ===================================================== */

.banner-section {
    position: relative;
    overflow: hidden;
    background: url('../images/cypruss.jpg') center/cover no-repeat;
}

/* Arka plan dekoratif yazı */
.banner-section .float-text {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(60px, 12vw, 160px);
    font-weight: 900;
    font-family: "AileronBold", Georgia, serif;
    color: #2b71b8;
    opacity: 0.07;
    letter-spacing: 0.05em;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}

/* =====================
   SLIDE ITEM
   ===================== */
.banner-section .slide-item {
    padding: 60px 0 80px;
}

.banner-section .auto-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px;
}

.banner-section .slide-row {
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1;
}

/* =====================
   SOL KOLON — Başlık & Açıklama
   ===================== */
.banner-section .col-left {
    flex: 0 0 30%;
    max-width: 30%;
}

.banner-section .slide-title {
    font-family: nunito;
    font-size: clamp(28px, 3.5vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    margin-bottom: 20px;
}

.banner-section .slide-desc {
    font-family: 'Roboto';
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.75;
    color: #000000;
    opacity: 0.75;
}

/* =====================
   ORTA KOLON — Görsel
   ===================== */
.banner-section .col-center {
    flex: 0 0 38%;
    max-width: 38%;
    display: flex;
    justify-content: center;
    position: relative;
}

.banner-section .image-box {
    position: relative;
    display: inline-block;
}

/* Oval görsel çerçeve */
.banner-section .image-oval {
    width: clamp(220px, 28vw, 431px);
    height: clamp(300px, 40vw, 560px);
    border-radius: 50% / 45%;
    border: 1px solid #2b71b8;
    box-shadow: 0 12px 48px rgba(43, 113, 184, 0.15);
    position: relative;
    z-index: 1;
    padding: 20px;         /* görsel ile border arası boşluk */
    background: transparent;
}

.banner-section .image-oval img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50% / 45%; /* iç görselin de oval kalması için */
}

/* Dönen metin halkası */
.banner-section .text-rotate {
    position: absolute;
    top: 17%;
    right: -67px;
    transform: translateY(-50%);
    width: 165px;
    height: 165px;
    z-index: 2;
}

.banner-section .icon-text-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: bannerRingSpin 10s linear infinite;
}

.banner-section .icon-text-ring svg text,
.banner-section .icon-text-ring text {
    fill: #000000;
    font-size: 10.5px;
    font-family: "AileronRegular", sans-serif;
    letter-spacing: 3px;
}

@keyframes bannerRingSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Halka içindeki ok butonu */
.banner-section .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    transition: background 0.25s, box-shadow 0.25s;
    z-index: 3;
    opacity: inherit !important; /* sitenizin a:hover opacity override'ını ezer */
}

.banner-section .play-btn:hover {
    background: #2b71b8;
    box-shadow: 0 6px 20px rgba(43, 113, 184, 0.35);
    opacity: inherit !important;
}

.banner-section .play-btn svg {
    width: 30px;
    height: 30px;
    stroke: #2b71b8;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.25s;
}

.banner-section .play-btn:hover svg {
    stroke: #ffffff;
}

/* =====================
   SAĞ KOLON — CTA
   ===================== */
.banner-section .col-right {
    flex: 0 0 32%;
    max-width: 32%;
}

.banner-section .inner-content .slide-sub-desc {
    font-family: 'Roboto';
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.75;
    color: #000000;
    opacity: 0.8;
    margin-bottom: 28px;
}

/* Buton — sitenizin .theme-btn yapısına uygun */
.banner-section .btn-box a.theme-btn {
    font-family: "AileronSemiBold", sans-serif;
    display: inline-block;
    padding: 13px 28px;
    border: 2px solid #2b71b8;
    color: #2b71b8;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.25s, color 0.25s, box-shadow 0.25s;
    opacity: inherit !important;
}

.banner-section .btn-box a.theme-btn:hover {
    background: #2b71b8;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(43, 113, 184, 0.30);
    opacity: inherit !important;
}

/* =====================
   SLICK — DOTS & ARROWS
   (Sitenizin .slider slick yapısıyla uyumlu)
   ===================== */
.banner-section .slick-dots {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 20px 0 0;
    list-style-type: none;
    position: absolute;
    bottom: 22px;
    width: 100%;
}

.banner-section .slick-dots li {
    margin-right: 10px;
}

.banner-section .slick-dots li button {
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 100%;
    background-color: #2b71b8;
    opacity: 0.35;
    text-indent: -9999px;
    cursor: pointer;
}

.banner-section .slick-dots li.slick-active button {
    background-color: #2b71b8;
    opacity: 1;
}

.banner-section .slick-prev,
.banner-section .slick-next {
width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
    font-size: 65px;
    border-radius: 100%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
}

.banner-section .slick-prev {
    left: 16px;
}

.banner-section .slick-next {
    right: 16px;
}

.banner-section .slick-prev:before,
.banner-section .slick-next:before {
    font-size: 28px;
    color: #2b71b8;
    opacity: 0.7;
}

/* =====================
   RESPONSIVE — Tablet (≤1199px)
   ===================== */
@media screen and (max-width: 1199px) and (min-width: 992px) {
    .banner-section .slide-row {
        gap: 24px;
    }

    .banner-section .col-left {
        flex: 0 0 28%;
        max-width: 28%;
    }

    .banner-section .col-center {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .banner-section .col-right {
        flex: 0 0 32%;
        max-width: 32%;
    }

    .banner-section .text-rotate {
        right: -20px;
        width: 90px;
        height: 90px;
    }
}

/* =====================
   RESPONSIVE — Tablet (≤991px)
   ===================== */
@media screen and (max-width: 991px) and (min-width: 640px) {
    .banner-section .slide-row {
        flex-direction: column;
        text-align: center;
        gap: 28px;
    }

    .banner-section .col-left,
    .banner-section .col-center,
    .banner-section .col-right {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .banner-section .slide-title {
        font-size: clamp(26px, 6vw, 38px);
    }

    .banner-section .text-rotate {
        right: -20px;
        width: 90px;
        height: 90px;
    }

    .banner-section .image-oval {
        width: clamp(200px, 55vw, 300px);
        height: clamp(270px, 75vw, 420px);
    }

    .banner-section .inner-content {
        max-width: 420px;
        margin: 0 auto;
    }

    .banner-section .slick-prev,
    .banner-section .slick-next {
        display: none !important;
    }
}

/* =====================
   RESPONSIVE — Mobile (≤639px)
   ===================== */
@media screen and (max-width: 639px) and (min-width: 0px) {
    .banner-section .slide-item {
        padding: 40px 0 70px;
    }

    .banner-section .slide-row {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    .banner-section .col-left,
    .banner-section .col-center,
    .banner-section .col-right {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .banner-section .slide-title {
        font-size: clamp(24px, 7vw, 34px);
    }

    .banner-section .image-oval {
        width: clamp(180px, 70vw, 310px);
        height: clamp(240px, 90vw, 400px);
    }

    .banner-section .text-rotate {
        width: 105px;
        height: 105px;
        right: -20px;
    }

    .banner-section .play-btn {
        width: 60px;
        height: 60px;
    }

    .banner-section .play-btn svg {
        width: 20px;
        height: 20px;
    }

    .banner-section .btn-box a.theme-btn {
        padding: 11px 22px;
        font-size: 12px;
    }

    .banner-section .inner-content {
        max-width: 100%;
        padding: 0 15px;
    }

    .banner-section .slick-prev,
    .banner-section .slick-next {
        display: none !important;
    }
    .sliderlogo{
        justify-self: center;
    }
}