body {
   font-family: 'Segoe UI', sans-serif;
}

/* ===== SABİT TOPBAR + NAVBAR (kurumsal gradient) ===== */
:root{
  --brand-dark:#0a3c5f;
  --brand-light:#0DB0F3;
  --topbar-h:48px;      /* topbar yüksekliği */
  --navbar-h:64px;      /* navbar yüksekliği (desktop) */
}
.gradient-logo {
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(90deg, #0DB0F3 0%, #0DB0F3 100%);
  background-clip: text;              /* Standart */
  -webkit-background-clip: text;       
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 0.3s ease;
}


.gradient-logo:hover {
  transform: scale(1.05);
}

/* TOPBAR */
.topbar-gradient{
  position:fixed; top:0; left:0; right:0;
  height:var(--topbar-h);
  display:flex; align-items:center;
  background:linear-gradient(90deg, var(--brand-dark) 0%, var(--brand-light) 100%);
  color:#fff; z-index:1050;
  padding:0 .75rem;
  transition: transform .25s ease;           /* hide on scroll için */
}
.topbar-gradient a{ color:#fff; text-decoration:none; font-weight:600; transition:opacity .2s }
.topbar-gradient a:hover{ opacity:.85 }
.topbar-separator{ width:1px; height:18px; background:rgba(255,255,255,.3); margin:0 .75rem }
.social-pill{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:999px;
  background:rgba(255,255,255,.15); color:#fff; transition:background .2s, transform .2s }
.social-pill:hover{ background:#fff; color:var(--brand-dark); transform:translateY(-1px) }

/* NAVBAR (topbar’ın altında, sabit) */
.navbar{
  position:fixed !important;
  top:var(--topbar-h) !important; left:0; right:0;
  height:var(--navbar-h);
  z-index:1040;
  background:transparent !important;         /* hero üstünde şeffaf */
  box-shadow:none !important;
  padding-block:.75rem;
  transition: top .25s ease, background .25s ease, transform .25s ease; /* hide on scroll */
}
.navbar .nav-link{ color:#fff; font-weight:600; }
.navbar .nav-link:hover{ color:var(--brand-light); }

/* İç sayfalarda opak arka plan istersen: body’ye .navbar-solid-bg ekle */
.navbar-solid-bg .navbar{
  background:rgba(10,60,95,.9) !important;
  backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}

/* Hide-on-scroll sınıfları (JS ile ekle/çıkar) */
.topbar-hidden{ transform: translateY(-100%); }
.navbar-at-top{ top:0 !important; }

/* ===== SAYFA OFFSET ===== */
.page-offset{ padding-top:calc(var(--topbar-h) + var(--navbar-h)); }

/* ===== BANNER ===== */
.blog-banner{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:calc(var(--topbar-h) + var(--navbar-h));
  overflow:hidden;
}
.blog-banner img{
  display:block; width:100%;
  height:300px; object-fit:cover;
}

/* ===== KARTLAR ===== */
.bt-card{ padding:0; }
.bt-thumb{ display:block; border-radius:8px; overflow:hidden; }
.bt-thumb img{ width:100%; height:170px; object-fit:cover; display:block; }
.bt-title{ font-size:18px; line-height:1.35; margin:12px 0 8px; }
.bt-title a{ color:#09aeea; text-decoration:none; }
.bt-title a:hover{ text-decoration:underline; }
.bt-desc{ font-size:13px; color:#555; margin-bottom:10px; }

/* Sağ blok başlık şeridi */
.bt-side-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.bt-line{ flex:1; height:2px; background:#e6f4ff; }
.bt-cat{ font-weight:700; color:#6e7b8a; font-size:13px; }

/* Sağ liste ögeleri */
.bt-side-item + .bt-side-item{ margin-top:24px; }
.bt-side-title{ font-size:18px; line-height:1.35; margin:0 0 8px; }
.bt-side-title a{ color:#09aeea; text-decoration:none; }
.bt-side-title a:hover{ text-decoration:underline; }
.bt-side-desc{ font-size:13px; color:#555; margin:0 0 10px; }

/* Buton */
.bt-btn{
  display:inline-block; font-size:12px; padding:6px 14px;
  border-radius:6px; background:#09aeea; color:#fff; text-decoration:none;
}
.bt-btn.sm{ padding:6px 12px; }
.bt-btn:hover{ filter:brightness(.95); }

/* Düzen/Aralıklar */
.blog-tiles .col-md-4{ display:flex; }
.bt-card, .bt-side{ width:100%; }

/* ===== GENEL ===== */
html, body{ height:100%; }
body{
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  color:#222; background:#fff; line-height:1.6;
  display:flex; flex-direction:column; overflow-x:hidden;
}
.btn:not(.category-btn){
  background:#0DB0F3 !important; border:none !important; color:#fff !important;
}

/* ===== BLOG KART ===== */
.blog-card h6{
  position:relative;              /* ::after için eklendi */
  font-size:13px !important;
  text-transform:uppercase !important;
  color:#333 !important;
  padding-bottom:5px !important;
  margin:0 !important;
}
.blog-card h6::after{
  content:""; position:absolute; left:0; bottom:0;
  width:30px; height:2px; background:var(--accent);
}
.blog-card h5{ font-weight:700 !important; margin-top:10px !important; }
.blog-card p{ font-size:14px !important; color:#444 !important; }

/* Numara listesi */
.blog-list .list-group-item{
  border:0 !important; background:transparent !important; color:#222 !important;
  font-size:14px !important; padding-left:45px !important;
}
.blog-list .list-group-item:nth-child(even){ background:#f8f9fa !important; }
.blog-list .number{
  position:absolute; left:10px; top:8px; font-weight:700; color:var(--primary); font-size:14px;
}

/* Video aktif vurgusu */
.video-card.active{ outline:2px solid rgba(255,255,255,.5); border-radius:.5rem; padding:.25rem; }

/* Arama input */
form input[type="search"]{
  max-width:220px; border-radius:50px; padding:6px 16px; border:1px solid #ced4da;
}

/* Footer */
.footer-darkblue{ background:#0a3c5f !important; color:#fff; margin-top:auto; }

/* ===== RESPONSIVE ===== */
@media (max-width:991.98px){
  :root{ --navbar-h:56px; }        /* mobil navbar yüksekliği */
  .bt-thumb img{ height:200px; }
}
@media (max-width:768px){
  .blog-banner img{ height:180px; }
}
@media (max-width:575.98px){
  .bt-thumb img{ height:180px; }
}
/* Page header arkaplanını home ile aynı tona yaklaştır */
.page-header {
  background-color: #0a3c5f;
}

/* Chip (rozet) stili: sitenin info rengine yakın */
.blog-chip {
  background: rgba(13, 176, 243, 0.08);
  color: #0DB0F3;
  border: 1px solid rgba(13, 176, 243, 0.25);
  padding: 6px 12px;
  font-weight: 500;
}
.blog-chip.active {
  background: #0DB0F3;
  color: #fff;
  border-color: #0DB0F3;
}
.blog-chip.reset {
  background: #1f2a44;
  color: #fff;
  border: 0;
}

/* Select ve search input görünümleri */
.blog-select,
.blog-search {
  border-radius: 999px;
}

/* Kart stili: rounded-4 + hover shadow; home ile aynı vibe */
.blog-card {
  transition: transform .15s ease, box-shadow .15s ease;
  border-radius: 1rem; /* rounded-4 */
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

/* Tür rozeti: info rengi, köşeden içeri */
.blog-type-badge {
  position: absolute; top: 10px; left: 10px;
  background: #0DB0F3; color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; text-transform: capitalize;
}

/* Pagination: info rengi ile vurgula */
.blog-pagination .page-link {
  border-radius: 10px;
  color: #0DB0F3;
}
.blog-pagination .page-item.active .page-link {
  background-color: #0DB0F3;
  border-color: #0DB0F3;
  color: #fff;
}
.blog-chip-row { padding-bottom: .25rem; }

.chip {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.chip:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }

.chip-active {
  background: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}

.chip-idle {
  background: var(--bs-light);
  color: var(--bs-body-color);
}

/* aktif durumda minik vurgu */
.chip[aria-pressed="true"] .bi {
  transform: scale(1.02);
}

/* üst bara hafif alt çizgi */
.sticky-top {
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}

/* mobil navbar yüksekliğine göre ayarla */
@media (max-width: 576px) {
  .blog-filter { top: 56px; }
}

/* yatay scroll bar inceltme (webkit) */
.blog-chip-row::-webkit-scrollbar { height: 6px; }
.blog-chip-row::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }
.collapse-toggler .chev { transition: transform .2s ease; }
.collapse-toggler[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Kart görsellerini sabit oranda tut */
.blog-card .card-img-top{
  aspect-ratio: 16 / 9;   /* sabit oran */
  width: 100%;
  height: auto;
  object-fit: cover;      /* taşıyorsa kırp */
  display: block;
}

/* (İsteğe bağlı) rozet zaten absolute çalışıyorsa dokunmaya gerek yok.
.blog-type-badge { position:absolute; top:.75rem; left:.75rem; }
*/