*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f4f4f9;
    overflow-x:hidden;
    color:#222;
}

::-webkit-scrollbar{
    width:10px;
}
/* MOBILE MENU */

.menu-toggle{
display:none;
}

@media(max-width:768px){

.menu-toggle{

display:flex;

flex-direction:column;

justify-content:center;
align-items:center;

gap:5px;

cursor:pointer;

}

.menu-toggle span{

width:25px;
height:3px;

background:white;

border-radius:20px;

}

nav ul{

display:none;

position:absolute;

top:100%;
left:0;

width:100%;

background:
linear-gradient(
180deg,
#6c5ce7,
#9b7fd1
);

padding:25px;

flex-direction:column;

align-items:center;

gap:20px;

z-index:999;

border-radius:0 0 20px 20px;

}

nav ul.active{
display:flex;
}

}
::-webkit-scrollbar-thumb{
    background:linear-gradient(#ff4fa3,#8e44ad);
    border-radius:20px;
}

/* ========================= */
/* HEADER */
/* ========================= */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:18px 70px;

    background:
    linear-gradient(
    90deg,
    #6c5ce7 0%,
    #9b7fd1 35%,
    #c89ac7 70%,
    #e7b6c9 100%
    );

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    z-index:999;

    box-shadow:
    0 4px 20px rgba(108,92,231,0.25);
}

nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
}

.logo{
    color:white;
    font-size:32px;
    font-weight:700;
    white-space:nowrap;
}

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

nav ul{
    display:flex;
    list-style:none;
    gap:28px;
    align-items:center;
    flex-wrap:wrap;
}

nav ul li a{
    text-decoration:none;
    color:white;
    font-size:17px;
    transition:0.4s;
    font-weight:500;
    position:relative;
}

nav ul li a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0%;
    height:2px;
    background:#ff4fa3;
    transition:0.4s;
}

nav ul li a:hover::after{
    width:100%;
}

nav ul li a:hover{
    color:#ff4fa3;
}

/* ========================= */
/* LANGUAGE SWITCH */
/* ========================= */

/* ========================= */
/* LANGUAGE SWITCH */
/* ========================= */

.language-switch{
    display:flex;
    align-items:center;
    gap:12px;

    padding:6px;

    background:
    rgba(255,255,255,0.12);

    border:
    1px solid rgba(255,255,255,0.18);

    border-radius:50px;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:
    0 4px 20px rgba(0,0,0,0.15);
}

.language-switch button{

    width:48px;
    height:48px;

    border:none;
    border-radius:50%;

    cursor:pointer;

    font-size:15px;
    font-weight:700;
    letter-spacing:1px;

    color:white;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.08)
    );

    transition:0.35s ease;

    position:relative;

    overflow:hidden;

}

.language-switch button::before{

    content:'';

    position:absolute;

    top:-50%;
    left:-50%;

    width:200%;
    height:200%;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.25),
    transparent
    );

    transform:rotate(25deg);

    transition:0.6s;

    opacity:0;

}

.language-switch button:hover::before{

    opacity:1;

    left:100%;

}

.language-switch button:hover{

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

    background:
    linear-gradient(
    135deg,
    #ff4fa3,
    #8e44ad
    );

    box-shadow:
    0 8px 20px rgba(142,68,173,0.4);

}

.language-switch button:active{

    transform:scale(0.96);

}

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

.hero{
    min-height:100vh;

    background:
    linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),
    url(ANASAYAF.jpg);

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;

    padding:140px 8%;
}

.hero-content{
    max-width:950px;
}

.hero h1{
    font-size:80px;
    margin-bottom:25px;
    line-height:1.2;
}

.hero p{
    font-size:24px;
    line-height:1.9;
    margin-bottom:40px;
}

.btn{
    display:inline-block;
    padding:18px 45px;
    background:linear-gradient(45deg,#ff4fa3,#8e44ad);
    color:white;
    text-decoration:none;
    border-radius:50px;
    transition:0.4s;
    position:relative;
    overflow:hidden;
}

.btn:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(0,0,0,0.3);
}

