/**
 * NECOX Global Tooltip Sistemi (v6.27.0 — K-178)
 *
 * Kullanim:
 *   <button data-tt="Favorilere Ekle">...</button>
 *
 * Aktivasyon:
 *   body.necox-tooltips-on tooltip'leri gosterir.
 *   Toggle 'no' ise CSS hicbir tooltip basmaz, native title attribute kalir.
 *
 * Mobil davranis:
 *   Hover olmadigi icin mobilde tooltip gozukmez (CSS:hover).
 *   data-tt attribute her zaman <button>'da kalir, native title fallback yok.
 *
 * Mimari:
 *   - CSS-only, JS yok.
 *   - data-tt attribute kullanir (title degil) — browser native tooltip'i devre disi birakmadan
 *     (kullanici CSS tooltip'i yuklemezse veya body class yoksa native title gozukur).
 *   - Default yon: ust. data-tt-pos="bottom|left|right" ile ozellestirilebilir.
 *   - CSS variable'lar ile preset-uyumlu (--necox-tt-bg, --necox-tt-color).
 *
 * @package Necox
 * @since   6.27.0
 */

/* ============================================
   Anasayfa: tooltip kapali ise hicbir sey basma
   ============================================ */
.necox-tooltips-on [data-tt] {
    position: relative;
}

/* ============================================
   Tooltip govdesi
   ============================================ */
.necox-tooltips-on [data-tt]::after {
    content: attr(data-tt);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    background: var(--necox-tt-bg, rgba(28, 28, 30, 0.95));
    color: var(--necox-tt-color, #ffffff);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    max-width: 240px;
    text-align: center;
    letter-spacing: 0.1px;
}

/* ============================================
   Ok (caret)
   ============================================ */
.necox-tooltips-on [data-tt]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--necox-tt-bg, rgba(28, 28, 30, 0.95));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 10000;
    transition: opacity 0.15s ease, visibility 0.15s;
}

/* ============================================
   Hover ve focus durumu (klavye erisimi de)
   ============================================ */
.necox-tooltips-on [data-tt]:hover::after,
.necox-tooltips-on [data-tt]:focus-visible::after,
.necox-tooltips-on [data-tt]:hover::before,
.necox-tooltips-on [data-tt]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.necox-tooltips-on [data-tt]:hover::before,
.necox-tooltips-on [data-tt]:focus-visible::before {
    transform: translateX(-50%);
}

/* ============================================
   Yon varyantlari
   ============================================ */

/* Asagi yon */
.necox-tooltips-on [data-tt][data-tt-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 6px);
    transform: translateX(-50%) translateY(-2px);
}
.necox-tooltips-on [data-tt][data-tt-pos="bottom"]::before {
    bottom: auto;
    top: calc(100% + 1px);
    border-top: none;
    border-bottom: 5px solid var(--necox-tt-bg, rgba(28, 28, 30, 0.95));
}
.necox-tooltips-on [data-tt][data-tt-pos="bottom"]:hover::after,
.necox-tooltips-on [data-tt][data-tt-pos="bottom"]:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}

/* Sol yon */
.necox-tooltips-on [data-tt][data-tt-pos="left"]::after {
    bottom: 50%;
    top: auto;
    left: auto;
    right: calc(100% + 6px);
    transform: translateY(50%) translateX(2px);
}
.necox-tooltips-on [data-tt][data-tt-pos="left"]::before {
    bottom: 50%;
    top: auto;
    left: auto;
    right: calc(100% + 1px);
    transform: translateY(50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid var(--necox-tt-bg, rgba(28, 28, 30, 0.95));
    border-right: none;
}
.necox-tooltips-on [data-tt][data-tt-pos="left"]:hover::after,
.necox-tooltips-on [data-tt][data-tt-pos="left"]:focus-visible::after {
    transform: translateY(50%) translateX(0);
}

/* Sag yon */
.necox-tooltips-on [data-tt][data-tt-pos="right"]::after {
    bottom: 50%;
    top: auto;
    left: calc(100% + 6px);
    right: auto;
    transform: translateY(50%) translateX(-2px);
}
.necox-tooltips-on [data-tt][data-tt-pos="right"]::before {
    bottom: 50%;
    top: auto;
    left: calc(100% + 1px);
    right: auto;
    transform: translateY(50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid var(--necox-tt-bg, rgba(28, 28, 30, 0.95));
    border-left: none;
}
.necox-tooltips-on [data-tt][data-tt-pos="right"]:hover::after,
.necox-tooltips-on [data-tt][data-tt-pos="right"]:focus-visible::after {
    transform: translateY(50%) translateX(0);
}

/* ============================================
   Mobilde tamamen gizle (hover yok zaten ama emniyet)
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    .necox-tooltips-on [data-tt]::after,
    .necox-tooltips-on [data-tt]::before {
        display: none !important;
    }
}