@import url('fontawesome-all.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*.roboto-condensed-<uniquifier> {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}*/

:root {
    --body: 'Roboto', Helvetica, Arial, sans-serif;
    --avant: 'Poppins', Helvetica, Arial, sans-serif;
    --cond: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    --beyaz: #FFF;
    --siyah: #000;
    --yesil: #068c96;
    --laci: #0071bc;
}

html, body {
	height: 100% !important;
	width: 100% !important;
}
body {
    font-family: var(--body);
    font-size: 16px;
    color: var(--siyah);
    line-height: 1.2;
}
* {
	outline: none;
	font-variant-ligatures: none;
}
a, a:visited, a:link {
	color: var(--siyah);
	text-decoration: none;
}
a:hover, a:focus {
	color: var(--siyah);
	text-decoration: underline;
}
a.kapsa {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
}
p {
	margin-bottom: 16px;
}
strong {
    font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	position: relative;
	z-index: 1;
	margin-bottom: 16px;
	font-weight: 640;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-weight: 400 !important;
}
h1 {
	font-size: 64px;
}
h2 {
	font-size: 48px;
}
h3 {
    font-size: 40px;
}
h4 {
    font-size: 32px;
}
h5 {
    font-size: 24px;
}
h6 {
	font-size: 16px;
}

small {
	font-size: 12px;
	line-height: 1;
}

::placeholder {
	font-size: 16px;
	font-weight: 400;
	opacity: .24;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

.container {
	position: relative;
	padding: 0 16px;
	width: 96%;
    max-width: 1344px;
}
.row {
	margin-right: -16px;
	margin-left: -16px;
}
[class*='col-'] {
	padding-right: 16px;
	padding-left: 16px;
}

.gorsel,
.video {
    position: relative;
}
.gorsel::after,
.video::after {
    display: block;
    content: "";
}
.gorsel.yarim-gorsel::after {
    padding-top: 50%;
}
.gorsel.hd-gorsel::after {
    padding-top: 56.25%;
}
.gorsel.yatay-gorsel::after {
    padding-top: 66.6667%;
}
.gorsel.kare-gorsel::after {
    padding-top: 100%;
}
.gorsel.dik-gorsel::after {
    padding-top: calc(200% + 24px);
}
.gorsel img,
.video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1.00%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

header {
    position: relative;
    padding-top: 30px;
    background-image: url(../gorseller/tepe-zemin.jpg);
}
.ust-logo img {
    width: 100%;
    max-width: 360px;
}
.tepe-metin {
    font-family: var(--cond);
    font-size: 40px;
    color: var(--beyaz);
}
.navbar,
.navbar-collapse {
    justify-content: flex-end;
    padding-bottom: 0;
}
.navbar-nav {
    padding: 12px 8px 0 8px;
    background-color: var(--beyaz);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.navbar-toggler {
    border: none !important;
}
.navbar-toggler:focus {
    box-shadow: none !important;
}
.nav-link {
    margin: 0 4px;
    font-size: 20px;
}
.nav-link.menu {
    background: linear-gradient(0deg, rgba(38,109,153,1) 0%, rgba(147,215,249,1) 100%);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: var(--beyaz);
}
.nav-link.menu:hover {
    background: linear-gradient(0deg, rgba(38,109,153,1) 100%, rgba(147,215,249,1) 0%);
    text-decoration: none;
}
.nav-link.sm {
    line-height: 0;
    color: var(--laci);
}

.tepe-gorsel {
    margin: 24px auto;
}
.tepe-gorsel img {
    width: 100%;
}

.ders-kadro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.ders-kadro img {
    width: 100%;
    max-width: 200px;
    -webkit-filter: drop-shadow(8px 8px 8px #d6d6d6);
    filter: drop-shadow(8px 8px 8px #d6d6d6);
}
.ders-kadro a:last-of-type img {
    position: relative;
    top: -12px;
    left: 12px;
}

.on-kayit {
    position: relative;
    z-index: -2;
    padding: 40px 0;
    background-image: url(../gorseller/ayricalik-arka.png);
    background-repeat: no-repeat;
    background-position: 40px bottom;
    background-color: var(--laci);
}
.on-kayit-ayricalik {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    text-align: center;
    color: var(--beyaz);
    font-size: 40px;
}
.on-kayit-ayricalik h3 {
    width: 60%;
    text-align: center;
    color: var(--beyaz);
}
.on-kayit-ayricalik p {
    width: 60%;
}
.on-kayit-formu {
    position: relative;
    padding: 24px;
    background-color: #f7f7f7;
}
.on-kayit-formu:before, .on-kayit-formu:after {
    content: "";
    position: absolute;
    bottom: 13px;
    left: 3px;
    z-index: -1;
    height: 50px;
    max-width: 50%;
    width: 50%;
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg); /* Safari and Chrome */
    -o-transform: rotate(-5deg); /* Opera */
    -moz-transform: rotate(-5deg); /* Firefox */
    transform: rotate(-5deg);
    box-shadow: 0 24px 16px rgba(0, 0, 0, 0.4);
}
.on-kayit-formu:after {
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Safari and Chrome */
    -o-transform: rotate(5deg); /* Opera */
    -moz-transform: rotate(5deg); /* Firefox */
    transform: rotate(5deg);
    right: 2px;
    left: auto;
}
.on-kayit-formu h4,
.on-kayit-formu p {
    text-align: center;
}
.on-kayit-formu p {
    font-weight: 300;
    font-style: italic;
}
.on-kayit-formu .row {
	margin-right: -8px;
	margin-left: -8px;
}
.on-kayit-formu [class*='col-'] {
	padding-right: 8px;
	padding-left: 8px;
}
.kayit-bilgi {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 16px;
    background-color: #e8e8e8;
    border-radius: 9999px;
}
.kayit-bilgi label {
    flex: 0 0 auto;
    margin-right: 8px;
    font-weight: bold;
    color: #999;
    font-size: 14px;
    line-height: 1;
}
.kayit-bilgi input[type="text"],
.kayit-bilgi input[type="email"],
.kayit-bilgi input[type="tel"],
.kayit-bilgi textarea {
    flex: 1;
    padding: 0;
    width: 100%;
    border: none;
    background: transparent;
}
.kayit-bilgi select {
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: #999;
}
.kayit-bilgi.aciklama {
    align-items: flex-start;
    border-radius: 24px;
}
.kayit-bilgi.aciklama textarea {
    height: 120px;
    resize: none;
}
.kayit-bilgi.gonder {
    padding: 0;
    background-color: #3aa2ef;
    color: var(--siyah);
    text-align: center;
}
.kayit-bilgi input[type="submit"] {
    display: block;
    padding: 8px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    color: var(--siyah);
    font-weight: bold;
    font-size: 18px;
}
.kayit-bilgi.gonder:hover {
    background-color: var(--laci);
}
.kayit-bilgi:hover input[type="submit"] {
    color: var(--beyaz);
}

.sagli-sollu {
    margin: 48px auto;
}
.sagli-sollu .row {
	margin-right: -0px;
	margin-left: -0px;
}
.sagli-sollu [class*='col-'] {
	padding-right: 0px;
	padding-left: 0px;
}
.sagli-sollu-baslik {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--cond);
    text-align: center;
    color: var(--yesil);
}
.sagli-sollu-baslik h1 {
    text-align: center;
    color: var(--yesil);
    font-weight: 400;
}
.sagli-sollu-baslik h1 span {
    display: inline-block;
    width: 100%;
    font-family: var(--cond);
    font-size: 120px;
    font-weight: 900;
}
.sagli-sollu-aciklama {
    margin: 32px auto 72px;
    font-size: 24px;
    font-weight: 300;
    color: var(--yesil);
}

.icerik {
    margin: 48px auto;
}
.icerik-sol-gorsel {
    text-align: center;
}
.icerik-sol-gorsel img {
    max-width: 100%;
}
.icerik-metin {
    padding-left: 48px;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.5;
}
.icerik-metin h3 {
    font-family: var(--avant);
    color: var(--laci);
}

.ogretmen {
    position: relative;
    margin-bottom: 32px;
    min-height: 200px;
    background-image: url(../gorseller/kadro.png);
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}
.ogretmen-adi {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    font-family: var(--avant);
    color: #0FF;
    font-size: 20px;
}
.ogretmen-gorev {
    position: absolute;
    top: 79%;
    left: 0;
    width: 100%;
}
.ogretmen-gorev path {
    fill: transparent;
  }
.ogretmen-gorev text {
    fill: #000;
    font-family: var(--cond);
    font-weight: 500;
    font-size: 11px;
}

footer {
    padding: 72px 0;
    border-top: 1px solid var(--siyah);
}
.alt-adres-logo {
    text-align: center;
    color: var(--laci);
    font-size: 20px;
}
.alt-adres-logo img {
    margin: 0 auto 16px;
    width: 100%;
    max-width: 320px;
}
.alt-tel-email {
    font-weight: 300;
}
.alt-tel-email a {
    color: var(--laci) !important;
}

.order-6 {
    order: 6;
}
.order-7 {
    order: 7;
}
.order-8 {
    order: 8;
}
.order-9 {
    order: 9;
}
.order-10 {
    order: 10;
}
.order-11 {
    order: 11;
}
.order-12 {
    order: 12;
}

/* EKRAN AYARLAMALARI */
/* --------- ÇOK KÜÇÜK EKRANLAR --------- */
@media (max-width: 369px) {
}
@media (max-width: 479px) {
}

/* --------------- col-xs --------------- */
@media (min-width: 370px) and (max-width: 575px) and (orientation: landscape) {
}

@media (max-width: 575px) {
    .ust-logo {
        margin-bottom: 24px;
    }
    .tepe-metin {
        width: 240px;
        font-size: 24px;
    }
    .ders-kadro {
        margin: 24px auto;
    }
}
@media (max-width: 575px) and (orientation: portrait) {
}

/* --------------- col-sm --------------- */
@media (min-width: 576px) {

}
@media (min-width: 576px) and (max-width: 767px) {
    .tepe-metin {
        font-size: 32px;
    }
}
@media (min-width: 576px) and (max-width: 767px) and (orientation: landscape) {
}
@media (max-width: 767px) {
    header {
        padding-bottom: 24px;
    }
    .navbar {
        position: absolute;
        top: -20px;
        right: 0;
        width: 100%;
    }
    .navbar-collapse {
        width: 100%;
    }
    .navbar-nav {
        border-radius: 16px;
    }
    .nav-link.menu {
        margin-bottom: 8px;
        padding-left: 8px;
        border-radius: 8px;
    }
    .icerik-metin {
        padding-left: 0;
        font-size: 18px;
    }
    .icerik-metin h3 {
        font-size: 28px;
    }
    footer {
        padding: 32px 0;
    }
    .alt-adres-logo {
        margin: 16px auto;
    }
}
@media (max-width: 767px) and (orientation: landscape) {

}

/* --------------- col-md --------------- */
@media (min-width: 768px) and (max-width: 991px) {

}
@media (max-width: 991px) and (orientation: landscape) {

}

@media (max-width: 991px) {
    .on-kayit {
        background-image: none;
    }
    .on-kayit-ayricalik {
        background-image: url(../gorseller/ayricalik-arka.png);
        background-repeat: no-repeat;
        background-position: 16px bottom;
    }
    .on-kayit-ayricalik h3,
    .on-kayit-ayricalik p {
        width: 100%;
    }
}

/* --------------- col-lg --------------- */
@media (min-width: 992px) {
    .navbar-collapse {
        justify-content: flex-end;
    }
    .sagli-sollu-baslik {
        padding: 0 32px;
    }
    .order-lg-6 {
        order: 6 !important;
    }
    .order-lg-7 {
        order: 7 !important;
    }
    .order-lg-8 {
        order: 8 !important;
    }
    .order-lg-9 {
        order: 9 !important;
    }
    .order-lg-10 {
        order: 10;
    }
    .order-lg-11 {
        order: 11;
    }
    .order-lg-12 {
        order: 12;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {

}
@media (max-width: 1199px) {
}

/* --------------- col-xl --------------- */
@media (min-width: 1200px) and (max-width: 1399px) {
}

/* --------------- col-xxl --------------- */
@media (min-width: 1400px) {
}

@media (max-width: 767px) and (orientation: landscape) {
}
@media (orientation: portrait) {
}
@media (orientation: portrait) and (max-width: 767px){
}
@media (orientation: portrait) and (width: 768px){
}
@media screen and (device-aspect-ratio: 4/3) {
}
.ozcanyazilim {
    font-size: 9px;
    color: #fff !important;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-family: sans-serif;
    font-weight: 100;
    position: fixed;
    bottom: 10px;
    left: -5px;
    background-color: rgba(2, 48, 105, 0.5);
    padding: 7px 5px;
    letter-spacing: .5px;
    border-radius: 0;
    z-index: 9999;
}