html {
    scroll-behavior: smooth;
}

/* Tüm elemanlarda kutu modelini değiştir */
*,
*::before,
*::after {
    box-sizing: border-box;
}

#iconisto {
    width: 300px;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Daha modern bir font */
    line-height: 1.6;
    color: #333;
    /* Varsayılan metin rengi */
    background-color: #f8f8f8;
    /* Hafif bir arka plan rengi */
}

/* Temel kapsayıcı sınıfı - içeriği ortalamak için kullanılır */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* Kenarlarda boşluk bırak */
}

/* Başlıkların genel stili */
h3 {
    font-size: 2.3em;
    /* Daha büyük ve etkileyici */
    color: #003666;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    /* Daha belirgin gölge */
    font-weight: 700;
    /* Daha kalın */
    margin-bottom: 40px;
    /* Başlık altı boşluk */
    text-align: center;
    padding-top: 20px;
    /* Üstten boşluk */
}

#dgn {
    background-color: #02101b;
    /* Koyu lacivert arka plan */
    height: 70px;
    padding: 0 20px;
    display: flex;
    /* Flexbox ile logo ve navı yan yana hizala */
    justify-content: space-between;
    /* Aralarında boşluk bırak */
    align-items: center;
    /* Dikeyde ortala */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Hafif gölge */
    position: sticky;
    /* Sayfa kaydığında yukarıda sabit kalır */
    top: 0;
    z-index: 1000;
    /* Diğer içeriklerin üzerinde görünmesini sağlar */
}

#logo {
    display: flex;
    align-items: center;
    height: 100%;
    /*color: rgb(158, 218, 191); */
    /*font-weight: 800; /* Daha kalın */
    /*letter-spacing: 1px;*/
}

#logo img {
    height: 100px;
    /* Logoyu belirgin şekilde büyüttüm */
    width: auto;
    /*margin-top: 20px;*/
    /* Logoyu biraz aşağı alarak taşmasını sağladım, daha dinamik durur */
    z-index: 1001;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    /* Logoya gölge vererek öne çıkardım */
}

nav {
    display: flex;
    flex-wrap: wrap;
    /* Küçük ekranlarda sarmalama */
    gap: 25px;
    /* Bağlantılar arası boşluk */
}

nav a:link,
nav a:visited {
    text-decoration: none;
    color: azure;
    font-size: 1.1em;
    font-weight: 600;
    padding: 5px 0;
    transition: all 0.3s ease;
    /* Yumuşak geçiş efekti */
}

nav a:hover {
    color: rgb(158, 218, 191);
    /* Hover rengini logo rengiyle eşleştir */
    border-bottom: 2px solid rgb(158, 218, 191);
    /* Hover alt çizgisini de aynı renk yap */
}

#anasayfa {
    min-height: 100vh;
    /* Tüm cihazlarda tam ekran yüksekliği */
    height: 100vh;
    background-image: url(sabitfoto.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Parallax efekti */
    display: flex;
    /* İçeriği ortalamak için flexbox kullan */
    align-items: center;
    /* Dikeyde ortala */
    justify-content: center;
    /* Yatayda ortala */
    position: relative;
    /* İçerik için pozisyon referansı */
}

#black {
    position: absolute;
    /* Anasayfanın tamamını kapla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Daha belirgin bir karartma */
}

#icerik {
    position: relative;
    /* Siyah katmanın üzerinde olmalı */
    z-index: 1;
    color: white;
    text-align: center;
    /* Metni ortala */
    padding: 20px;
    max-width: 80%;
    /* Küçük ekranlarda taşmayı önle */
}

#icerik h2 {
    font-size: 3.5em;
    /* Daha büyük ve etkileyici */
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Okunabilirliği artır */
}

#icerik hr {
    width: 250px;
    /* Genişliği ayarla */
    border: 0;
    height: 2px;
    background-color: rgb(158, 218, 191);
    /* Logonun rengiyle uyumlu */
    margin: 0 auto 20px auto;
    /* Ortala ve alt boşluk bırak */
}

#icerik p {
    font-size: 1.5em;
    font-weight: 300;
    /* Daha hafif font */
    letter-spacing: 1px;
}

