/* =============================================
   Alo OT — Frontend  v1.1.0
   Toplam ~3KB gzip — SEO/performansa sıfır etki
   ============================================= */

/* ── Tüm kutular başlangıçta gizli ── */
#alo-ot-wrap { pointer-events: none; }

.aot-box {
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
.aot-box.aot-visible {
    opacity: 1;
    pointer-events: auto;
    animation: aotIn .35s ease forwards;
}
@keyframes aotIn {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Kapat butonu (ortak) ── */
.aot-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #94a3b8;
    padding: 3px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    line-height: 1;
}
.aot-close:hover { background: rgba(0,0,0,.06); color: #374151; }

/* ─────────────────────────────────────────
   1. SPOTLIGHT TOOLTIP
───────────────────────────────────────── */
.aot-spotlight {
    position: absolute;
    z-index: 9995;
    width: 252px;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 11px;
    box-shadow: 0 10px 36px rgba(0,0,0,.25);
}

.aot-arrow {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top: none;
    border-bottom-color: #1e293b;
}

.aot-spotlight .aot-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 11px 13px 14px;
}
.aot-spotlight .aot-icon { font-size: 22px; flex-shrink:0; margin-top:1px; }
.aot-spotlight .aot-text { flex:1; min-width:0; }
.aot-spotlight .aot-title { display:block; font-size:14px; font-weight:700; color:#fff; margin-bottom:3px; }
.aot-spotlight .aot-desc  { font-size:12px; color:rgba(255,255,255,.65); margin:0; line-height:1.45; }
.aot-spotlight .aot-close { color:rgba(255,255,255,.45); }
.aot-spotlight .aot-close:hover { background:rgba(255,255,255,.1); color:#fff; }

/* Pulse halkası — butona inject edilir */
.aot-pulse {
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 2px solid #f97316;
    animation: aotPulse 1.7s ease-out infinite;
    pointer-events: none;
    z-index: 9990;
}
@keyframes aotPulse {
    0%  { transform:scale(1);    opacity:1; }
    70% { transform:scale(1.5);  opacity:0; }
    100%{ transform:scale(1.5);  opacity:0; }
}

/* ─────────────────────────────────────────
   2. FLOATING CARD
───────────────────────────────────────── */
.aot-floating {
    position: fixed;
    bottom: 28px;
    right: 22px;
    z-index: 9995;
    width: 224px;
    background: #fff;
    border-radius: 14px;
    padding: 15px 13px 13px;
    box-shadow: 0 14px 44px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.07);
    border: 1px solid rgba(0,0,0,.05);
}
.aot-close-abs { position:absolute; top:8px; right:8px; }
.aot-floating .aot-inner { display:flex; gap:10px; align-items:flex-start; }
.aot-floating .aot-icon  { font-size:26px; flex-shrink:0; }
.aot-floating .aot-title { display:block; font-size:14px; font-weight:700; color:#111; margin-bottom:3px; }
.aot-floating .aot-desc  { font-size:12px; color:#64748b; margin:0; line-height:1.45; }

/* ─────────────────────────────────────────
   3. MINI BANNER
───────────────────────────────────────── */
.aot-banner {
    position: absolute;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg,#fff7ed,#fff);
    border: 1.5px solid #fed7aa;
    border-radius: 8px;
    padding: 8px 9px 8px 12px;
    box-shadow: 0 4px 14px rgba(249,115,22,.1);
    max-width: 330px;
    font-size: 13px;
    color: #1a1a1a;
}
.aot-banner .aot-icon  { font-size:15px; flex-shrink:0; }
.aot-banner .aot-text  { flex:1; line-height:1.4; }
.aot-banner .aot-title { color:#c2410c; }
.aot-banner .aot-close { color:#c2410c; font-size:12px; }

/* ─────────────────────────────────────────
   4. SOFT OVERLAY
───────────────────────────────────────── */
.aot-overlay {
    position: fixed;
    inset: 0;
    z-index: 9988;
    background: rgba(15,15,30,.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.aot-overlay-pill {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9993;
    background: #fff;
    border-radius: 50px;
    padding: 10px 16px 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    white-space: nowrap;
}
.aot-overlay-pill .aot-icon { font-size:18px; }
.aot-overlay-pill .aot-close {
    background: #f97316;
    color: #fff;
    border-radius: 50px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .15s;
}
.aot-overlay-pill .aot-close:hover { background:#ea6c0a; }

/* Hedef element spotlight */
.aot-overlay-target {
    position: relative !important;
    z-index: 9992 !important;
    animation: aotGlow 1.9s ease-in-out infinite;
    border-radius: 4px;
}
@keyframes aotGlow {
    0%,100%{ box-shadow:0 0 0 3px rgba(249,115,22,.3),0 0 0 1.5px #f97316; }
    50%    { box-shadow:0 0 0 9px rgba(249,115,22,.08),0 0 0 1.5px #f97316; }
}

/* ── Responsive ── */
@media (max-width:600px) {
    .aot-floating   { right:12px; bottom:14px; width:196px; }
    .aot-spotlight  { width:210px; }
    .aot-overlay-pill { font-size:13px; padding:8px 12px; }
}