/* General Resets and Fonts */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: white;
    line-height: 1.6;
}

/* Main Header Style (Common to all headers) */
.main-header {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: white;
    text-align: center;
    padding-top: 28.78%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    top: 0;

}

/* Specific Header Backgrounds for Each Page */
.header-home {
    background-image: url('header_bg.webp'); /* Homepage Header Image */
}

.header-agreements {
    background-image: url('images/header-agreements-bg.jpg'); /* Agreements Page Header Image */
}

.header-contact-about {
    background-image: url('images/header-contact-about-bg.jpg'); /* Contact & About Us Page Header Image */
}

/* Header text styles (Still visible on headers) */
.main-header h1 {
    font-size: 4vw;
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(255,255,255,255.7);
    position: absolute;
    top: 0%;
    line-height: normal;
}

.main-header p {
    font-size: 2vw;
    text-shadow: 1px 1px 3px rgba(255,255,255,0.7);
    position: absolute;
    top: 50%;
    line-height: normal;
}

/* --- Main Content Container --- */
.container {
    max-width: 650px; /* Belirttiğiniz maksimum genişlik */
    margin: auto auto;
    padding: 34% 15px;
    box-shadow: none;
}

/* Common Styles for All Sections containing Buttons */
section {
    margin-bottom: 30px;
    padding: 0;
    border: none;
    border-radius: 15px;
    background-color: transparent;
    text-align: center;
    position: relative; /* İçindeki butona göre konumlandırma için */
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0;
    box-shadow: none;
}

/* Remove text styles for sections as they won't contain text anymore */
section h2, section p {
    display: none;
}

/* --- Tek Sütunlu Bölüm Stili --- */
.single-column-section {
    width: 100%;
    margin-bottom: 20px;
}

/* --- Buton Kapsayıcı (Div) Stili --- */
.button-wrapper {
    display: block;
    width: 100%;
    padding-top: 31.021%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Normal gölge */
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; /* Animasyonlar */
    position: relative; /* İçindeki link için konumlandırma */
    overflow: hidden; /* Eğer görsel scale olursa köşelerdeki taşmaları engellemek için */
    background-color: transparent;
}
.item-wrapper {
    display: block;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Normal gölge */
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; /* Animasyonlar */
    position: relative; /* İçindeki link için konumlandırma */
    overflow: hidden; /* Eğer görsel scale olursa köşelerdeki taşmaları engellemek için */

}
.item-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    display: block; /* Görseli blok olarak göster */
}
/* --- Buton Kapsayıcı (Div) Stili --- */
.feature-wrapper {
    display: block;
    padding-top: 90%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Normal gölge */
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; /* Animasyonlar */
    position: relative; /* İçindeki link için konumlandırma */
    overflow: hidden; /* Eğer görsel scale olursa köşelerdeki taşmaları engellemek için */

}
.feature-wrapper h1 {
    position: absolute;
    top: 0%;
    left: 10%; /* Soldan %10 */
    color: white;
    font-size: calc(min(100vw, 690px) * 0.03);
    text-align: left;
    z-index: 5; /* Üstte görünmesi için */
    line-height: normal;
}
.feature-wrapper p {
    position: absolute;
    top: 30%;
    left: 10%;
    color: white;
    font-size: calc(min(100vw, 690px) * 0.02);
    display: block;
    text-align: left;
    z-index: 5; /* Üstte görünmesi için */
    width: 45%; /* Metin genişliği */
    line-height: normal;
}
#feature-wrapper-1 {
    background-image:url('features/cpu.webp') ;
}
#feature-wrapper-2 {
    background-image:url('features/nvme_ssd.webp') ;
}
#feature-wrapper-3 {
    background-image:url('features/endurance.webp') ;
}
#feature-wrapper-4 {
    background-image:url('features/zfs_file_system.webp') ;
}
#feature-wrapper-5 {
    background-image:url('features/mirror_disks.webp') ;
}
#feature-wrapper-6 {
    background-image:url('features/arc_cache.webp') ;
}
#feature-wrapper-7 {
    background-image:url('features/backups.webp') ;
}
#feature-wrapper-8 {
    background-image:url('features/panel.webp') ;
}
.price-wrapper {
    display: block;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Normal gölge */
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; /* Animasyonlar */
    position: relative; /* İçindeki link için konumlandırma */
    overflow: hidden; /* Eğer görsel scale olursa köşelerdeki taşmaları engellemek için */

}
/* Tüm alana yayılan saydam link */
.full-area-link {
    position: absolute; /* Kapsayıcı div'e göre konumlandır */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Üstte olduğundan emin ol */
    text-decoration: none;
    color: transparent; /* Link rengi görünmesin */
    cursor: pointer; /* Fare imleci link olduğunu belli etsin */
    /* Linkin kendisi için animasyonlara gerek yok, div yapacak */
}


