:root {
    /*değişkenlerim*/
    --main-color: #052099;
    --black-color: #1F4965;
    --border: 0.2rem solid rgba(218, 23, 23, 0.4);
    /*çizgi: kalınlık,çizgi şekli,rengi*/
}

/*Genel özellikler*/
* {
    font-family: 'Arial', sans-serif;
    margin: 0; /*Nesnenin diğer nesnelerle arasındaki mesafeyi ayarlayan boşluk.*/
    padding: 0; /*İçerik ile border arasında olan boşluk*/
    box-sizing: border-box; /*kutuları ve divleri belirli bir kalıp*/
    outline: none; /*etiketin"öne çıkmasını"sağlamak için, etiketin sınırları dışında çizilen bir çizgidir.*/
    border: none;  /*Tablonun ve hücrelerinin dış kenarı*/
    text-decoration: none; /*metin alt çizgi üst çizgi*/
    text-transform: capitalize; /*yazım kuralları*/
    transition: 0.2s ease; /*geçiş yavaşlatılması*/
}

/*Genel html'nin kodları*/
html {
    font-size: 62.5%; /*1rem = 10px eşitlenmesi*/
    overflow-x: hidden; /*alt(yatay) scroolun gizlenmesi*/
    scroll-padding-top: 9rem; /*scrool ayarları*/
    scroll-behavior: smooth; /*scrool ayarları*/
}

html::-webkit-scrollbar {
    width: 1.5rem; /*scroll'un genişliği*/
    background-color: #fff; /*scroll'un arka plan rengi*/
}

html::-webkit-scrollbar-track {
    background-color: transparent; /*scroll'un iç çizgi rengi*/
}

html::-webkit-scrollbar-thumb {
    border-radius: 3rem; /*scroll'un sürüklediğimiz çizginin yuvarlağı*/
    background-color: var(--black-color); /*scroll'un sürüklediğimiz çizginin rengi*/
}

/*bütün sayfa(en başından sona kadar)*/
body {
    background-color: #BBC6D0;
}

/* Modal Arka Planı (Backdrop) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Hafif karartma */
    display: none; /* Varsayılan olarak gizli */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* En üstte olmalı */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Modal İçeriği Kutusu */
.modal-content {
    background-color: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    transform: scale(0.9); /* Başlangıçta biraz küçülmüş */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yaylı animasyon */
}

/* Modal Görünür Olduğunda */
.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

/* Modal Başlık ve Mesaj Alanı */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.modal-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-footer {
    margin-top: 20px;
    text-align: right;
}

.modal-footer button {
    font-size: 1.7rem;
    color: #052099;
}

/*bütün sectionlar*/
section {
    padding: 3.5rem 7%; /*yukarı aşağı 3.5rem sağdan soldan %7 içeri gir*/
}

/*tüm btn butonları*/
.btn {
    margin-top: 1rem; /*butonun diğer üstündeki elemana uzaklığı*/
    display: inline-block; /*yerleşme düzeni*/
    padding: 1.5rem 3rem; /*buton içi yazı veya resmin yukarı aşağı 2rem sağdan soldan 3.75rem*/
    border-radius: 1rem; /*buton köşeleri*/
    font-size: 1.7rem; /*buton içi yazı büyüklüğü*/
    color: #fff; /*buton içi yazı rengi*/
    background-color: var(--black-color); /*butonun arka plan rengi*/
    cursor: pointer; /*butonun tıklanabilir özellik*/
}

.btn:hover {
    /*farenin yazıların üstene geldiğinde oluşan olay*/
    opacity: 0.6; /*renkleri soluklandırma*/
}

/*bütün sayfalardaki class'ı heading olan yazılar (başlık yazıları)*/
.heading {
    color: #052099;
    text-transform: none;
    font-size: 2.5rem;
    margin-bottom: 3.5rem;
    border-bottom: 0.1rem solid #052099;
}

.heading span {
    /*bütün sayfalardaki class'ı heading - span olan yazılar*/
    text-transform: uppercase; /*yazıları büyük harfe çevir*/
}

