/* Yüzen iletişim düğmeleri (partials/yuzen-iletisim.php)

   SOLDA WhatsApp, SAĞDA sohbet. İkisi ayrı köşede çünkü ikisi ayrı
   vaat: WhatsApp ziyaretçiyi kendi telefonuna götürür, sohbet sayfada
   kalır. Aynı köşede üst üste dururlarsa hangisinin ne yaptığı karışır.

   MOBİLDE metin gizlenir, yalnız yuvarlak ikon kalır: dar ekranda
   içeriğin üstünü kapatmasın. */

.yzn {
    position: fixed;
    bottom: clamp(16px, 3vw, 26px);
    z-index: var(--z-overlay);

    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 12px;
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.yzn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.26);
}

.yzn:focus-visible {
    outline: 3px solid var(--brand-400);
    outline-offset: 3px;
}

.yzn--wa {
    left: clamp(16px, 3vw, 26px);
    /*
     * WhatsApp'ın KENDİ koyu yeşili. Marka rengine çevirmek işareti
     * tanınmaz yapardı; ama açık yeşil (#128C7E) beyaz yazıyla
     * 4,14:1 ölçüldü ve küçük yazı eşiği 4,5. Markanın kendi koyu tonu
     * (#075E54) hem tanıdık hem eşiğin üstünde.
     */
    background: #075e54;
    color: #fff;
}

.yzn__ikon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
}

.yzn__ikon svg { width: 26px; height: 26px; display: block; }

.yzn__metin { white-space: nowrap; }

@media (max-width: 640px) {
    .yzn        { padding: 12px; }
    .yzn__metin { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .yzn:hover { transform: none; }
}

/* ---------------------------------------------- Sohbet (sağ alt)

   Panel KAPALI başlar: ziyaretçi açmadan hiçbir istek gitmez.
   WhatsApp solda, sohbet sağda — ikisi ayrı vaat, ayrı köşe. */

.shb__panel,
.yzn--shb { right: clamp(16px, 3vw, 26px); }

.yzn--shb {
    position: fixed;
    border: 0;
    background: var(--brand-700);
    /* brand-700 · beyaz = 5,36:1 */
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}

/* Okunmamış yanıt rozeti */
.shb__rozet {
    position: absolute;
    top: -4px;
    right: -4px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--r-full);
    background: #dc2626;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    /* #dc2626 · beyaz = 4,53:1 */
    color: #fff;
}

.shb__panel {
    position: fixed;
    bottom: calc(clamp(16px, 3vw, 26px) + 66px);
    z-index: var(--z-overlay);

    display: flex;
    flex-direction: column;
    width: min(360px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 140px));
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}

.shb__ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--indigo-600) 100%);
    color: #fff;
}

/* Temsilcinin yüzü başlıkla aynı satırda; metin bloğu araya girsin diye
   başlık kutusu esner, yüz ve kapatma düğmesi kendi ölçüsünü korur. */
.shb__ust > div { flex: 1 1 auto; min-width: 0; }

.shb__ust-yuz {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Koyu gradyanın üstünde yüzü ayıran ince halka */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
    object-fit: cover;
}

.shb__baslik { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); }

.shb__alt {
    margin: 2px 0 0;
    font-size: var(--fs-xs);
    /* %88 beyaz, koyu gradyan üstünde 4,5 üstü */
    color: rgba(255, 255, 255, 0.88);
}

.shb__kapat {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
}

.shb__kapat svg { width: 16px; height: 16px; }

.shb__akis {
    flex: 1;
    min-height: 180px;
    padding: var(--sp-4);
    overflow-y: auto;
    background: var(--surface-soft, #f8fafc);
}

.shb__karsilama {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-600);
}

/* Balonlar: ziyaretçi sağda ve marka renginde, yanıt solda ve beyaz */
.shb__balon {
    max-width: 84%;
    margin-bottom: var(--sp-3);
    padding: 9px 12px;
    border-radius: 14px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.shb__balon--visitor {
    margin-left: auto;
    border-bottom-right-radius: 4px;
    background: var(--brand-700);
    color: #fff;
}

.shb__balon--admin {
    margin-right: auto;
    border-bottom-left-radius: 4px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink-900);
}

