html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #0d0d0d, #1a1a1a, #262626);
    font-family: "Noto Sans", Arial, Helvetica, sans-serif;
}

/* Preloader Stilleri */
#preloader {
    position: fixed; /* Ekranın tamamını kaplar */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0d0d0d; /* Arka plan rengi (sitenizin genel koyu tonuna yakın) */
    display: flex; /* İçeriği ortalamak için flexbox kullanırız */
    flex-direction: column; /* İçeriği dikeyde hizalar */
    justify-content: center; /* Dikeyde ortalar */
    align-items: center; /* Yatayda ortalar */
    z-index: 9999; /* Diğer tüm içeriklerin üzerinde olmasını sağlar */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out; /* Kaybolma efekti */
}

/* Yükleniyor spinner'ı */
.spinner {
    border: 8px solid rgba(255, 255, 255, 0.3); /* Açık gri kenarlık */
    border-top: 8px solid #e3010f; /* Yeşil üst kenarlık (sitenizin renk şemasına uygun) */
    border-radius: 50%; /* Dairesel şekil */
    width: 60px;
    height: 60px;
    animation: spin 1.5s linear infinite; /* Dönme animasyonu */
}

/* Spinner animasyonu */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* İsteğe bağlı: Logo ve metin stilleri */
.preloader-logo {
    width: 150px; /* Logonun boyutu */
    height: auto;
    margin-bottom: 20px;
    filter: brightness(0) invert(1); /* Logonuz siyahsa beyaz yapmak için */
}

.loading-text {
    color: white;
    font-size: 1.2em;
    margin-top: 20px;
}

/* Preloader gizlendiğinde uygulanacak stil */
.preloader-hidden {
    opacity: 0; /* Saydamlığı sıfıra indir */
    visibility: hidden; /* Elementi tamamen gizle ve etkileşimden kaldır */
}

