/* public/css/frontend/shared.css */

/* Renk ve Genel Ayar Değişkenleri */
:root {
    --primary-color: #28a745;
    --secondary-color: #1e7e34;
    --text-color: #333;
    --background-light: #f4f7fb;
    --white: #ffffff;
    --shadow: 0 4px 15px rgba(0,0,0,0.1);
    --transition-speed: 0.4s;
}

/* Genel Ayarlar */
body {
    background-color: var(--background-light);
    color: var(--text-color);
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

/* HERO SECTION (Ortak Tasarım) */
.hero-section {
    position: relative;
    height: 600px;
    margin-top: 0;
    padding: 0;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    z-index: 10;
    overflow: hidden;

    /* Kavisli alt kenar için maske */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none"><path fill="black" d="M0,0 L0,70 Q500,100 1000,70 L1000,0 Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none"><path fill="black" d="M0,0 L0,70 Q500,100 1000,70 L1000,0 Z"/></svg>');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
    mask-position: bottom;
}

.hero-section.product-hero {
    background: url('../images/product1.png') center/cover no-repeat;
}

.hero-section.info-hero {
    background: url('../storage/info/info-hero.jpg') center/cover no-repeat;
    animation: zoomInBg 10s ease infinite alternate;
}

.hero-overlay {
    background: #28a745;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-overlay h1 {
    color: var(--white);
    font-size: 3.5rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInDown 1s forwards;
}

.hero-overlay p {
    color: var(--white);
    font-size: 1.5rem;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards;
    animation-delay: 0.5s;
}

/* Kategoriler (Ürünler Sayfası için) */
.categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 30px 0;
}

.categories a {
    padding: 10px 20px;
    background-color: #007bff;
    color: var(--white);
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 16px;
}

.categories a:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.categories a.active {
    background-color: #2ee77d;
}

/* Grid Yapısı (Ürün ve Makale Kartları için) */
.articles-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Sadece 4'lü sütun */
    gap: 30px;
    padding: 20px;
    justify-items: center;
}

/* Kart görünür olunca aktifleşsin */
.article-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Kart Yapısı */
.article-card {
    background: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    cursor: pointer;
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUp 0.6s forwards;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    width: 100%; /* sabit genişlik kaldırıldı */
    min-height: 420px;
}

/* Kart Hover */
.article-card:hover {
    transform: translateY(-5px);
}

/* Tüm karta tıklanabilir alan vermek isterseniz (opsiyonel) */
.article-card a {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

/* Kart Resim Alanı */
.article-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}

.article-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Kart İçerik (Metin Alanı) */
.article-content {
    flex: 1;
    padding: 20px;
    text-align: center;
}

.article-content h2,
.article-content h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.article-content p {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 15px;
    line-height: 1.4em;
}

/* Bilgi Bankası 'Devamını Oku' Butonu */
.read-more {
    display: block;
    width: 120px;
    height: 35px;
    line-height: 35px;
    background-color: var(--primary-color);
    color: #ffffff !important;  /* Yazı rengi beyaz ve !important ile önceliklendirildi */
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin: 10px auto;
}

.read-more:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

/* Bilgi Bankası Bölümü */
.info-bank-section {
    padding: 80px 20px;
}

.info-bank-section .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.info-bank-section .section-title {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Sayfalama (Ürünler Sayfası için) */
.pagination-container {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.pagination-container .pagination {
    display: flex;
    list-style: none;
    gap: 10px;
    padding: 0;
}

.pagination-container .pagination li a,
.pagination-container .pagination li span {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #007bff;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 14px;
}

.pagination-container .pagination li a:hover {
    background-color: #007bff;
    color: var(--white);
}

.pagination-container .pagination li.active span {
    background-color: #2ee77d;
    color: var(--white);
    border-color: #2ee77d;
}

.pagination-container .pagination li.disabled span {
    color: #ccc;
    border-color: #ddd;
}

/* Animasyonlar */
@keyframes fadeInDown {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomInBg {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

/* Responsive Ayarlamalar */
@media (max-width: 992px) {
    .articles-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .articles-cards {
        grid-template-columns: 1fr;
    }

    .hero-overlay h1 {
        font-size: 2.5rem;
    }
    .hero-overlay p {
        font-size: 1.2rem;
    }
    .categories a {
        padding: 8px 16px;
    }
}

@media (max-width: 768px) {
    /* Hero Bölümü */
    .hero-section {
      height: 320px;
    }
    .hero-overlay h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
    }
    .hero-overlay p {
      font-size: 1.2rem;
      line-height: 1.6;
      padding: 0 10px;
      margin-top: 10px;
    }

    /* Kategoriler */
    .categories {
      gap: 10px;
      margin: 20px 0;
    }
    .categories a {
      padding: 8px 16px;
      font-size: 14px;
    }

    /* Ürün / Makale Kartları */
    .articles-cards {
      display: grid;
      /* Orta mobilde 2 sütunlu düzen */
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      padding: 10px;
      justify-items: center;
    }

    .article-card {
      width: 100%;  /* Grid hücresinin tamamını kaplasın */
      /* Sabit ölçü yerine otomatik yüksekliği tercih edebilir, isterseniz min-height de belirtebilirsiniz */
      height: auto;
      padding: 10px;
      /* Eğer animasyon varsa yeniden ölçeklendirme etkisini koruyabilirsiniz */
      transition: transform 0.3s ease;
    }

    .article-card:hover {
      transform: translateY(-3px);
    }

    /* Kart içeriğindeki metinler */
    .article-content h2,
    .article-content h3 {
      font-size: 1.4rem;
      margin-bottom: 8px;
    }
    .article-content p {
      font-size: 0.9rem;
      line-height: 1.4;
    }
  }

  /* Küçük mobil (max-width: 576px) */
  @media (max-width: 576px) {
    /* Hero Bölümü: Daha kompakt */
    .hero-section {
      height: 250px;
    }
    .hero-overlay h1 {
      font-size: 2rem;
    }
    .hero-overlay p {
      font-size: 1rem;
      padding: 0 8px;
      margin-top: 8px;
    }

    /* Kategoriler: Yazı ve padding hafif küçüldü */
    .categories a {
      padding: 6px 12px;
      font-size: 13px;
    }

    /* Kart Düzeni */
    .articles-cards {
      /* Eğer isterseniz küçük mobilde de 2 sütun gösterebilirsiniz;
         Alternatif olarak 1 sütun da kullanılabilir. Örneğin:
           grid-template-columns: 1fr;
         Burada 2 sütun tercih edelim */
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding: 8px;
    }

    .article-card {
      width: 100%;
      padding: 8px;
      /* Eğer kartların yüksekliği sabitse, otomatik yüksekliğe çekebilirsiniz.
         Örneğin, sabit ölçü yerine min-height: 400px; gibi bir değer belirleyebilirsiniz. */
      height: auto;
    }

    .article-content h2,
    .article-content h3 {
      font-size: 1.3rem;
    }
    .article-content p {
      font-size: 0.85rem;
    }
  }