/*=========================================================
 MK AKADEMİ V2
=========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root{

--red:#d91f26;
--dark:#111827;
--gray:#6b7280;
--light:#f8fafc;
--white:#ffffff;

--shadow:0 15px 40px rgba(0,0,0,.08);
--shadow2:0 25px 60px rgba(0,0,0,.15);

--radius:22px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#f7f8fc;
color:#1f2937;
overflow-x:hidden;

}

img{

display:block;
max-width:100%;

}

a{

text-decoration:none;
transition:.35s;

}

ul{

list-style:none;

}

.container{

width:100%;
max-width:1280px;
margin:auto;
padding:0 25px;

}

section{

padding:70px 0;

}

/*==============================
TOPBAR
==============================*/

.topbar{

height:38px;
background:#111827;
color:#fff;

}

.topbar-content{

height:38px;

display:flex;

justify-content:space-between;

align-items:center;

font-size:14px;

}

/*==============================
NAVBAR
==============================*/

.navbar{

position:sticky;

top:0;

left:0;

width:100%;

height:68px;

background:#ffffffee;

backdrop-filter:blur(15px);

z-index:999;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.nav-container{

height:68px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

height:52px;

}

.menu{

display:flex;

gap:26px;

align-items:center;

}

.menu a{

font-size:15px;

font-weight:600;

color:#111827;

position:relative;

}

.menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--red);

transition:.35s;

}

.menu a:hover::after{

width:100%;

}

.menu a:hover{

color:var(--red);

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:13px 28px;

background:var(--red);

color:#fff;

border-radius:12px;

font-weight:700;

box-shadow:var(--shadow);

}

.btn:hover{

transform:translateY(-3px);

background:#b5161d;

}
/*=========================================================
 HERO
=========================================================*/

.hero{

position:relative;

height:620px;

overflow:hidden;

display:flex;

align-items:center;

}

.hero>img{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

}

.overlay{

position:absolute;

inset:0;

background:linear-gradient(to right,
rgba(0,0,0,.78),
rgba(0,0,0,.58),
rgba(0,0,0,.28));

}

.hero-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

}

.hero-badge{

display:inline-block;

padding:10px 18px;

background:rgba(255,255,255,.14);

backdrop-filter:blur(8px);

border:1px solid rgba(255,255,255,.25);

border-radius:40px;

color:#fff;

font-size:14px;

font-weight:700;

letter-spacing:1px;

margin-bottom:28px;

}

.hero-left h1{

font-size:64px;

line-height:1.08;

font-weight:900;

color:#fff;

margin-bottom:24px;

}

.hero-left p{

font-size:18px;

line-height:1.9;

color:#e5e7eb;

max-width:620px;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn-white{

display:inline-flex;

align-items:center;

justify-content:center;

padding:13px 28px;

border-radius:12px;

background:#fff;

color:#111827;

font-weight:700;

box-shadow:var(--shadow);

}

.btn-white:hover{

transform:translateY(-3px);

background:#f3f4f6;

}

/*==============================
 HERO CARD
==============================*/

.hero-card{

background:#fff;

border-radius:24px;

padding:35px;

box-shadow:var(--shadow2);

}

.hero-card-top{

display:flex;

align-items:center;

gap:18px;

margin-bottom:25px;

}

.hero-icon{

width:72px;

height:72px;

border-radius:50%;

background:var(--red);

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#fff;

}

.hero-card h3{

font-size:24px;

font-weight:800;

color:#111827;

margin-bottom:6px;

}

.hero-card p{

color:#6b7280;

}

.hero-card hr{

border:none;

height:1px;

background:#e5e7eb;

margin:28px 0;

}

.hero-info{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

text-align:center;

margin-bottom:30px;

}

.hero-info h2{

font-size:38px;

color:var(--red);

font-weight:900;

margin-bottom:8px;

}

.hero-info span{

font-size:14px;

color:#6b7280;

line-height:1.5;

display:block;

}

.hero-full-btn{

width:100%;

}
/*=========================================================
 TITLES
=========================================================*/

.subtitle{

display:inline-block;

font-size:15px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:var(--red);

margin-bottom:12px;

}

.title{

font-size:46px;

font-weight:900;

line-height:1.2;

color:#111827;

margin-bottom:18px;

}

.text{

font-size:17px;

line-height:1.9;

color:#6b7280;

max-width:760px;

}

/*=========================================================
 STATS
=========================================================*/

.stats{

margin-top:-80px;

position:relative;

z-index:20;

}

.grid4{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

}

.stat-card{

background:#fff;

padding:38px 25px;

border-radius:22px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.stat-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow2);

}

.stat-icon{

font-size:48px;

margin-bottom:16px;

}

.stat-number{

font-size:42px;

font-weight:900;

color:var(--red);

margin-bottom:8px;

}

.stat-title{

font-size:16px;

font-weight:600;

color:#374151;

}

/*=========================================================
 GRID
=========================================================*/

.grid2{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

}

.grid3{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

/*=========================================================
 PROGRAMLAR
=========================================================*/

.programs{

background:#ffffff;

}

.program-card{

background:#fff;

border-radius:24px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.program-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow2);

}

