/* =========================================================
   odeme.css
   - Desktop: slider üstü overlay kutu
   - Mobil: slider altında kompakt kart
   ========================================================= */

#example1{ position:relative; }

/* ---------------- Desktop / Tablet overlay ---------------- */
#example1 .slider-iban{
  position:absolute;
  left:14px;
  bottom:78px;
  z-index:20;
  width:420px;
  max-width:calc(100% - 28px);

  background:rgba(0,0,0,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:12px;
  backdrop-filter: blur(3px);
}

#example1 .slider-iban-title{
  font-weight:700;
  font-size:14px;
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:8px;
}

#example1 .slider-iban-text{
  font-size:12.5px;
  opacity:.95;
  margin-bottom:10px;
}

#example1 .slider-iban-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;

  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.10);
  border:1px dashed rgba(255,255,255,.22);
}

#example1 .slider-iban-row .lbl{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}

#example1 .slider-iban-row .val{
  font-weight:700;
  letter-spacing:.3px;
}

#example1 .slider-iban-row .cpy{
  margin-left:auto;
  font-size:12px;
  color:#fff !important;
  text-decoration:none !important;

  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.15);
}

#example1 .slider-iban-row .cpy:hover,
#example1 .slider-iban-row .cpy:focus{
  background:rgba(0,0,0,.28);
}

#example1 .slider-iban-note{
  margin-top:8px;
  font-size:11.5px;
  opacity:.95;
}

/* ---------------- Mobil: kompakt kart (slider altı) ---------------- */
@media (max-width: 768px){

  .slider-iban-mobile{
    position:static !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:auto !important;

    margin:10px 10px 0 10px;
    padding:10px 10px;

    background:#ffffff;
    color:#1b2a4a;
    border:1px solid #e6e8f2;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.10);
    backdrop-filter:none;
  }

  .slider-iban-mobile .slider-iban-title{
    font-size:13px;
    margin-bottom:8px;
    font-weight:800;
    color:#0f2244;
  }

  .slider-iban-mobile .slider-iban-text{
    display:none;
  }

  .slider-iban-mobile .slider-iban-row{
    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 10px;
    border-radius:12px;
    background:#f5f7ff;
    border:1px dashed #cfd7ff;
  }

  .slider-iban-mobile .slider-iban-row .lbl{
    background:#e7ecff;
    color:#1b2a4a;
    font-weight:700;
  }

  .slider-iban-mobile .slider-iban-row .val{
    flex:1;
    min-width:0;
    font-weight:800;
    letter-spacing:.2px;
    font-size:12.5px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .slider-iban-mobile .slider-iban-row .cpy{
    margin-left:0;
    font-size:12px;
    font-weight:800;
    padding:8px 12px;
    border-radius:12px;

    border:1px solid rgba(61,76,142,.25);
    background:#3D4C8E;
    color:#fff !important;
    text-decoration:none !important;
    white-space:nowrap;
  }

  .slider-iban-mobile .slider-iban-row .cpy:hover,
  .slider-iban-mobile .slider-iban-row .cpy:focus{
    opacity:.92;
  }

  .slider-iban-mobile .slider-iban-note{
    margin-top:8px;
    font-size:11px;
    color:#4c5a78;
    opacity:1;
  }
}

@media (max-width: 420px){
  .slider-iban-mobile .slider-iban-row .val{
    font-size:12px;
  }
}
/* Mini toast (Bootstrap 3 uyumlu) */
.mini-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:99999;

  background:rgba(0,0,0,.85);
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

@media (max-width: 768px){
  .mini-toast{
    width:calc(100% - 24px);
    left:12px;
    transform:none;
    bottom:12px;
    text-align:center;
  }
}