/* BİRİNCİ BÖLÜM */
body{
  margin: 0;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.menu {
  font-size: 12px;
  font-weight: 300;
  gap: 15px;
  display: flex;
  margin: 0;
  width: 100%;
  max-width: 1214px;
  padding: 20px 0px;
  margin: 0 auto;
}
.menu a{
  text-decoration: none;
  color: #1A1714;
}
.birinci-bolum strong {
    font-size: 40px;
    font-weight: 600;
    text-align: center;
}
.birinci-bolum {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1214px;
    margin: 0 auto;
}

/* İKİNCİ BÖLÜM */

.ikinci-bolum span {
    font-size: 20px;
    font-weight: 400;
    max-width: 1050px;
    display: block;
}
.ikinci-bolum strong {
    font-style: italic;
    text-decoration: underline;
    font-size: 20px;
    font-weight: 400;
}
.ikinci-bolum b {
    font-size: 20px;
    font-weight: 600;
}
.ikinci-bolum {
    max-width: 1214px;
    margin: 0 auto;
    padding: 80px 0px;
}

/* ÜÇÜNCÜ BÖLÜM */

.ucuncu-bolum .ust img {
    width: 587px;
    height: 416px;
}
.ucuncu-bolum .ust div strong {
    font-size: 26px;
    font-weight: 600;
}
.ucuncu-bolum .ust div span {
    font-size: 20px;
    font-weight: 400;
    max-width: 527px;
    display: block;
    text-align: justify;
}
.ucuncu-bolum .ust div {
    padding: 20px 30px;
    background-color: white;
    max-width: fit-content;
    height: 416px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.ucuncu-bolum .ust {
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 1214px;
    margin: 0 auto;
}
.ucuncu-bolum .orta .baslik strong {
    font-size: 26px;
    font-weight: 600;
}
.ucuncu-bolum .orta .baslik {
    display: flex;
    flex-direction: column;
}
.ucuncu-bolum .orta .aciklama span {
    font-size: 20px;
    font-weight: 400;
    max-width: 722px;
    display: block;
    text-align: justify;
}
.ucuncu-bolum .orta .aciklama {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.ucuncu-bolum .orta .sol {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px 30px;
    background-color: white;
    max-width: 782px;
    height: 523px;
}
.ucuncu-bolum .orta img {
    width: 392px;
}
.ucuncu-bolum .orta {
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 1214px;
    margin: 0 auto;
}
.ucuncu-bolum .alt img {
    width: 587px;
}
.ucuncu-bolum .alt div strong {
    font-size: 26px;
    font-weight: 600;
}
.ucuncu-bolum .alt div span {
    font-size: 20px;
    font-weight: 400;
    max-width: 527px;
    display: block;
    text-align: justify;
}
.ucuncu-bolum .alt div b {
    font-size: 20px;
    font-weight: 600;
}
.ucuncu-bolum .alt div h1 {
    font-size: 96px;
    font-weight: 600;
    color: white;
    background-color: #B5B5B5;
    max-width: 527px;
    padding: 20px 0px;
    text-align: center;
}
.ucuncu-bolum .alt div a {
    color: #0056BF;
    font-size: 20px;
    font-weight: 600;
}
.ucuncu-bolum .alt div {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color:  white;
    max-width: 587px;
    padding: 20px 30px;
}
.ucuncu-bolum .alt {
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 1214px;
    margin: 0 auto;
}
.ucuncu-bolum {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* DÖRDÜNCÜ BÖLÜM */

.dorduncu-bolum strong {
    font-size: 26px;
    font-weight: 600;
}
.dorduncu-bolum span {
    font-size: 20px;
    font-weight: 400;
    max-width: 1214px;
    display: block;
}
.dorduncu-bolum a {
    font-size: 20px;
    font-weight: 600;
    color: #0056BF;
}
.dorduncu-bolum {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 80px 0px;
    max-width: 1214px;
    margin: 0 auto;
}

/* BEŞİNCİ BÖLÜM */

.besinci-bolum .ust-resim {
    width: 1214px;
    margin: 0 auto;
}
.besinci-bolum .orta .kart .yazilar strong,
.besinci-bolum .alt strong {
    font-size: 26px;
    font-weight: 600;
}
.besinci-bolum .orta .kart .yazilar span,
.besinci-bolum .alt span {
    font-size: 20px;
    font-weight: 400;
    max-width: 378px;
    display: block;
    text-align: justify;
}
.besinci-bolum .orta .kart .yazilar,
.besinci-bolum .alt .yazilar {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.besinci-bolum .orta .kart img {
    max-width: 378px;
}
.besinci-bolum .orta .kart {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.besinci-bolum .orta ,
.besinci-bolum .alt{
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 1214px;
    margin: 0 auto;
}
.besinci-bolum .alt img {
    max-width: 796px;
}
.besinci-bolum {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ALTINCI BÖLÜM */

.altinci-bolum .ilk-resim {
    max-width: 1214px;
    margin: 0 auto;
}
.altinci-bolum .orta strong {
    font-size: 26px;
    font-weight: 600;
    max-width: 587px;
    display: block;
}
.altinci-bolum .orta span {
    font-size: 20px;
    font-weight: 400;
    max-width: 587px;
    display: block;
    text-align: justify;
}
.altinci-bolum .orta div {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.altinci-bolum .orta {
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 1214px;
    margin: 0 auto;
}
.altinci-bolum .orta-2 img {
    max-width: 378px;
}
.altinci-bolum .orta-2 div {
    display: flex;
    flex-direction: row;
    gap: 40px;
}
.altinci-bolum .orta-2 {
    display: flex;
    flex-direction: column;
    max-width: 1214px;
    margin: 0 auto;
}
.altinci-bolum .alt strong {
    font-size: 26px;
    font-weight: 600;
    max-width: 461px;
    display: block;
}
.altinci-bolum .alt span {
    font-size: 20px;
    font-weight: 400;
    max-width: 587px;
    display: block;
    text-align: justify;
}
.altinci-bolum .alt .sol {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.altinci-bolum .alt {
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 1214px;
    margin: 0 auto;
}
.altinci-bolum {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 80px 0px;
}

/* YEDİNCİ BÖLÜM */

.yedinci-bolum .ilk-resim {
    max-width: 1214px;
    margin: 0 auto;
}
.yedinci-bolum .ust .sol strong {
    font-size: 26px;
    font-weight: 600;
} 
.yedinci-bolum .ust .sol span {
    font-size: 20px;
    font-weight: 400;
    max-width: 587px;
    display: block;
    text-align: justify;
}
.yedinci-bolum .ust .sol {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.yedinci-bolum .ust img {
    max-width: 587px;
}
.yedinci-bolum .ust {
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 1214px;
    margin: 0 auto;
}
.yedinci-bolum .orta img {
    max-width: 587px;
}
.yedinci-bolum .orta strong {
    font-size: 26px;
    font-weight: 600;
}
.yedinci-bolum .orta span {
    font-size: 20px;
    font-weight: 400;
    max-width: 587px;
    display: block;
    text-align: justify;
}
.yedinci-bolum .orta .sol,
.yedinci-bolum .orta .sag {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.yedinci-bolum .orta {
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 1214px;
    margin: 0 auto;
}
.yedinci-bolum .orta-2 img {
    max-width: 587px;
}
.yedinci-bolum .orta-2 {
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 1214px;
    margin: 0 auto;
}
.yedinci-bolum .alt strong {
    font-size: 26px;
    font-weight: 600;
}
.yedinci-bolum .alt span {
    font-size: 20px;
    font-weight: 400;
    max-width: 1214px;
    display: block;
    text-align: justify;
}
.yedinci-bolum .alt {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 1214px;
    margin: 0 auto;
    padding: 40px 0px;
}
.yedinci-bolum {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* SEKİZİNCİ BÖLÜM */

.sekizinci-bolum .ilk-resim {
    max-width: 1214px;
    margin: 0 auto;
}
.sekizinci-bolum .orta img {
    max-width: 378px;
}
.sekizinci-bolum .orta {
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 1214px;
    margin: 0 auto;
}
.sekizinci-bolum .alt strong {
    font-size: 26px;
    font-weight: 600;
}
.sekizinci-bolum .alt span {
    font-size: 20px;
    font-weight: 400;
    max-width: 1214px;
    display: block;
    text-align: justify;
}
.sekizinci-bolum .alt {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 1214px;
    margin: 0 auto;
}
.sekizinci-bolum {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 0px;
}

/* DOKUZUNCU BÖLÜM */

.dokuzuncu-bolum .sol strong {
    font-size: 26px;
    font-weight: 600;
    max-width: 461px;
    display: block;
}
.dokuzuncu-bolum .sol span {
    font-size: 20px;
    font-weight: 400;
    max-width: 587px;
    display: block;
    text-align: justify;
}
.dokuzuncu-bolum .sol .ust,
.dokuzuncu-bolum .sol .alt {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.dokuzuncu-bolum .sol {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 40px 0px;
}
.dokuzuncu-bolum img {
    max-width: 587px;
}
.dokuzuncu-bolum {
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 1214px;
    margin: 0 auto;
    padding: 40px 0px;
}

/* ONUCU BÖLÜM */

.onuncu-bolum strong {
    font-size: 26px;
    font-weight: 600;
}
.onuncu-bolum .alt a {
    font-size: 20px;
    font-weight: 400;
    background-color: #F2EDE0;
    padding: 14px 20px;
    border: 1px solid #00000050;
}
.onuncu-bolum .alt {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.onuncu-bolum {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1214px;
    margin: 0 auto;
    padding: 40px 0px;
}

/* MOBİL UYUM */

@media (max-width: 1253px) {
    body {
        overflow-x: hidden;
    }
    .menu {
        flex-wrap: wrap;
        gap: 8px 15px;
        padding: 15px 20px;
    }

    /* BİRİNCİ BÖLÜM */
    .birinci-bolum {
        padding: 0 20px;
        box-sizing: border-box;
    }
    .birinci-bolum strong {
        font-size: 30px;
    }
    .birinci-bolum iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 1214 / 683;
    }

    /* İKİNCİ BÖLÜM */
    .ikinci-bolum {
        padding: 40px 20px;
        box-sizing: border-box;
    }
    .ikinci-bolum span {
        max-width: 100%;
    }

    /* ÜÇÜNCÜ BÖLÜM */
    .ucuncu-bolum {
        padding: 0 20px;
        box-sizing: border-box;
    }
    .ucuncu-bolum .ust,
    .ucuncu-bolum .orta,
    .ucuncu-bolum .alt {
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .ucuncu-bolum .ust img,
    .ucuncu-bolum .orta img,
    .ucuncu-bolum .alt img {
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    .ucuncu-bolum .ust div {
        max-width: 100%;
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    .ucuncu-bolum .ust div span {
        max-width: 100%;
    }
    .ucuncu-bolum .orta .sol {
        max-width: 100%;
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    .ucuncu-bolum .orta .aciklama span {
        max-width: 100%;
    }
    .ucuncu-bolum .alt div {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .ucuncu-bolum .alt div span {
        max-width: 100%;
        overflow-wrap: break-word;
    }
    .ucuncu-bolum .alt div h1 {
        font-size: 56px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* DÖRDÜNCÜ BÖLÜM */
    .dorduncu-bolum {
        padding: 40px 20px;
        box-sizing: border-box;
    }
    .dorduncu-bolum span {
        max-width: 100%;
    }

    /* BEŞİNCİ BÖLÜM */
    .besinci-bolum {
        padding: 0 20px;
        box-sizing: border-box;
    }
    .besinci-bolum .ust-resim {
        width: 100%;
    }
    .besinci-bolum .orta,
    .besinci-bolum .alt {
        flex-direction: column;
        gap: 20px;
    }
    .besinci-bolum .orta .kart {
        max-width: 100%;
    }
    .besinci-bolum .orta .kart img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    .besinci-bolum .orta .kart .yazilar span,
    .besinci-bolum .alt span {
        max-width: 100%;
    }
    .besinci-bolum .alt img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }

    /* ALTINCI BÖLÜM */
    .altinci-bolum {
        padding: 50px 20px;
        box-sizing: border-box;
    }
    .altinci-bolum .ilk-resim {
        max-width: 100%;
        width: 100%;
    }
    .altinci-bolum .orta {
        flex-direction: column;
        gap: 20px;
    }
    .altinci-bolum .orta strong,
    .altinci-bolum .orta span {
        max-width: 100%;
    }
    .altinci-bolum .orta-2 div {
        flex-direction: column;
        gap: 20px;
    }
    .altinci-bolum .orta-2 img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    .altinci-bolum .alt {
        flex-direction: column;
        gap: 20px;
    }
    .altinci-bolum .alt strong,
    .altinci-bolum .alt span {
        max-width: 100%;
    }

    /* YEDİNCİ BÖLÜM */
    .yedinci-bolum .ilk-resim {
        max-width: calc(100% - 40px);
        width: calc(100% - 40px);
        display: block;
        margin: 0 auto;
    }
    .yedinci-bolum .ust {
        flex-direction: column;
        gap: 20px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .yedinci-bolum .ust .sol span {
        max-width: 100%;
    }
    .yedinci-bolum .ust img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    .yedinci-bolum .orta {
        flex-direction: column;
        gap: 20px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .yedinci-bolum .orta img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    .yedinci-bolum .orta span {
        max-width: 100%;
    }
    .yedinci-bolum .orta-2 {
        flex-direction: column;
        gap: 20px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .yedinci-bolum .orta-2 img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    .yedinci-bolum .alt {
        padding: 40px 20px;
        box-sizing: border-box;
    }
    .yedinci-bolum .alt span {
        max-width: 100%;
    }

    /* SEKİZİNCİ BÖLÜM */
    .sekizinci-bolum .ilk-resim {
        max-width: calc(100% - 40px);
        width: calc(100% - 40px);
        display: block;
        margin: 0 auto;
    }
    .sekizinci-bolum .orta {
        flex-direction: column;
        gap: 20px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .sekizinci-bolum .orta img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    .sekizinci-bolum .alt {
        padding: 0 20px;
        box-sizing: border-box;
    }
    .sekizinci-bolum .alt span {
        max-width: 100%;
    }

    /* DOKUZUNCU BÖLÜM */
    .dokuzuncu-bolum {
        flex-direction: column;
        gap: 20px;
        padding: 40px 20px;
        box-sizing: border-box;
    }
    .dokuzuncu-bolum .sol strong,
    .dokuzuncu-bolum .sol span {
        max-width: 100%;
    }
    .dokuzuncu-bolum img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }

    /* ONUNCU BÖLÜM */
    .onuncu-bolum {
        padding: 40px 20px;
        box-sizing: border-box;
    }
    .onuncu-bolum .alt a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .menu {
        gap: 6px 10px;
        font-size: 11px;
    }
    .birinci-bolum strong {
        font-size: 24px;
    }
    .ikinci-bolum span,
    .ikinci-bolum strong,
    .ikinci-bolum b {
        font-size: 16px;
    }
    .ucuncu-bolum .ust div strong,
    .ucuncu-bolum .orta .baslik strong,
    .ucuncu-bolum .alt div strong {
        font-size: 22px;
    }
    .ucuncu-bolum .ust div span,
    .ucuncu-bolum .orta .aciklama span,
    .ucuncu-bolum .alt div span,
    .ucuncu-bolum .alt div b,
    .ucuncu-bolum .alt div a {
        font-size: 16px;
    }
    .ucuncu-bolum .alt div h1 {
        font-size: 44px;
    }
    .dorduncu-bolum strong {
        font-size: 22px;
    }
    .dorduncu-bolum span,
    .dorduncu-bolum a {
        font-size: 16px;
    }
    .besinci-bolum .orta .kart .yazilar strong,
    .besinci-bolum .alt strong {
        font-size: 22px;
    }
    .besinci-bolum .orta .kart .yazilar span,
    .besinci-bolum .alt span {
        font-size: 16px;
    }
    .altinci-bolum .orta strong,
    .altinci-bolum .alt strong {
        font-size: 22px;
    }
    .altinci-bolum .orta span,
    .altinci-bolum .alt span {
        font-size: 16px;
    }
    .yedinci-bolum .ust .sol strong,
    .yedinci-bolum .orta strong,
    .yedinci-bolum .alt strong {
        font-size: 22px;
    }
    .yedinci-bolum .ust .sol span,
    .yedinci-bolum .orta span,
    .yedinci-bolum .alt span {
        font-size: 16px;
    }
    .sekizinci-bolum .alt strong {
        font-size: 22px;
    }
    .sekizinci-bolum .alt span {
        font-size: 16px;
    }
    .dokuzuncu-bolum .sol strong {
        font-size: 22px;
    }
    .dokuzuncu-bolum .sol span {
        font-size: 16px;
    }
    .onuncu-bolum strong {
        font-size: 22px;
    }
    .onuncu-bolum .alt a {
        font-size: 16px;
    }
}