.main-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* İki eşit sütun */
    gap: 40px;
    /* Sütunlar arası boşluk */
    padding: 50px;
    max-width: 1200px;
    /* Maksimum genişlik */
    margin: 40px auto;
    /* Ortalamak için */
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* İçerikleri sola hizala */
}

/* İlk paragraf */
.intro-text-1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.1em;
    line-height: 1.7;
    color: #555;
    margin-bottom: 30px;
    text-align: justify;

}

.span {
    font-size: 50px;
    margin-right: 7px;
    line-height: 42px;
    color: #003666;
    font-weight: 600;
    float: left;
}

/* Resim (mevcut class'ları kullanıldı) */
.img-fluid {
    /* Ekran görüntünüzdeki resim için genel bir sınıf */
    max-width: 80%;
    /* Sütun genişliğine göre orantılı */
    height: auto;
    border-radius: 350px;
    /* Köşeleri yuvarlar */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Hafif gölge */
    object-fit: cover;
    margin-top: 20px;
    /* Üstteki paragrafla boşluk */
    /* mt100 sınıfı için özel bir stil gerekliyse buraya eklenebilir. */
    /* Örn: margin-top: 100px; */
}

/* İkinci paragraf */
.intro-text-2 {
    font-size: 1.1em;
    line-height: 1.7;
    color: #555;
    margin-bottom: 30px;
    text-align: justify;
    /*border-left: 3px solid #003666;*/
}

/* Eğitimler ve Deneyimler bölümü için mevcut CSS'iniz */
.alt-bolm {
    margin-top: 40px;
    /* Üstteki paragrafla boşluk */
    width: 100%;
    /* Sağ sütun genişliğini doldurur */
}

.alt-bolm h4 {
    /* Eğitimler ve Deneyimler başlıkları */
    font-size: 1.6em;
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid #004d66;
    padding-bottom: 5px;
    display: inline-block;
}

.foto-paragraf {
    color: #777;
    font-size: 1em;
    line-height: 1.6;
    max-width: 100%;
    text-align: left;
}

.foto-paragraf p {
    margin-bottom: 15px;
}

/* Responsive düzenlemeler */
@media (max-width: 768px) {
    .main-content-wrapper {
        grid-template-columns: 1fr;
        /* Küçük ekranlarda tek sütuna düşer */
        padding: 30px;
        gap: 30px;
    }

    header {
        flex-direction: column;
        text-align: center;
    }

    nav ul {
        margin-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    nav ul li {
        margin: 0 10px 10px 10px;
    }

    .img-fluid {
        max-width: 100%;
    }

    .img-belge {
        max-width: 100%;
    }

    .intro-text-1,
    .intro-text-2 {
        margin-bottom: 20px;
    }

    .alt-bolm {
        margin-top: 30px;
    }
}

@media (max-width: 480px) {
    header {
        padding: 10px 20px;
    }

    .logo {
        font-size: 1.5em;
    }

    nav ul li a {
        font-size: 1em;
    }

    .main-content-wrapper {
        padding: 20px;
    }

    .intro-text-1,
    .intro-text-2 {
        font-size: 1em;
        line-height: 1.6;
    }

    .alt-bolm h4 {
        font-size: 1.4em;
    }
}



#yetenek {
    background: linear-gradient(to bottom, rgb(101, 174, 140) 0%, #05122c 100%);
    /*background: linear-gradient(to bottom, #05122c 15%, #00ffcc 100%);*/


    /*background: linear-gradient(to bottom, #02101b 0%, #156387 50%, #00ffcc 100%);*/

    padding: 80px 20px;
    text-align: center;
    color: #003666;
}

#yetenek h3 {
    color: #ffffff;
    /* Başlık rengini beyaza çevir */
    text-shadow: none;
    /* Gölgeyi kaldır */
    margin-bottom: 60px;
}

.skills-container {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    /* Ortala */
    padding: 30px;
    /* Daha fazla iç boşluk */
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    /* Hafif şeffaf beyaz arka plan */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    /* Daha belirgin gölge */
}

