@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?
family=Inter:wght@100&display=swap');

:root{
--size: max(5px , 1vmin);
--height: 80em;
--pad: 1.25em;
--border-radius: 6.666em;
--gutter: calc(var(--pad) * 2);
--button-width: 0.333em;
--notch-height: 3.33em;
--notch-width: 33.3%;
--notch-radius: calc(var(--border-radius) - calc(var(--pad) * 2));
--notch-duration: 0.3333s;
--ease: cubic-bezier(.666, 0, .4, 1);
--ease-spring: cubic-bezier(.666, 0, .4, 1.2);
--ease-out: cubic-bezier(.15, 0, .333, 1);
--border-width: 0.4em;
--deep-purple: 284;
--gold: 30;
--space-black: 215;
--c-h: var(--deep-purple);
--c-s: 100%;
--c-l: 50%;
}

@-webkit-keyframes appear{
to{
transform: scale3d(1, 1, 1);
opacity: 1;
}
}

@keyframes appear{
to{
transform: scale3d(1, 1,1);
opacity: 1;
}
}

body{
background: rgb(0, 0, 0);
display: flex;
flex-direction: column;
gap: 3em;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'Inter', sans-serif;
font-size: var(--size);
}

.phone {
position: relative;
z-index: 1;
aspect-ratio: 5/0.7; /* En-boy oranını belirledik */
background: rgb(0, 0, 0);
 width: 250px; /* Genişlik değerini dilediğiniz gibi ayarlayın */
height: 500px; /* Yükseklik değerini hesapladığınız değeri buraya yazın */
border-radius: var(--border-radius);
box-shadow: 0 0 10.1em 0.25em hsl(var(--c-h), 20%, 25%), 0 0 0 var(--border-
width) hsl(var(--c-h), 30%, 85%);
box-sizing: border-box;
opacity: 0;
transform: scale3d(1.1, 1.1, 1);
-webkit-animation: appear 5s var(--ease-out) forwards;
animation: appear 5s var(--ease-out) forwards;
--webkit-backface-visibility: hidden;
margin-top: 53px; /* 50 piksellik boşluk bırakarak aşağı taşıyoruz */
justify-content: center; /* Elemanları dikey olarak ortalamak için */
}

.phone::before{
content: "";
position: absolute;
top: var(--border-radius);
right: calc(var(--border-width) * -1);
bottom: calc(var(--border-radius));
left: calc(var(--border-width) * -1);
border: 0.5em solid hsl(var(--c-h), 20%, 30%);
border-left-width: 0;
border-right-width: 0;
}

.buttons .left, .buttons .right{

position: absolute;
width: var(--button-width);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.5em;
}

.buttons .left{
right: 100%;
top: calc(var(--border-radius) * 2);
}

.buttons .left .button:nth-child(1){

height: 3em;
margin-bottom: 0.5em;
}

.buttons .right{
height: 9.5em;
transform: scale3d(-1, 1, 1);
top: calc(var(--border-radius) * 3);
}

.buttons .right .button{

height: 9.5em;
}

.buttons .button{
background: hsl(var(--c-h), 20%, 95%);
height: 00em;
 box-shadow: inset -0.15em 0 0.1 black, inset 0 0 0.1em hsl(var(--c-h), 30%,
90%), inset 0 0.2em *.1em hsl(var(--c-h), 30%, 90%), inset 0 -0.2em 0.1em
hsl(var(--c-h), 30%, 90%), inset -0.1em 0.333em 0.1em rgb(red, green, blue), inset
-0.1em -0.33em 0.1em rgb(red, green, blue)
border-top-left-radius: 0.2em;
border-bottom-left-radius: 0.2em;
}

.screen-container{
position: absolute;
inset: 0;
border-radius: var(--border-radius);
border: var(--pad) solid black;
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--pad) * 2);
}

.screen-container::before{
content: "";
position: absolute;
z-index: 2;
background: rgb(255, 255, 255);
width: 36.6%;
bottom: calc(var(--pad) * 42.3);
height: calc(var(--pad) * 0.50);
border-radius: calc(var(--pad) * 0.25);
filter: drop-shadow(0 0.1em 0.25em rgba(0, 0, 0, 0.1));