.btn::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.2);
    transition:0.6s;
}

.btn:hover::before{
    left:100%;
}

/* ========================= */
/* SECTION */
/* ========================= */

section{
    padding:120px 8%;
}

.title{
    text-align:center;
    margin-bottom:70px;
}

.title h2{
    font-size:55px;
    color:#8e44ad;
    margin-bottom:15px;
}

.title p{
    font-size:20px;
    color:#666;
}

/* ========================= */
/* INFO */
/* ========================= */

.info-box{
    background:white;
    padding:50px;
    border-radius:30px;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
    line-height:2.1;
    margin-bottom:60px;
}

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

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:35px;
}

.card{
    background:white;
    padding:40px 30px;
    border-radius:25px;
    box-shadow:0 10px 35px rgba(0,0,0,0.08);
    transition:0.4s;
}

.card:hover{
    transform:translateY(-10px);
}

.card h3{
    color:#8e44ad;
    font-size:28px;
    margin-bottom:18px;
}

.card p{
    line-height:2;
}

/* ========================= */
/* COMMENT */
/* ========================= */

.comment-section{
    padding:120px 8%;
    background:
    linear-gradient(rgba(248,240,255,0.94),rgba(255,240,248,0.94)),
    url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?q=80&w=1600&auto=format&fit=crop');

    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

.comment-container{
    max-width:1100px;
    margin:auto;
}

.comment-form{
    background:white;
    padding:45px;
    border-radius:30px;
    box-shadow:0 10px 35px rgba(0,0,0,0.08);
    margin-bottom:50px;
}

.comment-form textarea{
    width:100%;
    min-height:180px;
    border:none;
    outline:none;
    background:#f7f7fb;
    padding:25px;
    border-radius:20px;
    resize:none;
    font-size:17px;
}

.comment-btn{
    margin-top:25px;
    padding:16px 38px;
    border:none;
    border-radius:50px;
    background:linear-gradient(45deg,#ff4fa3,#8e44ad);
    color:white;
    font-size:18px;
    cursor:pointer;
    transition:0.3s;
}

.comment-btn:hover{
    transform:translateY(-3px);
}

.comments-area{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.comment-card{
    background:white;
    padding:35px;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,0.07);
}

.comment-user{
    font-size:22px;
    font-weight:600;
    color:#8e44ad;
    margin-bottom:12px;
}

.comment-text{
    color:#444;
    line-height:2;
    font-size:17px;
}

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

footer{
    background:#111;
    color:white;
    text-align:center;
    padding:35px;
    font-size:17px;
}

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

.stats{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:30px;
    margin-top:50px;
}

.stat-box{
    width:280px;
    background:linear-gradient(135deg,#8e44ad,#ff4fa3);
    color:white;
    padding:45px 25px;
    border-radius:25px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
    position:relative;
    overflow:hidden;
    transition:0.4s;
}

.stat-box:hover{
    transform:translateY(-10px) scale(1.03);
}

.stat-box::before{
    content:'';
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(255,255,255,0.1);
    border-radius:50%;
    top:-60px;
    right:-60px;
}

.stat-box h3{
    font-size:55px;
    margin-bottom:10px;
}

/* ========================= */
/* QUOTE */
/* ========================= */

.quote{
    margin-top:60px;
    background:white;
    border-left:8px solid #ff4fa3;
    padding:40px;
    border-radius:20px;
    font-size:28px;
    line-height:1.8;
    font-style:italic;
    color:#444;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.dark-section{
    background:linear-gradient(135deg,#f8e9ff,#ffeef6);
}

/* ========================= */
/* HELP */
/* ========================= */

.help-btn{
    position:fixed;
    right:25px;
    bottom:25px;
    padding:18px 25px;
    border:none;
    border-radius:50px;
    background:#e63946;
    color:white;
    font-size:17px;
    cursor:pointer;
    z-index:9999;
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.help-box{
    display:none;
    position:fixed;
    right:25px;
    bottom:95px;
    width:320px;
    background:white;
    padding:28px;
    border-radius:25px;
    z-index:9999;
    box-shadow:0 15px 40px rgba(0,0,0,0.25);
}

.help-box h3{
    color:#e63946;
    margin-bottom:15px;
}

.help-box p{
    line-height:1.8;
    color:#444;
}

.help-box.active{
    display:block;
}

/* ========================= */
/* TABLET */
/* ========================= */

@media(max-width:992px){

header{
    padding:18px 30px;
}

nav{
    flex-direction:column;
    gap:20px;
}

nav ul{
    justify-content:center;
    gap:18px;
}

.hero h1{
    font-size:55px;
}

.hero p{
    font-size:20px;
}

.title h2{
    font-size:42px;
}

.cards,
.sources,
.stats{
    grid-template-columns:1fr 1fr;
}

.info-box{
    padding:35px;
}

}

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

@media(max-width:700px){

header{
    padding:15px 20px;
}

nav{
    flex-direction:column;
    gap:20px;
}

nav ul{
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.logo{
    font-size:26px;
}

.hero{
    padding:160px 5%;
}

.hero h1{
    font-size:40px;
}

.hero p{
    font-size:18px;
}

.btn{
    padding:14px 28px;
    font-size:15px;
}

.title h2{
    font-size:34px;
}

.title p{
    font-size:17px;
}

.info-box,
.comment-form,
.comment-card{
    padding:25px;
}

.cards,
.stats{
    grid-template-columns:1fr;
}

.comment-form textarea{
    min-height:140px;
}

.help-btn{
    padding:14px 20px;
    font-size:14px;
}

.help-box{
    width:90%;
    right:5%;
}

footer{
    font-size:15px;
    padding:25px;
}

.language-switch{
    margin-top:10px;
}
/* ======================================== */
/* TABLET RESPONSIVE */
/* ======================================== */

@media(max-width:1100px){

header{
    padding:18px 30px;
}

nav{
    gap:20px;
}

nav ul{
    gap:18px;
    justify-content:center;
    flex-wrap:wrap;
}

nav ul li a{
    font-size:15px;
}

.logo{
    font-size:28px;
}

.hero h1{
    font-size:58px;
}

.hero p{
    font-size:20px;
}

.title h2{
    font-size:42px;
}

.cards{
    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));
}

.stat-box{
    width:240px;
}

}

/* ======================================== */
/* MOBILE RESPONSIVE */
/* ======================================== */

@media(max-width:768px){

html,body{
    overflow-x:hidden;
}

header{
    padding:15px 18px;
}

nav{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
}

.logo{
    font-size:25px;
    text-align:center;
}

nav ul{
    width:100%;

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:14px;
}

nav ul li{
    width:100%;
    text-align:center;
}

nav ul li a{
    display:block;
    width:100%;
    font-size:16px;
    padding:6px 0;
}

.language-switch{
    margin-top:5px;
}

.hero{
    padding:
    210px 25px 120px 25px;

    background-attachment:scroll;
}

.hero-content{
    width:100%;
}

.hero h1{
    font-size:40px;
    line-height:1.3;
}

.hero p{
    font-size:17px;
    line-height:1.9;
}

.btn{
    width:100%;
    max-width:320px;
    text-align:center;
}

.ayet-karti{
    padding:28px 20px;
}

.arapca{
    font-size:28px;
    line-height:1.8;
}

.meal{
    font-size:16px;
}

section{
    padding:90px 20px;
}

.title h2{
    font-size:34px;
}

.title p{
    font-size:17px;
    line-height:1.8;
}

.info-box{
    padding:30px 22px;
    line-height:2;
}

.cards{
    grid-template-columns:1fr;
}

.card{
    padding:28px 22px;
}

.card h3{
    font-size:24px;
}

.card p{
    font-size:15px;
    line-height:1.9;
}

.comment-form{
    padding:25px 20px;
}

.comment-form textarea{
    min-height:130px;
    font-size:15px;
}

.comment-btn{
    width:100%;
}

.comment-card{
    padding:24px 20px;
}

.comment-user{
    font-size:19px;
}

.comment-text{
    font-size:15px;
}

.stats{
    flex-direction:column;
    align-items:center;
}

.stat-box{
    width:100%;
    max-width:340px;
}

.quote{
    font-size:20px;
    padding:30px 22px;
}

.team-container{
    grid-template-columns:1fr;
}

.team-image{
    height:260px;
}

.about-box{
    padding:30px 22px;
}

.help-btn{
    right:15px;
    bottom:15px;

    padding:14px 18px;

    font-size:14px;
}

.help-box{
    width:92%;
    right:4%;
    bottom:80px;

    padding:24px 20px;
}

footer{
    padding:28px 18px;
    font-size:14px;
}

}

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

@media(max-width:480px){

.hero h1{
    font-size:33px;
}

.hero p{
    font-size:15px;
}

.title h2{
    font-size:28px;
}

.logo{
    font-size:22px;
}

.language-switch button{
    width:42px;
    height:42px;
    font-size:13px;
}

.arapca{
    font-size:22px;
}

.meal{
    font-size:15px;
}

.quote{
    font-size:17px;
}

}
/* ======================================== */
/* MOBILE MENU */
/* ======================================== */

.menu-toggle{

    display:none;

    width:50px;
    height:50px;

    border-radius:15px;

    background:
    rgba(255,255,255,0.12);

    backdrop-filter:blur(10px);

    cursor:pointer;

    justify-content:center;
    align-items:center;

    flex-direction:column;

    gap:6px;

    transition:0.3s;

}

.menu-toggle:hover{

    background:
    rgba(255,255,255,0.2);

}

.menu-toggle span{

    width:24px;
    height:3px;

    background:white;

    border-radius:20px;

    transition:0.3s;

}

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

@media(max-width:768px){

.menu-toggle{
    display:flex;
}

nav{

    position:relative;

    flex-direction:row;

    justify-content:space-between;

    align-items:center;

}

nav ul{

    position:absolute;

    top:95px;
    left:0;

    width:100%;

    background:
    linear-gradient(
    180deg,
    rgba(108,92,231,0.97),
    rgba(155,127,209,0.97)
    );

    backdrop-filter:blur(15px);

    padding:25px;

    border-radius:0 0 25px 25px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

    max-height:0;

    overflow:hidden;

    opacity:0;

    pointer-events:none;

    transition:0.4s ease;

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

}

nav ul.active{

    max-height:600px;

    opacity:1;

    pointer-events:auto;

}

nav ul li{

    width:100%;
    text-align:center;

}

nav ul li a{

    display:block;

    width:100%;

    padding:12px;

    border-radius:15px;

    transition:0.3s;

}

nav ul li a:hover{

    background:
    rgba(255,255,255,0.12);

}



}
/* ======================================== */
/* MOBILE RESPONSIVE FIX */
/* ======================================== */

.menu-toggle{
display:none;
}

/* TABLET */

@media(max-width:992px){

header{
padding:18px 30px;
}

.hero h1{
font-size:58px;
}

.hero p{
font-size:20px;
}

.title h2{
font-size:42px;
}

.info-box{
padding:35px;
}

.card{
padding:30px 25px;
}

}

/* MOBILE */

@media(max-width:768px){

body{
overflow-x:hidden;
}

/* HEADER */

header{

padding:15px 20px;

}

nav{

position:relative;

flex-wrap:nowrap;

}

/* LOGO */

.logo{

font-size:22px;

z-index:1001;

}

/* MENU */

.menu-toggle{

display:flex;

flex-direction:column;

justify-content:center;
align-items:center;

gap:5px;

cursor:pointer;

z-index:1001;

margin-left:auto;

}

.menu-toggle span{

width:25px;
height:3px;

background:white;

border-radius:20px;

transition:0.3s;

}

/* NAV */

nav ul{

display:none;

position:absolute;

top:85px;
left:0;

width:100%;

background:
linear-gradient(
180deg,
rgba(108,92,231,0.98),
rgba(155,127,209,0.98)
);

padding:30px 20px;

border-radius:0 0 25px 25px;

flex-direction:column;

align-items:center;

gap:22px;

box-shadow:
0 15px 40px rgba(0,0,0,0.25);

z-index:999;

}

nav ul.active{
display:flex;
}

nav ul li{
width:100%;
text-align:center;
}

nav ul li a{

display:block;

padding:12px;

font-size:18px;

border-radius:15px;

}

/* LANGUAGE */

.language-switch{

position:absolute;

right:70px;
top:50%;

transform:translateY(-50%);

gap:6px;

padding:5px;

}

.language-switch button{

width:40px;
height:40px;

font-size:12px;

}

/* HERO */

.hero{

padding:160px 20px 100px;

min-height:auto;

}

.hero h1{

font-size:42px;

line-height:1.3;

}

.hero p{

font-size:18px;

line-height:1.8;

}

.hero-content{
width:100%;
}

/* AYET */

.ayet-karti{

padding:25px 20px !important;

}

.arapca{

font-size:28px !important;
line-height:1.8;

}

.meal{

font-size:16px !important;

}

.sure{

font-size:15px !important;

}

/* BUTTON */

.btn{

padding:15px 30px;

font-size:16px;

}

/* SECTION */

section{

padding:80px 20px;

}

.title{

margin-bottom:45px;

}

.title h2{

font-size:34px;

}

.title p{

font-size:17px;

line-height:1.7;

}

/* INFO */

.info-box{

padding:30px 22px;

line-height:1.9;

}

/* CARDS */

.cards{

grid-template-columns:1fr;

gap:25px;

}

.card{

padding:28px 22px;

}

.card h3{

font-size:24px;

}

/* STATS */

.stats{

flex-direction:column;

align-items:center;

}

.stat-box{

width:100%;

max-width:320px;

}

/* COMMENT */

.comment-form{

padding:30px 20px;

}

.comment-form textarea{

min-height:140px;

padding:20px;

font-size:16px;

}

.comment-card{

padding:25px 20px;

}

.comment-user{

font-size:19px;

}

.comment-text{

font-size:16px;

line-height:1.8;

}

/* VIDEO */

video{

width:100% !important;

height:auto;

}

/* CERTIFICATE */

#printableSertifika{

padding:25px !important;

width:95% !important;

max-height:90vh;

overflow-y:auto;

}

#printableSertifika h1{

font-size:34px !important;

}

#printableSertifika p{

font-size:16px !important;

}

#kullaniciAdi{

font-size:24px !important;

width:100% !important;

}

#printButton{

width:100%;

font-size:16px !important;

}

/* FOOTER */

footer{

padding:25px 15px;

font-size:15px;

line-height:1.7;

}

/* HELP BUTTON */

.help-btn{

right:15px;
bottom:15px;

padding:14px 20px;

font-size:15px;

}

/* HELP BOX */

.help-box{

width:90%;

right:5%;

bottom:80px;

}

}

/* SMALL MOBILE */

@media(max-width:480px){

.hero h1{
font-size:34px;
}

.title h2{
font-size:28px;
}

.hero p,
.title p,
.card p,
.info-box p{

font-size:15px;

}

.logo{

font-size:19px;

}

.language-switch{

right:58px;

}

.language-switch button{

width:35px;
height:35px;

font-size:11px;

}

.arapca{

font-size:22px !important;

}

}
}