@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
    font-family: "Poppins", sans-serif;
    background: black;
    color: white;
	height:100vh;
}
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.garanti
{
    font-size: small;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    font-style: italic;
}
.garantiyazi {
    display: flex;
    justify-content: center;
    width: 100%;
	align-items:center;
	font-weight:bold;
}

.cards {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    
	text-transform: uppercase;
	
}
.logo {
    background: url(../img/armesan.png);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position-x: center;
	background-size:contain;
	
}
.card {
    width: 97%;
    height: 97.7%;
    /* filter: drop-shadow(2px 4px 6px red); */
    display: flex;
    flex-direction: column;
    align-items: center;
    background: black;
    border-radius: 10px;
    z-index: 2;
    position: absolute;
	
}
.box {
    position: relative;
    width: 90%;
    height: 90%;
    background: #1c1c1c;
    border-radius: 8px;
    overflow: hidden;
    inset: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box::before {
    content: "";
    z-index: 1;
    position: absolute;
    top: -50%;
    left: -50%;
    width: 100%;
    height: 100%;
    transform-origin: bottom right;
    background: linear-gradient(0deg,transparent, #d5c082 , #d5c082);
    animation: animate 6s linear infinite;
}

.box::after {
    content: "";
    z-index: 1;
    position: absolute;
    top: -50%;
    left: -50%;
    width: 100%;
    height: 100%;
    transform-origin: bottom right;
    background: linear-gradient(0deg,transparent, #979797,#979797);
    animation: animate 6s linear infinite;
    animation-delay: -3s;
}
/* #45f3ff */

@keyframes animate{
    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(360deg);
    }
}
.urun-resmi
{
	width:65%;
	height:65%;
	padding:15px;
	
}
.urun-resmi img
{
	width:100%;
	height:100%;
	border-radius:10px;
	
}

.icerik {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; /* Metinleri yatayda ortalar */
    text-align: center; /* İçerik metinlerini yine ortalar */
    
    font-size: 20px;
    width: 100%;
    height: 35%;
}

.Firma, .Cihaz, .Seri.No, .UT, .SKT 
{
color:white;
	gap:5px;
}


.Firma::before {
    content: "Firma: ";
    font-weight: bold;
	color:#d5c082;
}

.Cihaz::before {
    content: "Cihaz: ";
    font-weight: bold;
	color:#d5c082;
}

.Seri::before {
    content: "Seri No: ";
    font-weight: bold;
	color:#d5c082;
}
.UT::before
{
	content: "Üretim Tarihi: ";
	font-weight: bold;
	color:#d5c082;
}
.SKT::before {
    content: "Garanti Bitiş Tarihi: ";
    font-weight: bold;
	color:#d5c082;
}

.mobile .urun-resmi
{
	width:100%;
	height:50%;
	padding:15px;
	display: flex;
    justify-content: center;
}
.mobile .urun-resmi img
{
	width:95%;
	height:100%;
	
}
.mobile .icerik {
	display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    text-align: center;
    gap: 10px;
    font-size: 18px;
    width: 100%;
    height: 35%;
    margin-left: 35px;
	margin-top:15px;
	margin-bottom:5px;
}
.mobile .logo {
    background: url(../img/armesan.png);
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-position-x: center;
	background-size:contain;
}
@media screen and (max-width:450px)
{
	.garanti
	{
		font-size:x-small;
		color:#d5c082;
		
	}
}