*{ margin: 0; padding: 0; box-sizing: border-box;}

html{ font-size: 10px;}
body{
    font-family: 'Poppins', sans-serif;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Inter', sans-serif;

    --dark-blue: #262b48;
    --light-blue: #899097;
    --white: #fff;
}

button{ font-family: inherit;}

.hidden{ display: none !important;}

.bido-container{ padding: 15px; width: 100%; min-height: 100dvh; background-image: url(../images/bg.jpg); background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center;}

.form-container{ box-shadow: -15px 15px 25px 0px rgba(0, 0, 0, .5); width: 100%; max-width: 700px; display: grid; grid-template-columns: 250px 1fr; border-radius: 30px; overflow: hidden;}
.form-container .img-area{ background-color: var(--dark-blue); display: flex; align-items: center; justify-content: center; padding: 30px;}
.form-container .img-area img{ width: 100%;}
.form-container .form-area{ padding: 30px; background-color: var(--white);}
.form-container .form-area .header{ position: relative; gap: 10px; border-bottom: 1px solid #eee; box-shadow: 0 20px 15px -20px rgba(0, 0, 0, .15); padding-bottom: 10px; margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between;}
.form-container .form-area .header > *{ flex: 1;}
.form-container .form-area .header .img{}
.form-container .form-area .header .img img{ height: 37px;}
.form-container .form-area .header .price{ white-space: nowrap;}
.form-container .form-area .header .price > strong{ font-size: 2rem; color: #404145;}
.form-container .form-area .header .price > span{ font-size: 1rem; font-weight: 700; opacity: .5;}
.form-container .form-area .header .countdown{ color: #686d70; font-size: 1.4rem; font-weight: 700; display: flex; justify-content: flex-end; align-items: center;}
.form-container .form-area .header .countdown i{ transition: all 1.2s ease; margin-right: 5px; font-size: 1.1rem; display: inline-block;}
.form-container .form-area .header .countdown i.turn{ transform: rotate(360deg);}
.form-container .form-area form{ display: flex; flex-direction: column; gap: 20px;}
.form-container .form-area form .btn-area{ display: flex; justify-content: space-between; align-items: center;}
.form-container .form-area form .btn-area button{ background-color: rgb(9, 134, 9); color: var(--white); border: none; cursor: pointer; border-radius: 5px; font-weight: 600; font-size: 1.2rem; height: 37px; padding: 0 25px; width: 100%; max-width: fit-content; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all .2s ease; opacity: .9;}
/* .form-container .form-area form .btn-area button:hover{ color: var(--dark-blue); background-color: var(--white);} */
.form-container .form-area form .btn-area button:hover{ opacity: 1; box-shadow: 0 10px 7px -5px rgba(0, 0, 0, .2);}
.form-container .form-area form .btn-area button:active{ opacity: 1; box-shadow: none;}
.form-container .form-area form .btn-area button span{ transform: translateY(-1px);}
.form-container .form-area form .btn-area button i{ transition: all .2s ease;}
.form-container .form-area form .btn-area button:hover i{ transform: translateX(2px);}
.form-container .form-area form .btn-area button:active i{ transform: translateX(4px);}
.form-container .form-area form .btn-area > a{ color: rgb(158, 0, 0); text-decoration: none; font-size: 1rem;}
.form-container .form-area form .btn-area > a:hover{ text-decoration: underline;}

.input-template{ display: flex; flex-direction: column;}
.input-template label{ position: relative; font-size: 1.2rem; font-weight: 500; color: var(--light-blue); font-weight: 500; display: inline-block;}
.input-template > div{ position: relative; margin-top: 7px; display: flex; gap: 7px;}
.input-template > div.select::before{ content: '\f107'; right: 10px; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; position: absolute; top: 50%; transform: translateY(-50%);}
.input-template > div :is(input, select){ width: 100%; height: 35px; font-weight: 500; border-radius: 5px; border: 1px solid #c3c9cf; background-color: #fefefe; outline: none; padding: 0 10px; transition: all .2s ease;}
.input-template > div :is(input, select):focus{ box-shadow: 0 8px 7px -5px rgba(0, 0, 0, .1); background-color: var(--white); border-color: #9ca4ac;}
.input-template > div :is(input, select):read-only{ cursor: default;}
.input-template > div :is(input, select):disabled{ background-color: #f1f2f5; color: #5d636c; border-color: #c7ced3;}
.input-template > div select{ -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: '';}
.input-template > div select::-ms-expand { display: none;}
.input-template > div .copy-btn{ transition: all .2s ease; position: relative; background-color: #f1f2f5; color: #5d636c; border: 1px solid #c7ced3; height: 35px; aspect-ratio: 1; font-size: 1.3rem; border-radius: 5px; cursor: pointer;}
.input-template > div .copy-btn:hover{ background-color: white;}
.input-template > div .copy-btn::before{ content: 'Kopyala'; display: inline-block; border-radius: 3px; padding: 3px 7px; background-color: var(--dark-blue); color: white; position: absolute; left: 50%; top: -5px; transform: translateX(-50%) scale(.1); pointer-events: none; opacity: 0; font-size: .8rem; font-weight: 500; transition: all .2s ease;}
.input-template > div .copy-btn:hover::before{ top: -25px; transform: translateX(-50%) scale(1); opacity: 1;}
.input-template > div .copy-btn.copied::before{ content: 'Kopyalandı';}

.input-template label .detail-btn{ display: inline-block; transform: translateY(1px); font-size: 12px; cursor: pointer; position: relative; margin-left: 3px;}
.input-template label .detail-btn::before{ transition: all .2s ease; opacity: 0; content: ''; position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: -1px; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 5px 10px 0 10px; border-color: var(--light-blue) transparent transparent transparent;}
.input-template label .detail-btn:hover::before{ top: -7px; opacity: 1;}
.input-template label .detail{ pointer-events: none; transition: all .2s ease; opacity: 0; position: absolute; bottom: 9px; z-index: 4; padding: 7px 10px; font-size: .9rem; line-height: 1.4; border-radius: 3px; max-width: 100%; min-width: 75%; box-shadow: 0 0 7px 1px rgba(var(--black-bg-o), 0.6); background-color: var(--light-blue); color: white;}
.input-template label .detail-btn:hover + .detail{ pointer-events: all; bottom: 19px; opacity: 1;}
.input-template label .detail-btn + .detail:hover{ pointer-events: all; bottom: 19px; opacity: 1;}



@media screen and (max-width: 668px) {
    .form-container{ grid-template-columns: 1fr; max-width: 400px; border-radius: 20px; box-shadow: -10px 20px 25px 0px rgba(0, 0, 0, .25);}
    .form-container .img-area img{ max-width: 170px;}
    .input-template > div input{ height: 40px;}
    .input-template > div .copy-btn{ height: 40px;}
    .form-container .form-area .header{ margin-bottom: 30px; display: flex; flex-direction: column-reverse; align-items: flex-start;}
    .form-container .form-area .header .img{ margin: 0 auto;}
    .form-container .form-area .header .countdown{ position: absolute; right: 0; bottom: 10px;}
    .form-container .form-area .header .price > strong{ font-size: 1.7rem;}
}