/* ============================================================================
   İNLANGU — BLOG LİSTESİ SAYFASI
   ----------------------------------------------------------------------------
   Hocanın özgün inlangu-almanca-blog.aspx sayfasının kendi <style> bloğundan birebir alındı;
   sayfa içine gömülü olmaktan çıkarılıp tek dosyaya taşındı.
   ========================================================================== */


      .blog-page {
        font-family: 'Work Sans', sans-serif;
        background-color: #f8f9fa;
        color: #333;
      }

      .blog-page .hero {
        background: url('assets/img/blog/blog-000.jpg') center 40% / cover no-repeat;
        min-height: 360px;
        position: relative;
        color: white;
        overflow: hidden;
      }

      .blog-page .hero::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.55);
        z-index: 1;
      }

      .blog-page .hero-content {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 2;
        padding: 0 20px;
      }

      .blog-page .hero-box {
        display: inline-block;
        max-width: 90vw;
        min-width: 300px;
        background-color: rgba(0, 0, 0, 0.4);
        padding: 1px 4px;
        border-radius: 12px;
        backdrop-filter: blur(3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        word-break: break-word;
        text-align: center;
      }

      .blog-page .hero h1 {
        font-size: 38px;
        margin: 0;
        color: #ff4e2e;
      }

      .blog-page .hero p {
        font-size: 18px;
        margin-top: 10px;
        color: #fff;
      }

      @media (max-width: 600px) {
        .blog-page .hero h1 { font-size: 26px; }
        .blog-page .hero p  { font-size: 15px; }
        .blog-page .hero-content { bottom: 20px; }
        .blog-page .hero-box { padding: 10px 14px; }
      }

      .blog-page .blog-container {
        max-width: 1200px;
        margin: 40px auto;
        padding: 0 16px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
      }

      .blog-page .blog-card {
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s, box-shadow 0.3s;
        display: flex;
        flex-direction: column;
      }

      .blog-page .blog-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
      }

      .blog-page .blog-card img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        display: block;
      }

      .blog-page .blog-card-content {
        padding: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .blog-page .blog-card h2 {
        font-size: 18px;
        margin-bottom: 10px;
        color: #003366;
      }

      .blog-page .blog-card p {
        font-size: 15px;
        color: #555;
        flex: 1;
      }

      .blog-page .read-more-btn {
        margin-top: 15px;
        background-color: #1e90ff;
        color: white;
        padding: 10px 16px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        text-align: center;
        display: inline-block;
      }

      .blog-page .read-more-btn:hover {
        background-color: #0077cc;
      }

      /* .blog-page .hidden ve #show-more artık kullanılmıyor, istersen tamamen silebilirsin */