/* ── UPİ yol gösterici — mobile-first ─────────────────────────────
   Renkler konfigüratörün değişkenlerine yaslanır; o sayfada tanımlı
   değilse (normal ürün sayfası) yedek değerler devreye girer. */
.upi{position:fixed;inset:0;z-index:9990}
.upi[hidden]{display:none!important}

/* Tıklama yakalayıcı. Hedef varken karartmayı paneller yapar,
   hedefsiz (karşılama) adımda burası karartır. */
.upi-mask{position:absolute;inset:0;background:transparent;cursor:pointer}
.upi-mask.is-dark{background:rgba(6,9,6,.82)}

/* Spot halkası — sadece çerçeve. Karartma DÖRT PANEL ile yapılır;
   tek dev box-shadow (0 0 0 9999px) bazı tarayıcılarda kocaman bir
   katman üretip boyamayı düşürüyor. */
.upi-ring{position:fixed;border-radius:18px;pointer-events:none;
    border:2px solid var(--cd-acc,#a4e22b);
    box-shadow:0 0 18px rgba(164,226,43,.30);
    transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease}
.upi-ring[hidden]{display:none}
.upi-sh{position:fixed;background:rgba(6,9,6,.82);pointer-events:auto;cursor:pointer}
.upi-sh[hidden]{display:none}

/* Anlatım kutusu — mobilde alta yapışır */
.upi-pop{position:fixed;left:10px;right:10px;bottom:10px;
    display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.upi-av{flex:0 0 64px;width:64px;height:auto;pointer-events:none;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));animation:upiFloat 3.4s ease-in-out infinite}
@keyframes upiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.upi-box{flex:1 1 auto;pointer-events:auto;background:var(--cd-card,var(--bg-card,#141414));
    border:1px solid var(--cd-line,var(--border,#2a2a2a));border-radius:16px;padding:13px 14px;
    box-shadow:0 18px 42px rgba(0,0,0,.55)}
.upi-t{font-size:14.5px;font-weight:900;margin-bottom:5px;color:var(--cd-acc,#a4e22b)}
.upi-b{font-size:13px;line-height:1.55;color:var(--text,#e8e8e8);margin:0 0 11px}
.upi-f{display:flex;align-items:center;justify-content:space-between;gap:10px}
.upi-dots{display:flex;gap:5px;flex-wrap:wrap}
.upi-dots i{width:6px;height:6px;border-radius:50%;background:var(--cd-line,var(--border,#2a2a2a));display:block}
.upi-dots i.on{background:var(--cd-acc,#a4e22b)}
.upi-btns{display:flex;align-items:center;gap:8px}
.upi-skip{background:none;border:0;color:var(--cd-muted,var(--text-muted,#9aa09a));font-size:12.5px;
    font-weight:700;padding:8px 4px;cursor:pointer}
.upi-skip:hover{color:var(--text,#e8e8e8)}
.upi-next{background:var(--cd-acc,#a4e22b);color:#0d0d0d;border:0;border-radius:999px;
    font-size:13px;font-weight:900;padding:9px 18px;cursor:pointer}
.upi-next:hover{filter:brightness(1.06)}
.upi-skip:focus-visible,.upi-next:focus-visible{outline:2px solid var(--cd-acc,#a4e22b);outline-offset:2px}

/* Konfigüratörde kilitli adım, anlatılırken sönük durmasın
   (tıklanabilir olmaz — sadece görünür) */
.cd-step.is-locked.upi-lit{opacity:1;filter:none}

/* Konfigüratör başlığındaki "Nasıl çalışır?" */
.upi-again{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:none;
    border:1px solid var(--cd-line,var(--border,#2a2a2a));border-radius:999px;padding:6px 13px;
    color:var(--cd-muted,var(--text-muted,#9aa09a));font-size:12px;font-weight:700;cursor:pointer}
.upi-again::before{content:"";width:14px;height:14px;border-radius:50%;
    background:var(--cd-acc,#a4e22b);flex:0 0 14px}
.upi-again:hover{color:var(--text,#e8e8e8);border-color:var(--cd-acc,#a4e22b)}

/* ── Sohbet panelinde "UPİ Göstersin" ─────────────────────────────
   Başlık satırının ALTINDA kendi şeridi. Başlık içine konulduğunda
   dar ekranda etiket gizleniyordu; burada her zaman görünür.
   Metin taşmaz: uzun çeviride (ör. Almanca) üç noktayla kısalır. */
.upi-chat-strip{display:flex;padding:8px 10px;box-sizing:border-box;width:100%;
    background:rgba(164,226,43,.12);border-bottom:1px solid rgba(0,0,0,.08)}
.upi-chat-btn{display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;min-width:0;box-sizing:border-box;padding:9px 14px;
    border:1px solid #7cb518;border-radius:999px;background:#fff;color:#14310a;
    font-size:13.5px;font-weight:800;line-height:1.2;cursor:pointer;
    font-family:inherit}
.upi-chat-btn:hover{background:#f4fbe8}
.upi-chat-btn:focus-visible{outline:2px solid #7cb518;outline-offset:2px}
.upi-chat-btn img{width:20px;height:22px;flex:0 0 20px;object-fit:contain;display:block}
.upi-chat-btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (min-width:820px){
    .upi-pop{left:0;right:auto;bottom:auto;width:430px;align-items:flex-start}
    .upi-av{flex:0 0 92px;width:92px}
    .upi-t{font-size:15.5px}
    .upi-b{font-size:13.5px}
    /* karşılama adımı — ortada dursun */
    .upi-pop.is-center{left:50%;top:50%;transform:translate(-50%,-50%)}
    /* hedef görünür alana getirilemediyse — köşeye çekil, ekranı karartma */
    .upi-pop.is-bottom{left:auto;right:20px;top:auto;bottom:20px}
}
@media (prefers-reduced-motion:reduce){
    .upi-ring{transition:none}
    .upi-av{animation:none}
}