/* =========================================================
   Mirai Bottom Ticker (News / Notifications Bar)
   File: assets/css/mirai-ticker.css
   ========================================================= */

:root{
  /* Ticker görünüm */
  --mirai-ticker-bg-rgb: 170,170,170;
  --mirai-ticker-bg-opacity: .78;       /* Şeffaflık: 0.55 daha şeffaf, 0.90 daha opak */
  --mirai-ticker-text: #111;
  --mirai-ticker-accent: #b10014;
  --mirai-ticker-shadow: 0 10px 30px rgba(0,0,0,.25);
  --mirai-ticker-radius: 14px;
  --mirai-ticker-h: 44px;

  /* Sağ-alt FAB dizilimi (4 buton) */
  --mirai-fab-size: 44px;
  --mirai-fab-icon: 18px;
  --mirai-fab-gap: 12px;
  --mirai-fab-right: 16px;
  --mirai-fab-bottom: 16px;
  --mirai-fab-rise: 0px; /* ticker açıkken JS class ile yükseltilir */

  --mirai-step: calc(var(--mirai-fab-size) + var(--mirai-fab-gap));
}

/* Ticker açıkken butonları yukarı taşı */
.mirai-ticker-open{
  --mirai-fab-rise: calc(var(--mirai-ticker-h) + 16px);
}

/* ---------------------------
   Ticker Bar
--------------------------- */
.mirai-ticker{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: var(--mirai-ticker-h);
  z-index: 9990;

  background: rgba(var(--mirai-ticker-bg-rgb), var(--mirai-ticker-bg-opacity));
  color: var(--mirai-ticker-text);
  border-radius: var(--mirai-ticker-radius);
  box-shadow: var(--mirai-ticker-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  display: flex;
  align-items: center;
  padding: 0 44px 0 14px;
  overflow: hidden;
}

.mirai-ticker.is-closed{ display:none; }

.mirai-ticker__close{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 0;
  background: rgba(0,0,0,.10);
  color: #111;
  cursor: pointer;
}
.mirai-ticker__close:hover{ background: rgba(0,0,0,.18); }

.mirai-ticker__viewport{
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.mirai-ticker__track{
  display: inline-flex;
  align-items: center;
  gap: 26px;
  will-change: transform;
}

.mirai-ticker__item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1;
  color: var(--mirai-ticker-text);
}

.mirai-ticker__dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--mirai-ticker-accent);
  opacity: .9;
}

/* Kategori etiketi (pill) */
.mirai-ticker__pill{
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.12);
  color: #111;
}


