/*
 * ADTOUCH Mobil Bar — Frontend CSS v1.2.0
 *
 * - Tema CSS'lerinden korunmak için defensive layer içerir
 * - Renkler CSS değişkenlerinden gelir (admin'de değiştirilebilir)
 * - Pulse animasyonu CTA'da, .has-pulse class'ı varsa çalışır
 * - Sadece mobilde gösterilir (breakpoint admin'de ayarlanır,
 *   üst sınır JS'siz olarak inline @media ile gizlenir)
 */

/* === DEFENSIVE LAYER === */
.amb-bar,
.amb-bar *,
.amb-bar *::before,
.amb-bar *::after {
    box-sizing: border-box !important;
}

.amb-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--amb-bar-bg) !important;
    width: 100% !important;
    /* iOS safe-area inset desteği */
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

.amb-bar.has-border-top {
    border-top: 1px solid var(--amb-border) !important;
}

.amb-bar .amb-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
    align-items: stretch !important;
    padding: 8px 0 14px !important;
    margin: 0 !important;
}

/* === SLOT (NORMAL) === */
.amb-bar .amb-slot {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 6px 4px !important;
    text-decoration: none !important;
    border: 0 !important;
    background: transparent !important;
    /* Slot başına renk: inline'da --amb-slot-color set edilmişse o, yoksa global */
    color: var(--amb-slot-color, var(--amb-text-inactive)) !important;
    transition: color 0.2s ease, transform 0.15s ease !important;
    -webkit-tap-highlight-color: transparent;
}

.amb-bar a.amb-slot:link,
.amb-bar a.amb-slot:visited,
.amb-bar a.amb-slot:hover,
.amb-bar a.amb-slot:active {
    text-decoration: none !important;
    border-bottom: 0 !important;
}

.amb-bar .amb-slot:active {
    transform: scale(0.94) !important;
}

.amb-bar .amb-slot .amb-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.amb-bar .amb-slot .amb-icon svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
}

.amb-bar .amb-slot .amb-label {
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.02em !important;
    color: inherit !important;
    background: transparent !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

/* Aktif (sayfa eşleşmesi) — şimdilik kullanılmıyor ama hazır */
.amb-bar .amb-slot.is-active {
    color: var(--amb-accent) !important;
}

/* === CTA SLOT (ORTA) === */
.amb-bar .amb-slot-cta-wrap {
    position: relative !important;
    overflow: visible !important;
    padding: 6px 0 !important;
}

.amb-bar .amb-cta {
    position: absolute !important;
    top: -22px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: var(--amb-accent) !important;
    color: var(--amb-cta-icon) !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    will-change: transform, box-shadow;
}

.amb-bar a.amb-cta:link,
.amb-bar a.amb-cta:visited,
.amb-bar a.amb-cta:hover,
.amb-bar a.amb-cta:active {
    text-decoration: none !important;
    border-bottom: 0 !important;
}

.amb-bar .amb-cta .amb-cta-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.amb-bar .amb-cta svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

.amb-bar .amb-cta-spacer {
    display: block !important;
    height: 28px !important;
    width: 1px !important;
}

.amb-bar .amb-cta-label {
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    /* CTA için slot color → label rengi (boşsa accent) */
    color: var(--amb-slot-color, var(--amb-accent)) !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

/* === PULSE ANIMATION === */
.amb-bar.has-pulse .amb-cta {
    animation: amb-pulse 2s ease-out infinite, amb-breath 2.5s ease-in-out infinite;
}

@keyframes amb-pulse {
    0%   { box-shadow: 0 0 0 0   var(--amb-pulse-from); }
    70%  { box-shadow: 0 0 0 18px var(--amb-pulse-to); }
    100% { box-shadow: 0 0 0 0   var(--amb-pulse-to); }
}

@keyframes amb-breath {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translateX(-50%) scale(1.04); }
}

/* CTA hover (desktop preview için) */
.amb-bar .amb-cta:hover {
    filter: brightness(1.05);
}

.amb-bar .amb-cta:active {
    animation-play-state: paused;
    transform: translateX(-50%) scale(0.96) !important;
}

/* === REDUCED MOTION (kullanıcı animasyon istemiyorsa kapansın) === */
@media (prefers-reduced-motion: reduce) {
    .amb-bar.has-pulse .amb-cta {
        animation: none !important;
    }
}

/* === AUTO PADDING (footer çakışmasın) === */
body.amb-has-bar {
    padding-bottom: 90px;
}

/* iOS safe area olunca biraz daha pay */
@supports (padding: env(safe-area-inset-bottom)) {
    body.amb-has-bar {
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0));
    }
}

/* Boş slot (etiketsiz/inaktif olanlar grid bozmasın) */
.amb-bar .amb-empty {
    visibility: hidden;
    pointer-events: none;
}

/*
 * NOT: Bar büyük ekranlarda (min-width: BREAKPOINT+1) gizlensin diye
 * dinamik @media kuralı render sınıfında inline olarak yazılır.
 */