/* ===================================================================
   Şantiye+ WhatsApp Widget — tüm public temalarda ortak.
   Tüm sınıflar sp-wa- önekli: tema CSS'leriyle çakışmaz.
   Konum CSS değişkenleriyle yönetilir; sağ-alt seçilirse tema
   "yukarı çık" butonunun ÜSTÜNE istiflenir.
   =================================================================== */

.sp-wa {
    --sp-wa-renk: #25D366;
    --sp-wa-koyu: #075E54;
    --sp-wa-bottom: 30px;
    --sp-wa-yan: 30px;
    --sp-wa-fab: 58px;
    position: fixed;
    bottom: var(--sp-wa-bottom);
    z-index: 99990;
    font-family: inherit;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.sp-wa[data-pozisyon="sol-alt"] { left: var(--sp-wa-yan); }
.sp-wa[data-pozisyon="sag-alt"] { right: var(--sp-wa-yan); }

/* Sağ alt seçilirse yukarı-çık butonunun üstüne çık */
.sp-wa[data-pozisyon="sag-alt"] { --sp-wa-bottom: 110px; }
.sp-wa[data-pozisyon="sag-alt"][data-tema="eco3"]    { --sp-wa-bottom: 125px; --sp-wa-yan: 50px; }
.sp-wa[data-pozisyon="sag-alt"][data-tema="plus3"]   { --sp-wa-bottom: 100px; }
.sp-wa[data-pozisyon="sag-alt"][data-tema="plus4"]   { --sp-wa-bottom: 95px; --sp-wa-yan: 12px; }
.sp-wa[data-pozisyon="sag-alt"][data-tema="constrc"],
.sp-wa[data-pozisyon="sag-alt"][data-tema="plus2"]   { --sp-wa-bottom: 95px; }

/* Çerez banner'ı görünürken widget yukarı kayar */
.sp-wa.sp-wa--cerez-acik { --sp-wa-bottom: 130px; }

/* ── FAB ─────────────────────────────────────────────────────────── */
.sp-wa__fab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sp-wa-fab);
    height: var(--sp-wa-fab);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sp-wa-renk);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}

.sp-wa__fab:hover { transform: scale(1.06); box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.sp-wa__fab:focus-visible { outline: 3px solid rgba(255, 255, 255, .85); outline-offset: 3px; }

.sp-wa__fab-ikon { display: block; width: 60%; height: 60%; }
.sp-wa__fab-ikon svg { width: 100%; height: 100%; display: block; }

.sp-wa__fab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--sp-wa-renk);
    opacity: .55;
    z-index: -1;
    animation: sp-wa-nabiz 2.4s ease-out infinite;
}

