/* =========================================================
   kender-ekstra.css  (kx- öneki)
   Mevcut kender-*.css dosyalarına DOKUNMADAN, üzerine eklenen
   küçük dokunuşlar. Sorun çıkarsa bu dosyayı <link>'ten
   kaldırmanız yeterli; site eski haline döner.
   ========================================================= */

:root { --kx-teal: #007083; --kx-deep: #074a59; --kx-mint: #7fc5bb; --kx-muted: #5d727a; }

/* ---------- Genel inceltmeler ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
::selection { background: rgba(127,197,187,.45); color: var(--kx-deep); }
a, button { -webkit-tap-highlight-color: transparent; }
[id] { scroll-margin-top: 1rem; }

/* Klavye ile gezenler için net odak halkası */
:focus-visible { outline: 3px solid rgba(0,112,131,.55); outline-offset: 2px; border-radius: 4px; }

/* İçerik alanındaki sınıfsız görseller taşmasın (avatar/kutucuk gibi sınıflı görsellere dokunmaz) */
:where(.kn-content) img:where(:not([class])) { max-width: 100%; height: auto; }

/* ---------- Geçerli sayfa menüde vurgulanır ---------- */
.kn-nav__link[aria-current="page"],
.kn-nav__dd-btn.kx-current { box-shadow: inset 0 -3px 0 var(--kx-mint); }
.kn-dd a[aria-current="page"] { font-weight: 700; color: var(--kx-teal); }

/* ---------- Kenar çubuğu: video mobilde taşmasın ---------- */
.kn-video__frame iframe { width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }

/* ---------- Kenar çubuğu kutuları: yumuşak belirme ---------- */
.kx-js .kn-widget { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.kx-js .kn-widget.kx-in { opacity: 1; transform: none; }

/* ---------- Yukarı çık düğmesi ---------- */
.kx-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 880; width: 46px; height: 46px; display: grid; place-items: center;
    border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: var(--kx-deep);
    box-shadow: 0 8px 20px -6px rgba(7,74,89,.55);
    opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background-color .2s ease; }
.kx-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.kx-top:hover, .kx-top:focus-visible { background: var(--kx-teal); }
.kx-top svg { width: 20px; height: 20px; }

/* ---------- Mobil alt çubuk ---------- */
.kx-tabbar { display: none; }

@media (max-width: 760px) {
    body.kn-body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

    .kx-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: repeat(5, 1fr); gap: .15rem;
        padding: .3rem .35rem calc(.3rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
        border-top: 1px solid rgba(7,74,89,.12); box-shadow: 0 -8px 22px -12px rgba(7,74,89,.3); }
    .kx-tabbar a, .kx-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
        min-height: 48px; padding: .25rem .1rem; border: 0; border-radius: 12px; background: none;
        font: inherit; font-size: .68rem; font-weight: 600; line-height: 1.1; color: var(--kx-muted); text-decoration: none; cursor: pointer;
        transition: background-color .2s ease, color .2s ease; }
    .kx-tabbar svg { width: 22px; height: 22px; flex: none; }
    .kx-tabbar a:hover, .kx-tabbar button:hover { background: rgba(0,112,131,.08); color: var(--kx-teal); }
    .kx-tabbar [aria-current="page"] { color: var(--kx-teal); background: rgba(0,112,131,.1); }

    /* Yukarı çık düğmesi alt çubuğun üstünde dursun */
    .kx-top { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

    /* Parmakla rahat dokunma (en az ~44px) */
    .kn-nav__link, .kn-nav__dd-btn, .kn-dd a { min-height: 44px; display: flex; align-items: center; gap: .5rem; }
    .kn-chips li a { min-height: 44px; }
}

/* ---------- Hareketi azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .kx-js .kn-widget { opacity: 1; transform: none; transition: none; }
    .kx-top { transition: none; }
    .kender-banner * { animation: none !important; }
}

/* ---------- Yazdırma ---------- */
@media print { .kx-tabbar, .kx-top { display: none !important; } body.kn-body { padding-bottom: 0; } }

/* ---------- KENDER başlığı: bir kez belirir, ardından arada hafif ışık geçer ---------- */
.kn-title a { position: relative; display: inline-block; overflow: hidden; vertical-align: top;
    padding: 0 6px 6px 0; margin: 0 -6px -6px 0; /* 3px gölge kesilmesin */
    animation: kx-title-in .7s cubic-bezier(.2,.7,.2,1) both; }
.kn-title a::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg);
    animation: kx-title-shine 7s ease-in-out 1.6s infinite; }
@keyframes kx-title-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kx-title-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
    .kn-title a { animation: none; }
    .kn-title a::after { display: none; }
}

/* ---------- Banner üstündeki turuncu çizgi: akan renk + parıltı ---------- */
.kender-banner { position: relative; border-top-width: 0 !important; }
.kx-accent { position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 5; overflow: hidden; pointer-events: none;
    background: linear-gradient(90deg, #e08a1e 0%, #f6c453 25%, #e08a1e 50%, #7fc5bb 75%, #e08a1e 100%);
    background-size: 300% 100%; animation: kx-accent-flow 9s linear infinite;
    box-shadow: 0 0 14px rgba(224,138,30,.55), 0 2px 10px rgba(246,196,83,.35); }
.kx-accent::after { content: ""; position: absolute; top: 0; bottom: 0; left: -20%; width: 18%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    animation: kx-accent-glint 5s ease-in-out 1s infinite; }
@keyframes kx-accent-flow { from { background-position: 0 0; } to { background-position: -300% 0; } }
@keyframes kx-accent-glint { 0%, 55% { left: -20%; } 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) { .kx-accent, .kx-accent::after { animation: none; } }