.blocker{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
overflow:auto;
z-index:10000000000000;
padding:5px; /* orjinali 20..   yukariya cekiyor splashi */ 
box-sizing:border-box;
background-color:#000;
background-color:rgba(0,0,0,0.75);
text-align:center
}


.blocker:before{
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
margin-right:-0.05em
}


.blocker.behind{
background-color:transparent
}



.modal{
display:none;
vertical-align:middle;
position:relative;
z-index:10000000000000;
max-width:590px; /* Maximum pencere boyutunu buradan ayarlayabilirsiniz*/ 
max-height:800px;
box-sizing:border-box;
width:93%; /* Orjinali ( pwidth:82%;    modal a Mobilde kenardan boşluğu buradan ayarlanabiliyor*/
height:90%; /* Orjinali ( Orjinalde bu yok    modal a Mobilde alt ve üst boşluğu buradan ayarlanabiliyor*/
background:#fff;
padding:5px 7px;  /* Orjinali ( padding:15px 30px;  */



-webkit-border-radius:8px;
-moz-border-radius:8px;
-o-border-radius:8px;-ms-border-radius:8px;
border-radius:8px;
-webkit-box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left

}


/* BU BÖLÜLÜMDEKİ KODLAR SADECE MOBİLDE KENAR AŞAĞI VE YUKARI ÇEKME CBUGU EKLİYOR. EGERKİ ÜSTTTEKİ DİĞER KODLARA EKLERSEM HEM PC DE HEM MOBİLDE ÇALIŞIR*/
@media (max-width: 400px) {
.modal{    
overflow:hidden; /* modalın kenarında scroll aşağı yukarı çekme cubu  ekler.. istenirse silinip iptal edilebilir*/
overflow-y:scroll; /* modalın kenarında scroll aşağı yukarı çekme cubu  ekler.. istenirse silinip iptal edilebilir*/
}}
/* BU BÖLÜLÜMDEKİ KODLAR SADECE MOBİLDE KENAR AŞAĞI VE YUKARI ÇEKME CBUGU EKLİYOR. EGERKİ ÜSTTTEKİ DİĞER KODLARA EKLERSEM HEM PC DE HEM MOBİLDE ÇALIŞIR*/



.modal a.close-modal{
position:absolute;
top:-4.5px;
right:-4.5px;
display:block;
width:30px;
height:30px;
text-indent:-9999px;
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
z-index:20;
background-image:url('../images/splash_kapatma.png')
}

.modal-spinner{
display:none;
position:fixed;
top:50%;
left:10%;
transform:translateY(-50%) translateX(-50%);
padding:12px 16px;
border-radius:5px;
background-color:#111;
height:20px;
}

.modal-spinner> div {
border-radius:100px;
background-color:#fff;
height:20px;
width:2px;
margin:0 1px;
display:inline-block;

-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;
animation:sk-stretchdelay 1.2s infinite ease-in-out
}

.modal-spinner .rect2{
-webkit-animation-delay:-1.1s;animation-delay:-1.1s
}

.modal-spinner .rect3{
-webkit-animation-delay:-1.0s;
animation-delay:-1.0s;
}

.modal-spinner .rect4{
-webkit-animation-delay:-0.9s;
animation-delay:-0.9s
}

@-webkit-keyframes sk-stretchdelay{0%,40%,100%{
-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);
-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}