/* Yalnızca 09/20 DEMO blog ekleri */
.vea-blog-demo-badge {
  position:absolute; right:12px; top:16px; z-index:2;
  background:#172c46; color:#fff; border-radius:6px;
  padding:8px 10px; font-size:10px; font-weight:800;
}
.vea-blog-card-demo-id {
  color:#bc945c; font-size:11px; font-weight:800;
  letter-spacing:.5px;
}
body > main:has(.vea-blog-page) {
  width:100%; max-width:none; margin:0; padding:0;
  display:block; flex:1 0 auto; text-align:left;
}
.vea-blog-page {
  width:100%; padding:55px 24px 100px;
  background:#fff; color:#172c46;
}
.vea-blog-page-inner { width:min(100%,1440px); margin:auto; }
.vea-blog-crumb { margin-bottom:35px; color:#8190a3; font-size:13px; }
.vea-blog-crumb a { color:#bc945c; text-decoration:none; }
.vea-blog-page-heading { margin-bottom:30px; text-align:center; }
.vea-blog-page-heading > span, .vea-blog-detail-label {
  color:#bc945c; font-size:11px; font-weight:800;
  letter-spacing:1.8px;
}
.vea-blog-page-heading h1 {
  margin:14px 0; color:#172c46;
  font-size:clamp(32px,4vw,52px);
}
.vea-blog-page-heading em { color:#bc945c; font-style:normal; }
.vea-blog-page-heading p { color:#8190a3; }
.vea-blog-demo-disclaimer {
  margin:0 auto 30px; max-width:850px; padding:15px 20px;
  border-radius:12px; border:1px solid #ead7bb;
  background:#fff9ef; color:#705735;
  font-size:13px; line-height:1.8; text-align:center;
}
.vea-blog-page .vea-blog-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
.vea-blog-pagination {
  margin:35px 0 12px; display:flex;
  gap:10px; justify-content:center;
}
.vea-blog-pagination a {
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:10px;
  color:#172c46; background:#f1f4f8;
  border:1px solid #e5eaf0; text-decoration:none; font-weight:800;
}
.vea-blog-pagination a[aria-current="page"] {
  background:#172c46; color:#fff;
}
.vea-blog-page-count { text-align:center; color:#8190a3; font-size:13px; }
.vea-blog-detail { max-width:900px; margin:auto; }
.vea-blog-back { display:inline-block; margin:0 0 28px; color:#bc945c; }
.vea-blog-detail h1 {
  font-size:clamp(30px,3.5vw,48px);
  line-height:1.2; margin:15px 0;
}
.vea-blog-detail-summary {
  color:#728197; font-size:17px; line-height:1.8;
}
.vea-blog-detail > img {
  display:block; width:100%; height:auto; aspect-ratio:16/10;
  object-fit:cover; border-radius:18px; margin:28px 0;
}
.vea-blog-detail > p:not(.vea-blog-detail-summary):not(.vea-blog-demo-disclaimer) {
  color:#485d73; line-height:2; font-size:16px; margin:20px 0;
}
@media(max-width:950px){
  .vea-blog-page .vea-blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px){
  .vea-blog-page { padding:35px 18px 70px; }
  .vea-blog-page .vea-blog-grid { grid-template-columns:1fr; }
}
@media(prefers-color-scheme:dark){
  .vea-blog-page { background:#101720; color:#f1f5f9; }
  .vea-blog-page-heading h1 { color:#f1f5f9; }
  .vea-blog-pagination a { background:#172235; color:#f1f5f9; border-color:#293747; }
  .vea-blog-pagination a[aria-current="page"] { background:#bc945c; color:#101720; }
  .vea-blog-detail > p:not(.vea-blog-detail-summary):not(.vea-blog-demo-disclaimer) {
    color:#adbbcb;
  }
  .vea-blog-demo-disclaimer {
    background:#29251d; color:#e6d5bd; border-color:#5d4930;
  }
}


/* 09/20 — KOMPAKT BLOG KARTLARI V1 */

/* Yalnızca Blog kartlarının ölçüleri değişir. */
.vea-blog-section {
    padding-top: 58px;
    padding-bottom: 65px;
}

.vea-blog-section .vea-blog-heading {
    margin-bottom: 25px;
}

.vea-blog-section .vea-blog-heading h2 {
    font-size: clamp(28px, 2.8vw, 38px);
    margin-bottom: 9px;
}

.vea-blog-section .vea-blog-heading p {
    font-size: 13px;
    line-height: 1.6;
}

.vea-blog-section .vea-blog-grid,
.vea-blog-page .vea-blog-grid {
    gap: 18px;
    align-items: stretch;
}

.vea-blog-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 13px;
}

.vea-blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Görsel alanı daha kısa: 16:9 */
.vea-blog-card .vea-blog-image-area {
    aspect-ratio: 16 / 9;
}

.vea-blog-card .vea-blog-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kategori ve DEMO etiketlerinin çakışmasını önle. */
.vea-blog-card .vea-blog-category {
    top: 12px;
    left: 12px;
    max-width: calc(100% - 140px);
    padding: 7px 10px;
    font-size: 10px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vea-blog-card .vea-blog-demo-badge {
    top: 12px;
    right: 12px;
    padding: 7px 10px;
    font-size: 10px;
    line-height: 1.3;
}

/* Kart metinleri kompakt ve eşit hizalı. */
.vea-blog-card .vea-blog-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 185px;
    padding: 19px 20px 21px;
}

.vea-blog-card .vea-blog-card-demo-id {
    font-size: 10px;
    letter-spacing: .4px;
}

.vea-blog-card .vea-blog-card-body h3 {
    margin: 10px 0 10px;
    font-size: 17px;
    line-height: 1.45;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.vea-blog-card .vea-blog-card-body > p {
    margin: 0 0 16px;
    color: #8190a3;
    font-size: 12px;
    line-height: 1.6;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.vea-blog-card .vea-blog-read-more {
    margin-top: auto;
    gap: 8px;
    font-size: 12px;
}

.vea-blog-card .vea-blog-read-more span {
    font-size: 18px;
}

/* Blog liste sayfası da aynı kompakt kartları kullanır. */
.vea-blog-page .vea-blog-page-heading {
    margin-bottom: 25px;
}

.vea-blog-page .vea-blog-page-heading h1 {
    font-size: clamp(30px, 3.2vw, 43px);
}

@media (max-width: 950px) {
    .vea-blog-section .vea-blog-grid,
    .vea-blog-page .vea-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .vea-blog-section {
        padding-top: 45px;
        padding-bottom: 55px;
    }

    .vea-blog-section .vea-blog-grid,
    .vea-blog-page .vea-blog-grid {
        grid-template-columns: 1fr;
    }

    .vea-blog-card .vea-blog-card-body {
        min-height: 0;
    }
}