/* ============================================================
   BA News Portal — UI/UX Polish (v1.1.23)
   Mikro-etkileşimler, erişilebilirlik ve okuma deneyimi iyileştirmeleri.
   Bu dosya additive çalışır: mevcut fixed kart yüksekliklerini,
   dark-mode override'larını ve ad-grid dengeleyicisini bozmaz.
   ============================================================ */

/* ------------------------------------------------------------
   1. Hareket azaltma tercihi (prefers-reduced-motion)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   2. Düzgün kaydırma + sticky nav için offset
   ------------------------------------------------------------ */
html{scroll-behavior:smooth}
html{scroll-padding-top:96px}

/* ------------------------------------------------------------
   3. Klavye odak durumları (görünür focus halkası)
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid rgba(14,165,255,.45);
  outline-offset: 2px;
  border-radius: 6px;
}
.menu a:focus-visible,
.sub-menu a:focus-visible,
.footer-menu a:focus-visible{
  outline-offset: -3px;
}

/* ------------------------------------------------------------
   4. Basma (press) feedback — better-ui "scale on press" (0.96)
   ------------------------------------------------------------ */
.btn:active,
.theme-switcher__btn:active,
.chips a:active,
.share-strip a:active,
.reaction-buttons button:active,
.newsletter-form .btn:active,
.newsletter .btn:active,
.social-links a:active,
.ba-ghost-btn:active,
.ba-404-search button:active,
.ba-search-dialog button[type=submit]:active,
.comment-form .form-submit input:active,
.news-pagination a:active,
.archive-pagination a:active,
.ba-mobile-menu-close:active,
.ba-submenu-toggle:active{
  transform: scale(.96);
}

/* Kartlar için yumuşak press (hover'daki translateY ile çakışmaz) */
.post-card > a:active,
.headline-card:active,
.related-card:active,
.mini-news:active,
.trend:active,
.category-rail a:active{
  transform: scale(.985);
}

/* ------------------------------------------------------------
   5. Explicit transition-property (transition:all yerine)
   ------------------------------------------------------------ */
.btn,
.theme-switcher__btn,
.chips a,
.share-strip a,
.reaction-buttons button,
.social-links a,
.newsletter-form .btn,
.newsletter .btn,
.ba-ghost-btn,
.news-pagination a,
.archive-pagination a,
.menu a,
.footer-menu a,
.post-card > a,
.headline-card,
.related-card,
.mini-news,
.trend,
.category-rail a{
  transition: transform .18s cubic-bezier(.2,0,0,1), box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}

/* ------------------------------------------------------------
   6. Resim kenar çizgisi (depth) — better-ui "image outline"
   ------------------------------------------------------------ */
.thumb img,
.headline-thumb img,
.trend-thumb img,
.mini-thumb img,
.related-card .thumb img{
  outline: 1px solid rgba(0,0,0,.08);
  outline-offset: -1px;
}
body.ba-news-dark .thumb img,
body.ba-news-dark .headline-thumb img,
body.ba-news-dark .trend-thumb img,
body.ba-news-dark .mini-thumb img,
body.ba-news-dark .related-card .thumb img{
  outline-color: rgba(255,255,255,.08);
}

/* ------------------------------------------------------------
   7. Tipografi: tabular-nums (tarih/sayaç hizalaması)
   ------------------------------------------------------------ */
.meta,
.post-meta,
.detail-meta,
.ba-reading-meta,
.crumbs,
time,
.news-pagination,
.archive-pagination{
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   8. Metin seçimi rengi
   ------------------------------------------------------------ */
::selection{
  background: rgba(14,165,255,.24);
  color: inherit;
}

/* ------------------------------------------------------------
   9. Share / chips hover durumları
   ------------------------------------------------------------ */
.share-strip a:hover{
  border-color: var(--blue);
  color: #006fc9;
  box-shadow: 0 10px 24px rgba(14,165,255,.14);
  transform: translateY(-1px);
}
.chips a:hover{
  background: #e6f3ff;
  border-color: #bcd9f7;
  color: #006fc9;
  transform: translateY(-1px);
}
body.ba-news-dark .chips a:hover{
  background: #14243b;
  border-color: #26364d;
  color: #7dd3fc;
}
body.ba-news-dark .share-strip a:hover{
  color: #7dd3fc;
  border-color: #3b82f6;
}

/* ------------------------------------------------------------
   10. Okuma ilerleme çubuğu
   ------------------------------------------------------------ */
.ba-reading-progress{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.ba-reading-progress[data-visible="1"]{opacity: 1}
.ba-reading-progress span{
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--blue2), var(--green));
  box-shadow: 0 1px 8px rgba(14,165,255,.4);
}

