body {
  font-family: Verdana, Geneva, sans-serif;
  line-height: 1.6;
  font-size: 16px;
  background: snow;}
*, *:before, *:after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 margin: 0;
 padding: 0;}

.rrow {
    display: flex;
    flex-wrap: wrap;
}
.rsa {
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 16px;
  padding-left: 16px;
  padding-right: 16px;}
.rsa:after, .rsa:before {content: " ";display: table;}
.rsa:after {clear: both;}
.rsu {position: relative;float: left;}
@media (max-width:599px) {.rsu {width: 50%}}
@media (min-width:600px) and (max-width:899px) {.rsu {width: 33.33%}}
@media (min-width:900px) and (max-width:1199px) {.rsu {width: 25%}}
@media (min-width:1200px) {.rsu {width: 20%}}
.rsuab {position: relative;float: left;width: 100%}
@media (min-width:900px) {.rsuab {width: 50%}}

.kenar {
    box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.4);
    margin: 16px;
    min-height: 1px;
    background-color: white;
}
.resp {width: 100%;height: auto;}
@keyframes kftel {0% {font-weight: normal;}100% {font-weight: bold;}}
@keyframes kfad {from {padding-left:0;} to {padding-left:16px;}}

.ustad {
    text-align: left;
    top: 32px;
    font-size: 20px;
    color: navy;
    text-shadow: 2px 2px silver;
    animation-name: kfad;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.ust1 {
    text-align: left;
    top: 80px;
    font-size: 16px;
    color: black;
}

.ust2 {
    text-align: left;
    top: 120px;
    font-size: 16px;
    color: black;
}
.alt {
  text-align: center;
  width: 80%;
  left: 10%;
  bottom: 32px;
  font-size: 16px;
  color: navy;
  background-color: rgba(255, 255, 255, 0.8);
  animation-name: kftel;
  animation-duration: 3s;
  animation-iteration-count: infinite;}
.ustad, .ust1, .ust2 {left: 24px;}
.ustad, .ust1, .ust2, .alt {position: absolute;z-index: 1;}
.saydam {background-color: rgba(255, 255, 255, 0.7);}

:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
  color: navy;
  text-align: center;
  text-shadow: 2px 2px silver;}

p {text-indent: 32px;}
.canvasdiv {width:302px; height:26px; margin:auto;}

.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);
}
.srsm {
    float: left;
    width: 100%;
    max-width: 160px;
    height: auto;
    margin-top: 16px;
    border: 1px solid skyblue;
    box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.2);
}
.anaustb {
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: 2px 2px silver;background-color: white;}

video {
    width: 96%;
    max-width: 480px;
    height: auto;
    display: block;
    padding-bottom: 16px;
    margin: auto;
}

.salist {list-style-type: none;margin: 0;}
.salist > li {display: block;padding: 8px;}
.sulist {list-style-type: none;margin: 0;}
.sulist > li {display: inline;margin: 16px;line-height: 3;}

.etk {margin: 8px;}
.gizle {display:none;}

.tablediv {overflow-x: auto;}
table {border-collapse: collapse;border-spacing: 0;width: 100%;}
th, td {text-align: left;padding: 8px;}
tr:nth-child(even) {background-color: #f2f2f2;}


#email {
    width: 100%;
    padding: 4px;
    border: 1px solid silver;
    margin-bottom: 16px;
}
#yorum {
    height: 60px;
    width: 100%;
    padding: 4px;
    border: 1px solid silver;
    margin-bottom: 16px;
}
.ibutton {font-size: 16px;padding:4px; margin-left: 64px;}

.kart {
    color: black;
    background-color: white;
    margin: 16px 16px 32px 16px;
    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;
}
.kartici {padding: 16px 0 16px 8px;}
.kartici > p {padding: 8px;}
.icbaslik {padding: 16px 0px 0px 8px;color:navy;}
.kartalt {
    background-color: #fcfcfc;
    border-top: 1px solid skyblue;
    border-radius: 0px 0px 10px 10px;
    padding: 8px;
}
.reflerdiv {
    height: 816px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #e1e1ff #fcfcff;
}
.refdiv {
    height: 128px;
    padding-left: 16px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #e1e1ff #fcfcff;
}
.refdiv > p {text-indent: 0;}

.makalediv {
    height: 1000px;
    margin-bottom: 16px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #e1e1ff #fcfcff;
}
.makalekdiv {
    height: 400px;
    margin-bottom: 16px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #e1e1ff #fcfcff;
}

.p8 {padding: 8px;}
.pt8 {padding-top: 8px;}
.p16 {padding: 16px;}
.pt16 {padding-top: 16px;}
.pl16 {padding-left: 16px;}
.smbdiv {text-align: center;padding-top: 8px;}
.smb {margin: 12px; box-shadow: 2px 2px silver;}
.smb:hover {opacity: 0.7;}