.program-card img{

width:100%;

height:240px;

object-fit:cover;

}

.program-content{

padding:30px;

}

.program-content h3{

font-size:28px;

font-weight:800;

margin-bottom:16px;

color:#111827;

}

.program-content p{

font-size:16px;

line-height:1.9;

color:#6b7280;

margin-bottom:26px;

}

.program-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 24px;

background:var(--red);

color:#fff;

border-radius:10px;

font-weight:700;

transition:.35s;

}

.program-btn:hover{

background:#111827;

}
/*=========================================================
 NEDEN MK AKADEMİ
=========================================================*/

.features{

background:#f8fafc;

}

.feature-card{

background:#fff;

padding:40px 32px;

border-radius:24px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow2);

}

.feature-icon{

width:90px;

height:90px;

margin:0 auto 24px;

border-radius:50%;

background:#fdecec;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

}

.feature-card h3{

font-size:26px;

font-weight:800;

margin-bottom:16px;

color:#111827;

}

.feature-card p{

font-size:16px;

line-height:1.9;

color:#6b7280;

}

/*=========================================================
 VIDEO
=========================================================*/

.video-section{

background:#111827;

color:#fff;

}

.video-section .subtitle{

color:#f87171;

}

.video-section .title{

color:#fff;

}

.video-section .text{

color:#d1d5db;

max-width:100%;

}

.video-box{

width:100%;

max-width:760px;

margin:auto;

overflow:hidden;

border-radius:24px;

box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.video-box video{

display:block;

width:100%;

height:auto;

aspect-ratio:16/9;

object-fit:cover;

border-radius:24px;

}

/*=========================================================
 ABOUT CONTENT
=========================================================*/

.about-content{

display:flex;

flex-direction:column;

justify-content:center;

}

.about-content h2{

font-size:42px;

font-weight:900;

color:#fff;

margin-bottom:22px;

}

.about-content p{

font-size:17px;

line-height:2;

color:#d1d5db;

margin-bottom:22px;

}
/*=========================================================
 GALERİ
=========================================================*/

.gallery{

background:#ffffff;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:24px;

}

.gallery-grid img{

width:100%;

height:240px;

object-fit:cover;

border-radius:20px;

cursor:pointer;

transition:.35s;

box-shadow:var(--shadow);

}

.gallery-grid img:hover{

transform:scale(1.05);

box-shadow:var(--shadow2);

}

/*=========================================================
 BROŞÜRLER
=========================================================*/

.brochures{

background:#f8fafc;

}

.brochure-card{

background:#fff;

border-radius:24px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.brochure-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow2);

}

.brochure-card img{

width:100%;

height:420px;

object-fit:cover;

}

.brochure-card h3{

padding:22px;

font-size:24px;

font-weight:800;

text-align:center;

color:#111827;

}

/*=========================================================
 TESTIMONIALS
=========================================================*/

.testimonials{

background:#ffffff;

}

.card{

background:#fff;

border-radius:24px;

padding:35px;

box-shadow:var(--shadow);

transition:.35s;

height:100%;

}

.card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow2);

}

.card h3{

font-size:24px;

font-weight:800;

margin:15px 0;

color:#111827;

}

.card p{

font-size:16px;

line-height:1.9;

color:#6b7280;

}
/*=========================================================
 CONTACT
=========================================================*/

.contact{

background:#f8fafc;

}

.form{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:22px;

margin-top:40px;

}

.form input,
.form select,
.form textarea{

width:100%;

padding:18px 20px;

border:1px solid #d1d5db;

border-radius:14px;

font-size:16px;

font-family:'Poppins',sans-serif;

outline:none;

transition:.35s;

background:#fff;

}

.form input:focus,
.form select:focus,
.form textarea:focus{

border-color:var(--red);

box-shadow:0 0 0 4px rgba(217,31,38,.12);

}

.form textarea{

grid-column:1/3;

height:180px;

resize:none;

}

.form button{

grid-column:1/3;

border:none;

cursor:pointer;

}

/*=========================================================
 MAP
=========================================================*/

.map-section{

background:#ffffff;

}

.map-wrapper{

display:grid;

grid-template-columns:420px 1fr;

gap:45px;

align-items:center;

}

.contact-info{

display:flex;

flex-direction:column;

gap:22px;

}

.contact-item{

display:flex;

gap:18px;

align-items:flex-start;

}

.contact-icon{

width:62px;

height:62px;

border-radius:50%;

background:var(--red);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:24px;

flex-shrink:0;

}

.contact-item h4{

font-size:22px;

font-weight:800;

margin-bottom:6px;

color:#111827;

}

.contact-item p{

font-size:16px;

line-height:1.8;

color:#6b7280;

}

.map-wrapper iframe{

width:100%;

height:480px;

border:none;

border-radius:24px;

box-shadow:var(--shadow2);

}
/*=========================================================
 FOOTER
=========================================================*/

.footer{

background:#111827;

color:#ffffff;

padding:80px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:45px;

}

.footer-logo{

height:70px;

margin-bottom:22px;

}