/* ------------------------------------------------------------
   11. Yukarı dön butonu — halkalı ilerleme göstergeli
   ------------------------------------------------------------ */
.ba-back-to-top{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99998;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(7,17,31,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.92);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, box-shadow .18s ease, color .18s ease, background-color .18s ease;
}
.ba-back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.ba-back-to-top:hover{
  box-shadow: 0 18px 42px rgba(14,165,255,.28);
}
.ba-back-to-top:active{
  transform: scale(.88);
}
.ba-back-to-top-ring{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.ba-back-to-top-ring circle{
  fill: none;
  stroke-width: 3;
}
.ba-ring-track{
  stroke: rgba(7,17,31,.10);
}
.ba-ring-progress{
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
}
.ba-back-to-top-arrow{
  position: relative;
  width: 20px;
  height: 20px;
  display: block;
}

/* Dark modda net görünürlük (zemini sayfa arka planından belirgin ayırır) */
body.ba-news-dark .ba-back-to-top,
body.ba-news-auto-dark .ba-back-to-top{
  background: #182940;
  color: #f8fafc;
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(56,189,248,.38);
}
body.ba-news-dark .ba-ring-track,
body.ba-news-auto-dark .ba-ring-track{
  stroke: rgba(148,163,184,.28);
}
body.ba-news-dark .ba-ring-progress,
body.ba-news-auto-dark .ba-ring-progress{
  stroke: #38bdf8;
}
body.ba-news-dark .ba-back-to-top:hover,
body.ba-news-auto-dark .ba-back-to-top:hover{
  color: #fff;
  box-shadow: 0 16px 40px rgba(56,189,248,.35), 0 0 0 1px rgba(56,189,248,.65);
}

/* ------------------------------------------------------------
   12. Aktif menü öğesi göstergesi
   ------------------------------------------------------------ */
.menu > li > a{
  position: relative;
}
.menu li.current-menu-item > a,
.menu li.current_page_item > a,
.menu li.current-menu-ancestor > a,
.menu li.current-menu-parent > a{
  color: var(--blue2);
}
.menu > li.current-menu-item > a:after,
.menu > li.current_page_item > a:after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue2));
}
body.ba-news-dark .menu li.current-menu-item > a,
body.ba-news-dark .menu li.current_page_item > a,
body.ba-news-dark .menu li.current-menu-ancestor > a{
  color: #7dd3fc;
}

/* ------------------------------------------------------------
   13. Sticky nav gölgesi (kaydırınca belirginleşir)
   ------------------------------------------------------------ */
.nav{
  transition: box-shadow .2s ease;
}
.nav.is-scrolled{
  box-shadow: 0 10px 30px rgba(7,17,31,.10);
}
body.ba-news-dark .nav.is-scrolled,
body.ba-news-auto-dark .nav.is-scrolled{
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* ------------------------------------------------------------
   14. Mobil boyut/konum ayarı
   ------------------------------------------------------------ */
@media (max-width: 640px){
  .ba-back-to-top{
    right: 14px;
    bottom: 14px;
    width: 48px;
    height: 48px;
  }
}

/* ------------------------------------------------------------
   15. Skip-to-content linki (erişilebilirlik)
   ------------------------------------------------------------ */
.ba-skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100001;
  background: var(--blue2);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  font-weight: 900;
  font-size: 14px;
  text-decoration: none;
}
.ba-skip-link:focus{
  left: 0;
}

/* ------------------------------------------------------------
   16. Share strip: SVG ikonlar + kopyala butonu
   ------------------------------------------------------------ */
