/**
 * compat.css — Opera & Edge (Chromium) + Mobil Tarayıcı Uyumluluk Katmanı
 *
 * İçerik:
 * 1. CSS svh/dvh/lvh → vh fallback (JS polyfill ile --svh custom prop)
 * 2. CSS clamp() → min/max fallback
 * 3. aspect-ratio → padding-top hack fallback
 * 4. touch-action: manipulation — 300ms tap delay kaldır
 * 5. -webkit-tap-highlight-color — mobil tap rengi sıfırla
 * 6. Opera'ya özel düzeltmeler
 * 7. Edge Chromium düzeltmeleri
 * 8. print-color-adjust
 * 9. overscroll-behavior
 * 10. font-size ayar (zoom)
 */

/* ══════════════════════════════════════════════════════════
   1. SVH / DVH fallback — polyfills.js ile --svh set ediliyor
   ══════════════════════════════════════════════════════════ */

/* Tüm svh kullanımları için vh fallback sağlanıyor.
   Tarayıcı svh'yi desteklemiyorsa CSS custom property devreye girer. */

/* ══════════════════════════════════════════════════════════
   2. Touch-action: manipulation — tüm tıklanabilir elemanlar
      300ms tap gecikmesini kaldırır (Opera Mobile, Edge Mobile)
   ══════════════════════════════════════════════════════════ */