/* Geri alınan yanıt: yer duruyor, metin gitmiş. Balon kaybolursa
   ziyaretçi gördüğü cümleden şüphe ediyor; burada ne olduğu yazıyor.
   Kesik çerçeve, boşalmış bir yer olduğunu bakışta söylüyor. */
.shb__balon--geri {
    border: 1px dashed var(--border-strong, #c9ced6);
    background: transparent;
    color: var(--ink-600);
    font-style: italic;
}

.shb__zaman {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    opacity: 0.75;
}

.shb__form {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--border);
    background: #fff;
}

.shb__kimlik { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }

.shb__alan,
.shb__yaz {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--ink-900);
    background: #fff;
}

.shb__alan:focus,
.shb__yaz:focus { outline: 2px solid var(--brand-600); outline-offset: 1px; }

.shb__satir { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: var(--sp-2); align-items: end; }

.shb__yaz { resize: none; max-height: 120px; }

.shb__gonder {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--brand-700);
    color: #fff;
    cursor: pointer;
}

.shb__gonder svg { width: 18px; height: 18px; }

.shb__not {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--ink-600);
}

.shb__gizli {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
    .shb__panel { bottom: calc(clamp(16px, 3vw, 26px) + 62px); }
}

/* ---------------------------------------------- Karşılama baloncuğu

   Sohbet düğmesinin üstünde, temsilcinin yüzü SOLDA yuvarlak içinde.
   Yüz, düğmenin arkasında birinin olduğunu tek bakışta söylüyor;
   ikonun tek başına söyleyemediği şey bu.

   Baloncuk panelin durduğu yerde duruyor (aynı `bottom`); panel
   açıldığında baloncuk kapanıyor, ikisi üst üste binmiyor. */

.shb__selam {
    position: fixed;
    right: clamp(16px, 3vw, 26px);
    /* Panelden biraz daha yukarıda: düğmeyle arasında 3 px kalıyordu
       (ölçüldü), baloncuk düğmeye yapışık duruyordu. */
    bottom: calc(clamp(16px, 3vw, 26px) + 78px);
    z-index: var(--z-overlay);

    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    width: min(320px, calc(100vw - 32px));
    padding: var(--sp-4);
    padding-right: var(--sp-5);
    border: 1px solid var(--border);
    /* Sol alt köşe sivri: baloncuk, altındaki düğmeden çıkıyor gibi dursun */
    border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg);
    background: #fff;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.26);
    cursor: pointer;
    text-align: left;
}

.shb__selam[hidden] { display: none; }

/* Giriş: aşağıdan hafifçe yükselir. Dikkat çekmeli ama sıçramamalı. */
.shb__selam.is-acik { animation: shb-selam-gir 320ms var(--ease) both; }

@keyframes shb-selam-gir {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.shb__selam-yuz {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* Görselin kendi daire maskesi var; halka yüzü zeminden ayırıyor */
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brand-200);
    object-fit: cover;
}

.shb__selam-govde { min-width: 0; }

.shb__selam-kim {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 2px;
    line-height: 1.3;
}

.shb__selam-ad {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--ink-900);
}

.shb__selam-unvan {
    font-size: 11px;
    /* ink-600 · beyaz = 7,58:1 */
    color: var(--ink-600);
}

.shb__selam-metin {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-700);
}

/* Klavye kullanıcısı için gerçek düğme; fare kullanıcısı baloncuğun
   herhangi bir yerine basabiliyor. */
.shb__selam-ac {
    margin-top: var(--sp-2);
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--fw-semibold);
    /* brand-800 · beyaz = 6,4:1 */
    color: var(--brand-800);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.shb__selam-kapat {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ink-500);
    cursor: pointer;
}

.shb__selam-kapat:hover { background: var(--surface-mute); color: var(--ink-800); }
.shb__selam-kapat svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
    .shb__selam { bottom: calc(clamp(16px, 3vw, 26px) + 74px); }
}

@media (prefers-reduced-motion: reduce) {
    .shb__selam.is-acik { animation: none; }
}