@keyframes sp-wa-nabiz {
    0%   { transform: scale(1);   opacity: .5; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

.sp-wa.sp-wa--acik .sp-wa__fab::after { animation: none; opacity: 0; }

.sp-wa__rozet {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.sp-wa__rozet[hidden] { display: none; }

/* ── Panel ───────────────────────────────────────────────────────── */
.sp-wa__panel {
    position: absolute;
    bottom: calc(var(--sp-wa-fab) + 16px);
    width: 340px;
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
    transform: translateY(12px) scale(.96);
    opacity: 0;
    transform-origin: bottom center;
    transition: transform .22s ease, opacity .22s ease;
    pointer-events: none;
}

.sp-wa[data-pozisyon="sol-alt"] .sp-wa__panel { left: 0; transform-origin: bottom left; }
.sp-wa[data-pozisyon="sag-alt"] .sp-wa__panel { right: 0; transform-origin: bottom right; }

.sp-wa__panel[hidden] { display: none; }

.sp-wa--acik .sp-wa__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* ── Başlık ──────────────────────────────────────────────────────── */
.sp-wa__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 14px 16px;
    background: var(--sp-wa-koyu);
    color: #fff;
}

.sp-wa__avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.sp-wa__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-wa__avatar svg { width: 24px; height: 24px; }

.sp-wa__baslik { flex: 1 1 auto; min-width: 0; }

.sp-wa__baslik strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-wa__durum {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-wa__durum i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
}

.sp-wa__durum--offline i { background: #fbbf24; }

.sp-wa__kapat {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    opacity: .75;
    cursor: pointer;
}

.sp-wa__kapat:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.sp-wa__kapat svg { width: 18px; height: 18px; }

/* ── Gövde (sohbet) ──────────────────────────────────────────────── */
.sp-wa__govde {
    max-height: 330px;
    min-height: 96px;
    overflow-y: auto;
    padding: 16px 14px 8px;
    background: #ece5dd;
    background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px);
    background-size: 14px 14px;
}

.sp-wa__balon {
    max-width: 84%;
    margin-bottom: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #fff;
    color: #111b21;
    font-size: 13.5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    white-space: pre-wrap;
    word-break: break-word;
    animation: sp-wa-gir .25s ease;
}

.sp-wa__balon--bot { border-top-left-radius: 2px; }

.sp-wa__balon--kullanici {
    margin-left: auto;
    background: #d9fdd3;
    border-top-right-radius: 2px;
}

.sp-wa__saat {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    color: #667781;
    text-align: right;
}

@keyframes sp-wa-gir {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sp-wa__yaziyor {
    display: inline-flex;
    gap: 4px;
    padding: 12px;
    border-radius: 10px;
    border-top-left-radius: 2px;
    background: #fff;
    margin-bottom: 8px;
}

.sp-wa__yaziyor span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #99a2a8;
    animation: sp-wa-zipla 1.2s infinite;
}

.sp-wa__yaziyor span:nth-child(2) { animation-delay: .2s; }
.sp-wa__yaziyor span:nth-child(3) { animation-delay: .4s; }

@keyframes sp-wa-zipla {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* ── Alt alan (seçenek / girdi / CTA) ────────────────────────────── */
.sp-wa__alt {
    padding: 10px 12px 12px;
    background: #f7f8fa;
    border-top: 1px solid #e9edef;
}

.sp-wa__secenekler { display: flex; flex-direction: column; gap: 7px; }

.sp-wa__secenek {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sp-wa-renk);
    border-radius: 22px;
    background: #fff;
    color: #111b21;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.sp-wa__secenek:hover { background: var(--sp-wa-renk); color: #fff; }
.sp-wa__secenek-ikon { flex: 0 0 auto; font-size: 15px; line-height: 1; }

.sp-wa__girdi-satir { display: flex; gap: 8px; align-items: center; }

.sp-wa__girdi {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #d5dbe0;
    border-radius: 21px;
    background: #fff;
    color: #111b21;
    font-size: 13.5px;
    font-family: inherit;
}

.sp-wa__girdi:focus { outline: none; border-color: var(--sp-wa-renk); box-shadow: 0 0 0 3px rgba(37, 211, 102, .16); }
.sp-wa__girdi::placeholder { color: #97a0a6; }

.sp-wa__gonder {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sp-wa-renk);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-wa__gonder:hover { filter: brightness(.94); }
.sp-wa__gonder svg { width: 19px; height: 19px; }

.sp-wa__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: 24px;
    background: var(--sp-wa-renk);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
}

.sp-wa__cta:hover { filter: brightness(.94); color: #fff !important; }
.sp-wa__cta svg { width: 18px; height: 18px; }

.sp-wa__atla {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 4px;
    border: 0;
    background: transparent;
    color: #667781;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.sp-wa__hata {
    margin: 6px 2px 0;
    color: #d92d20;
    font-size: 11.5px;
}

.sp-wa__ipucu {
    margin: 7px 2px 0;
    color: #667781;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

.sp-wa__kvkk {
    margin: 8px 2px 0;
    color: #7b868c;
    font-size: 10.5px;
    line-height: 1.4;
}

.sp-wa__kvkk a { color: #7b868c; text-decoration: underline; }

.sp-wa__marka {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px;
    background: #f0f2f5;
    color: #8696a0;
    font-size: 10.5px;
    border-top: 1px solid #e9edef;
}

.sp-wa__marka svg { width: 11px; height: 11px; }

/* ── Mobil ───────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .sp-wa {
        --sp-wa-bottom: 20px;
        --sp-wa-yan: 16px;
        --sp-wa-fab: 54px;
    }

    .sp-wa[data-pozisyon="sag-alt"] { --sp-wa-bottom: 92px; }

    .sp-wa__panel {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(var(--sp-wa-bottom) + var(--sp-wa-fab) + 14px);
        width: auto;
        max-width: none;
    }

    .sp-wa__govde { max-height: 46vh; }
}

.sp-wa--gizli { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .sp-wa__fab::after,
    .sp-wa__balon,
    .sp-wa__yaziyor span { animation: none !important; }
    .sp-wa__panel { transition: none; }
}

/* ── Paket önerisi rozeti — santiyeplus.com asistanı (2026-09-22) ─────────────
   Paket sorusunda proje sayısına göre önerilen seçenek başa alınır ve bu rozeti taşır. */
.sp-wa__secenek-rozet {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--sp-wa-renk);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.4;
}
.sp-wa__secenek:hover .sp-wa__secenek-rozet { background: #fff; color: var(--sp-wa-renk); }