/* TEMEL SIFIRLAMA (RESET) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Oswald', Arial, Helvetica, sans-serif !important;
    background: #132733 url('../images/bg.png');
    color: #ffffff;
    line-height: 1.6;
}

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

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}



/* SECTION 1: HERO (ANA GÖRSEL) */
.hero-section {
    position: relative;
    width: 1170px;
    height: 657px;
    margin: 60px auto 100px;
    background-image: url('../images/heroSection.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}

.logo101 {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 276px;
    height: 178px;
    background-image: url('../images/logo_101.png');
}

.hero-icon {
    position: absolute;
    display: block;
}

.hero-icon-01 {
    background: url('../images/hero_icon_01.png');
    width: 218px;
    height: 232px;
    left: -60px;
    top: 200px;
}

.hero-icon-02 {
    background: url('../images/hero_icon_02.png');
    width: 190px;
    height: 194px;
    left: 0px;
    top: -40px;
}

.hero-icon-04 {
    background: url('../images/hero_icon_04.png');
    width: 220px;
    height: 227px;
    right: 182px;
    top: -20px;
}

.hero-icon-05 {
    background: url('../images/hero_icon_05.png');
    width: 128px;
    height: 133px;
    right: -20px;
    top: 100px;
}

.hero-icon-06 {
    background: url('../images/hero_icon_06.png');
    width: 91px;
    height: 104px;
    right: -5px;
    top: 287px;
}

.hero-content {
    position: absolute;
    bottom: -86px;
    /* Butonun yarısı dışarı taşsın */
    left: 50%;
    transform: translateX(-50%);
}

.play-button {
    display: block;
    width: 344px;
    height: 172px;
    background-image: url('../images/btn_playNow.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 160px;
    font-size: 30px;
    text-align: center;
    transition: transform 0.2s ease;
    /* 2px kalınlık ve %55 opaklıklı siyah stroke */

    text-shadow:
        -2px -2px 0 rgba(0, 0, 0, 0.55),
        2px -2px 0 rgba(0, 0, 0, 0.55),
        -2px 2px 0 rgba(0, 0, 0, 0.55),
        2px 2px 0 rgba(0, 0, 0, 0.55),
        0px 2px 0 rgba(0, 0, 0, 0.55),
        /* Alt boşlukları doldurmak için ekstra */
        2px 0px 0 rgba(0, 0, 0, 0.55),
        /* Sağ boşlukları doldurmak için ekstra */
        0px -2px 0 rgba(0, 0, 0, 0.55),
        /* Üst boşlukları doldurmak için ekstra */
        -2px 0px 0 rgba(0, 0, 0, 0.55);
    /* Sol boşlukları doldurmak için ekstra */
}

.play-button:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.play-button.goto-store-btn {
    background-image: url('../images/btn_goto_store.png');
    width: 444px;
    height: 172px;
    z-index: 2;
}


/* SECTION 2: ÖZELLİKLER */
.features-section {
    background-image: url('../images/bg_section00.png');
    background-position: top center;
    background-repeat: repeat-x;
    padding: 80px 0;
    margin-top: 200px;
}

.features-section .container {
    margin-top: -200px;
    /* Arka planın üzerine çıkartmak için */
}

.features-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.feature-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-item img {
    margin-bottom: 25px;
}

.feature-item h3 {
    font-size: 30px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.feature-item p {
    font-size: 14px;
    color: #cccccc;
    max-width: 300px;
}

/* SECTION 3: İNDİRME */
.download-section {
    position: relative;
    /* ::before'un bu alanı referans alması için çok önemli! */
    background: url('../images/bg_section01.png') no-repeat bottom center;
    padding: 60px 0 0;
}

.download-section::before {
    content: "";
    position: absolute;
    /* Elemanı özgür bırakıp section'ın üstüne yerleştiriyoruz */
    top: 0;
    /* Section'ın en üstüne yapışsın */
    left: 0;
    /* Soldan başlasın */
    width: 100%;
    /* Tüm genişliği kaplasın */

    /* DİKKAT: Burası önemli! Görselinin gerçek yüksekliği neyse onu yazmalısın. 
       Örneğin görsel 50px ise 50px, 15px ise 15px yap. */
    height: 30px;

    z-index: 1;
    /* Arka plan gibi davranması için z-index ayarlıyoruz */
}

.download-section.tavla::before {
    background: url('../images/indicator_line_tavlaPlus.png') no-repeat top center;
}

.download-section.canak::before {
    background: url('../images/indicator_line_canakOkeyPlus.png') no-repeat top center;
}

.download-section.okey::before {
    background: url('../images/indicator_line_okeyPlus.png') no-repeat top center;
}


/* İsteğe bağlı garanti: İçerikteki yazıların/butonların çizginin altında 
   tıklanamaz hale gelmesini önlemek için container'ı bir katman öne alıyoruz */
.download-section .container {
    position: relative;
    z-index: 2;
}

.download-section .arrow {
    background: url('../images/bg_arrow.png') no-repeat;
    width: 109px;
    height: 210px;
    position: absolute;
}

.download-section .arrow.arrow-left {
    transform: rotateY(180deg);
    left: 50%;
    margin-left: -500px;
}

.download-section .arrow.arrow-right {
    left: inherit;
    right: 50%;
    margin-right: -500px;
}

.download-info {
    margin-bottom: 50px;
}

.download-info .main-title {
    font-size: 38px;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
    max-width: 900px;
    margin: 0 auto;
    line-height: 50px;
}

/* YENİ: Görsel ve butonların ortak taşıyıcısı */
.qr-phones-container {
    position: relative;
    /* İçindeki absolute butonlar burayı referans alacak */
    display: inline-block;
    /* Kapsayıcının sadece içindeki resim kadar yer kaplamasını sağlar */
    margin: 0 auto;
}

.qr-bg-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: -6px;
}

/* YENİ: Butonları görselin üzerine konumlandırma */
.store-buttons {
    position: absolute;
    bottom: 10px;
    /* Butonların görselin en altından ne kadar yukarıda duracağını buradan ayarlayabilirsin */
    left: 50%;
    transform: translateX(-50%);
    /* Tam merkeze hizalar */
    display: flex;
    gap: 45px;
    /* İki buton arasındaki boşluk */
    width: 100%;
    justify-content: center;
}

.store-button {
    border-radius: 10px;
    width: 232px;
    /* Orijinal boyut */
    height: 74px;
    background-size: contain;
    background-repeat: no-repeat;
    /* Orantıyı korumak için auto */
    transition: transform 0.2s ease;
}

.store-button.store-button-appstore {
    background-image: url('../images/btn_appStore02.png');
}

.store-button.store-button-googlePlay {
    background-image: url('../images/btn_googlePlay02.png');
}

.appicon { 
    border-radius: 40px;
    margin: 30px 0;
}
.appicon.glow-canakPlus {
    box-shadow: 0 12px 15px -3px #000000,
            0 0 40px 10px rgba(152, 214, 110, 0.35);
}

.appicon.glow-okeyPlus {
    box-shadow: 0 12px 15px -3px #000000,
            0 0 40px 10px rgba(255, 68, 68, 0.5);
}
.appicon.glow-tavla {
    box-shadow: 0 12px 15px -3px #000000,
            0 0 40px 10px rgba(117, 86, 226, 0.75);
}

.glow-okeyPlus {
    -webkit-box-shadow: 0px 0px 10px 5px rgba(255, 68, 68, 1);
    -moz-box-shadow: 0px 0px 10px 5px rgba(255, 68, 68, 1);
    box-shadow: 0px 0px 10px 5px rgba(255, 68, 68, 1);
}

.glow-canakPlus {
    -webkit-box-shadow: 0px 0px 10px 5px rgba(152, 214, 110, 1);
    -moz-box-shadow: 0px 0px 10px 5px rgba(152, 214, 110, 1);
    box-shadow: 0px 0px 10px 5px rgba(152, 214, 110, 1);
}
.glow-tavla {
        -webkit-box-shadow: 0px 0px 10px 5px rgba(117, 86, 226, 0.75);
    -moz-box-shadow: 0px 0px 10px 5px rgba(117, 86, 226, 0.75);
    box-shadow: 0px 0px 10px 5px rgba(117, 86, 226, 0.75);
}

.store-button.glow-default {
    -webkit-box-shadow: 0px 0px 10px 5px rgba(119, 199, 239, 1);
    -moz-box-shadow: 0px 0px 10px 5px rgba(119, 199, 239, 1);
    box-shadow: 0px 0px 10px 5px rgba(119, 199, 239, 1);
}


.store-button:hover {
    transform: scale(1.05);
}

/* SECTION 4: FOOTER */
.footer-section {
    background-color: #132733;
    padding: 60px 0;
    font-size: 12px;
    color: #4485b2;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.footer-left {
    flex: 0 0 100px;
}

.zynga-logo {
    width: 60px;
}

.footer-center {
    flex: 1;
    text-align: left;
}

.footer-links {
    margin-bottom: 15px;
}

.footer-links a {
    margin-right: 10px;
    color: #fff;
}

.footer-links a:hover {
    color: #ccc;
}

.copyright {
    max-width: 800px;
    line-height: 1.4;
}

.footer-right {
    flex: 0 0 150px;
}

.language-selector select {
    background-color: #132733;
    color: #ffffff;
    border: 1px solid #333333;
    padding: 8px 12px;
    border-radius: 4px;
}


/* ==============================================================
   GAME.HTML İÇİN YENİ CSS KODLARI
   ============================================================== */

/* ORTAK BAŞLIK STİLLERİ */
.section-title {
    font-size: 36px;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.section-subtitle {
    font-size: 20px;
    color: #cccccc;
    margin-bottom: 40px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
}

/* ÜST MENÜ (NAVBAR) */
.top-navbar {
    background-color: #011318;
    /* Header arka plan rengi */
    padding: 15px 0;
    position: relative;
    /* AÇILIR MENÜNÜN TAM EKRAN OLABİLMESİ İÇİN REFERANS NOKTASI YAPTIK */
}

.nav-container {
    display: flex;
    justify-content: flex-start;
    /* Elemanları sola doğru hizalamaya başlar */
    align-items: center;
}

.nav-logo {
    background: url('../images/logo_101_header.png');
    width: 118px;
    height: 68px;
    text-indent: -9999px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    margin-left: 50px;
    /* Logo ile linkler arasına 50px boşluk ekler */
}

.nav-links a {
    color: #ffffff;
    font-size: 18px;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: #4485b2;
}

.nav-links>li {
    /* position: relative;  Açılır menünün ekranı kaplaması için bu satırı KALDIRDIK */
    padding: 10px 0;
    /* Fareyle üstüne gelirken menünün hemen kaybolmasını önler */
}

/* OK İŞARETİ */
.arrow {
    font-size: 14px;
    margin-left: 4px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* ==============================================================
   AÇILIR MENÜ (TAM EKRAN DROPDOWN) STİLLERİ
   ============================================================== */

.dropdown-menu {
    position: absolute;
    top: 100%;       
    left: 0;
    width: 100%;     
    background-color: #021a20; 
    border-top: 1px solid #132733; 
    border-bottom: 1px solid #132733;
    border-radius: 0; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    padding: 15px 0;
    list-style: none;
    z-index: 100;    
    
    display: flex;
    justify-content: flex-start; /* Ortalama iptal edildi, sola yaslandı */
    
    /* SİHİRLİ HESAPLAMA: Ekranın sol kenarından "Diğer Oyunlarımız" butonuna olan mesafeyi bulur */
    /* Container Dış Boşluğu + Container İç Boşluğu(20) + Logo(118) + Margin(50) = 188px */
    padding-left: calc(max(50% - 600px, 0px) + 168px);
    
    gap: 30px; /* Linkler arası boşluk */
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px); 
    transition: all 0.3s ease;
}
/* ANA LİNKE (Diğer Oyunlarımız) HOVER OLUNCA MENÜYÜ GÖSTER */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* Kendi orijinal konumuna yumuşakça kayar */
}

/* HOVER OLUNCA OKU YUKARI ÇEVİR */
.dropdown:hover .arrow {
    transform: rotate(180deg);
}

/* ALT LİNK STİLLERİ */
.dropdown-menu li {
    width: auto;
    /* Tam ekran olduğu için %100 iptal edildi, içeriğe göre uzayacak */
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    font-size: 16px;
    color: #cccccc !important;
    transition: all 0.2s ease;
    border-radius: 4px;
    /* Üzerine gelince hover efekti için hafif yumuşak köşeler */
}

/* ALT LİNKLERİN ÜZERİNE GELİNCE */
.dropdown-menu a:hover {
    background-color: #132733;
    /* Temanın arka plan rengiyle aydınlatma */
    color: #ffffff !important;
}

/* SOSYAL MEDYA İKONLARI */
.social-icons {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 12px;
    /* İkonlar arasındaki boşluk (tasarıma göre değiştirebilirsin) */
}

.social-link {
    display: block;
    width: 32px;
    height: 32px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* İkonların orantısını bozmadan 32x32 içine oturtur */
    display: block;
}

/* Hover (Üzerine Gelme) Efekti */
.social-link:hover {
    transform: translateY(-3px);
    /* İkonu hafifçe yukarı kaydırır */
    opacity: 0.8;
    /* Rengini çok hafif soldurarak şık bir his verir */
}

/* HATA BARI */
.alert-bar {
    background-color: #a71818;
    color: #ffffff;
    text-align: center;
    padding: 10px 20px;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.hidden {
    display: none;
}

/* OYUN EKRANI */
.game-view-section {
    padding: 40px 0;

}

/* TAM EKRAN BUTONU */
.fullscreen-btn {
    display: block;
    margin-left: auto;
    margin-bottom: 8px;
    background: url('../images/icon_fullscreen.png') no-repeat center;
    width: 38px;
    height: 38px;
    border: 0;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Butonun üzerine gelince (Hover) */
.fullscreen-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    /* Arka planı koyulaştır */
    border-color: #ffffff;
    /* Çerçeveyi belirginleştir */
    transform: scale(1.05);
    /* Çok hafif büyüt */
}

.game-frame {
    display: flex;
    justify-content: center;
    position: relative;
}

.game-frame img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* WEB MAĞAZASI */
.web-store-section {
    padding: 40px 0 0;
    background: #132733 url('../images/bg_webStore_section.png') repeat-x bottom center;
    position: relative;
}

.web-store-section .center-arrow {
    background: transparent url('../images/bg_arrow_center.png') no-repeat;
    width: 582px;
    height: 86px;
    position: absolute;
    left: 50%;
    margin-left: -291px;
    bottom: 80px;
}

.web-store-section:after {
    background: url('../images/bg_web_store_shapes.png') no-repeat bottom center;

    content: "";
    position: absolute;
    /* Elemanı özgür bırakıp section'ın üstüne yerleştiriyoruz */
    bottom: 0;
    /* Section'ın en üstüne yapışsın */
    left: 0;
    /* Soldan başlasın */
    width: 100%;
    /* Tüm genişliği kaplasın */

    /* DİKKAT: Burası önemli! Görselinin gerçek yüksekliği neyse onu yazmalısın. 
    Örneğin görsel 50px ise 50px, 15px ise 15px yap. */
    height: 489px;

    z-index: 1;
    /* Arka plan gibi davranması için z-index ayarlıyoruz */
}

.relative-container {
    position: relative;
    /* Oyuna Dön butonu için referans */
}

.store-cards {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 40px;
}

.store-card {
    flex: 0 0 425px;
}

.store-card img {
    margin-bottom: 20px;
}

.store-card p {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #ffffff;
}

.store-action {
    display: flex;
    justify-content: center;
}

.goto-store-btn img {
    width: 250px;
    transition: transform 0.2s;
}

.goto-store-btn img:hover,
.discover-btn img:hover,
.submit-btn img:hover {
    transform: scale(1.05);
}

/* ==============================================================
   YUKARI ÇIK (BACK TO TOP) BUTONU - GÜNCELLENMİŞ ANİMASYONLU
   ============================================================== */
.back-to-top {
    position: fixed;
    bottom: 110px;
    right: 40px;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    
    /* BAŞLANGIÇ DURUMU (Gizli ve Küçük) */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5); /* Yarı boyutta başlar (Pop efekti için) */
    
    /* Sadece gizlenirken devreye girecek yumuşak geçiş */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; 
}

/* JS BU SINIFI EKLEDİĞİNDE:
   Önceki 'all 0.3s transition' yerine, animasyonu tetikliyoruz 
*/
.back-to-top.show {
    visibility: visible;
    
    /* Aşağıda tanımladığımız 'popIn' animasyonunu 0.4 saniye çalıştırır */
    animation: popIn 0.4s ease-out forwards; 
}

/* Hover (Üzerine gelme) efekti - Animasyon bittikten sonra çalışır */
.back-to-top:hover {
    /* Animasyon bittiğinde scale(1) olduğu için hover'da 1.1 yapabiliriz */
    transform: scale(1.1) !important; 
    filter: brightness(1.25);
}


/* ==============================================================
   CSS KEYFRAMES (Simple Pop-in Animasyonu Tanımı)
   ============================================================== */
@keyframes popIn {
    0% {
        opacity: 0;
        /* Aşağıdan başlar, çok küçüktür */
        transform: scale(0.5) translateY(20px); 
    }
    70% {
        /* Hedef boyutu biraz geçer (tatlı bir zıplama hissi verir) */
        transform: scale(1.25) translateY(0); 
        filter: brightness(2);
    }
    100% {
        /* Final boyutu ve konumu (tam opak) */
        opacity: 1;
        transform: scale(1) translateY(0); 
    }
}

/* DİĞER OYUNLARIMIZ */
.other-games-section {
    background-color: #132733;
    /* Arka planı hafif koyulaştırır */
    padding: 60px 0;
}

.games-grid {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-top: 40px;
}

.game-card {
    text-align: center;
    width: 363px;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
}

.game-icon {
    margin-bottom: 30px;
    border-radius: 40px;
    box-shadow: 0 12px 15px -3px #000000,
            0 0 40px 10px rgba(119, 199, 239, 0.35);
}


.game-card h3 {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 10px;
}

.game-card p {
    font-size: 20px;
    color: #cccccc;
    margin-bottom: 20px;
    line-height: 1.4;
}

.discover-btn {
    color: #fff;
    background: transparent url('../images/btn_kesfet.png');
    height: 98px;
    width: 208px;
    display: inline-block;
    font-size: 30px;
    transition: transform 0.2s;
    line-height: 90px;
    font-family: "Oswald", Arial, Helvetica, sans-serif;
    text-shadow:
        -2px -2px 0 rgba(0, 0, 0, 0.55),
        2px -2px 0 rgba(0, 0, 0, 0.55),
        -2px 2px 0 rgba(0, 0, 0, 0.55),
        2px 2px 0 rgba(0, 0, 0, 0.55),
        0px 2px 0 rgba(0, 0, 0, 0.55),
        /* Alt boşlukları doldurmak için ekstra */
        2px 0px 0 rgba(0, 0, 0, 0.55),
        /* Sağ boşlukları doldurmak için ekstra */
        0px -2px 0 rgba(0, 0, 0, 0.55),
        /* Üst boşlukları doldurmak için ekstra */
        -2px 0px 0 rgba(0, 0, 0, 0.55);
    /* Sol boşlukları doldurmak için ekstra */  
}

.discover-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* YARDIM FORMU */
.help-section {
    background: #376a89 url('../images/bg_feedback.png') repeat-x bottom center;
    /* Form arkasındaki mavimsi/turkuaz alan */
    padding: 60px 0;
}

.help-form {
    max-width: 450px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
}

.help-form input,
.help-form input:focus,
.help-form textarea,
.help-form textarea:focus {
    width: 100%;
    background-color: #132733 !important;
    /* Koyu form input arka planı */
    border: 1px solid #132733;
    padding: 15px 20px;
    color: #ffffff;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 14px;
    border-radius: 10px;
    outline: none;
    resize: none;
}

/* Chrome, Safari, Edge ve Opera için Otomatik Doldurma Stili */
.help-form input:-webkit-autofill,
.help-form input:-webkit-autofill:hover,
.help-form input:-webkit-autofill:focus,
.help-form input:-webkit-autofill:active {
    /* Arka plan rengini (#0b1a20) gölge ile içeri basıyoruz */
    -webkit-box-shadow: 0 0 0 30px #132733 inset !important;

    /* Yazı rengini (#ffffff) koruyoruz */
    -webkit-text-fill-color: #ffffff !important;

    /* İsteğe bağlı ekstra garanti: Rengin değişmesini 5000 saniye geciktirir */
    transition: background-color 5000s ease-in-out 0s;
}

.help-form input::placeholder,
.help-form textarea::placeholder {
    color: #4485b2;
}

.help-form input:focus,
.help-form textarea:focus {
    border-color: #4485b2;
}

.form-policy {
    font-size: 11px;
    color: #a0c4d6;
    text-align: left;
    margin-bottom: 10px;
}

.submit-btn {
    border: none;
    cursor: pointer;
    align-self: center;
    background: url(../images/btn_form_send.png);
    width: 240px;
}
.submit-btn:hover{
    
    transform: scale(1);
    filter: brightness(1);
}

/* FORM BİLDİRİM MESAJLARI VE HATA DURUMLARI */
/* FORM BİLDİRİM MESAJLARI VE HATA DURUMLARI */
#form-message {
    background: url(../images/form_message_bg.png) no-repeat center;
    font-size: 14px;
    padding: 10px;
    border-radius: 4px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    font-weight: bold;
    position: absolute;
    top: 157px;
    z-index: 4;
    height: 40px;
    width: 653px;
    left: 50%;
    margin-left: -325px;
}

.msg-error {
    background-color: rgba(255, 0, 0, 0.2);
    color: #ff4d4d;
    /*
    border: 1px solid #ff4d4d;
    */
}

.msg-success {
    background-color: rgba(0, 255, 0, 0.2);
    color: #4dff4d;
    /*
    border: 1px solid #4dff4d;
    */
}

/* Hatalı input kenarlığı */
.help-form input.input-error,
.help-form textarea.input-error {
    border-color: #ff4d4d !important;

}

/* Buton pasif (yükleniyor) durumu */
.submit-btn:disabled {
    background: url(../images/btn_form_send_disabled.png) no-repeat;
    cursor: not-allowed;
    color: #ccc;
    width:240px;
    position: relative;
}

/* ==============================================================
   NASIL OYNANIR SAYFASI İÇİN CSS
   ============================================================== */

.how-to-play-section {
    padding: 60px 0 100px;
    background-color: #132733;
    /* Arka plan zaten body'den geliyor */
}

/* Metnin okunabilirliğini artırmak için çok geniş alana yayılmasını önleriz */
.text-content {
    text-align: left;
    /*max-width: 950px; */
    margin: 0 auto;
}

/* SEO için H1 Başlığı */
.page-main-title {
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 42px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 60px;
    text-transform: uppercase;
    color: #ffffff;
}

/* SEO için H2 Alt Başlıkları */
.content-subtitle {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: #4485b2;
    /* Görseldeki mavi renk */
    margin-top: 40px;
    margin-bottom: 15px;
    font-weight: normal;
}

/* SEO için H3 Alt Başlıkları */
.content-sub-subtitle {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #a0c4d6;
    /* H2'den biraz daha açık mavi */
    margin-top: 25px;
    margin-bottom: 10px;
    font-weight: normal;
}

/* Paragraf ve Liste Metinleri */
.how-to-play-section p,
.how-to-play-section ul li {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #cccccc;
    margin-bottom: 10px;
    line-height: 1.3;
}

.how-to-play-section ul li {
    list-style-type: disc;

}

/* Standart Listeler */
.how-to-play-section ul,
.how-to-play-section ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

/* Özel Kırmızı Numaralı Liste (Oyun 3 şekilde bitebilir kısmı) */
.colored-list {

    padding-left: 0;
    counter-reset: revert;
    /* Özel numaratörü başlat */
}

.colored-list li {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #cccccc;
    position: relative;
    padding-left: 0px;
    margin-bottom: 5px;
}

.canak-section {
    padding: 80px 0 20px;
    background: #3b4b2f url('../images/canak_bg_top.png') repeat-x top center;
}

.download-section.canak {
    background: #3b4b2f url('../images/canak_bg_bottom.png') repeat-x bottom center;
}

.okey-section {
    padding: 80px 0 20px;
    background: #6c1e21 url('../images/okey_bg_top.png') repeat-x top center;
}

.download-section.okey {
    background: #6c1e21 url('../images/okey_bg_bottom.png') repeat-x bottom center;
}

.tavla-section {
    padding: 80px 0 20px;
    background: #2a1281 url('../images/tavla_bg_top.png') repeat-x top center;
}

.download-section.tavla {
    background: #2a1281 url('../images/tavla_bg_bottom.png') repeat-x bottom center;
}


.tavla-section h3,
.okey-section h3,
.canak-section h3 {
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 30px;
}

.hero-icon-checker {
    background: url('../images/tavla_icon_checker.png');
    width: 186px;
    height: 190px;
    left: 50%;
    top: 450px;
    margin-left: -460px;
}

.hero-icon-dice {
    background: url('../images/tavla_icon_dice.png');
    width: 171px;
    height: 172px;
    right: 50%;
    top: 350px;
    margin-right: -450px;
}

.hero-icon-tile-5 {
    background: url('../images/canak_icon_tile_5.png');
    width: 201px;
    height: 210px;
    right: 50%;
    margin-right: -450px;
    top: 350px;
}

.hero-icon-tile-8 {
    background: url('../images/canak_icon_tile_8.png');
    width: 178px;
    height: 197px;
    left: 50%;
    margin-left: -450px;
    top: 450px;
}


/* ==============================================================
   GAME VIEW SLIDER (3D STACKED EFFECT)
   ============================================================== */

.game-slider-section {
    padding: 0 0 80px;
}

.game-slider-section.tavla {
    background-color: #2a1281;
}

.game-slider-section.canak {
    background-color: #3b4b2f;
}

.game-slider-section.okey {
    background-color: #6c1e21;
}

.slider-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    /* Side sliderların sığması için geniş alan */
    height: 640px;
    /* Ana slider yüksekliği + biraz boşluk */
    margin: 0 auto;
    overflow: hidden;
    /* Dışarı taşan sliderları gizle */
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* TEMEL SLIDE STİLİ */
.slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Ortadan hizalamaya başla */
    transition: all 0.5s ease-in-out;
    /* Geçiş animasyonu */
    border-radius: 8px;
    /* Projenin genel stili */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    /* Derinlik gölgesi */
    cursor: pointer;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Görseli bozmadan sığdır */
    border-radius: 8px;
    display: block;
}

/* --- ANA (ORTADAKİ) GÖRSEL STİLİ --- */
.slide.active {
    width: 1015px;
    /* İstenen ölçü */
    height: 571px;
    /* İstenen ölçü */
    z-index: 10;
    /* EN ÜSTTE */
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* --- YANDAKİ (KÜÇÜK VE ARKADA) GÖRSELLERİN ORTAK STİLİ --- */
.slide.prev,
.slide.next {
    width: 531px;
    /* İstenen küçük ölçü */
    height: 445px;
    /* İstenen küçük ölçü */
    z-index: 5;
    /* Ana görselin altında */
    opacity: 0.5;
    /* Arkada olduğu hissi için hafif şeffaflık */
}

/* SOLDTAKİ GÖRSEL: Ana görselin soluna, biraz içine girecek şekilde */
.slide.prev {
    /* Hesabı: Ortadan başla (50%) - Ana görselin yarısı (507px) - Boşluk + NEGATİF OVERLAP */
    /* Ufak bir matematik: Ana görselin sol kenarı 50% - 507px. 
       Küçük görselin sağ kenarı buraya değseydi çok uzak olurdu.
       Küçük görseli 50% - 507px - 100px (overlap) konumuna çekiyoruz */
    left: calc(50% - 407px);
    transform: translate(-100%, -50%) scale(1);
    /* Kenardan hizala */
}

/* SAĞDAKİ GÖRSEL: Ana görselin sağına, biraz içine girecek şekilde */
.slide.next {
    /* Hesabı: Ortadan başla (50%) + Ana görselin yarısı (507px) + Boşluk - NEGATİF OVERLAP */
    left: calc(50% + 407px);
    transform: translate(0%, -50%) scale(1);
    /* Kenardan hizala */
}

/* Hover Efekti (Yan sliderlar için) */
.slide.prev:hover,
.slide.next:hover {
    opacity: 0.8;
    z-index: 11;
    /* Geçici olarak aktifin üzerine çıksın */
}

/* GİZLİ GÖRSELLER (Ekran dışında) */
.slide.hidden {
    width: 531px;
    height: 445px;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

/* Gizlilerin geliş yönüne göre pozisyonu (Animasyon için) */
.slide.hidden.slide-1,
.slide.hidden.slide-2 {
    left: 150%;
}

/* Sağdan gelecekler */
.slide.hidden.slide-4,
.slide.hidden.slide-5 {
    left: -150%;
}

/* Soldan gelecekler */


/* NAVİGASYON BUTONLARI */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(33, 94, 117, 0.7);
    /* Projenin mavi rengi, yarı şeffaf */
    color: #ffffff;
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    cursor: pointer;
    z-index: 20;
    /* Her şeyin üzerinde */
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-btn:hover {
    background-color: rgba(68, 133, 178, 1);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 30px;
}

.next-btn {
    right: 30px;
}

/* ==============================================================
   GENEL MOBİL UYUMLULUK (RESPONSIVE) AYARLARI
   ============================================================== */

/* --- TABLET BOYUTU İÇİN (MAX 1024px) --- */
@media screen and (max-width: 1024px) {
    .download-section .arrow.arrow-right {
        display: none;
    }

    /* Genel Container */
    .container {
        padding: 0 15px;
    }

    /* Navbar daralıyor */
    .nav-links {
        margin-left: 20px;
        gap: 15px;
    }

    .nav-links a {
        font-size: 15px;
    }

    /* Hero Bölümü (Ana Görsel) */
    .hero-section {
        width: 100%;
        /* Sabit 1170px'i ezdik */
        height: 50vw;
        /* Ekran genişliğine göre orantılı küçülür */
        margin-top: 30px;
    }

    .logo101 {
        transform: translateX(-50%) scale(0.8);
        /* Logoyu biraz ufalt */
        top: -20px;
    }

    /* Havada uçuşan ikonları tablet/mobilde gizle (Çok karmaşa yaratır) */
    .hero-icon {
        display: none !important;
    }

    /* İndirme (Telefonlar) Bölümü */
    .qr-phones-container {
        width: 100%;
    }

    .store-buttons {
        position: relative;
        bottom: 0;
        gap: 10px;
    }

    .store-button img {
        width: 220px;
        /* Butonları biraz küçült */
    }

    .qr-bg-img {
        margin-bottom: 0;
    }

    /* Diğer Oyunlarımız (Grid) */
    .games-grid {
        gap: 30px;
    }

    .game-card {
        width: 30%;
        /* 3'lü sığması için */
    }

    .discover-btn {
        width: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Footer */
    .footer-container {
        flex-direction: column;
        /* Alt alta diz */
        text-align: center;
        gap: 30px;
    }

    .footer-center {
        text-align: center;
    }

    .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
}


/* --- MOBİL TELEFON BOYUTU İÇİN (MAX 768px) --- */
@media screen and (max-width: 768px) {

    /* Ortak Başlıklar */
    .section-title,
    .page-main-title {
        margin-bottom: 20px;
    }

    /* Navbar'ı mobilde alt alta alıyoruz */
    .nav-container {
        flex-direction: column;
        gap: 15px;
    }

    .nav-links {
        margin-left: 0;
        flex-wrap: wrap;
        /* Sığmazsa alt satıra geçsin */
        justify-content: center;
    }

    .social-icons {
        margin-left: 0;
        justify-content: center;
    }

    /* Tam ekran açılır menü mobilde taşıyabilir, biraz daraltalım */
    .dropdown-menu {
        flex-direction: column;
        /* Mobilde alt alta açılsın */
        align-items: center;
        gap: 10px;
    }

    /* Hero (Play Butonu) */
    .play-button {
        width: 280px;
        height: 140px;
        font-size: 24px;
        bottom: -40px;
        line-height: 140px;
    }
    .play-button.goto-store-btn{
        line-height: 168px;
    }

    /* ÖZELLİKLER BÖLÜMÜ - YAN YANA OLAN 3 KUTUYU ALT ALTA ALMA */
    .features-grid {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }

    .feature-item {
        width: 100%;
        max-width: 350px;
    }

    /* DİĞER OYUNLARIMIZ BÖLÜMÜ - YAN YANA OLAN 3 KUTUYU ALT ALTA ALMA */
    .games-grid {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }

    .game-card {
        width: 100%;
        max-width: 350px;
    }

    /* WEB MAĞAZASI KARTLARI - ALT ALTA ALMA */
    .store-cards {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .store-card {
        flex: 1 1 auto;
        width: 100%;
        max-width: 350px;
    }

    /* İndirme (App Store / Play Store) Butonları Mobilde Alt Alta Dursun */
    .store-buttons {
        flex-direction: column;
        align-items: center;
        bottom: 0px;
        /* Görselden biraz daha aşağı sarkıtalım */
    }

    .store-button img {
        width: 200px;
    }

    /* Nasıl Oynanır Sayfası Metinleri */
    .page-main-title {
        font-size: 32px;
    }

    .how-to-play-section p,
    .how-to-play-section ul li,
    .colored-list li {
        font-size: 14px;
    }

    /* Yukarı Çık Butonunu Küçült */
    .back-to-top {
        width: 80px;
        height: 80px;
        bottom: 20px;
        right: 20px;
    }

    /* Tavla, Çanak, Okey Sayfalarındaki H3 Başlıkları */
    .tavla-section h3,
    .okey-section h3,
    .canak-section h3 {
        font-size: 22px;
    }

    .footer-section {
        padding: 20px 0 0;
    }

    .footer-left {
        flex: 0 0 50px;
    }

    .footer-right {
        padding: 0;
        flex: 0 0 50px;
    }
}

/* ==============================================================
   MOBİL UYUMLULUK (RESPONSIVE) AYARLARI
   ============================================================== */

/* Tablet Boyutu İçin (Max 1024px) */
@media screen and (max-width: 1024px) {
    .slider-container {
        height: 500px;
    }

    /* Ana görseli ufalttık */
    .slide.active {
        width: 800px;
        height: auto;
        aspect-ratio: 1015 / 571;
        /* Orijinal görsel orantısını korur */
    }

    /* Yan görselleri ufalttık ve arayı daralttık */
    .slide.prev,
    .slide.next {
        width: 400px;
        height: auto;
        aspect-ratio: 531 / 445;
    }

    .slide.prev {
        left: calc(50% - 320px);
    }

    .slide.next {
        left: calc(50% + 320px);
    }
}

/* Mobil Boyut İçin (Max 768px) */
@media screen and (max-width: 768px) {
    .slider-container {
        height: 350px;
    }

    /* Mobilde ana görsel ekranın %90'ını kaplasın */
    .slide.active {
        width: 90%;
    }

    /* Yan görselleri mobilde iyice ufalttık ve arkaya doğru ittik */
    .slide.prev,
    .slide.next {
        width: 60%;
        opacity: 0.3;
        /* Arkadakiler dikkat dağıtmasın diye daha şeffaf */
    }

    /* Mobilde birbirlerine çok yakın (üst üste binmiş) olacaklar */
    .slide.prev {
        left: 35%;
        transform: translate(-100%, -50%);
    }

    .slide.next {
        left: 65%;
        transform: translate(0%, -50%);
    }

    /* Mobilde yön butonlarını ufalttık ve içeri aldık */
    .slider-btn {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }
}


/* ==============================================================
   HAMBURGER MENÜ VE MOBİL NAVİGASYON (MASAÜSTÜ & MOBİL AYARLARI)
   ============================================================== */

/* MASAÜSTÜNDE HAMBURGER BUTONU GİZLİ, WRAPPER AÇIK */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 101;
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.nav-menu-wrapper {
    display: flex;
    align-items: center;
    width: 90%;
    /* Sosyal ikonların sağa itilebilmesi için %100 genişlik */
}

/* MOBİL GÖRÜNÜM (MAX 768px) */
@media screen and (max-width: 768px) {
    .web-store-section .center-arrow {
        display: none;
    }

    /* Logoyu sola, menüyü sağa sabitle */
    .nav-container {
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    /* Hamburger Butonunu Göster */
    .hamburger-menu {
        display: flex;
    }

    /* Hamburger Butonu Tıklanınca Çarpıya Dönüşsün */
    .hamburger-menu.is-active .bar:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }

    .hamburger-menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.is-active .bar:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
    }

    /* Menü Kapsayıcısını Ekrana Göre Ayarla ve Gizle */
    .nav-menu-wrapper {
        position: absolute;
        top: 100%;
        /* Header'ın bittiği yerden başlar */
        left: 0;
        width: 100%;
        background-color: #011318;
        /* Header rengi */
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        border-top: 1px solid #132733;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
        display: none;
        /* Başlangıçta gizli */
        z-index: 100;
    }

    /* JS Tarafından Menü Açıldığında */
    .nav-menu-wrapper.active {
        display: flex;
    }

    /* Linkler Alt Alta Dizilir */
    .nav-links {
        flex-direction: column;
        margin-left: 0;
        width: 100%;
        gap: 15px;
    }

    .nav-links>li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        /* Mobilde şık çizgiler */
        padding-bottom: 10px;
    }

    /* Sosyal İkonları Sol Alta Sabitle */
    .social-icons {
        margin-left: 0;
        margin-top: 10px;
        justify-content: flex-start;
        width: 100%;
        gap: 20px;
    }

    /* --- MOBİL DROP-DOWN (AKORDİYON) STİLİ --- */
    .dropdown-menu {
        position: static;
        /* Mobilde absolute olmasın, aşağı itsin */
        width: 100%;
        box-shadow: none;
        border: none;
        background-color: transparent;
        padding: 10px 0 0 0;
        /* Hafif sağdan içeride başlasın */
        display: none;
        /* Mobilde hover yerine tıklama ile açılacak */
        opacity: 1;
        visibility: visible;
        transform: none;
        flex-direction: column;
        gap: 10px;
    }

    .dropdown-menu a {
        font-size: 14px;
        /* Alt menü elemanları biraz daha ufak */
        padding: 5px 10px;
    }

    /* JS Tarafından Dropdown Açıldığında */
    .dropdown.open .dropdown-menu {
        display: flex;
    }

    /* Menü Açıkken Oku Döndür */
    .dropdown.open .arrow {
        transform: rotate(180deg);
    }
}
/* ==============================================================
   GÖNDER BUTONU 3 NOKTA (LOADING) ANİMASYONU
   ============================================================== */
.submit-btn .loading-txt,
.submit-btn .loading-dots {
    display: inline;
    font-size: 30px;
}
.submit-btn .loading-dots {
    position: absolute;
    left: 205px;
    width: 40px;
    text-align: left;
}