/*header kısmı başı*/
.header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    margin: 1.2rem 7%;
    border-radius: 30rem;
    box-shadow: 10px 10px 10px -2px rgba(0, 0, 0, 0.75);
    position: sticky; /*header kısmı scroll aşağı insede olduğu yerde kalsın*/
    top: 0; /*üstten sıfır olmasıda lazım*/
    z-index: 1000; /*header kısmı herzaman önde*/
}

.header .logo img {
    height: 5rem;
}

.header .navbar a {
    margin: 0 1rem;
    font-size: 2rem;
    color: #052099;
    border-bottom: 0.2rem solid transparent;
}

/*navbar içindeki classı active olan*/
.header .navbar .active,
.header .navbar a:hover {
    /*farenin yazıların üstene geldiğinde oluşan olay*/
    border-color: var(--main-color); /*çizgi rengi*/
    padding-bottom: 0.2rem; /*yazıdan ne kadar uzakta çizgi*/
}

.header .buttons button {
    cursor: pointer;
    margin-left: 2rem;
    background-color: transparent;
}

.header #menu-btn {
    display: none; /*classı #menu-btn yi gösterme*/
}

.header .giris-form {
    position: absolute; /*Elemanın yerleştirme düzeni.*/
    top: 115%; /*yukarı boşluk yüzdele*/
    right: 7%; /*sağdan boşluk yüzdele*/
    background-color: #BBC6D0;
    width: 40rem;
    height: 30rem;
    border-radius: 3rem;
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.75);
    border: var(--border);
    padding: 2rem;
    text-align: center;
    flex: 1 1 45rem;
    transform: scaleY(0); /*kaybol*/
    transform-origin: top;
}

.header .sifre-form.active,
.header .kayit-form.active,
.header .giris-form.active {
    transform: scaleY(1); /*aktif olduğunda ortaya çık*/
}

.header .sifre-form h3,
.header .kayit-form h3,
.header .giris-form h3 {
    text-transform: none;
    font-size: 2rem;
    color: var(--main-color);
}

.header .sifre-form .inputBox,
.header .giris-form .inputBox {
    display: flex; /*esnek yapı yanyana hızalama*/
    align-items: center; /*yazı dikey ortala*/
    margin: 2rem 0;
    font-size: 1.7rem;
}

.header .sifre-form .inputBox pre,
.header .giris-form .inputBox pre {
    width: 100%;
    max-width: 7rem;
    font-size: 1.7rem;
}

.header .sifre-form .inputBox input,
.header .kayit-form .inputBox input,
.header .giris-form .inputBox input {
    width: 100%;
    margin: 0;
    padding: 0.5rem;
    font-size: 1.7rem;
    color: black;
    text-transform: none;
    background-color: #fff;
    border: var(--border);
    border-radius: 0.5rem;
}

.header .giris-form .inputBox-2 a,
.header .giris-form .inputBox-1 a {
    margin-left: 3rem;
    margin-right: 7rem;
    font-size: 1.5rem;
    text-transform: none;
    text-decoration: underline;
    color: var(--main-color);
}

.header .sifre-form .inputBox-1,
.header .kayit-form .inputBox-1,
.header .giris-form .inputBox-1 {
    text-align: right;
}

.header .sifre-form .inputBox-1 .btn,
.header .kayit-form .inputBox-1 .btn,
.header .giris-form .inputBox-1 .btn {
    margin-top: 0.5rem;
    margin-left: 3rem;
    padding: 1.2rem 2.2rem;
}

.header .kayit-form {
    position: absolute;
    top: 115%;
    right: 7%;
    background-color: #BBC6D0;
    width: 40rem;
    height: 30rem;
    border-radius: 3rem;
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.75);
    border: var(--border);
    padding: 2rem;
    text-align: center;
    flex: 1 1 45rem;
    transform: scaleY(0);
    transform-origin: top;
}

.header .kayit-form .inputBox {
    display: flex;
    align-items: center;
    margin: 1.2rem 0;
    font-size: 1.7rem;
}