.footer h3{

font-size:24px;

font-weight:800;

margin-bottom:20px;

}

.footer p,
.footer li,
.footer a{

color:#d1d5db;

font-size:15px;

line-height:2;

}

.footer a:hover{

color:#ffffff;

}

.footer-bottom{

margin-top:50px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.10);

display:flex;

justify-content:space-between;

align-items:center;

font-size:14px;

color:#9ca3af;

}

/*=========================================================
 FLOATING BUTTONS
=========================================================*/

.floating-buttons{

position:fixed;

right:24px;

bottom:24px;

display:flex;

flex-direction:column;

gap:14px;

z-index:9999;

}

.float-call,
.float-whatsapp{

width:62px;

height:62px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:26px;

box-shadow:var(--shadow2);

transition:.35s;

}

.float-call{

background:#2563eb;

}

.float-whatsapp{

background:#25D366;

}

.float-call:hover,
.float-whatsapp:hover{

transform:translateY(-6px) scale(1.08);

}

/*=========================================================
 BACK TO TOP
=========================================================*/

.back-to-top{

position:fixed;

left:24px;

bottom:24px;

width:56px;

height:56px;

border-radius:50%;

background:var(--red);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:22px;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9999;

}

.back-to-top.show{

opacity:1;

visibility:visible;

}
/*=========================================================
 ANIMATIONS
=========================================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

.fade-left{

opacity:0;

transform:translateX(-50px);

transition:all .8s ease;

}

.fade-left.show{

opacity:1;

transform:translateX(0);

}

.fade-right{

opacity:0;

transform:translateX(50px);

transition:all .8s ease;

}

.fade-right.show{

opacity:1;

transform:translateX(0);

}

.zoom{

overflow:hidden;

}

.zoom img{

transition:transform .5s ease;

}

.zoom:hover img{

transform:scale(1.08);

}

/*=========================================================
 HOVER EFFECTS
=========================================================*/

.shadow-hover{

transition:.35s;

}

.shadow-hover:hover{

transform:translateY(-8px);

box-shadow:var(--shadow2);

}

.scale-hover{

transition:.35s;

}

.scale-hover:hover{

transform:scale(1.03);

}

.rotate-hover{

transition:.35s;

}

.rotate-hover:hover{

transform:rotate(-2deg);

}

/*=========================================================
 UTILITIES
=========================================================*/

.text-center{

text-align:center;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

.py-1{padding:10px 0;}
.py-2{padding:20px 0;}
.py-3{padding:30px 0;}
.py-4{padding:40px 0;}
.py-5{padding:50px 0;}
/*=========================================================
 SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#eef2f7;

}

::-webkit-scrollbar-thumb{

background:var(--red);

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:#b5161d;

}

/*=========================================================
 TEXT SELECTION
=========================================================*/

::selection{

background:var(--red);

color:#ffffff;

}

/*=========================================================
 SMALL MOBILE
=========================================================*/

@media (max-width:480px){

.container{

padding:0 18px;

}

.hero{

padding:90px 0 55px;

}

.hero-left h1{

font-size:31px;

line-height:1.18;

}

.hero-left p{

font-size:15px;

}

.hero-badge{

font-size:12px;

padding:8px 14px;

}

.hero-buttons{

flex-direction:column;

}

.btn,
.btn-white{

width:100%;

}

.hero-card{

padding:22px;

}

.hero-card h3{

font-size:20px;

}

.hero-info h2{

font-size:30px;

}

.program-card img{

height:200px;

}

.gallery-grid img{

height:190px;

}

.brochure-card img{

height:280px;

}

.map-wrapper iframe{

height:300px;

}

.footer{

text-align:center;

}

.footer-logo{

margin:0 auto 20px;

}

}

/*=========================================================
 END
=========================================================*/
/*=========================================================
 FINAL TOUCHES
=========================================================*/

html{
    scroll-padding-top:90px;
}

body.loaded #loader{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.mobile-menu.active{
    display:flex;
}

.navbar.scrolled{
    background:rgba(255,255,255,.98);
    box-shadow:0 12px 30px rgba(0,0,0,.10);
}

.program-card,
.feature-card,
.card,
.stat-card,
.brochure-card{
    will-change:transform;
}

.hero img,
.program-card img,
.gallery-grid img,
.brochure-card img{
    user-select:none;
    -webkit-user-drag:none;
}

iframe{
    display:block;
}

video{
    display:block;
}

button{
    font-family:'Poppins',sans-serif;
}

input,
select,
textarea,
button{
    font-family:'Poppins',sans-serif;
}

*:focus{
    outline:none;
}

.btn,
.btn-white,
.program-btn{
    cursor:pointer;
}

@media (hover:hover){

.program-card:hover img{
    transform:scale(1.06);
    transition:.45s;
}

.gallery-grid img{
    transition:.40s;
}

}

@media (max-width:768px){

.hero-buttons{
    gap:12px;
}

.contact-item{
    align-items:center;
}

.contact-icon{
    width:55px;
    height:55px;
    font-size:22px;
}

}

/*=========================================================
 MK AKADEMİ V2
 STYLE.CSS
 VERSION 2.0
=========================================================*/