/* =========================================================
   kender-banner-plus.css  (kbp- öneki)
   Mevcut banner CSS/JS dosyalarına DOKUNMAZ, üzerine eklenir.
   <link> satırı kender-ekstra.css'ten SONRA gelmelidir.
   Geri almak için: <link> ve js/kender-banner-plus.js satırlarını silin.
   ========================================================= */

.kender-banner {
    --kb-px: 0; /* fare konumu (-1..1), JS günceller */
    --kb-py: 0;
}

/* ---------- 1) Parallax: manzara ve metin fareyle hafifçe kayar ---------- */
.kender-banner__landscape {
    transform: translate3d(calc(var(--kb-px) * -16px), calc(var(--kb-py) * -6px), 0) scale(1.06);
    transition: transform .6s ease-out;
}

.kender-banner__glow {
    transform: translate3d(calc(var(--kb-px) * 22px), calc(var(--kb-py) * 8px), 0);
    transition: transform .8s ease-out;
}

.kender-banner__inner {
    transform: translate3d(calc(var(--kb-px) * 6px), calc(var(--kb-py) * 3px), 0);
    transition: transform .6s ease-out;
}

/* ---------- 2) Metnin etrafında ince köşe süsleri ---------- */
.kender-banner__inner::before {
    content: "";
    position: absolute;
    inset: 12px 28px;
    pointer-events: none;
    opacity: .5;
    background: linear-gradient(#cfeee6,#cfeee6) top left / 26px 1px no-repeat, linear-gradient(#cfeee6,#cfeee6) top left / 1px 26px no-repeat, linear-gradient(#cfeee6,#cfeee6) top right / 26px 1px no-repeat, linear-gradient(#cfeee6,#cfeee6) top right / 1px 26px no-repeat, linear-gradient(#cfeee6,#cfeee6) bottom left / 26px 1px no-repeat, linear-gradient(#cfeee6,#cfeee6) bottom left / 1px 26px no-repeat, linear-gradient(#cfeee6,#cfeee6) bottom right / 26px 1px no-repeat, linear-gradient(#cfeee6,#cfeee6) bottom right / 1px 26px no-repeat;
}

/* ---------- 3) Başlık: beyazdan açık nane tonuna degrade ---------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .kender-banner__title {
        padding: .1em 0 .18em; /* Ş, Ç gibi harflerin altı/üstü kesilmesin */
        margin: -.1em 0 -.18em;
        letter-spacing: .04em;
        background: linear-gradient(180deg, #ffffff 30%, #bfe8de 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        text-shadow: none;
        filter: drop-shadow(0 2px 10px rgba(0,26,32,.45));
    }
}

/* ---------- 4) Süs çizgisi: daha belirgin elmas ---------- */
.kender-banner__rule {
    width: min(440px, 72%);
}

.kender-banner__leaf {
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 4px rgba(213,237,230,.14), 0 0 14px rgba(213,237,230,.7);
}

/* ---------- 5) Önceki / sonraki okları ---------- */
.kbp-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    margin-top: -23px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    color: #fff;
    background: rgba(7,74,89,.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    opacity: .6; /* her zaman hafifçe görünür, üzerine gelince tam */
    transition: opacity .25s ease, background-color .2s ease, transform .2s ease, border-color .2s ease;
}

.kbp-arrow--prev { left: 18px; }
.kbp-arrow--next { right: 18px; }

.kender-banner:hover .kbp-arrow,
.kender-banner:focus-within .kbp-arrow {
    opacity: 1;
}

.kbp-arrow:hover {
    background: rgba(255,255,255,.92);
    color: #074a59;
    border-color: #fff;
}

.kbp-arrow--prev:hover { transform: translateX(-2px); }
.kbp-arrow--next:hover { transform: translateX(2px); }

.kbp-arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kbp-arrow:focus-visible {
    opacity: 1;
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ---------- 6) Sayaç: 01 / 04 ---------- */
.kbp-count {
    position: absolute;
    left: 26px;
    bottom: 16px;
    z-index: 5;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--kn-head, Georgia, serif);
    color: rgba(255,255,255,.75);
    letter-spacing: .08em;
    pointer-events: none;
}

    .kbp-count b {
        font-size: 1.1rem;
        font-weight: 700;
        color: #fff;
    }

    .kbp-count span {
        font-size: .8rem;
    }

    .kbp-count::before {
        content: "";
        align-self: center;
        width: 22px;
        height: 1px;
        margin-right: 4px;
        background: rgba(255,255,255,.55);
    }