.header .kayit-form .inputBox pre {
    width: 100%;
    max-width: 10rem;
    font-size: 1.7rem;
}

.header .sifre-form {
    position: absolute;
    top: 115%;
    right: 7%;
    background-color: #BBC6D0;
    width: 40rem;
    height: 19rem;
    border-radius: 3rem;
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.75);
    border: var(--border);
    padding: 2rem;
    text-align: center;
    flex: 1 1 45rem;
    transform: scaleY(0);
    transform-origin: top;
}
/*header kısmı sonu*/

/*home (başlangıç) sayfası başı*/
.home {
    min-height: 100vh; /*sayfanın yüksekliği*/
    background: url(../resimler/insaat4.jpg) no-repeat; /*sayfanın arka plan resmi ve tekrarlama*/
    background-size: cover; /*resmi sayfaya sığdır*/
    background-position: center; /*resmi sayfaya ortala*/
    display: block; /*yazı yanyana hizala*/
    align-items: baseline; /*yazı yukarı aşağı BAŞTA*/
}

.home .content {
    max-width: 60rem;
    margin-top: 3rem;
    padding: 3rem 2.7rem;
    border: var(--border);
    text-align: center;
    border-radius: 1rem;
}

.home .content h3 {
    font-size: 3rem;
    color: #052099;
}

.home .content p {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.8;
    padding: 1rem 0;
    color: black;
    text-transform: none;
}

.home .content a {
    font-size: 1.7rem;
    padding: 1rem 3rem;
    text-transform: none;
}
/*başlangıç sayfası sonu*/

/*programlar sayfa başı*/
.programlar .box-container,
.programlarsat .box-container,
.videolar .box-container,
.bilgiler .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 1.5rem;
}

.programlar .box-container .box,
.programlarsat .box-container .box,
.videolar .box-container .box,
.bilgiler .box-container .box {
    padding: 3rem;
    background-color: #fff;
    border-radius: 3rem;
    min-height: 30rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /*hizalama stili*/
    justify-content: space-between; /*içindeki nesnelerin hizalama*/
}

.bilgiler .box-container .box p,
.programlarsat .box-container .box p,
.programlar .box-container .box p {
    font-size: 2rem;
    text-align: justify;
    margin-top: 1rem;
    text-transform: none;
    text-indent: 30px;
}

.programlar .box-container .box img,
.programlarsat .box-container .box img,
.videolar .box-container .box img,
.bilgiler .box-container .box img {
    width: 100%;
    object-fit: cover;
    border: var(--border);
    border-radius: 2rem;
}

.videolar .box-container .box {
    min-height: 20rem;
    text-align: center;
}

.videolar .box-container .box img {
    cursor: pointer;
}

.yorumlar .box-container .box {
    margin-top: -0.7rem;
    padding: 1rem;
    background-color: #fff;
    border-radius: 3rem;
    min-height: 10rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /*içindeki nesnelerin hizalama*/
}
.yorumlar .box-container .box .box-head {
    display: flex;          /* Yan yana diz */
    align-items: flex-end;    /* Dikey ortala */
    gap: 10px;             /* Resim ile yazı arası boşluk */
}
.yorumlar .box-container .box .box-head img {
    margin: 0 1rem;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;     /* Yuvarlak avatar */
    object-fit: cover;
}
.yorumlar .box-container .box .box-head h4 {
    margin: 0;
    color: #052099;
    text-transform: none;
    font-size: 2rem;
    border-bottom: 0.1rem solid #052099;
}
.yorumlar .box-container .box p {
    font-size: 2rem;
    margin: 2rem 2rem 2rem 4rem; 
    text-transform: none;
    text-indent: 30px;
}

/*hakkımda sayfa başı*/
.hakkimda p {
    font-size: 1.7rem;
    color: blue;
    padding: 1rem 0;
    line-height: 1.8;
    text-transform: none;
}

.hakkimda .left-img {
    float: left;
    margin: 16px 40px 0 0;
    border: var(--border);
    border-radius: 1rem;
}
/*hakkımda sayfa sonu*/

