/* styles.css - Temel CSS dosyası */
/* Bu dosya web sitesinin stilini tanımlar, mobil cihazlar için hamburger menü (dışarı tıklandığında veya bağlantıya tıklandığında kapanır, kapatma butonu içerir), açık altın ve koyu gri renk temasıyla, navbar'da solda menü, ortada daha küçük logo, sağda iletişim bilgileri ile, hero bölümünde arka plan resmi, odalar bölümünde aynı boyutta resimler ve detaylı oda bilgileri ile, Hakkımızda bölümünde kart benzeri yapı ve hover efekti olmadan, Galeri bölümünde resimler ve tüm fotoğrafları görüntüleme butonu ile, modern görünümlü iletişim formu ile, üç sütunlu footer (bağlantılar, iletişim bilgileri, konum ve gömülü Google Maps, haritaya tıklayınca yönlendirme ile) ile, sayfanın sol altında WhatsApp logosu tarzında yüzen WhatsApp arama butonu ve üstünde yüzen konum butonu ile. Hamburger menü mobil cihazlarda sayfanın üstünde görünür. */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    background-color: white; /* Beyaz */
    color: #d4af37; /* Açık altın */
    padding: 20px 0;
    position: relative; /* Hamburger menü için referans noktası */
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.hamburger span {
    width: 100%;
    height: 3px;
    background-color: #d4af37; /* Açık altın */
    border-radius: 2px;
    transition: all 0.3s ease;
}

.nav-menu {
    display: flex;
    position: relative;
}

.close-menu {
    display: none; /* Varsayılan olarak gizli */
    font-size: 30px;
    color: #d4af37; /* Açık altın */
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-links li {
    margin-right: 20px;
}

.nav-links li a {
    color: #d4af37; /* Açık altın */
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
}

.nav-links li a:hover {
    text-decoration: underline;
}

.logo {
    text-align: center;
}

.logo img {
    max-width: 100px; /* Logo boyutunu küçülttük */
    height: auto;
}

.contact-info {
    text-align: right;
}

.contact-info p {
    margin: 5px 0;
    font-size: 0.9em;
}

#hero {
    background-image: url('images/home.jpg'); /* Arka plan resmi */
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 100px 0;
    position: relative;
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Hafif karartma efekti */
}

#hero .container {
    position: relative;
    z-index: 1;
}

#hero h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #fff; /* Metni daha iyi görünürlük için beyaz yaptık */
}

#hero p {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #fff; /* Metni daha iyi görünürlük için beyaz yaptık */
}

#hakkimizda, #odalar, #galeri, #iletisim {
    padding: 60px 0;
}

#hakkimizda h2, #odalar h2, #galeri h2, #iletisim h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #4b4b4b; /* Koyu gri */
    font-size: 30px;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.about-item {
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
    color: #4b4b4b; /* Koyu gri */
    background-color: #fff; /* Varsayılan arka plan beyaz */
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.gallery-item {
    display: block;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    background-color: #fff; /* Varsayılan arka plan beyaz */
}

.gallery-image {
    width: 100%;
    height: 200px; /* Sabit yükseklik, odalar bölümüyle uyumlu */
    object-fit: cover; /* Görüntüyü kırparak boyutlandırır */
    border-radius: 5px;
}

.gallery-button-container {
    text-align: center;
    margin-top: 20px;
}

.gallery-btn {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #4b4b4b; /* Koyu gri */
    color: #d4af37; /* Açık altın */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
}

.gallery-btn:hover {
    background-color: #333333; /* Daha koyu gri */
}

.room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.room-card {
    text-decoration: none; /* Kartın tıklanabilir olduğunu belirtmek için */
    color: inherit; /* Metin rengini kalıtsal yap */
    display: block; /* Kartın tüm alanı tıklanabilir olsun */
    transition: background-color 0.3s ease; /* Hover efekti için geçiş */
}

.room-card:hover .room {
    background-color: #e0e0e0; /* Hafif gri arka plan hover'da */
}

.room {
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: left; /* Detaylar için sola hizalama */
    color: #4b4b4b; /* Koyu gri */
    background-color: #fff; /* Varsayılan arka plan beyaz */
    transition: background-color 0.3s ease; /* Pürüzsüz geçiş efekti */
}

.room-image {
    width: 100%;
    height: 200px; /* Sabit yükseklik */
    object-fit: cover; /* Görüntüyü kırparak boyutlandırır */
    border-radius: 5px;
    margin-bottom: 15px;
}

.room-details {
    font-size: 0.9em;
}

.room-details h4 {
    margin: 10px 0 5px;
    color: #4b4b4b; /* Koyu gri */
    font-size: 1.1em;
}

.room-details p {
    margin: 5px 0;
}

.room-details ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 5px 0;
}