/* Tarih etiketi (pill) — kategoriyle aynı form */
.mirai-ticker__pill--date{
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.12);
  border-left: 3px solid rgba(0,0,0,.28);
  font-weight: 700;
}
/* Kategori renkleri (sol border) */
.mirai-ticker__pill--duyuru { border-left: 3px solid #2b6cb0; }
.mirai-ticker__pill--kampanya { border-left: 3px solid var(--mirai-ticker-accent); }
.mirai-ticker__pill--bakim { border-left: 3px solid #b36b00; }
.mirai-ticker__pill--blog { border-left: 3px solid #2f855a; }
.mirai-ticker__pill--video { border-left: 3px solid #6b46c1; }
.mirai-ticker__pill--dagitim { border-left: 3px solid #0f766e; }
.mirai-ticker__pill--icerik { border-left: 3px solid #1f2937; }

/* Metin içi vurgu */
.mirai-ticker .accent{ color: var(--mirai-ticker-accent); font-weight: 700; }

/* Link */
.mirai-ticker__link{
  color: var(--mirai-ticker-text);
  text-decoration: none;
}
.mirai-ticker__link:hover{
  color: var(--mirai-ticker-accent);
  text-decoration: none;
}

/* ---------------------------
   Sağ-alt butonların dizilimi
   (Paw / Haberler / Translate / Başa Dön)
   Not: Var olan butonlarınız zaten bu görünüme sahip olabilir.
        Burada sadece KONUM ve BOYUT EŞİTLEME yapıyoruz.
--------------------------- */

/* Konumlar (sağdan sola sıralama) */
a.btn-back-to-top{
  position: fixed !important;
  right: var(--mirai-fab-right) !important;
  bottom: calc(var(--mirai-fab-bottom) + var(--mirai-fab-rise)) !important;
  z-index: 9999 !important;

  width: var(--mirai-fab-size);
  height: var(--mirai-fab-size);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#mirai-language-menu{
  position: fixed !important;
  right: calc(var(--mirai-fab-right) + var(--mirai-step)) !important;
  bottom: calc(var(--mirai-fab-bottom) + var(--mirai-fab-rise)) !important;
  z-index: 9999 !important;
}

#mirai-news-menu{
  position: fixed !important;
  right: calc(var(--mirai-fab-right) + var(--mirai-step) + var(--mirai-step)) !important;
  bottom: calc(var(--mirai-fab-bottom) + var(--mirai-fab-rise)) !important;
  z-index: 9999 !important;
}

#mirai-components-menu{
  position: fixed !important;
  right: calc(var(--mirai-fab-right) + var(--mirai-step) + var(--mirai-step) + var(--mirai-step)) !important;
  bottom: calc(var(--mirai-fab-bottom) + var(--mirai-fab-rise)) !important;
  z-index: 9999 !important;
}

/* Boyutları eşitle (diğer 3 butonu kopyalamış gibi) */
#mirai-components-menu > .mcm-btn,
#mirai-language-menu > .mcm-btn,
#mirai-news-menu > .mcm-btn{
  width: var(--mirai-fab-size) !important;
  height: var(--mirai-fab-size) !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* İkon boyu eşitle */
#mirai-components-menu > .mcm-btn .mcm-icon,
#mirai-language-menu > .mcm-btn .mcm-icon,
#mirai-news-menu > .mcm-btn .mcm-icon{
  font-size: var(--mirai-fab-icon) !important;
}

/* Haberler butonu diğerleri gibi görünmüyorsa (scoped CSS yüzünden),
   burada aynı davranışı kopyalıyoruz. */
#mirai-news-menu > .mcm-btn{
  background: #6b6b6b;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
#mirai-news-menu > .mcm-btn:hover{
  background: var(--mirai-ticker-accent);
}
#mirai-news-menu > .mcm-btn .mcm-icon{
  color: #fff;
}

/* Haberler tooltip tıklamada takılı kalmasın */
#mirai-news-menu .mcm-btn:focus + .mcm-tooltip{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#mirai-news-menu.mirai-tooltip-suppress .mcm-tooltip{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce){
  .mirai-ticker__track{ transform: none !important; }
}



/* Haberler tooltip: diğer butonlarla aynı hover mantığı */
#mirai-news-menu:hover > .mcm-tooltip,
#mirai-news-menu > .mcm-btn:hover + .mcm-tooltip{
  opacity: 1 !important;
  visibility: visible !important;
}

/* Tıklamada tooltip takılmasını engellemek için JS kısa süre bastırır */
#mirai-news-menu.mirai-tooltip-suppress .mcm-tooltip{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


  --mirai-anchor-offset: 96px; /* anchor scroll offset (sticky header) */




/* =========================================================
   v30 additions: NEW / PIN / Importance pills + anchor flash
   ========================================================= */

.mirai-ticker__item.is-clickable{ cursor:pointer; }
.mirai-ticker__item.is-clickable:hover .mirai-ticker__link{ text-decoration: underline; }

/* Date pill now shows full timestamp; keep it compact */
.mirai-ticker__pill--date{
  font-size: 11px;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* NEW pill */
.mirai-ticker__pill--new{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.14);
  border-left: 3px solid var(--mirai-ticker-accent);
  font-weight: 800;
}

/* PIN pill */
.mirai-ticker__pill--pin{
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.14);
  border-left: 3px solid rgba(0,0,0,.38);
  font-weight: 800;
}

/* Importance pill (priority mapped) */
.mirai-ticker__pill--importance{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.14);
  font-weight: 800;
  white-space: nowrap;
}
.mirai-ticker__pill--imp-critical{ border-left: 3px solid #b10014; }
.mirai-ticker__pill--imp-high{ border-left: 3px solid #b36b00; }
.mirai-ticker__pill--imp-med{ border-left: 3px solid #2b6cb0; }
.mirai-ticker__pill--imp-low{ border-left: 3px solid #2f855a; }

/* Anchor flash highlight */
.mirai-anchor-flash{
  outline: 2px solid rgba(177,0,20,.55);
  outline-offset: 6px;
  animation: miraiFlash 850ms ease-out 1;
}
@keyframes miraiFlash{
  0%{ outline-color: rgba(177,0,20,.0); }
  30%{ outline-color: rgba(177,0,20,.65); }
  100%{ outline-color: rgba(177,0,20,.0); }
}