a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
label,
select,
.btn,
[role="button"],
[onclick],
.menuLeft,
.menuRight,
.justMenu ul.leftMenu li,
.competenciesList ul li,
.closeBtn,
.scroll i,
.slick-prev,
.slick-next,
.slick-dots li button,
.nsl-item,
.nsl-featured,
.mob-news-slide,
.cookie-accept-btn,
.cookie-reject-btn {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

/* ══════════════════════════════════════════════════════════
   3. -webkit-tap-highlight-color sıfırlama
      Opera & Edge Mobile'da varsayılan mavi highlight kaldır
   ══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════════════════════════
   4. appearance standardı — checkbox, radio, select
   ══════════════════════════════════════════════════════════ */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ══════════════════════════════════════════════════════════
   5. overscroll-behavior — iOS/Opera bounce fix
      Sayfa üzerindeki scroll container'ların bounce'ı ana sayfaya yansıtmasın
   ══════════════════════════════════════════════════════════ */
html,
body {
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
}

.scrollcolumn,
.justMenu,
.iti__country-list,
.fancybox-outer {
    overscroll-behavior: contain;
}

/* ══════════════════════════════════════════════════════════
   6. font-size: 100% — tarayıcı zoom ile uyum
      Opera'da text-size-adjust
   ══════════════════════════════════════════════════════════ */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ══════════════════════════════════════════════════════════
   7. backdrop-filter — tam prefix seti
   ══════════════════════════════════════════════════════════ */
.productionSlider .slick-prev,
.productionSlider .slick-next {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ══════════════════════════════════════════════════════════
   8. CSS Grid gap → Opera eski sürüm fallback
      Modern Opera destekliyor ama grid-gap alias olarak da tanımla
   ══════════════════════════════════════════════════════════ */
/* gap yerine grid-gap da çalışır — modern browsers her ikisini destekler */

/* ══════════════════════════════════════════════════════════
   9. object-fit — Opera/Edge Chromium tam destek var
      Eski Edge (EdgeHTML) için fallback:
   ══════════════════════════════════════════════════════════ */
/* Modern Edge/Opera tüm object-fit değerlerini destekler */

/* ══════════════════════════════════════════════════════════
   10. Slick Slider — Opera'da görünmeme sorunu düzeltmesi
       slick-slide opacity ve z-index
   ══════════════════════════════════════════════════════════ */
.slick-slide {
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.slick-slide img {
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   11. CSS transform — webkit prefix
   ══════════════════════════════════════════════════════════ */
.slider .item .images img.active {
    -webkit-transform: scale(1.32);
    transform: scale(1.32);
}

.slider .item .images img {
    -webkit-transition: -webkit-transform 0s linear, opacity 2s linear;
    transition: transform 0s linear, opacity 2s linear;
}

.slider .item .images img.active {
    -webkit-transition: -webkit-transform 7s linear, opacity 2s linear;
    transition: transform 7s linear, opacity 2s linear;
}

/* ══════════════════════════════════════════════════════════
   12. CSS animation — Opera & Edge Chromium webkit prefix
   ══════════════════════════════════════════════════════════ */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@-webkit-keyframes fadeInLeft {
    from { opacity: 0; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); }
    to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); }
    to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes fadeInRight {
    from { opacity: 0; -webkit-transform: translate3d(40px, 0, 0); transform: translate3d(40px, 0, 0); }
    to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes fadeInRight {
    from { opacity: 0; -webkit-transform: translate3d(40px, 0, 0); transform: translate3d(40px, 0, 0); }
    to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes fadeInUp {
    from { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); }
    to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes fadeInUp {
    from { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); }
    to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes fadeOutLeft {
    from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    to   { opacity: 0; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); }
}
@keyframes fadeOutLeft {
    from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    to   { opacity: 0; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); }
}

@-webkit-keyframes fadeOutRight {
    from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    to   { opacity: 0; -webkit-transform: translate3d(40px, 0, 0); transform: translate3d(40px, 0, 0); }
}
@keyframes fadeOutRight {
    from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    to   { opacity: 0; -webkit-transform: translate3d(40px, 0, 0); transform: translate3d(40px, 0, 0); }
}

/* ══════════════════════════════════════════════════════════
   13. scrollbar — sadece mobil cihazlarda gizle
   ══════════════════════════════════════════════════════════ */

/* Webkit (Chrome, Safari, Opera, Edge Chromium) — sadece mobil */
@media (max-width: 1200px) {
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
    ::-webkit-scrollbar-track {
        display: none !important;
        background: transparent !important;
    }
    ::-webkit-scrollbar-thumb {
        display: none !important;
        background: transparent !important;
    }

    /* Firefox — sadece mobil */
    * {
        scrollbar-width: none !important;
    }

    /* IE / Edge legacy — sadece mobil */
    * {
        -ms-overflow-style: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   14. focus-visible — klavye gezintisi için outline
       Erişilebilirlik (Opera/Edge tam destek)
   ══════════════════════════════════════════════════════════ */
:focus {
    outline: none;
}
:focus-visible {
    outline: 2px solid #f18700;
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════
   15. will-change — performans ipucu
       Animasyonlu elemanlar için GPU katmanı
   ══════════════════════════════════════════════════════════ */
.slider .item .images img,
.bgImages,
.justMenu,
.detailContent,
.fixedBg {
    will-change: transform, opacity;
}

/* ══════════════════════════════════════════════════════════
   16. iOS Safari / Opera Mobile — overflow scroll momentum
   ══════════════════════════════════════════════════════════ */
.scrollcolumn,
.iti__country-list,
.justMenu ul.leftMenu,
.fancybox-outer {
    -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════
   17. Opera Mini — display flex fallback
       Opera Mini flex desteği sınırlı, display:block fallback
   ══════════════════════════════════════════════════════════ */
@supports not (display: flex) {
    .allHeader,
    header .menuRight,
    .justMenu .mobil-language > span,
    .caption-btns,
    .newsSplitLayout,
    .nsl-list,
    .nsl-item,
    .nsl-featured-text {
        display: block;
    }
}

/* ══════════════════════════════════════════════════════════
   18. Opera Mini — SVG görüntüleme
   ══════════════════════════════════════════════════════════ */
svg {
    overflow: hidden; /* IE/Edge eski sürümde SVG taşmasını önle */
}

img[src$=".svg"] {
    /* SVG resimlerin Opera'da düzgün ölçeklenmesi */
    shape-rendering: auto;
}

/* ══════════════════════════════════════════════════════════
   19. Mobil — input zoom engelle (Opera/Edge)
       Font-size < 16px olan input'lar iOS'ta zoom yapar
   ══════════════════════════════════════════════════════════ */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   20. print-color-adjust — baskı renk koruması
   ══════════════════════════════════════════════════════════ */
* {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* ══════════════════════════════════════════════════════════
   21. Slick slider — Opera & Edge'de dot/arrow görünürlük
   ══════════════════════════════════════════════════════════ */
.slick-dots {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    text-align: center;
}

.slick-dots li {
    display: inline-block;
    position: relative;
    margin: 0 5px;
}

.slick-dots li button {
    border: 0;
    background: transparent;
    display: block;
    cursor: pointer;
    color: transparent;
    font-size: 0;
    line-height: 0;
    padding: 5px;
    outline: none;
}

.slick-dots li button:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    font-size: 6px;
    line-height: 20px;
    text-align: center;
    color: #848484;
    -webkit-font-smoothing: antialiased;
    content: '•';
}

.slick-dots li.slick-active button:before {
    color: #f18700;
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   22. CSS transition — tüm tarayıcı uyumlu prefix
   ══════════════════════════════════════════════════════════ */
.nsl-featured,
.nsl-item,
.mob-card,
.caption-btn-primary,
.caption-btn-ghost {
    -webkit-transition-property: transform, opacity, background, border-color, box-shadow;
    transition-property: transform, opacity, background, border-color, box-shadow;
}

/* ══════════════════════════════════════════════════════════
   23. Opera/Edge Chromium — video iframe tam ekran desteği
   ══════════════════════════════════════════════════════════ */
iframe {
    border: none;
    /* Opera Mobile'da iframe overflow */
    max-width: 100%;
}

/* ══════════════════════════════════════════════════════════
   24. Mobil — hover state'i touch cihazlarda devre dışı bırak
       (Opera Mobile yanlış hover uygulaması)
   ══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    .nsl-item:hover,
    .nsl-featured:hover .nsl-featured-img,
    .newsPage .item:hover .images img,
    .newsPage .item:hover .images .img,
    .otherNews .item:hover .images img {
        transform: none !important;
    }

    /* Kart hover efektleri touch'ta devre dışı */
    .nsl-item:hover {
        background: #1e1e1e !important;
        transform: none !important;
    }

    /* Link hover rengi touch'ta aktif kalabilir */
    .nsl-item:active .nsl-item-text span,
    .nsl-featured:active .nsl-featured-text span {
        color: #f18700;
    }
}