@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 
/* Google Fonts'tan Roboto fontunu dahil eder. */

* {
    margin: 0; /* Tüm elemanların varsayılan dış boşluklarını sıfırlar. */
    padding: 0; /* Tüm elemanların varsayılan iç boşluklarını sıfırlar. */
    box-sizing: border-box; /* Padding ve border genişlik/yükseklik hesaplamasına dahil edilir. */
}

html, body {
    font-family: 'Roboto', sans-serif; /* Sayfa genelinde Roboto fontu kullanılır. */
    font-size: 16px; /* Temel yazı büyüklüğü 16px olarak belirlenir. */
    height: 100%; /* Sayfa yüksekliği ekranın tamamını kaplar. */
}

.container {
    background: url('res_vid_muz/arka.jpg') no-repeat center center / cover; 
    /* Arka plan resmi; tekrarsız, ortalanmış ve kapsayıcıyı tamamen kaplayacak şekilde ayarlanır. */
    min-height: 100vh; /* Minimum yükseklik ekran yüksekliği kadar olur. */
    display: flex; /* İçerikler flex konteyner olur. */
    flex-direction: column; /* İçerikler dikeyde sıralanır. */
}

.navbar {
    width: 100%; /* Navbar yatayda tam genişlikte olur. */
    height: 80px; /* Navbar yüksekliği 80px'dir. */
    background: rgba(22, 112, 214, 0.4); /* Yarı saydam mavi arka plan rengi. */
    display: flex; /* İçerikler yatayda flexbox ile dizilir. */
    align-items: center; /* İçerikler dikeyde ortalanır. */
    justify-content: space-between; /* İlk ve son öğeler kenarlara yaslanır. */
    padding: 0 20px; /* Sol ve sağda 20px boşluk bırakılır. */
    position: relative; /* Alt öğeler için referans konumlandırma sağlar. */
}

.logo img {
    height: 75px; /* Logo yüksekliği 50px olarak ayarlanır. */
    width: auto; /* Oran korunarak genişlik otomatik ayarlanır. */
}

.menu-toggle {
    display: none; /* Masaüstünde görünmez, mobilde gösterilecek. */
    font-size: 28px; /* Menü simgesi boyutu. */
    color: white; /* Rengi beyazdır. */
    cursor: pointer; /* Üzerine gelince işaretçi değişir. */
}

.nav-links {
    position: absolute; /* Menü konumu mutlak olarak ayarlanır. */
    left: 50%; /* Sol kenarı %50 konumlandırılır. */
    transform: translateX(-35%); /* Tam ortaya hizalama için yarı genişlik sola kaydırılır. */
    display: flex; /* Menü öğeleri yatayda dizilir. */
    gap: 16px; /* Menü linkleri arasında 16px boşluk olur. */
    list-style: none; /* Liste işaretleri kaldırılır. */
}

.nav-links li a {
    color: white; /* Menü linkleri beyaz renkte olur. */
    text-decoration: none; /* Alt çizgi kaldırılır. */
    font-size: clamp(12px, 1.5vw, 16px); /* Yazı büyüklüğü minimum 12px, ideal olarak 1.5vw (viewport genişliğinin %1.5’i), maksimum 16px olur. */
    padding: 6px 13px; /* Link çevresinde boşluk bırakılır. */
    border-radius: 10px; /* Köşeler oval yapılır. */
    transition: background 0.3s ease; /* Arka plan değişimi yumuşak olur. */
	display: flex;              /* içeriği esnek kutu yap */
    align-items: center;        /* dikeyde ortala */
    justify-content: center;    /* yatayda ortala */
    text-align: center;         /* çok satırlı metinlerde hizalama */
}

.nav-links li a:hover {
    background: #ff6e00; /* Üzerine gelince arka plan turuncu olur. */
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Mobilde menü simgesi görünür olur. */
    }

    .nav-links {
        flex-direction: column; /* Menü linkleri dikeyde sıralanır. */
        align-items: center; /* Linkler yatayda ortalanır. */
        background-color: rgba(0, 0, 16, 0.9); /* Daha koyu yarı saydam arka plan. */
        position: absolute; /* Mutlak konumlandırılır. */
        top: 80px; /* Navbar altına konumlanır. */
        left: 0; /* Sol kenara yapışır. */
        right: 0; /* Sağ kenara kadar genişler. */
        transform: none; /* Ortalamayı kaldırır. */
        display: none; /* Başlangıçta gizlidir, JS ile açılır. */
        padding: 10px 0; /* Üst-alt boşluk bırakılır. */
        gap: 10px; /* Linkler arası boşluk. */
    }
}

.note-buttons {
    display: flex; /* Butonlar yatayda esnek şekilde dizilir. */
    flex-wrap: wrap; /* Satıra sığmayan butonlar alt satıra geçer. */
    justify-content: center; /* Butonlar ortalanır. */
    gap: 10px; /* Butonlar arasında boşluk bırakılır. */
    margin: 20px; /* Buton grubuna dış boşluk eklenir. */
}

.note-buttons a {
    text-decoration: none; /* Link alt çizgisi kaldırılır. */
    color: rgb(200, 255, 0); /* Yazı rengi beyaz. */
    background: rgba(0, 0, 0, 0.5); /* Hafif şeffaf beyaz arka plan. */
    border: 2px solid rgb(200, 255, 0); /* Beyaz kenarlık. */
    padding: 10px 20px; /* Buton iç boşlukları. */
    border-radius: 8px; /* Köşeler hafif oval. */
    font-size: 16px; /* Yazı büyüklüğü. */
    transition: all 0.3s ease; /* Stil değişimleri yumuşak. */
	width: 220px;        /* Genişliği buradan kontrol ediyorsun */
	height: 40px;
    text-align: center;  /* Yazılar ortalansın */
    display: inline-block; /* Blok gibi davransın */
	display: flex;
	align-items: center;
	justify-content: center;

}

.note-buttons a:hover {
    background: rgb(255, 255, 255); /* Hoverda arka plan koyulaşır. */
    color: #ff6e00; /* Yazı turuncuya döner. */
    border-color: #ff6e00; /* Kenarlık rengi turuncu olur. */
}

.pdf-frame {
    width: 60%; /* PDF iframe genişliği kapsayıcının %60'ı. */
    height: 800px; /* Yükseklik sabit 800px. */
    border: 1px solid #000; /* Siyah sınır çizgisi. */
    display: block; /* Blok seviyesinde eleman olur. */
    margin: 20px auto 0 auto; /* Üst boşluk, ortalanmış yatay konum. */
}

.background-video {
    width: 45%; /* Videonun genişliği sayfa genişliğinin %45'i olacak */
    height: auto; /* Yükseklik orantılı şekilde ayarlanır */
    opacity: 0.10; /* Videonun saydamlığı %15 olacak (çok soluk görünür) */
    margin-top: 160px; /* Videonun üst tarafından 160px boşluk bırakılır */
    border-radius: 12px; /* Köşeler 12 piksel yuvarlatılır */
    display: block; /* Video blok eleman olarak davranır (alt alta dizilir) */
    margin-left: auto; /* Sol boşluk otomatik ayarlanır */
    margin-right: auto; /* Sağ boşluk otomatik ayarlanır */
}


#ses {
  	width: 100px;  /* genişlik */
  	height: 20px;  /* bazı tarayıcılarda yükseklik */
  	border-radius: 8px; /* köşeleri yuvarlatmak */
  	outline: none; /* kenarlık kaldır */
	margin: 20px 10px 0px ;  /* üstten/altan boşluk + ortalama */
}