.skill-item {
    margin-bottom: 30px;
    /* Öğeler arasında daha fazla boşluk */
}

.skill-name {
    font-weight: 600;
    margin-bottom: 10px;
    /* Bar ile isim arasında boşluk */
    color: #ffffff;
    font-size: 1.15em;
    /* Biraz daha büyük */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Yüzdeyi alta hizala */
}

.skill-name span.percentage {
    font-size: 0.95em;
    color: #ccc;
    /* Daha açık gri yüzde */
    margin-left: 10px;
}

.skill-bar-container {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    /* Daha şeffaf ve uyumlu arka plan */
    border-radius: 5px;
    overflow: hidden;
    height: 20px;
    /* Çubuğun yüksekliği */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
    /* İç gölge efekti */
}

.skill-bar {
    height: 100%;
    width: 0;
    border-radius: 5px;
    transition: width 1.5s ease-out;
    /* Daha yavaş ve akıcı geçiş */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* Yetenek Çubukları İçin Renkler (Daha canlı ve profesyonel palet) */
.skill-bar.html {
    background: linear-gradient(to right, #f07642, #de8c77);
}

/* HTML5 kırmızısı */
.skill-bar.css {
    background: linear-gradient(to right, #264de4, #7194e5);
}

/* CSS3 mavisi */
.skill-bar.javascript {
    background: linear-gradient(to right, #f0db4f, #f2eab0);
}

/* JavaScript sarısı */
.skill-bar.python {
    background: linear-gradient(to right, #306998, #98bbd8);
}

/* Python mavisi */
.skill-bar.php {
    background: linear-gradient(to right, #737fb4, #aebbee);
}

/* PHP morumsu */
.skill-bar.ingilizce {
    background: linear-gradient(to right, #00c2e0, #a7ddec);
}

/* React mavisi */
.skill-bar.fransızca {
    background: linear-gradient(to right, #68a063, #8cc84b);
}

/* Node.js yeşili */



.img-belge {
    max-width: 100%;
    /* Sütun genişliğine göre orantılı */
    height: auto;
    border-radius: 20px;
    /* Köşeleri yuvarlar */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Hafif gölge */
    object-fit: cover;
    /* margin-top: 20px; Üstteki paragrafla boşluk */
    display: block;

}

#egitimler {
    background-color: #fff;
    padding: 80px 20px;
    /* Daha fazla dikey boşluk */
    text-align: center;
    /* Height'i kaldır, içerik kadar uzasın */
}

#egitimler h3 {
    margin-bottom: 60px;
}

.owl-carousel owl-theme {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    padding: 20px;
}

.card {
    width: 320px;
    /* Kart genişliği */
    height: 400px;
    /* İçeriğe göre yükseklik */
    border: 1px solid #eee;
    /* Daha açık kenarlık */
    border-radius: 8px;
    /* Hafif yuvarlak köşeler */
    padding: 0 0 15px 0;
    /* Kartlar arası boşluk ve alt boşluk */
    display: inline-block;
    /* Yan yana durmaları için */
    vertical-align: top;
    /* Üstten hizala */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Hafif gölge */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Yumuşak geçiş */
    overflow: hidden;
    /* Taşmayı gizle */
}

.card:hover {
    transform: translateY(-5px);
    /* Hafifçe yukarı kaydır */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* Gölgeyi artır */
    border-color: rgb(158, 218, 191);
    /* Hover'da kenarlık rengini değiştir */
}

.card img {
    width: 100%;
    height: 200px;
    /* Resim yüksekliğini sabitle */
    object-fit: cover;
    /* Resmi kutuya sığdırırken oranını koru */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.baslikcard {
    font-size: 1.25em;
    /* Daha büyük başlık */
    color: #003666;
    margin: 15px 10px 10px 10px;
    /* İç boşluklar */
    font-weight: 600;
}

.cardp {
    color: #666;
    /* Daha okunaklı gri */
    font-size: 0.95em;
    padding: 0 15px 20px 15px;
    /* İç boşluklar */
}


/* Owl Carousel için ek düzenlemeler */
.owl-carousel .owl-item {
    display: flex;
    /* Öğeleri esnek yap */
    justify-content: center;
    /* Kartları ortala */
    -webkit-tap-highlight-color: transparent;
    position: relative
}

.owl-carousel {
    display: none;
    width: 100%;
    z-index: 1
}

.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    touch-action: manipulation;
    -moz-backface-visibility: hidden
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item,
.owl-carousel .owl-wrapper {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item {
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-touch-callout: none
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%
}

.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
    display: none
}

.no-js .owl-carousel,
.owl-carousel.owl-loaded {
    display: block
}

.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    background: 0 0;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit
}

.owl-carousel.owl-loading {
    opacity: 0;
    display: block
}

.owl-carousel.owl-hidden {
    opacity: 0
}

.owl-carousel.owl-refresh .owl-item {
    visibility: hidden
}

.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel.owl-grab {
    cursor: move;
    cursor: grab
}

.owl-carousel.owl-rtl {
    direction: rtl
}

.owl-carousel.owl-rtl .owl-item {
    float: right
}

.owl-carousel .animated {
    animation-duration: 1s;
    animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
    z-index: 0
}

.owl-carousel .owl-animated-out {
    z-index: 1
}

.owl-carousel .fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.owl-height {
    transition: height .5s ease-in-out
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity .4s ease
}

.owl-carousel .owl-item .owl-lazy:not([src]),
.owl-carousel .owl-item .owl-lazy[src^=""] {
    max-height: 0
}

.owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url(owl.video.play.png) no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    transition: transform .1s ease
}

.owl-carousel .owl-video-play-icon:hover {
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3)
}

.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn {
    display: none
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity .4s ease
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
}

#iletisim {
    background: linear-gradient(to bottom, #05122c 15%, #00ffcc 100%);
    /* background-image: url(tekr.png); */
    background-size: cover;
    background-position: center;
    /* Resmi ortala */
    padding: 80px 20px;
    /* Daha fazla dikey boşluk */
    height: auto;
    text-align: center;
    color: #fff;
    position: relative;
    /* İçerik için referans */
}

/* İletişim bölümü arka planına hafif bir overlay ekleyelim */
#iletisim::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* Daha belirgin overlay */
    z-index: 0;
    /* İçeriğin arkasında kalsın */
}

#h3iletisim {
    font-size: 2.5em;
    /* Daha büyük */
    margin-bottom: 40px;
    color: white;
    position: relative;
    /* Overlay'in üzerinde olmalı */
    z-index: 1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

#iletisimopak {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    /* Boşluğu artır */
    justify-content: center;
    align-items: flex-start;
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.15);
    /* Daha hafif şeffaf beyaz */
    padding: 40px 30px;
    /* Daha fazla iç boşluk */
    border-radius: 10px;
    /* Daha yuvarlak köşeler */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    /* Gölge */
    margin-bottom: 50px;
    position: relative;
    /* Overlay'in üzerinde olmalı */
    z-index: 1;
}

#formgrup {
    flex: 2;
    /* Form kısmı daha fazla yer kaplasın */
    min-width: 300px;
    padding: 0;
    /* İç dolguyu kaldır, form-control kendi içinde halledecek */
    text-align: left;
}