.share-strip .share-item{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.share-strip .share-item svg{
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: block;
}
.share-strip button.share-item{
  border: 1px solid #d8e7f7;
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  color: #344054;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,0,0,1), box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.share-strip button.share-item:hover{
  border-color: var(--blue);
  color: #006fc9;
  box-shadow: 0 10px 24px rgba(14,165,255,.14);
  transform: translateY(-1px);
}
.share-strip .ba-copy-link.copied{
  border-color: var(--green);
  background: #e9fff7;
  color: #047857;
}
body.ba-news-dark .share-strip button.share-item{
  background: #111f33;
  border-color: #26364d;
  color: #f8fafc;
}
body.ba-news-dark .share-strip button.share-item:hover{
  color: #7dd3fc;
  border-color: #3b82f6;
}
body.ba-news-dark .share-strip .ba-copy-link.copied{
  border-color: #34d399;
  background: #0c2a22;
  color: #6ee7b7;
}

/* ------------------------------------------------------------
   17. Reaksiyon pop animasyonu
   ------------------------------------------------------------ */
.reaction-buttons button span{
  display: inline-block;
}
.reaction-buttons button.is-active span{
  animation: ba-reaction-pop .34s cubic-bezier(.2,0,0,1);
}
@keyframes ba-reaction-pop{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.6); }
  75%{ transform: scale(.92); }
  100%{ transform: scale(1); }
}

/* ------------------------------------------------------------
   18. Mobil native-share FAB
   ------------------------------------------------------------ */
.ba-share-fab{
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 99998;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(14,165,255,.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.92);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, box-shadow .18s ease;
}
.ba-share-fab.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.ba-share-fab:hover{
  box-shadow: 0 18px 42px rgba(14,165,255,.5);
}
.ba-share-fab:active{
  transform: scale(.88);
}
.ba-share-fab svg{
  width: 22px;
  height: 22px;
  display: block;
}
@media (min-width: 981px){
  .ba-share-fab{ display: none !important; }
}

/* ------------------------------------------------------------
   19. İçindekiler (TOC)
   ------------------------------------------------------------ */
.ba-toc{
  margin: 0 0 22px;
  border: 1px solid #d8e7f7;
  border-radius: 16px;
  background: linear-gradient(135deg,#f8fbff,#f1f8ff);
  overflow: hidden;
}
.ba-toc-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 14px 16px;
  font: inherit;
  font-weight: 900;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  gap: 8px;
}
.ba-toc-toggle svg{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform .2s ease;
}
.ba-toc.is-open .ba-toc-toggle svg{ transform: rotate(180deg); }
.ba-toc-list{
  margin: 0;
  padding: 0 16px 14px;
  list-style: none;
  display: none;
}
.ba-toc.is-open .ba-toc-list{ display: block; }
.ba-toc-item{ margin: 0 0 2px; }
.ba-toc-item a{
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #344054;
  border-left: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ba-toc-item a:hover{ background: #eaf3ff; color: var(--blue2); }
.ba-toc-item a.is-active{
  background: #e6f3ff;
  color: var(--blue2);
  border-left-color: var(--blue);
  font-weight: 800;
}
.ba-toc-level-3 a{ padding-left: 22px; font-size: 13px; }
body.ba-news-dark .ba-toc{ background: linear-gradient(135deg,#111f33,#0f1b2d); border-color: #26364d; }
body.ba-news-dark .ba-toc-toggle{ color: #f8fafc; }
body.ba-news-dark .ba-toc-item a{ color: #cbd5e1; }
body.ba-news-dark .ba-toc-item a:hover,
body.ba-news-dark .ba-toc-item a.is-active{ background: #14243b; color: #7dd3fc; border-left-color: #38bdf8; }

/* ------------------------------------------------------------
   20. Önceki / sonraki haber navigasyonu
   ------------------------------------------------------------ */
.ba-post-nav{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.ba-post-nav-item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ba-post-nav-item:only-child{ grid-column: 1 / -1; }
.ba-post-nav-item span{
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.ba-post-nav-item b{ font-size: 15px; line-height: 1.3; }
.ba-post-nav-item:hover{
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 22px 60px rgba(7,17,31,.12);
}
.ba-post-nav-next{ text-align: right; }
body.ba-news-dark .ba-post-nav-item{ background: #0f1b2d; border-color: #26364d; }
body.ba-news-dark .ba-post-nav-item b{ color: #f8fafc; }
@media (max-width: 640px){
  .ba-post-nav{ grid-template-columns: 1fr; }
  .ba-post-nav-next{ text-align: left; }
}