/* ---------- 7) İlerleme çubuğu (süre ilk otomatik geçişten ölçülür) ---------- */
.kbp-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    height: 4px;
    background: rgba(255,255,255,.12);
    pointer-events: none;
}

.kender-banner.kbp-ready .kbp-progress {
    opacity: 1;
}

.kbp-progress i {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #7fc5bb, #e3a53b);
}

.kbp-progress.is-run i {
    animation: kbp-fill var(--kbp-dur, 6s) linear forwards;
}

@keyframes kbp-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ---------- Duyarlı ---------- */
@media (max-width: 720px) {
    .kbp-arrow {
        width: 36px;
        height: 36px;
        margin-top: -18px;
    }

    .kbp-arrow--prev { left: 8px; }
    .kbp-arrow--next { right: 8px; }
}

@media (max-width: 600px) {
    .kbp-count { display: none; }

    .kender-banner__inner::before { inset: 10px 12px; }
}

/* Dokunmatik cihazlarda oklar yok; kaydırma (swipe) kullanılır */
@media (hover: none) {
    .kbp-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .kender-banner__landscape,
    .kender-banner__glow,
    .kender-banner__inner {
        transform: none;
        transition: none;
    }

    .kbp-arrow { transition: none; }

    .kbp-progress.is-run i {
        animation: none;
        transform: scaleX(1);
    }
}

@media print {
    .kbp-arrow, .kbp-count, .kbp-progress { display: none !important; }
}


/* =========================================================
   v2 EKLERİ: yönlü slayt geçişi + akan ışık huzmesi
   ========================================================= */

/* Mesaj değişirken yeni mesaj yandan kayarak girer, eskisi karşı yöne çıkar */
@keyframes kbp-in-fwd   { from { opacity: 0; transform: translateX(80px); }  to { opacity: 1; transform: none; } }
@keyframes kbp-in-back  { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: none; } }
@keyframes kbp-out-fwd  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-80px); } }
@keyframes kbp-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(80px); } }

.kender-banner__slide.kbp-in-fwd   { animation: kbp-in-fwd   .9s cubic-bezier(.2,.7,.2,1) both; }
.kender-banner__slide.kbp-in-back  { animation: kbp-in-back  .9s cubic-bezier(.2,.7,.2,1) both; }
.kender-banner__slide.kbp-out-fwd  { animation: kbp-out-fwd  .7s ease-in both; }
.kender-banner__slide.kbp-out-back { animation: kbp-out-back .7s ease-in both; }

/* Arka planda soldan sağa yavaşça akan yumuşak ışık huzmesi */
.kender-banner__glow::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -35%;
    width: 60%;
    height: 180%;
    background: radial-gradient(closest-side, rgba(167,227,212,.30), transparent);
    animation: kbp-beam 14s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes kbp-beam {
    from { transform: translateX(0); }
    to   { transform: translateX(170%); }
}

@media (prefers-reduced-motion: reduce) {
    .kender-banner__slide.kbp-in-fwd,
    .kender-banner__slide.kbp-in-back,
    .kender-banner__slide.kbp-out-fwd,
    .kender-banner__slide.kbp-out-back,
    .kender-banner__glow::before {
        animation: none;
    }
}

/* =========================================================
   v3 DÜZELTME: uzun başlıklar tek satıra sığsın
   (Başlığı küçültmek yerine alanı genişletir; mobil kural korunur)
   ========================================================= */
@media (min-width: 601px) {
    .kender-banner__inner {
        max-width: 1400px;
        padding-left: clamp(52px, 6vw, 84px);
        padding-right: clamp(52px, 6vw, 84px);
    }

    .kender-banner__title {
        font-size: clamp(24px, 3.2vw, 44px);
        letter-spacing: .03em;
    }
}

/* Yine de sığmayan çok dar durumda iki satır dengeli bölünsün */
.kender-banner__title,
.kender-banner__subtitle {
    text-wrap: balance;
}

/* Köşe süsleri oklara ve sayaca çarpmasın: daha içeride dursun */
.kender-banner__inner::before {
    inset: 12px clamp(28px, 11vw, 150px);
}

@media (max-width: 600px) {
    .kender-banner__inner::before { inset: 10px 12px; }
}