/* Hover Efektleri (Button Wrapper'a Uygulanır) */
.button-wrapper:hover {
    transform: translateY(-5px) scale(1.02); /* Hafif yukarı kalkma ve büyüme */
    box-shadow: 0 12px 20px rgba(0,0,0,0.25); /* Daha belirgin gölge */
    opacity: 0.9; /* Hafif saydamlık */
}

/* Hover Efektleri (Button Wrapper'a Uygulanır) */
.feature-wrapper:hover {
    transform: translateY(-5px) scale(1.02); /* Hafif yukarı kalkma ve büyüme */
    box-shadow: 0 12px 20px rgba(0,0,0,0.25); /* Daha belirgin gölge */
    opacity: 0.9; /* Hafif saydamlık */
}
/* Hover Efektleri (Button Wrapper'a Uygulanır) */
.price-wrapper:hover {
    transform: translateY(-5px) scale(1.02); /* Hafif yukarı kalkma ve büyüme */
    box-shadow: 0 12px 20px rgba(0,0,0,0.25); /* Daha belirgin gölge */
    opacity: 0.9; /* Hafif saydamlık */
}
/* Hover Efektleri (Button Wrapper'a Uygulanır) */
.item-wrapper:hover {
    transform: translateY(-5px) scale(1.02); /* Hafif yukarı kalkma ve büyüme */
    box-shadow: 0 12px 20px rgba(0,0,0,0.25); /* Daha belirgin gölge */
    opacity: 0.9; /* Hafif saydamlık */
}

/* --- Her Bir Butona Özel Arka Plan Görseli (ID'ler ile) --- */
#virtualizor-button-wrapper {
    background-image: url('login_bg.webp');
    overflow: visible;
}
.rocket-man-img {
    width: calc(min(100vw,900px)*0.4);
    height: auto; /* Görsel yüksekliği */
    position: absolute;
    top: 20%; /* Yukarıdan %30 */
    left: 70%; /* Soldan %50 */
    translate: -50% -50%;
}
.rock-img {
    width: calc(min(100vw,900px)*0.1);
    height: auto; /* Görsel yüksekliği */
    position: absolute;
    top: -20%; /* Yukarıdan %30 */
    left: 90%; /* Soldan %50 */
    translate: -50% -50%;
}
#virtualizor-button-wrapper h1{
    top: 25%; /* Yukarıdan %50 */
    left: 15%; /* Soldan %50 */
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: left;
    font-size: calc(min(100vw,690px)*0.04);
    line-height: normal;
}

#contact-and-about-wrapper {
    background-image: url('contact_and_about_bg.webp');
}
#contact-and-about-wrapper h1 {
    top: 30%; /* Yukarıdan %50 */
    left: 70%; /* Soldan %50 */
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: left;
    font-size: calc(min(100vw,690px)*0.04);
    line-height: normal;
}

#agreements-wrapper {
    background-image: url('agreements_bg.webp');
}

#agreements-wrapper h1 {
    top: 20%; /* Yukarıdan %50 */
    left: 20%; /* Soldan %50 */
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: left;
    color: white;
    font-size: calc(min(100vw,690px)*0.04);
    line-height: normal;
}


