/* ===== Blog / Bilgi Merkezi ===== */

/* --- Hero --- */
.blog-hero{padding:56px 0 40px; background:linear-gradient(180deg,#F8FAFB,#F0F3F7); text-align:center; border-bottom:1px solid var(--border)}
.blog-hero h1{font-size:36px; font-weight:800; color:var(--navy-900); letter-spacing:-.02em}
.blog-hero p{font-size:15px; color:var(--muted); margin:8px auto 0; max-width:480px; line-height:1.5}
.blog-hero__search{max-width:480px; margin:24px auto 0; position:relative}
.blog-hero__search input{width:100%; height:50px; padding:0 16px 0 48px; border:1.5px solid var(--border); border-radius:14px; font-size:14px; font-family:inherit; color:var(--text); background:#fff; transition:border-color .2s, box-shadow .2s}
.blog-hero__search input:focus{outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(23,162,168,.12)}
.blog-hero__search input::placeholder{color:var(--muted)}
.blog-hero__search .ic{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted); width:18px; height:18px; pointer-events:none}

/* --- Category Tabs --- */
.blog-tabs{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:20px}
.blog-tabs a{padding:7px 18px; border-radius:10px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; border:1px solid transparent; transition:all .2s}
.blog-tabs a:hover{background:var(--bg-soft); color:var(--navy-900)}
.blog-tabs a.is-active{background:var(--teal-50); color:var(--teal-600); border-color:var(--teal-100)}
.blog-tabs a:focus-visible{outline:2px solid var(--teal-500); outline-offset:2px; border-radius:10px}

/* --- Layout --- */
.blog-layout{display:grid; grid-template-columns:1fr 300px; gap:32px; padding:48px 0 80px}

/* --- Card Grid --- */
.blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}

/* --- Blog Card --- */
.blog-card{background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.blog-card:focus-within{outline:2px solid var(--teal-500); outline-offset:2px}
.blog-card__img{width:100%; aspect-ratio:16/10; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative}
.blog-card__img img{width:100%; height:100%; object-fit:cover}
.blog-card__img-placeholder{display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(135deg,var(--teal-50),#E6F6F6)}
.blog-card__img-placeholder .ic{width:40px; height:40px; color:var(--teal-200)}
.blog-card__body{padding:18px 20px; flex:1; display:flex; flex-direction:column}
.blog-card__cat{display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--teal-50); color:var(--teal-600); margin-bottom:10px; width:fit-content}
.blog-card__title{font-size:16px; font-weight:700; color:var(--navy-900); line-height:1.35; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.blog-card__title a{color:inherit; text-decoration:none; transition:color .2s}
.blog-card__title a:hover{color:var(--teal-500)}
.blog-card__excerpt{font-size:13.5px; color:var(--muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:14px; flex:1}
.blog-card__meta{display:flex; align-items:center; gap:12px; font-size:12px; color:var(--muted); border-top:1px solid var(--border); padding-top:12px; margin-top:auto}
.blog-card__meta .ic{width:13px; height:13px}
.blog-card__link{display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color:var(--teal-500); margin-left:auto; text-decoration:none; transition:gap .2s}
.blog-card__link:hover{gap:8px}
.blog-card__link .ic{width:14px; height:14px}

/* Featured card (first/large) */
.blog-card--featured{grid-column:span 2}
.blog-card--featured .blog-card__img{aspect-ratio:21/9}
.blog-card--featured .blog-card__title{font-size:20px}
.blog-card--featured .blog-card__excerpt{-webkit-line-clamp:4}

/* --- Sidebar --- */
.blog-sidebar{position:sticky; top:90px; display:grid; gap:20px}

/* Sidebar widget */
.blog-widget{background:#fff; border-radius:16px; padding:22px; border:1px solid var(--border); box-shadow:var(--shadow-sm)}
.blog-widget h4{font-size:14px; font-weight:700; color:var(--navy-900); margin-bottom:14px; display:flex; align-items:center; gap:6px}
.blog-widget h4 .ic{width:16px; height:16px; color:var(--teal-500)}

/* Popular posts */
.blog-widget__popular{display:grid; gap:12px}
.blog-widget__popular-item{display:flex; gap:12px; text-decoration:none; transition:background .2s; border-radius:10px; padding:6px; margin:-6px}
.blog-widget__popular-item:hover{background:var(--bg-soft)}
.blog-widget__popular-num{width:28px; height:28px; border-radius:8px; background:var(--teal-50); color:var(--teal-600); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none}
.blog-widget__popular-text{min-width:0}
.blog-widget__popular-title{font-size:13px; font-weight:600; color:var(--navy-900); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.blog-widget__popular-meta{font-size:11px; color:var(--muted); margin-top:2px}

/* Category list */
.blog-widget__cats{display:grid; gap:4px}
.blog-widget__cats a{display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-radius:8px; font-size:13px; font-weight:500; color:var(--navy-700); text-decoration:none; transition:background .2s}
.blog-widget__cats a:hover{background:var(--bg-soft); color:var(--teal-500)}
.blog-widget__cats a span{font-size:11px; font-weight:700; color:var(--muted); background:var(--bg-soft); padding:2px 8px; border-radius:6px}

/* CTA widget */
.blog-widget--cta{background:linear-gradient(135deg,var(--teal-50),#E6F6F6); border-color:var(--teal-100)}
.blog-widget--cta h4{color:var(--teal-600)}
.blog-widget--cta p{font-size:13px; color:var(--navy-700); line-height:1.5; margin-bottom:14px}

/* --- Pagination --- */
.blog-pagination{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:36px}
.blog-pagination a,.blog-pagination span{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; font-size:14px; font-weight:600; color:var(--navy-700); text-decoration:none; border:1px solid var(--border); transition:all .2s}
.blog-pagination a:hover{background:var(--teal-50); border-color:var(--teal-100); color:var(--teal-600)}
.blog-pagination .is-active{background:var(--teal-500); color:#fff; border-color:var(--teal-500)}
.blog-pagination .dots{border:none; color:var(--muted); width:auto; padding:0 4px}
.blog-pagination .ic{width:16px; height:16px}

/* ===== Blog Detail ===== */

/* Detail hero */
.blog-detail-hero{padding:40px 0 24px; background:linear-gradient(180deg,#F8FAFB,#F0F3F7); border-bottom:1px solid var(--border)}
.blog-detail-hero__breadcrumb{font-size:13px; color:var(--muted); margin-bottom:16px; display:flex; align-items:center; gap:6px}
.blog-detail-hero__breadcrumb a{color:var(--teal-500); text-decoration:none; font-weight:600}
.blog-detail-hero__breadcrumb a:hover{color:var(--teal-600)}
.blog-detail-hero__cat{display:inline-block; padding:4px 12px; border-radius:8px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--teal-50); color:var(--teal-600); margin-bottom:12px}
.blog-detail-hero h1{font-size:34px; font-weight:800; color:var(--navy-900); line-height:1.2; letter-spacing:-.02em; max-width:720px}
.blog-detail-hero__meta{display:flex; align-items:center; gap:16px; margin-top:14px; font-size:13px; color:var(--muted); flex-wrap:wrap}
.blog-detail-hero__meta .ic{width:14px; height:14px}
.blog-detail-hero__meta span{display:inline-flex; align-items:center; gap:4px}

/* Detail layout */
.blog-detail-layout{display:grid; grid-template-columns:1fr 300px; gap:40px; padding:40px 0 80px}

/* Article content */
.blog-article{min-width:0}
.blog-article__cover{width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; margin-bottom:32px; background:var(--bg-soft)}
.blog-article__cover img{width:100%; height:100%; object-fit:cover}
.blog-article__cover-placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--teal-50),#E6F6F6)}
.blog-article__cover-placeholder .ic{width:60px; height:60px; color:var(--teal-200)}
.blog-article__content{font-size:15px; color:var(--text); line-height:1.75}
.blog-article__content h2{font-size:24px; font-weight:800; color:var(--navy-900); margin:36px 0 14px; letter-spacing:-.01em}
.blog-article__content h3{font-size:19px; font-weight:700; color:var(--navy-900); margin:28px 0 10px}
.blog-article__content p{margin-bottom:16px}
.blog-article__content ul,.blog-article__content ol{margin:0 0 16px 20px; display:grid; gap:6px}
.blog-article__content li{line-height:1.6}
.blog-article__content strong{color:var(--navy-900)}
.blog-article__content a{color:var(--teal-500); font-weight:600; text-decoration:underline}
.blog-article__content blockquote{margin:24px 0; padding:18px 24px; background:var(--bg-soft); border-left:4px solid var(--teal-500); border-radius:0 14px 14px 0; font-style:italic; color:var(--navy-700)}

/* In-content CTA */
.blog-cta-inline{background:var(--teal-50); border:1px solid var(--teal-100); border-radius:16px; padding:24px; margin:32px 0; text-align:center}
.blog-cta-inline h4{font-size:17px; font-weight:700; color:var(--navy-900); margin-bottom:6px}
.blog-cta-inline p{font-size:13.5px; color:var(--muted); margin-bottom:14px}
.blog-cta-inline .btn{font-size:14px}

/* Share bar */
.blog-share{display:flex; align-items:center; gap:10px; padding-top:24px; margin-top:32px; border-top:1px solid var(--border)}
.blog-share span{font-size:13px; font-weight:600; color:var(--navy-900)}
.blog-share__btn{width:38px; height:38px; border-radius:10px; background:var(--bg-soft); display:inline-flex; align-items:center; justify-content:center; color:var(--navy-700); border:1px solid var(--border); transition:all .2s; cursor:pointer}
.blog-share__btn:hover{background:var(--teal-50); color:var(--teal-500); border-color:var(--teal-100)}
.blog-share__btn .ic{width:16px; height:16px}

/* Related posts */
.blog-related{padding:48px 0; border-top:1px solid var(--border); margin-top:48px}
.blog-related h3{font-size:22px; font-weight:800; color:var(--navy-900); margin-bottom:24px; text-align:center}
.blog-related__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}

/* Sidebar author card */
.blog-author{display:flex; gap:12px; align-items:center; margin-bottom:14px}
.blog-author__avatar{width:48px; height:48px; border-radius:50%; background:var(--teal-50); display:flex; align-items:center; justify-content:center; flex:none}
.blog-author__avatar .ic{width:24px; height:24px; color:var(--teal-500)}
.blog-author__name{font-size:14px; font-weight:700; color:var(--navy-900)}
.blog-author__role{font-size:12px; color:var(--muted)}
.blog-author__bio{font-size:12.5px; color:var(--muted); line-height:1.5}

/* --- Responsive --- */
@media(max-width:900px){
  .blog-layout{grid-template-columns:1fr; gap:32px}
  .blog-sidebar{position:static; grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:1fr}
  .blog-card--featured{grid-column:span 1}
  .blog-card--featured .blog-card__img{aspect-ratio:16/10}
  .blog-card--featured .blog-card__title{font-size:17px}
  .blog-hero h1{font-size:28px}
  .blog-detail-layout{grid-template-columns:1fr}
  .blog-detail-hero h1{font-size:26px}
  .blog-related__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .blog-hero{padding:36px 0 24px}
  .blog-hero h1{font-size:24px}
  .blog-tabs{gap:4px}
  .blog-tabs a{padding:6px 12px; font-size:12px}
  .blog-sidebar{grid-template-columns:1fr}
  .blog-detail-hero{padding:28px 0 16px}
  .blog-detail-hero h1{font-size:22px}
  .blog-article__content h2{font-size:20px}
  .blog-related__grid{grid-template-columns:1fr}
}