/* ==========================================================================
3. HERO BANNER (Üst Bölüm)
========================================================================== */
.hero-banner-one {
margin-top: 100px;
height: 820px;
position: relative;
overflow: hidden;
z-index: 1;
display: block;
width: 100%;
background-size: 100%;
background-position: center top;
background-repeat: no-repeat;
}
.hero-banner-one > *, .hero-banner-one > * > * {
height: 100%;
}
.hero-banner-one .title {
font-size: 82px;
line-height: 1.05;
font-weight: 500;
letter-spacing: -4px;
font-family: "Instrument Serif";
margin-bottom: 15px;
}
.hero-banner-one p {
color: var(--bs-dark-500);
font-size: 20px;
font-weight: 500;
line-height: 1.5;
margin-bottom: 40px;
max-width: 550px;
}
.hero-banner-one .hero-content {
margin-bottom: 100px;
}
.hero-banner-one .hero-thumbnail {
width: 920px;
height: 775px;
position: relative;
margin-left: -150px;
}
.hero-banner-one .hero-thumbnail img {
width: 100%;
height: 100%;
object-fit: contain;
}@media (max-width: 1680px) {
.hero-banner-one { height: 720px; }
.hero-banner-one .hero-thumbnail { width: 800px; height: 700px; }
.hero-banner-one .title { font-size: 92px; }
.hero-banner-one .hero-content { margin-bottom: 50px; }
}
@media (max-width: 1479.98px) {
.hero-banner-one { height: 680px; }
.hero-banner-one .hero-thumbnail { width: 700px; height: 600px; }
}
@media (max-width: 1199.98px) {
.hero-banner-one { height: 500px; }
.hero-banner-one .hero-content { margin-bottom: 0; }
.hero-banner-one .title { font-size: 72px; }
.hero-banner-one p { font-size: 16px; margin-bottom: 25px; }
.hero-banner-one .hero-thumbnail { width: 550px; height: 450px; margin-left: -50px; }
}
@media (max-width: 991.98px) {
.hero-banner-one { height: auto; background-position: center bottom; }
.hero-banner-one .hero-content { margin-top: 50px; margin-bottom: 30px; }
.hero-banner-one .hero-thumbnail { margin-left: auto; margin-right: auto; }
}
@media (max-width: 575.98px) {
.hero-banner-one .hero-content { margin-top: 50px; margin-bottom: 30px; }
.hero-banner-one .title { font-size: 52px; }
.hero-banner-one .hero-thumbnail { width: 320px; height: 250px; }
}/* Yıldız Animasyonları */
.animted-star {
position: absolute;
transition: opacity 1s ease-in-out;
}
.animted-star.star1 {
opacity: 1;
animation: fadeStar1 1.5s infinite alternate;
margin-left: -65px;
margin-top: -25px;
}
.animted-star.star2 {
opacity: 0;
animation: fadeStar2 2s infinite alternate;
margin-left: -115px;
margin-top: 20px;
}
@media (max-width: 1199.98px) { .animted-star { display: none; } }
@keyframes fadeStar1 { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeStar2 { 0% { opacity: 0; } 100% { opacity: 1; } }/* ==========================================================================
4. BAŞLIKLAR (Heading Box)
========================================================================== */
.heading-bx { margin-bottom: 40px; }
.heading-bx h1, .heading-bx h2, .heading-bx h3 { margin-bottom: 0; }
.heading-bx.style1 { margin-bottom: 35px; }
.heading-bx.style1 .title-head-sm {
font-size: 70px;
line-height: 1.1;
font-weight: 400;
letter-spacing: -3px;
font-family: "Instrument Serif";
}@media (max-width: 1479.98px) { .heading-bx.style1 .title-head-sm { font-size: 60px; } }
@media (max-width: 1199.98px) { .heading-bx.style1 .title-head-sm { font-size: 52px; } }
@media (max-width: 767.98px) { .heading-bx.style1 .title-head-sm { font-size: 45px; } }
@media (max-width: 575.98px) {
.heading-bx.style1 { margin-bottom: 30px; }
.heading-bx.style1 .title-head-sm { font-size: 42px; letter-spacing: -1px; }
}/* ==========================================================================
5. KARTLAR (Course Card)
========================================================================== */
.course-card {
background: #FFFFFF;
border-radius: 20px;
overflow: hidden;
box-shadow: 0px 2px 1px rgba(41, 17, 0, 0.05), 0px 10px 20px rgba(41, 17, 0, 0.04);
position: relative;
z-index: 1;
transition: all 0.5s;
}
.course-card .course-title {
font-size: 18px;
line-height: 1.4;
margin-bottom: 10px;
min-height: 90px;
display: flex;
align-items: center;
}
.course-card .course-title a { color: inherit; }
.course-card .course-media {
height: 190px;
position: relative;
z-index: 1;
}
.course-card .course-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.course-card .course-content {
padding: 20px 25px;
}
.course-card .course-hover {
position: absolute;
bottom: -200px;
left: 0;
width: 100%;
height: 100%;
background: conic-gradient(from 146.11deg at 75.87% 84.93%, var(--bs-primary-900) 0deg, #3f78c3 209.02deg, var(--bs-primary-700) 360deg);
transition: all 0.25s;
display: flex;
flex-direction: column;
justify-content: space-between;
opacity: 0;
z-index: 1;
}
.course-card .course-hover .course-title a { color: #fff; }
.course-card .course-hover p {
color: #fff;
opacity: 0.7;
font-size: 16px;
}
.course-card:hover .course-hover {
bottom: 0;
opacity: 1;
}/* ==========================================================================
7. ALT AYIRICI (Bottom Divider)
========================================================================== */
.bottom-divider {
position: relative;
z-index: 1;
text-align: center;
margin-top: 10px;
}
.bottom-divider .text {
background-color: #fff;
box-shadow: 0px 10px 20px 0 rgba(0, 0, 0, 0.04);
padding: 12px 40px;
font-size: 16px;
color: var(--bs-dark-700);
border-radius: 30px;
max-width: 503px;
margin-left: auto;
margin-right: auto;
font-weight: 400;
}
.bottom-divider::after {
content: "";
width: 100%;
height: 1px;
background: #000;
opacity: 0.1;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: -1;
}/* ==========================================================================
8. YARDIMCI SINIFLAR (Utilities & Spacing)
========================================================================== */
.section-area { position: relative; }
.section-sp2 { padding-top: 100px; padding-bottom: 100px; }
.bg-light { background-color: #FFF6F0 !important; }
.text-primary { color: var(--bs-primary) !important; }
.bg-secondary-500 { background-color: var(--bs-secondary-500) !important; }.m-b0 { margin-bottom: 0 !important; }
.m-b20 { margin-bottom: 20px !important; }
.m-b30 { margin-bottom: 30px !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.text-center { text-align: center !important; }@media (min-width: 576px) { .text-sm-end { text-align: right !important; } }
@media only screen and (max-width: 1280px) { .section-sp2 { padding-top: 70px; padding-bottom: 70px; } }
@media only screen and (max-width: 767px) { .section-sp2 { padding-top: 50px; padding-bottom: 50px; } }@media(max-width:1024px){
.hero-banner-one-wrapper .btn-standard.btn-lg .btn-icon{
display: none;
}
.hero-banner-one-wrapper .btn-standard,
.hero-banner-one-wrapper .ikiiii{
margin:0 0 10px 0 !important;
width: 100%;
}
}