/* scripts/templates/blog-index-template.html için sayfaya özgü stiller. Ortak kurallar site.css'tedir. */
/* h1-h4 tipografisi, .fade-up/.reveal giriş animasyonu ve .nav-link::after
   kuralları site.css'te tanımlıdır (TEK KAYNAK); burada tekrarlanmaz. */

/* Film grain texture (blog-main referansı) */

.grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); }

.nav-mobile-btn { color:#ffffff; }

/* Category filter pills */

.cat-pill {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    padding: 0.5rem 1.25rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500;
    border: 1.5px solid rgb(var(--palette-navy-100)); color: rgb(var(--palette-navy-800)); background: white; cursor: pointer;
    transition: all .3s ease; white-space: nowrap;
  }

.cat-pill:hover { border-color: rgb(var(--palette-gold-500)); color: rgb(var(--palette-gold-600)); }

.cat-pill.active { background: rgb(var(--palette-navy-900)); color: rgb(var(--palette-gold-300)); border-color: rgb(var(--palette-navy-900)); }

.cat-pill.active:hover { background: rgb(var(--palette-navy-800)); }

.archive-filter-toolbar {
    display: flex; align-items: center; flex-wrap: nowrap; gap: 0.75rem;
  }

.category-filter-scroll {
    display: flex; gap: 0.5rem; overflow-x: auto; flex-wrap: nowrap;
    flex: 1 1 auto; min-width: 0; margin-left: -1rem; padding: 0 2rem 0.25rem 1rem;
    scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
  }

.category-filter-scroll::-webkit-scrollbar { display: none; }

.category-filter-scroll .cat-pill { flex: 0 0 auto; scroll-snap-align: start; }

.archive-search {
    position: relative; flex: 0 0 clamp(7.75rem, 34vw, 10rem);
    z-index: 1;
  }

.archive-search::before {
    content: ""; position: absolute; inset: 0 auto 0 -2rem; width: 2rem;
    background: linear-gradient(to right, rgba(249,247,242,0), rgba(249,247,242,.98));
    pointer-events: none;
  }

.archive-search input { min-height: 44px; }

@media (min-width: 640px) {
  .archive-search { flex-basis: 13rem; }
}

@media (min-width: 1024px) {
  .category-filter-scroll { margin-left: 0; padding-left: 0; }
  .archive-search { flex-basis: 16rem; }
}

@media (min-width: 1280px) {
  .category-filter-scroll {
      padding-right: 0; -webkit-mask-image: none; mask-image: none;
    }
  .archive-search::before { display: none; }
}

/* Featured overlay gradient */

.featured-overlay { background: linear-gradient(to top, rgb(var(--palette-navy-900) / 0.95) 0%, rgb(var(--palette-navy-900) / 0.7) 40%, rgb(var(--palette-navy-900) / 0.2) 70%, transparent 100%); }

.pick-card { transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease, box-shadow .45s ease; will-change: transform; }

.pick-card:hover { transform: translateY(-8px); border-color: rgb(var(--palette-gold-500) / .55) !important; box-shadow: 0 26px 50px -14px rgba(0,0,0,.55); }

.pick-card .pick-img { transition: transform .9s ease; }

.pick-card:hover .pick-img { transform: scale(1.07); }


/* CTA arrow slide */

.cta-link svg { transition: transform .3s ease; }

.cta-link:hover svg { transform: translateX(4px); }

/* Latest section side cards */

.side-card { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease; }

.side-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px -12px rgb(var(--palette-navy-900) / .2); border-color: rgb(var(--palette-gold-500) / .65); }

.side-card:hover .side-title { color: rgb(var(--palette-gold-600)); }

.side-title { transition: color .3s ease; }

.side-thumb img { transition: transform .8s ease; }

.side-card:hover .side-thumb img { transform: scale(1.1); }

/* Hero latest card */

.hero-card .hero-img { transition: transform 1s ease; }

.hero-card:hover .hero-img { transform: scale(1.06); }

/* Mobil: iOS zoom'unu önlemek için arama alanı 16px */

@media (max-width: 768px) { #searchInput { font-size: 16px; } }