#solform,
#sagform {
    width: 100%;
    /* Her ikisi de %100 genişlikte olsun */
    float: none;
    /* Float'ı kaldır */
    padding: 0;
    /* Padding'i kaldır */
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    /* Daha iyi dolgu */
    font-size: 1em;
    line-height: 1.5;
    color: #333;
    /* Koyu metin rengi */
    background-color: white;
    margin-bottom: 15px;
    /* Alt boşluk */
    border-radius: 5px;
    border: 1px solid #ddd;
    /* Daha açık kenarlık */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Hafif iç gölge */
}

textarea.form-control {
    min-height: 120px;
    /* Minimum yükseklik */
    resize: vertical;
    /* Sadece dikeyde yeniden boyutlandırma */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

input[type="submit"] {
    background-color: rgb(158, 218, 191);
    /* Ana temayla uyumlu renk */
    color: #003666;
    /* Koyu metin rengi */
    border: none;
    padding: 12px 25px;
    /* Daha iyi dolgu */
    font-size: 1.1em;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 10px;
    width: auto;
    /* İçeriğe göre genişlik */
}

input[type="submit"]:hover {
    background-color: #aae0c7;
    /* Hover rengi */
    transform: translateY(-2px);
    /* Hafif yukarı kaydır */
}

#adres {
    flex: 1;
    /* Adres kısmı daha az yer kaplasın */
    min-width: 250px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    /* Adres kutusuna daha koyu arka plan */
    border-radius: 10px;
    text-align: center;
    /* Metni ortala */
    color: #eee;
    /* Açık metin rengi */
}

