/* ============================================================
   BA News Portal — UI/UX Polish (test v1.2.2)
   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; }
}