.room-details ul li {
    margin-bottom: 5px;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.form-group {
    position: relative;
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #4b4b4b; /* Koyu gri */
    font-size: 1em;
    font-weight: 500;
    transition: all 0.3s ease;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #4b4b4b; /* Koyu gri */
    border-radius: 8px;
    background-color: #fff;
    color: #4b4b4b; /* Koyu gri */
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #d4af37; /* Açık altın */
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.3); /* Açık altın gölge */
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999;
    transition: opacity 0.3s ease;
}

.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder {
    opacity: 0.5;
}

.contact-btn {
    display: block;
    width: 100%;
    padding: 12px;
    cursor: pointer;
    background-color: #4b4b4b; /* Koyu gri */
    color: #d4af37; /* Açık altın */
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-btn:hover {
    background-color: #333333; /* Daha koyu gri */
    transform: scale(1.02);
}

.location-button {
    position: fixed;
    bottom: 90px; /* WhatsApp butonunun üstüne yerleştir */
    left: 20px;
    background-color: #25D366; /* Koyu gri */
    color: #d4af37; /* Açık altın */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 1000;
    font-size: 24px;
}

.location-button:hover {
    background-color: #333333; /* Daha koyu gri */
}

.location-icon {
    display: inline-block;
}

.whatsapp-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #25D366; /* WhatsApp yeşili */
    color: #fff; /* Beyaz ikon rengi */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 1000;
    font-size: 24px;
}

.whatsapp-button:hover {
    background-color: #20b358; /* Daha koyu WhatsApp yeşili */
}

.whatsapp-icon {
    display: inline-block;
}

footer {
    background-color: #4b4b4b; /* Koyu gri */
    color: #d4af37; /* Açık altın */
    padding: 40px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 20px;
}

.footer-column {
    text-align: left;
}

.footer-column h3 {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: #d4af37; /* Açık altın */
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links li a {
    color: #d4af37; /* Açık altın */
    text-decoration: none;
    font-size: 0.9em;
}

.footer-links li a:hover {
    text-decoration: underline;
}

.footer-social {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.footer-social li {
    margin-bottom: 8px;
}

.footer-social li a {
    color: #d4af37; /* Açık altın */
    text-decoration: none;
    font-size: 0.9em;
}

.footer-social li a:hover {
    text-decoration: underline;
}

.footer-column p {
    font-size: 0.9em;
    margin: 5px 0;
    color: #d4af37; /* Açık altın */
}

.google-maps {
    margin-top: 10px;
}

.google-maps iframe {
    width: 100%;
    height: 200px;
    border: 2px solid #d4af37; /* Açık altın */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.map-link {
    display: block;
    text-decoration: none;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(212, 175, 55, 0.2); /* Açık altın, düşük opaklık */
}

.footer-bottom p {
    margin: 0;
    font-size: 0.85em;
}

/* Responsif tasarım */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        display: none;
        position: fixed; /* Sayfanın üstüne sabitlemek için */
        top: 0; /* Sayfanın en üstüne yerleştir */
        left: 0;
        width: 100%;
        background-color: white; /* Beyaz */
        padding: 40px 20px 20px; /* Kapatma butonu için üstten boşluk */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        z-index: 2000; /* Hero bölümünün üstünde görünmesi için yüksek z-index */
        transform: translateY(-100%); /* Menü kapalıyken yukarıda gizli */
        transition: transform 0.3s ease; /* Pürüzsüz geçiş efekti */
    }

    .nav-menu.active {
        display: block;
        transform: translateY(0); /* Menü açıkken görünür */
    }

    .close-menu {
        display: block; /* Mobil cihazlarda görünür */
    }

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

    .nav-links li {
        margin: 15px 0;
    }

    .navbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .logo {
        margin: 0;
    }

    .contact-info {
        display: none; /* Mobil cihazlarda iletişim bilgilerini gizle */
    }

    .logo img {
        max-width: 80px; /* Mobil cihazlarda logo daha küçük */
    }

    .google-maps iframe {
        height: 150px; /* Mobil cihazlarda daha küçük harita yüksekliği */
    }

    .location-button {
        bottom: 80px; /* WhatsApp butonunun üstünde */
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .whatsapp-button {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    #hero {
        padding: 50px 0;
    }

    .room-image, .gallery-image {
        height: 120px; /* Mobil cihazlarda daha küçük resim yüksekliği */
    }

    .room-details {
        font-size: 0.85em;
    }

    .room-details h4 {
        font-size: 1em;
    }

    .contact-form {
        padding: 20px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        font-size: 0.95em;
    }

    .form-group input,
    .form-group textarea {
        font-size: 0.95em;
        padding: 10px;
    }

    .contact-btn {
        font-size: 1em;
        padding: 10px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-column {
        margin-bottom: 20px;
    }

    .footer-links li a,
    .footer-social li a,
    .footer-column p {
        font-size: 0.95em;
    }
}