#adres h4 {
    font-size: 1.5em;
    color: rgb(158, 218, 191);
    margin-bottom: 20px;
}

#adres p {
    margin-bottom: 10px;
    font-size: 1em;
    letter-spacing: 0.5px;
}

/* Genel duyarlılık için ek ayarlar */
@media (max-width: 992px) {
    #hakkimizda .container {
        grid-template-columns: 1fr;
        /* Tek sütunlu düzen */
    }

    #sol {
        border-right: none;
        /* Kenarlığı kaldır */
        padding-right: 0;
        border-bottom: 2px solid #ddd;
        /* Alta kenarlık ekle */
        padding-bottom: 30px;
        /* Alt boşluk */
        margin-bottom: 30px;
        /* Elemanlar arası boşluk */
        text-align: center;
        /* Ortala */
    }

    #sag {
        text-align: center;
        /* Metni ortala */
    }

    #sag span {
        float: none;
        /* Float'ı kaldır */
        display: block;
        /* Yeni satıra geçmesini sağla */
        margin-bottom: 10px;
        /* Alta boşluk */
    }

    .card {
        margin: 0 10px 20px 10px;
        /* Kartlar arası boşluğu azalt */
    }
}

@media (max-width: 768px) {
    #dgn {
        flex-direction: column;
        /* Küçük ekranlarda dikey düzen */
        height: auto;
        padding: 10px 20px;
    }

    #logo {
        line-height: 1;
        margin-bottom: 10px;
    }

    nav {
        gap: 15px;
        /* Bağlantılar arası boşluğu azalt */
        justify-content: center;
        /* Ortala */
        line-height: 1;
    }

    #anasayfa {
        min-height: 100vh;
        /* Küçük ekranlarda da tam ekran */
        height: 100vh;
        background-attachment: scroll;
        /* Mobilde daha iyi performans */
    }

    #icerik h2 {
        font-size: 2.5em;
    }

    #icerik p {
        font-size: 1.2em;
    }

    h3 {
        font-size: 2.8em;
        /* Başlık boyutunu küçült */
        margin-bottom: 30px;
    }

    #hakkimizda,
    #yetenek,
    #egitimler,
    #iletisim {
        padding: 60px 15px;
        /* Genel dolguyu azalt */
    }

    .skills-container {
        padding: 20px;
        /* İç boşluğu azalt */
    }

    #iletisimopak {
        flex-direction: column;
        /* İletişim bölümünde dikey düzen */
        padding: 30px 20px;
        gap: 20px;
    }

    #formgrup,
    #adres {
        min-width: unset;
        /* Minimum genişliği kaldır */
        width: 100%;
        /* Tam genişlik */
    }

    #h3iletisim {
        font-size: 2.2em;
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    #anasayfa {
        min-height: 100vh;
        /* Çok küçük ekranlarda da tam ekran */
        height: 100vh;
    }

    #icerik h2 {
        font-size: 2em;
    }

    #icerik p {
        font-size: 1em;
    }

    h3 {
        font-size: 2.2em;
    }

    .card {
        width: 95%;
        /* Çok küçük ekranlarda kartları tam genişlik yap */
        margin: 0 auto 20px auto;
        /* Ortala */
    }

    .form-control {
        padding: 10px 12px;
        font-size: 0.9em;
    }

    input[type="submit"] {
        padding: 10px 20px;
        font-size: 1em;
    }
}

/* HESAPLARIM */