/* QPlus Popup v2 – Frontend CSS */

/* ── OVERLAY ─────────────────────────────── */
#qplus-popup-overlay{
  position:fixed;inset:0;z-index:999999;
  display:flex;align-items:center;justify-content:center;
}
#qplus-popup-overlay[data-position="bottom-left"]{
  background:transparent!important;
  align-items:flex-end;justify-content:flex-start;
  padding:24px;pointer-events:none;
}
#qplus-popup-overlay[data-position="bottom-right"]{
  background:transparent!important;
  align-items:flex-end;justify-content:flex-right;
  padding:24px;pointer-events:none;
}
#qplus-popup-overlay[data-position="bottom-left"] #qplus-popup-box,
#qplus-popup-overlay[data-position="bottom-right"] #qplus-popup-box{
  pointer-events:all;
}

/* ── POPUP BOX ───────────────────────────── */
#qplus-popup-box{
  border-radius:16px;overflow:hidden;
  box-shadow:0 25px 80px rgba(0,0,0,.45);
  background-color:#1a1a2e;
}

/* ── KAPAT BUTONU ────────────────────────── */
#qplus-popup-close{
  position:absolute;top:12px;right:12px;
  width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
  background:rgba(0,0,0,.45);
  cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:.2s;z-index:10;backdrop-filter:blur(4px);
}
#qplus-popup-close:hover{background:rgba(0,0,0,.75);transform:scale(1.1)}

/* ── İÇERİK KATMANI ──────────────────────── */
#qplus-popup-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:32px 24px 24px;
  background:linear-gradient(transparent,rgba(0,0,0,.88));
  z-index:2;pointer-events:none;
}
#qplus-popup-title{
  font-size:20px;font-weight:700;
  margin:0 0 8px;line-height:1.3;
  font-family:inherit;
}
#qplus-popup-body{
  font-size:14px;line-height:1.6;
  margin:0 0 16px;
}
#qplus-popup-cta{
  pointer-events:all;display:inline-block;
  padding:10px 24px;border-radius:8px;
  font-size:14px;font-weight:700;
  text-decoration:none;transition:opacity .2s,transform .2s;
  position:relative;z-index:3;
}
#qplus-popup-cta:hover{opacity:.88;transform:translateY(-1px)}

/* ── ANİMASYONLAR ────────────────────────── */
[data-animation="fade"]         #qplus-popup-box{animation:qpFade       .4s ease}
[data-animation="slide-left"]   #qplus-popup-box{animation:qpSlideLeft  .4s ease}
[data-animation="slide-right"]  #qplus-popup-box{animation:qpSlideRight .4s ease}
[data-animation="slide-top"]    #qplus-popup-box{animation:qpSlideTop   .4s ease}
[data-animation="slide-bottom"] #qplus-popup-box{animation:qpSlideBottom .4s ease}
[data-animation="zoom"]         #qplus-popup-box{animation:qpZoom .4s cubic-bezier(.34,1.56,.64,1)}

@keyframes qpFade        {from{opacity:0}to{opacity:1}}
@keyframes qpSlideLeft   {from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:none}}
@keyframes qpSlideRight  {from{opacity:0;transform:translateX(80px)} to{opacity:1;transform:none}}
@keyframes qpSlideTop    {from{opacity:0;transform:translateY(-80px)}to{opacity:1;transform:none}}
@keyframes qpSlideBottom {from{opacity:0;transform:translateY(80px)} to{opacity:1;transform:none}}
@keyframes qpZoom        {from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* ── KAPANMA ─────────────────────────────── */
#qplus-popup-overlay.closing{animation:qpOverlayOut .3s ease forwards}
#qplus-popup-overlay.closing #qplus-popup-box{animation:qpBoxOut .28s ease forwards}
@keyframes qpOverlayOut{from{opacity:1}to{opacity:0}}
@keyframes qpBoxOut     {from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.88)}}