/* --- İki Sütunlu Bölüm ve İçerik Sargısı --- */
.two-column-section {
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.two-column-section .content-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.content-grid-wrapper {
    display: grid;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}
.four-column-section {
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.four-column-section .price-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    height: calc(min(100vw, 690px) * 0.4);
}
.price-grid-wrapper {
    display: grid;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
}
.price-grid-wrapper p{
    display: block;
}
.plan-name{
    font-size: calc(min(100vw, 690px) * 0.02);
    text-align: center;
    color: #4992f7;
    position: absolute;
    padding-top: 5%;
}
.plan-price {
    font-size: calc(min(100vw, 690px) * 0.03);
    text-align: center;
    color: #333;
    position: absolute;
    padding-top: 10%;
}
.plan-price-hourly {
    font-size: calc(min(100vw, 690px) * 0.02);
    text-align: center;
    color: #4992f7;
    position: absolute;
    padding-top: 33%;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 76%;
    text-align: left; /* Metin hizalaması */
    line-height: normal;
}
.feature-item{
    display: flex;
    align-items: center; /* Dikey ortalama */
    gap: 5%; /* İkon ve metin arasındaki boşluk */
    width: 100%; /* Tüm genişliği kapla */
}
.feature-icon {
    width: calc(min(100vw, 690px) * 0.05);
    height: auto;
    margin-left: 2%; /* İkon ve değer metni arasındaki boşluk */

}
.feature-item-title {
    font-size: calc(min(100vw, 690px) * 0.015); /* Metin boyutu */
    color: #333; /* Metin rengi */
    text-align: left;
    width: 25%;


}
.feature-item-value {
    font-size: calc(min(100vw, 690px) * 0.02); /* Değer metin boyutu */
    color: #666; /* Değer metin rengi */
    margin-left: 5%; /* İkon ve değer metni arasındaki boşluk */
    font-weight: bold; /* Değer metni kalın */
    text-align: center;
    width: 25%;

}


.column-item {
    flex: 1;
    min-width: 280px;
}

/* --- İkon Buton Kapsayıcı (Div) Stili (Mail ve WhatsApp) --- */
#mail-button-wrapper, #whatsapp-button-wrapper {
    max-width: 300px; /* Belirli bir maksimum genişlik */
    margin: 0 auto; /* Ortalamak için */
    max-height: 150px;
}

#mail-button-wrapper {
    background-color: #4992f7;
}
#mail-button-wrapper img {
    width: 50px; /* İkon genişliği */
    height: 50px; /* İkon yüksekliği */
    top: 14%; /* Yukarıdan %30 */
    left: 12%; /* Soldan %50 */
    position: absolute;
}
#mail-button-wrapper h2 {
    top: 13.5%; /* Yukarıdan %30 */
    left: 29%; /* Soldan %50 */
    position: absolute;
    text-align: left;
    color: white;
    font-size: medium;
    display: block; /* H2 etiketini göster */
    white-space: nowrap; /* Metin taşmasını önlemek için */

}
#mail-button-wrapper h1 {
    top: 55%; /* Yukarıdan %30 */
    left: 50%; /* Soldan %50 */
    translate: -50% -50%;
    position: absolute;
    text-align: left;
    font-size: medium;
    color: white;
    display: block;
    white-space: nowrap; /* Metin taşmasını önlemek için */

}


#whatsapp-button-wrapper {
    background-color: #53a537;
}
#whatsapp-button-wrapper img {
    width: 50px; /* İkon genişliği */
    height: 50px; /* İkon yüksekliği */
    top: 14%; /* Yukarıdan %30 */
    left: 12%; /* Soldan %50 */
    position: absolute;
}
#whatsapp-button-wrapper h2 {
    top: 13.5%; /* Yukarıdan %30 */
    left: 29%; /* Soldan %50 */
    position: absolute;
    text-align: left;
    font-size: medium;
    color: white;
    display: block; /* H2 etiketini göster */
    white-space: nowrap; /* Metin taşmasını önlemek için */

}

#whatsapp-button-wrapper h1 {
    top: 55%; /* Yukarıdan %30 */
    left: 50%; /* Soldan %50 */
    translate: -50% -50%;
    position: absolute;
    text-align: left;
    font-size: medium;
    color: white;
    display: block; /* H1 etiketini göster */
    white-space: nowrap; /* Metin taşmasını önlemek için */


}

/* İkon butonları için hover (biraz daha belirgin büyüme) */
#mail-button-wrapper:hover, #whatsapp-button-wrapper:hover {
    transform: scale(1.1); /* Daha belirgin büyüme */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    opacity: 1; /* Tam opak kalsın */
}