

@media (min-width: 913px) {
  /* Web sitesi tasarımını gizle */
	.pc{display: flex !important; margin: 4vw; color: #fff; font-size: 1.5vw; align-items: center; justify-content: center;}
	.pc img{width: 28vw;  margin-top: 44%; position: fixed;}
	
	 body{background: #161817 !important;}
	.test{display:none}
	.footer{visibility:hidden}
	copyright{    display: none!important;}
}

@media only screen and (max-width:481px){

@font-face {
    font-family: 'pumpopti';
    src: url('webfont/pumpopti-medium-webfont.eot');
    src: url('webfont/pumpopti-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont/pumpopti-medium-webfont.woff2') format('woff2'),
         url('webfont/pumpopti-medium-webfont.woff') format('woff'),
         url('webfont/pumpopti-medium-webfont.svg#pumpoptimedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
	
	
	
	
.header {height: 19.6vw; text-align: center; width: 100%; color: #fff; background: linear-gradient(190deg, rgba(204, 40, 39, 1) 0%, rgba(22, 24, 23, 1) 100%); z-index: 100; display: flex; flex-direction: row; justify-content: space-around; align-items: center; box-shadow: rgb(0 0 0 / 35%) 0px 1.1vw 4.1vw;}
.header h4{display: flex; align-items: center; justify-content: center; width: 100%; font-size: 4vw; font-weight: 300; font-family: pumpopti; text-transform: uppercase;}
.header h4 img{width: 5.7vw; margin-right: 2vw;}
img { image-rendering: -webkit-optimize-contrast !important; }
	
	
html { overflow-x:hidden; scroll-behavior: smooth; }
body { margin: 0;padding: 0;background-image: url(/tasarim/desen.jpg); background-size: cover;background-repeat: no-repeat;
background-position: right;background-attachment: fixed;font-family: 'Poppins', sans-serif;overflow-x:hidden}

#canvasDiv{
position: relative; border: 0.5vw dashed grey; height: 34vw; width: 92vw; border-radius: 1vw; margin-top: 5.8vw;
}
.baslik{
	font-size:14px;
}
#form{
	display: flex; flex-direction: column;margin-top:8vw;
}
label{font-size: 4vw; font-weight: 500; position: relative; margin-bottom: 5.2vw; top: 3.9vw;}
.row{padding:3vw;margin-top: 8vw;}
.btn-danger,.btn-success{background: #9e8989; border: none; border-radius: 0.5vw; padding: 1.9vw; color: #fff; width: 28vw; box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px; margin-right: 4vw;font-size:3vw;}
.btn-success{background: #80a281;}
.col-md-offset-2{margin-top: -11vw;} 
.app{    margin-top: -14vw;}
#note-textarea{width: 92.6vw; border: 0.1vw solid #cbc9c9; border-radius: 1.1vw; margin-bottom: 3vw; margin-top: 6vw;}
#start-record-btn,#pause-record-btn{background: #76b3b3; border: none; border-radius: 0.5vw; padding: 1.9vw; color: #fff; width: 28vw; box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px; margin-right: 4vw;font-size:3vw;}
#pause-record-btn{background: #b37676;}
.succes-arkaplan{position: fixed;display:none; z-index: 1; left: 0;  top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
.succs-button{background: #073f5f; color: #fff; font-size: 2.9vw; width: 17vw; text-align: center; padding: 1.1vw; cursor: pointer; margin-top: -1.5vw;}
.succs-pop {background-color: #f4f4f4; height: 48vw; width: 61vw; display: flex; justify-content: flex-start; position: fixed; box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px; flex-direction: column; align-items: center; left: 18%; top: 36%;}
.succs-ust,.cross-ust{width: 61.6vw; background: #38d00d7a; display: flex; justify-content: center; align-items: center; height: 23.1vw;}
.cross-ust{background: #fa0c118a;}
.circle,.circle-border {width: 9vw; height: 9vw; border-radius: 50%;}
.circle {z-index: 1; position: relative; background: #ffffffcf; transform: scale(1); animation: success-anim 700ms ease;}
.circle-border {z-index: 0; position: absolute; background: #38d00d; transform: scale(1.1); animation: circle-anim 400ms ease;}

.succs-word{font-size: 4.2vw; width: 64%; font-weight: 500; text-align: center; margin-top: 3.8vw;}
	
@keyframes success-anim {
  0% {
    transform: scale(0);
  }
  30% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes circle-anim {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1.1);
  }
}

.success::before,
.success::after {content: ""; display: block; height: 0.55vw; background: #38d00d; position: absolute;}
.success::before {width: 2.5vw; top: 57.2%; left: 23%; transform: rotateZ(50deg);}
.success::after {width: 4vw; top: 51.7%; left: 34.5%; transform: rotateZ(-50deg);}

.cross::before,
.cross::after {content: ""; display: block; height: 0.45vw; background: #fa0c11; position: absolute;}
.cross::before {width: 4.8vw; top: 48.9%; left: 24.8%; transform: rotateZ(38deg);}
.cross::after {width: 4.8vw; top: 48%; left: 17.7%; transform: rotateZ(316deg);}

input{height: 9vw; border-radius: 1.1vw; border: 0.1vw solid #cbc9c9;}
.sender{top: 55vw; position: relative; background: #80a281; color: #fff;  margin-left: -0.3vw; width: 94.6vw; font-size: 3.7vw; height: 9vw; font-weight: 500;}
textarea::placeHolder, input::placeHolder  {
    font-size: 2.6vw;
}
.input-single { margin-bottom: 2vw; }

.footer-alt{margin-top: 26vw; background:#161817; height: 34vw; display: flex; flex-direction: column; justify-content: center; align-items: center;        box-shadow: rgb(0 0 0 / 35%) 0px 1.1vw 4.1vw;}
	
	
	
	
	
	
}/*--------@media screen(max-width:800px) B力TER--------*/