/*iletişim sayfa başı*/
.iletisim h3 {
    font-size: 2rem;
    color: #052099;
}

.iletisim .row {
    display: flex;
    background-color: var(--black-color);
    flex-wrap: wrap;
    gap: 1rem;
    border-radius: 1rem;
}

.iletisim .row .map {
    flex: 1 1 45rem;
    width: 100%;
    object-fit: cover;
    min-height: 40rem;
}

.iletisim .row form {
    flex: 1 1 45rem;
    padding: 2rem 2rem;
    text-align: center;
}

.iletisim .row form h3 {
    text-transform: uppercase;
    font-size: 3rem;
    color: #fff;
}

.iletisim .row form .inputBox,
.iletisim .row form .inputBox1 {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    border: var(--border);
    background-color: var(--black-color);
    padding: 0.4rem;
    border-radius: 0.5rem;
}

.iletisim .row form .inputBox input {
    width: 100%;
    padding: 1.5rem;
    font-size: 2rem;
    text-transform: none;
}

.iletisim .row form .inputBox1 textarea {
    width: 100%;
    padding: 1rem;
    font-size: 2rem;
    height: 20rem;
    border: none;
    resize: none;
    text-transform: none;
}

.iletisim .row form .btn {
    color: #052099;
    background-color: #fff;
    font-weight: bold;
}
/*iletişim sayfa sonu*/

/*sayfam sayfa başı*/
.sayfam {
    background-color: #ccc;
}

.sayfam .row {
    display: flex;
    background-color: #fff;
    flex-wrap: wrap; /*birden fazla satıra izin ver(sayfa küçüldüğünde alta at)*/
    align-items: center;
    gap: 1rem;
    border-radius: 3rem;
    margin: 0 8rem;
    padding: 2rem;
}

.sayfam .row form {
    flex: 1 1 45rem;
    padding: 4rem;
    text-align: center;
}

.sayfam .row form:nth-child(2) {
    align-items: center;
}

.sayfam .row form .inputBox,
.sayfam .row form .inputBox1 {
    display: flex;
    align-items: center;
    margin: 1rem 0;
}

.sayfam .row form .inputBox pre,
.sayfam .row form .inputBox1 pre {
    font-size: 2rem;
    width: 12rem;
    text-align: left;
    padding-right: 1rem;
}

.sayfam .row form .inputBox input,
.sayfam .row form .inputBox1 textarea {
    width: 70%;
    padding: 1rem;
    font-size: 2rem;
    text-transform: none;
    border: 0.1rem solid #ccc;
    border-radius: 0.5rem;
}

.sayfam .row form .stars {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
    margin-left: -5rem;
}

.sayfam .row form .stars pre {
    margin-right: 1.5rem;
    font-size: 1.5rem;
    margin-top: 1.3rem;
}

.sayfam .row form input[value="Gönder"] {
    width: auto;
    padding: 0.9rem 2.5rem;
    font-weight: bold;
}

.sayfam .row form .inputBox2 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 3rem;
}

.sayfam .row form .inputBox2 input[value="Admin Sayfa"] {
    margin-left: 0;
    margin-right: 4rem;
    font-size: 1.7rem;
    color:aquamarine;
    display: none;
}
.sayfam .row form .inputBox2 input[value="Üyelikten Çık"] {
    margin-right: 7rem;
    margin-left: -2rem;
    color: red;
    background-color: var(--black-color);
    font-size: 1.7rem;
}

.sayfam .row form .inputBox2 input[value="Sayfamdan Çık"] {
    margin-left: 7rem;
    margin-right: -2rem;
    font-size: 1.7rem;
}

.sayfam .row form .btn {
    margin-top: 0.5rem;
    margin-left: 30rem;
    padding: 0.9rem 1.5rem;
    font-weight: bold;
}

.sayfam .row form img {
    margin-top: 1rem;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    object-fit: cover;
    align-items: center;
}
/*sayfam sayfa sonu*/

