body {
	font-family: Verdana, Geneva, sans-serif;
	line-height: 1.6;
	font-size: 16px;
	background: white;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:where(h1) {
	margin-block: 0.67em;
	font-size: 2em;
	color: navy;
	text-align: center;
	text-shadow: 2px 2px silver;
}
.anamenu {
	background-color: white;
	padding: 8px;
	margin-bottom: 16px;
	box-shadow: 2px 2px silver;
}
.anamenu a {color: navy;text-decoration: none;}
.anamenu a:hover {color: blue;text-shadow: 1px 1px silver;}
.menu {margin: 12px;}
.sol {margin-left:24px;}
.sag {float:right;margin-right:24px;}

.ursm {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 16px;
	margin-bottom: 8px;
	width: 100%;
	max-width: 256px;
	height: auto;
	border: 1px solid skyblue;
	box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.2);
}
.salist {list-style-type: none;margin: 0;}
.salist > li {display: block;padding: 8px;}
.kart {
    color: black;
    background-color: white;
    margin: 16px 8px 32px 8px;
    border: 2px solid skyblue;
    box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.3);
    border-radius: 10px 10px 10px 10px;
}
.kartust {
    background-color: ghostwhite;
    border-bottom: 1px solid skyblue;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px 10px 0px 0px;
    padding: 8px;
}
.kartp {
	padding: 16px 0 16px 8px;
	margin: 16px 8px 16px 8px;
	background-color: #fcfcff;
	border: 1px solid skyblue;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}
.kartr {
	background-color: #fzcfcff;
}
.kartc {
	padding: 16px;
	background-color: #fcfcff;
	border: 1px solid skyblue;
}
.kart > p {padding: 16px;}
.kartici > p {padding: 8px;}
.p8 {padding: 8px;}
.pt8 {padding-top: 8px;}
.p16 {padding: 16px;}
.pt16 {padding-top: 16px;}
.pl16 {padding-left: 16px;}
.m16 {margin: 16px;}
.fs24 {font-size: 24px;}
.fs18 {font-size: 24px;}
.smbdiv {text-align: center;padding-top: 8px;}
.smb {margin: 12px; box-shadow: 2px 2px silver;}
.smb:hover {opacity: 0.7;}
#email, #sifre {
    width: 100%;
    padding: 4px;
    border: 1px solid silver;
    margin-bottom: 16px;
}
#onaykodu {
	width: 80px;
	padding: 4px;
	border: 1px solid silver;
	margin-bottom: 16px;
	background-color: #f8f8ff;
}
#msg {
	padding: 8px;
	color: red;
	animation-name: renklib;
	animation-duration: 2s;
	animation-iteration-count: 2;
}
.ibutton {font-size: 16px;padding:4px;}
.psol {
	display: inline-block;
	margin: 8px;
	width: 92px;
	color: black;
	background-color: ghostwhite;
	box-shadow: 1px 1px silver;
}
.psag {
	display: inline-block;
	color: navy;
}
@keyframes renklib {
	0% {color: navy;}
	50% {color: blue;text-shadow: 2px 2px navy;}
	75% {color: black;}
	100% {color: red;}
}
.anabaslik {
	text-align: center; 
	text-shadow: 2px 2px silver;
	color: navy;
	animation-name: renklib;
	animation-duration: 2s;
	animation-iteration-count: 30;
}
.rb {
	animation-name: renklib;
	animation-duration: 1s;
	animation-iteration-count: 10;
}
.bir {animation-duration: 1s;}
.orta { text-align: center;}
.ortadiv {
	margin-left: auto;
	margin-right: auto;
	margin-top: 32px;
	margin-bottom: 16px;
	width: 90%;
	max-width: 480px;
}

.icon {font-size: 48px;}
.sari {color:yellow;}
.mavi {color:blue;}
.lacivert {color:navy;}
.kirmizi {color:red;}
.gri {color:gray;}
.yesil {color:green;}
.gumus {color:silver;}
.kapali {
	display:none;
}

.tus {
	border-radius: 4px 4px 4px 4px;
	box-shadow: 2px 2px silver;
	background-color: navy;
	color: white;
	padding: 2px;
}
.tus:hover {background-color: blue;}
.tus:active {
	box-shadow: 1px 1px silver;
	padding: 0;
}