header {
    color: white;
    background: linear-gradient(135deg, rgba(13, 13, 13, 0.4), rgba(26, 26, 26, 0.4), rgba(38, 38, 38, 0.4));
    height: 90px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: fixed;
    z-index: 1000;
    top: 0;
    transition: background-color 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.duzeltme
{
    width: 100%;
    height: 90px;
    display: block;
}

.main-footer {
    background: linear-gradient(135deg, #0d0d0d, #1a1a1a, #262626); /* Header ile uyumlu gradient */
    color: white;
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
    gap: 30px; /* Sütunlar arası boşluk */
    justify-content: space-between;
    align-items: flex-start; /* İçeriğin üstten hizalanması */
    box-sizing: border-box;
    width: 100%;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column h3 {
    color: #e3010f; /* Yeşil tonlarında bir başlık rengi */
    margin-bottom: 20px;
    font-size: 1.2em;
    border-bottom: 2px solid whitesmoke;
    padding-bottom: 5px;
}

/* Birinci Sütun: Logo ve Menü */
.footer-logo {
    margin-bottom: 20px;
}

.footer-logo img {
    max-width: 180px; /* Logo boyutunu ayarlayın */
    height: auto;
}

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

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

.footer-menu ul li a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

.footer-menu ul li a:hover {
    color: #e3010f; /* Hover efekti */
}

.footer-icon {
    width: 18px; /* İkon boyutu */
    height: 18px;
}

/* İkinci Sütun: Bize Ulaşın */
.footer-contact p {
    display: flex;
    align-items: flex-start; /* Metnin ikonla hizalanması */
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.95em;
}

.footer-contact p a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact p a:hover {
    color: #e3010f;
}

/* Üçüncü Sütun: Sosyal Medya */
.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 30px; /* Sosyal medya ikon boyutu */
    height: 30px;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
    color: #e3010f;
    transform: scale(1.1); /* Hafif büyütme efekti */
}

/* En Alt Kısım: Copyright ve Webzincir Logo */
.footer-bottom {
    grid-column: 1 / -1; /* Tüm sütunları kapla */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright {
    font-size: 0.85em;
    opacity: 0.8;
}

.webzincir-logo img {
    max-width: 120px; /* Webzincir logosunun boyutunu ayarlayın */
    height: auto;
    filter: invert(100%); /* Logo beyaz görünmesi için */
}

/* Responsive Düzenlemeler (Telefon Ekranları İçin) */
@media only screen and (max-width: 768px) {
    .main-footer {
        grid-template-columns: 1fr; /* Tek sütunlu düzen */
        padding: 30px 20px;
        text-align: center;
    }

    .footer-column {
        align-items: center; /* İçeriği ortala */
        margin-bottom: 30px;
    }

    .footer-column h3 {
        text-align: center;
        width: 100%;
        border-bottom: none;
        padding-bottom: 0;
    }

    .footer-logo img {
        max-width: 86px;
    }

    .footer-menu ul {
        width: 100%; /* Telefon menüsünü genişlet */
        text-align: center;
    }

    .footer-menu ul li a {
        justify-content: center; /* Menü öğelerini ortala */
    }

    .social-icons {
        justify-content: center; /* Sosyal medya ikonlarını ortala */
    }

    .footer-contact p {
        justify-content: center; /* İletişim bilgilerini ortala */
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column; /* Alt kısmı dikeyde sırala */
        text-align: center;
        gap: 15px;
    }
}

video {
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}


/* Bilgisayar ekranı */
@media only screen and (min-width: 1200px) {
    .icon {
        color: white;
        font-size: 24px;
        width: 24px;
        height: 24px;
    }

    .menu {
        display: flex;
        align-items: center;
        height: 100%;
    }

    .menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
    }
    
    .menu ul li {
        display: inline;
        margin-right: 20px;
    }
    
    .menu ul li a {
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 16px;
    }

    .phone_hamburger_icon, .phone_menu {
        display: none;
    }
}

/* Telefon ekranı */
@media only screen and (max-width: 1199px) {
    .icon {
        color: white;
        font-size: 24px;
        width: 40px;
        height: 40px;
    }

    .phone_icon {
        color: white;
        font-size: 24px;
        width: 30px;
        height: 30px;
    }

    .menu {
        display: none;
    }

    .phone_menu {
        display: none;
        height: 100%;
        width: 80%;
        padding-top: 70px;
        background-color: rgb(38, 38, 38);
        position: fixed;
        box-sizing: border-box;
        padding-bottom: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
        z-index: 999;
    }
    
    .phone_menu ul {
        list-style: none;
        padding-left: 50px;
        padding-top: 30px;
    }
    
    .phone_menu ul li a {
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 24px;
        margin-bottom: 15px;
    }

}




.language {
    display: flex;
    align-items: center;
    height: 100%;
}

.language button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin-left: 10px;
}


.hakkimizda {
    float: left;
    width: 100%;
    height: auto;
    background-image: url(/files/images/hakkimizdaarka.png);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "Noto Sans", sans-serif;
    color: #fff;
    text-align: center;
}

.hakkimizdalogo {
    margin-top: 2.8vw;
    translate: -50% 0;
    margin-left: 50%;
}

.hakkimizdalogo img {
    width: 100px;
}

.hakkimizda h2 {
    font-family: "Noto Sans", sans-serif;
    color: #fff;
    margin-top: 1.5vw;
}

.hakkimizda p {
    font-family: "Noto Sans", sans-serif;
    font-size: large;
    color: #fff;
    width: 53vw;
    margin-left: 20vw;
}

/* Yeni: "Who are we?" Bölümü Stilleri */
.about-us-section {
    font-family: "Noto Sans", sans-serif;
    background-image: url(/files/images/hakkimizdaarka.png);
    color: white;
    padding: 20px 20px; /* Üstten ve alttan boşluk */
    text-align: center;
}

.about-us-section .container {
    max-width: 900px; /* İçeriğin daha dar ve okunabilir olması için */
    margin: 0 auto; /* Ortala */
}

.section-title-about-us {
    font-size: 2.5em;
    color: white; /* Başlık rengi */
    margin-bottom: 30px; /* Başlık ile paragraf arasına boşluk */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.about-us-section p {
    font-size: 1.1em;
    line-height: 1.7; /* Okunabilirliği artırır */
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9); /* Metin rengi */
}

/* Galeri Bölümü Genel Stilleri */
.gallery-section {
    /* Videodan sonra `about-us-section` geldiği için,
       galeri bölümünün üst boşluğunu `about-us-section`'ın
       margin-bottom'u ile ayarlayabiliriz. */
    padding: 20px 20px; /* Üstten ve alttan yeterli boşluk */
    text-align: center;
}

.gallery-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title { /* Ortak galeri başlık stili (image_be4e97.jpg'den) */
    font-size: 2.5em;
    color: whitesmoke;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.section-subtitle { /* Ortak galeri alt başlık stili (image_be4e97.jpg'den) */
    font-size: 1.1em;
    color: #666;
    margin-bottom: 40px;
}

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

.gallery-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

/* Responsive Düzenlemeler */
@media only screen and (max-width: 992px) {
    .about-us-section {
        padding: 60px 15px; /* Telefonlarda padding azaltma */
    }
    .section-title-about-us {
        font-size: 2em;
        margin-bottom: 20px;
    }
    .about-us-section p {
        font-size: 1em;
    }

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

    .section-title {
        font-size: 2em;
    }

    .section-subtitle {
        font-size: 1em;
    }
}

@media only screen and (max-width: 576px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-section {
        padding: 50px 15px;
    }

    .gallery-item img {
        height: 200px;
    }
}

/* Katalog Sayfası Stilleri */
.catalog-section {
    padding: 20px 20px 20px 20px; /* Header'dan sonra yeterli boşluk bırakmak için üst padding'i artırdık */
    text-align: center;
    min-height: calc(100vh - 90px - 100px); /* Ekranın tamamını kaplaması için (header ve footer yüksekliği çıkarıldı) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.catalog-section .container {
    max-width: 1000px; /* İçeriğin maksimum genişliği */
    margin: 0 auto;
    width: 100%; /* Kapsayıcının %100 genişliğini alması */
}

.page-title {
    font-size: 2.8em;
    color: #e3010f;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.page-subtitle, .page-subtitle a {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 40px;
    text-decoration: none;
}

.pdf-viewer-container {
    width: 100%;
    /* PDF görüntüleyici için daha fazla boşluk isterseniz buraya padding ekleyebilirsiniz */
    border: 1px solid #ddd; /* Hafif bir kenarlık */
    border-radius: 8px;
    overflow: hidden; /* İçeriğin taşmasını engeller */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    margin-bottom: 40px; /* Footer öncesi boşluk */
}

.pdf-viewer-container iframe {
    display: block; /* iframe'in altında olası boşlukları engeller */
}

/* Responsive Düzenlemeler */
@media only screen and (max-width: 768px) {
    .catalog-section {
        padding: 20px 15px 50px 15px; /* Telefonlarda padding azaltma */
    }

    .page-title {
        font-size: 2em;
    }

    .page-subtitle {
        font-size: 1em;
    }

    .pdf-viewer-container iframe {
        height: 500px; /* Telefonlarda yüksekliği düşür */
    }
}

/* İletişim Sayfası Stilleri */
.contact-section {
    padding: 20px 20px 80px 20px; /* Header'dan sonra yeterli boşluk bırakmak için üst padding'i artırdık */
    background-color: #1a1a1a; /* Koyu arka plan */
    color: white; /* Metin rengi */
    text-align: center;
    min-height: calc(100vh - 90px - 100px); /* Ekranın tamamını kaplaması için (header ve footer yüksekliği çıkarıldı) */
}

.contact-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Sayfa Başlıkları */
.page-title {
    font-size: 2.8em;
    color: white;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.page-subtitle {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 60px; /* Başlık ile içerik arasına boşluk */
}

/* İletişim Bilgileri Grid Düzeni */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 4 sütunlu esnek grid */
    gap: 30px; /* Kutular arası boşluk */
    margin-bottom: 60px; /* Grid ile harita arasına boşluk */
}

.contact-item {
    background-color: #262626; /* Koyu gri arka plan */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-item:hover {
    transform: translateY(-8px); /* Hafif yukarı kayma efekti */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.item-title {
    font-size: 1.8em;
    color: #e3010f; /* Yeşil renk */
    margin-bottom: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-icon {
    width: 60px; /* İkon boyutu */
    height: 60px;
    margin-bottom: 20px;
}

.contact-item p {
    font-size: 1.1em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.contact-item p a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item p a:hover {
    color: #e3010f; /* Yeşil renk */
}

/* Sosyal Medya İkonları */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.social-icon {
    width: 40px; /* Sosyal ikon boyutu */
    height: 40px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.1);
}

.social-iconn {
    width: 40px; /* Sosyal ikon boyutu */
    height: 40px;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: brightness(0) invert(1);
}

.social-iconn:hover {
    transform: scale(1.1);
}

/* Google Haritalar Konum */
.map-container {
    width: 100%;
    background-color: #262626;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    margin-top: 40px; /* Grid ile harita arasına üst boşluk */
}

.map-container .item-title {
    color: white; /* Harita başlığı beyaz */
    margin-bottom: 25px;
}

.map-container iframe {
    border-radius: 8px; /* Haritayı da yuvarla */
    overflow: hidden; /* Kenarlık yuvarlatmasını sağlamak için */
    display: block; /* iframe'in altında olası boşlukları engeller */
}

/* Responsive Düzenlemeler (Telefon ve Tablet Ekranları İçin) */
@media only screen and (max-width: 992px) {
    .contact-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Daha küçük ekranlarda daha dar kutular */
        gap: 20px;
    }
    .item-title {
        font-size: 1.5em;
    }
    .contact-icon {
        width: 50px;
        height: 50px;
    }
    .social-icon {
        width: 35px;
        height: 35px;
    }
}

@media only screen and (max-width: 576px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Telefonlarda tek sütun */
    }
    .contact-section {
        padding: 100px 15px 50px 15px;
    }
    .page-title {
        font-size: 2.2em;
    }
    .page-subtitle {
        font-size: 1em;
    }
    .contact-item {
        padding: 20px;
    }
    .map-container {
        padding: 20px;
    }
    .map-container iframe {
        height: 350px; /* Telefonlarda harita yüksekliğini düşür */
    }
}

/* Ürünler Sayfası Stilleri */
.products-section {
    padding: 20px 20px 80px 20px; /* Header'dan sonra yeterli boşluk bırakmak için üst padding'i artırdık */
    background-color: #1a1a1a; /* Koyu arka plan (Contact sayfasıyla uyumlu) */
    color: white; /* Metin rengi */
    text-align: center;
    min-height: calc(100vh - 90px - 100px); /* Ekranın tamamını kaplaması için */
}

.products-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Sayfa Başlıkları (Contact sayfasındakiyle aynı stil) */
.products-section .page-title {
    font-size: 2.8em;
    color: white;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.products-section .page-subtitle {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 60px;
}

/* Ürün Kutucukları Grid Düzeni */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Esnek sütunlar, 280px minimum genişlik */
    gap: 30px; /* Kutular arası boşluk */
    margin-bottom: 40px; /* Alt boşluk */
}

.product-item {
    background-color: #262626; /* Koyu gri arka plan */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Resmin taşmasını engeller */
    text-decoration: none; /* Bağlantı alt çizgisini kaldır */
    color: inherit; /* Metin rengini üst elementten al */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-item:hover {
    transform: translateY(-8px); /* Hafif yukarı kayma efekti */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.product-image {
    width: 100%;
    height: 250px; /* Resmin yüksekliği */
    background-size: contain; /* Resmi kutuyu dolduracak şekilde boyutlandır */
    background-repeat: no-repeat;
    background-position: center; /* Resmi ortala */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: transform 0.5s ease; /* Hover efekti için */
}

.product-item:hover .product-image {
    transform: scale(1.05); /* Hover'da resmi hafif büyüt */
}

.product-name {
    font-size: 1.5em;
    color: whitesmoke; /* Ürün adı için yeşil renk */
    padding: 20px;
    margin: 0;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive Düzenlemeler */
@media only screen and (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Daha küçük ekranlarda daha dar kutular */
        gap: 20px;
    }
    .products-section .page-title {
        font-size: 2em;
    }
    .products-section .page-subtitle {
        font-size: 1em;
    }
    .product-image {
        height: 180px;
    }
    .product-name {
        font-size: 1.3em;
        padding: 15px;
    }
}

@media only screen and (max-width: 576px) {
    .products-grid {
        grid-template-columns: 1fr; /* Telefonlarda tek sütun */
    }
    .products-section {
        padding: 100px 15px 50px 15px;
    }
    .product-image {
        height: 150px;
    }
    .product-name {
        font-size: 1.2em;
        padding: 12px;
    }
}

/* Genel Sayfa Yapısı */
/* Genel Sayfa Yapısı */
/* Genel Sayfa Yapısı */
/* Genel Sayfa Yapısı */
.agm-product-page-main {
    background-color: #1a1a1a; /* Ana sayfa arka planına uygun */
    color: white;
    min-height: calc(100vh - 90px - 100px); /* Ekranın altını doldurmak için örnek (footer yüksekliğine göre ayarlanır) */
}

/* Ürün Detay Sayfası Bölümleri */
.agm-product-hero-section {
    text-align: center;
    padding: 60px 20px;
    background-color: #1a1a1a;
}

.agm-product-hero-image {
    width: 80%;
    height: 450px;
    margin: 0 auto 30px auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    background-color: #262626;
    cursor: zoom-in;
}

.agm-product-page-title {
    font-size: 3em;
    color: #e3010f;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.agm-product-specs-section {
    padding: 60px 20px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    background-color: #1a1a1a;
}

.agm-section-header { /* Genel section başlığı */
    font-size: 2.5em;
    color: white;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.agm-specs-table-container {
    background-color: #262626;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 50px;
}

.agm-specs-table-container table {
    width: 100%;
    border-collapse: collapse;
    color: white;
    font-size: 1.1em;
}

.agm-specs-table-container th,
.agm-specs-table-container td {
    padding: 15px 25px;
    text-align: left;
    border-bottom: 1px solid #333;
}

.agm-specs-table-container tr:last-child td {
    border-bottom: none;
}

.agm-spec-label { /* Özellik etiketi */
    font-weight: bold;
    color: rgba(227, 1, 15, 0.8);
    width: 25%;
}

.agm-spec-value { /* Özellik değeri */
    color: rgba(255, 255, 255, 0.9);
    width: 25%;
}

.agm-specs-table-container tbody tr:hover {
    background-color: #333;
}

.agm-product-description-content {
    padding: 0 20px 60px 20px;
    max-width: 1000px;
    margin: 0 auto;
    font-size: 1.1em;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
}

/* Ürün Listeleme Sayfası Stilleri (products.php'nin varsayılan hali) */
.agm-products-listing-section {
    padding-top: 90px;
    padding-bottom: 50px;
    background-color: #0d0d0d;
    color: white;
    text-align: center;
    min-height: calc(100vh - 90px - 100px);
}

.agm-products-page-heading { /* Liste sayfası başlığı */
    font-size: 3em;
    color: #4CAF50;
    margin-bottom: 50px;
    text-transform: uppercase;
}

.agm-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.agm-product-card { /* Ürün kartı */
    background-color: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    padding-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.agm-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.agm-product-card-image { /* Ürün kartı görseli */
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 15px;
}

.agm-product-card-name { /* Ürün kartı adı */
    font-size: 1.5em;
    color: rgba(227, 1, 15, 0.8);
    margin-bottom: 10px;
}

.agm-product-card-description { /* Ürün kartı açıklaması */
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
    padding: 0 15px;
    margin-bottom: 20px;
}

.agm-view-product-button { /* Ürün detay butonu */
    display: inline-block;
    background-color: #3f72af;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.agm-view-product-button:hover {
    background-color: #305886;
}

/* Mobil için responsive ayarlamalar */
@media only screen and (max-width: 768px) {
    /* Genel ayarlamalar */
    .agm-product-page-main {
        padding-top: 60px;
    }
    .agm-product-hero-section {
        padding: 40px 15px;
    }
    .agm-product-hero-image {
        height: 300px;
        width: 95%;
    }
    .agm-product-page-title {
        font-size: 2.2em;
    }
    .agm-section-header {
        font-size: 2em;
    }
    .agm-product-specs-section {
        padding: 40px 15px;
    }
    .agm-product-description-content {
        padding: 0 15px 40px 15px;
    }
    .agm-products-listing-section {
        padding-top: 60px;
    }
    .agm-products-page-heading {
        font-size: 2.5em;
    }
    .agm-products-grid {
        grid-template-columns: 1fr;
        padding: 0 15px;
    }
    .agm-product-card-image {
        height: 180px;
    }

    /* Mobilde tek sütunlu tablo için özel stil */
    .agm-specs-table-container table {
        font-size: 0.9em;
        display: block;
        width: 100%;
    }

    .agm-specs-table-container tbody,
    .agm-specs-table-container tr {
        display: block;
        width: 100%;
    }

    .agm-specs-table-container td {
        display: block;
        width: 100% !important;
        text-align: center;
        padding: 10px 15px;
        box-sizing: border-box;
    }

    .agm-spec-label {
        background-color: #333;
        color: rgba(227, 1, 15, 0.8);
        font-weight: bold;
        padding: 10px 15px;
        border-bottom: 1px solid #444;
    }

    .agm-spec-value {
        color: rgba(255, 255, 255, 0.9);
        padding-top: 10px;
        padding-bottom: 20px;
        border-bottom: 1px solid #333;
        margin-bottom: 10px;
    }

    .agm-specs-table-container tr:last-child td {
        border-bottom: none;
    }

    .agm-specs-table-container tbody tr:hover {
        background-color: transparent;
    }
    .agm-specs-table-container tbody tr:hover .agm-spec-label {
        background-color: #333;
    }
}