/*Sayfaların altındaki işlemler başı*/
.footer {
    background-color: var(--black-color);
    text-align: center;
}

.footer .links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3rem;
    gap: 1rem;
}

.footer .links a {
    background-color: #2976ce;
    padding: 0.5rem 1.4rem;
    color: #fff;
    font-size: 2rem;
    border: var(--border);
    border-radius: 0.5rem;
}

.footer .links a:hover {
    background-color: var(--black-color);
    opacity: 0.7rem;
}

.footer .links a.active {
    background-color: var(--black-color);
}

.footer .credit {
    font-size: 2rem;
    color: #fff;
    font-weight: 300;
    padding-top: 1.5rem;
}

.footer .credit span {
    color: #ccc;
}
/*Sayfaların altındaki işlemler sonu*/

/*Sayfaların küçülme büyüme 991px başı*/
@media(max-width: 991px) {
    html {
        font-size: 55%; /*yazı büyüklüğü yüzdele(küçült)*/
    }
    .header {
        padding: 1.5 rem 2rem; /*yukarıdan aşağıdan 1.5rem, sağdan soldan 2rem*/
        margin: 1.2rem 4%;
    }
    .header .logo img {
        height: 5rem; /*logoyu küçült*/
    }
    section {
        padding: 2rem; /*yukarıdan aşağıdan, sağdan soldan 2rem*/
    }
    .header .giris-form,
    .header .kayit-form,
    .header .sifre-form {
        right: 4%;
    }
    .sayfam .row {
        margin: 0 4rem;
    }
}
/*Sayfaların küçülme büyüme 991px sonu*/
/*Sayfaların küçülme büyüme 768px başı*/
@media(max-width: 768px) {
    .header #menu-btn {
        display: inline-block; /*yerleşme düzeni*/
    }
    .header .navbar {
        position: absolute; /*Elemanın yerleştirme düzeni.*/
        top: 95%; /*yukarı boşluk yüzdele*/
        background-color: #fff; /*arka plan rengi*/
        height: auto; /* İçeriğe göre otomatik yükseklik */
        width: 30rem; /*kutunun genişliği*/
        box-shadow: 0px 20px 14px 0px rgba(0 0 0 / 75%); /*gölgelik ekleme ve rengi*/
        right: -100%; /*sağ tarafa gizle*/
        transition: right 0.3s ease;
        border-radius: 1rem;
        padding-bottom: 1rem;
    }
    .header .navbar.active {
        right: 3rem; /*aktif olunca sağ tarafa yerleştir*/
    }
    .header .navbar a {
        color: var(--black-color);
        display: block;
        margin: 1.5rem;
        padding: 0.5rem;
        font-size: 2rem;
    }
    .header .giris-form,
    .header .kayit-form,
    .header .sifre-form {
        width: 90%;
        max-width: 100%;
        right: 5%;
        left: 5%;
        margin: 0 auto;
    }
    .header .giris-form .inputBox-2 a,
    .header .giris-form .inputBox-1 a {
        margin-left: 1rem;
        margin-right: 1rem;
        font-size: 1.6rem;
    }
    .sayfam .row {
        margin: 0;
        padding: 1rem;
    }
    .sayfam .row form .inputBox,
    .sayfam .row form .inputBox1 {
        flex-direction: column;
        align-items: flex-start;
    }
    .sayfam .row form .inputBox pre,
    .sayfam .row form .inputBox1 pre {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .sayfam .row form .inputBox input,
    .sayfam .row form .inputBox1 textarea {
        width: 100%;
    }
    .sayfam .row form .btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

}
/*Sayfaların küçülme büyüme 768px sonu*/
/*Sayfaların küçülme büyüme 576px başı*/
@media(max-width: 576px) {
    html {
        font-size: 50%;
    }
    .header {
        margin: 1rem 2%;
    }
    .header .giris-form,
    .header .kayit-form,
    .header .sifre-form {
        right: 2%;
        left: 2%;
    }

}
/*Sayfaların küçülme büyüme 576px sonu*/