@charset "UTF-8";
/* =====================================================================
   MIRAI — Announcement Modal — Consolidated Stylesheet
   File: mirai-announcement-modal.css
   Generated by merging 15 legacy CSS modules into a single file.

   Merge order preserved (to keep cascade/overrides identical to previous setup):
   1) .1.css .. 7) .7.css
   8) layout.css
   9) scroll.css
   10) meta.css
   11) glass-title.css
   12) layout-fix.css
   13) sidebar.css
   14) tags.css
   15) typography9.css  (final overrides)

   NOTE:
   - Duplicate @charset lines were removed from individual modules.
   - No selector/semantic changes were made; this is a mechanical merge.
   ===================================================================== */



/* ===== SOURCE: mirai-announcement-modal.1.css ===== */

/* CSS Document */

	   
/* =========================================================
   MIRAI — POP-UP (Announcement Center) — V4 (JSON + Filters + Pinned + CTA + Media)
   Two-panel modal:
   - Left: ChatGPT-style sidebar (search + category filters + date list)
   - Right: Detail view (image OR YouTube video autoplay) + CTA
   ========================================================= */
#miraiPopupModal .modal-dialog{max-width:1040px}
#miraiPopupModal .modal-content{border-radius:18px;overflow:hidden}

/* HEADER (Title + Subtitle readability) */
#miraiPopupModal .mirai-announce-header{
  position:relative;
  justify-content:center;
  text-align:center;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#miraiPopupModal .mirai-announce-header .btn-close{
  position:absolute;
  right:18px;
  top:18px;
}
#miraiPopupModal .mirai-announce-headerInner{
  width:100%;
  max-width:760px;
  margin:0 auto;
}
#miraiPopupModal .modal-title-mirai{
  font-size:26px;
  font-weight:700;
  letter-spacing:.4px;
}
#miraiPopupModal .mirai-announce-subtitle{
  margin-top:6px;
  font-size:13px;
  color:rgba(0,0,0,.62);
}
@media (max-width: 768px){
  #miraiPopupModal .modal-title-mirai{font-size:22px}
}

.mirai-announce-shell{display:flex;min-height:560px}

/* LEFT SIDEBAR */
.mirai-announce-nav{
  width:280px;
  background:#0f0f10;
  color:#e7e7e7;
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column
}
.mirai-announce-navHeader{padding:16px 14px 10px}
.mirai-announce-search{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 12px;
  color:#fff;
  font-size:13px;
  outline:none
}
.mirai-announce-search::placeholder{color:rgba(255,255,255,.55)}

.mirai-announce-filters{
  display:flex;
  gap:6px;
  padding:10px 14px 12px;
  border-top:1px solid rgba(255,255,255,.06)
}
.mirai-announce-filter{
  flex:1;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.90);
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  white-space:nowrap
}
.mirai-announce-filter:hover{background:rgba(255,255,255,.10)}
.mirai-announce-filter.is-active{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.22);
  color:#fff
}

.mirai-announce-list{
  padding:6px;
  overflow:auto;
  flex:1
}

.mirai-announce-empty{
  padding:12px 10px;
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.35;
}
.mirai-announce-item{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:inherit;
  padding:10px 10px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  cursor:pointer
}
.mirai-announce-item:hover{background:rgba(255,255,255,.06)}
.mirai-announce-item.is-active{background:rgba(255,255,255,.10)}
.mirai-announce-itemTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mirai-announce-itemDate{font-size:12px;opacity:.82;letter-spacing:.3px}
.mirai-announce-itemTitle{font-size:13px;font-weight:650;line-height:1.2}
.mirai-announce-badges{display:flex;gap:6px;flex-wrap:wrap}
.mirai-announce-badge{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.85)
}
.mirai-announce-badge.is-pinned{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.18);
  color:#fff
}

/* RIGHT VIEW */
.mirai-announce-view{flex:1;background:#fff;display:flex;flex-direction:column}
.mirai-announce-viewHeader{
  padding:18px 20px 10px;
  border-bottom:1px solid rgba(0,0,0,.06)
}
.mirai-announce-title{margin:0;font-size:18px}
.mirai-announce-meta{font-size:12px;color:rgba(0,0,0,.55);margin-top:4px}
.mirai-announce-viewBody{padding:16px 20px;overflow:auto;flex:1}

/* MEDIA (image or video) */
.mirai-announce-media{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
  background:rgba(0,0,0,.06)
}
.mirai-announce-media img{
  width:100%;
  max-height:260px;
  object-fit:cover;
  display:block
}
.mirai-announce-media iframe{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  display:block
}

/* MEDIA SIZE TUNING — keep video compact inside modal */
.mirai-announce-media.is-video{
  width: min(320px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.mirai-announce-actions{
  padding:14px 20px 18px;
  border-top:1px solid rgba(0,0,0,.06);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px
}
.mirai-announce-cta{
  margin-right:auto;
  display:none
}


/* TAG FILTERS (second layer) */
.mirai-announce-tagsWrap{padding:0 14px 12px}
.mirai-announce-tagsTitle{
  font-size:11px;
  color:rgba(255,255,255,.62);
  padding:0 2px 6px;
  letter-spacing:.3px
}
.mirai-announce-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:92px;
  overflow:auto;
  padding:0 2px 2px
}
.mirai-announce-tag{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.88);
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap
}
.mirai-announce-tag:hover{background:rgba(255,255,255,.07)}
.mirai-announce-tag.is-active{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22)
}

/* "Sürüm Notu" items: aggressive highlight */
.mirai-announce-item.is-surum-notu{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 3px 0 0 rgba(204,0,0,.90)
}
.mirai-announce-item.is-surum-notu:hover{background:rgba(255,255,255,.10)}
.mirai-announce-itemIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  vertical-align:middle
}
.mirai-announce-itemIcon svg{width:18px;height:18px}
.mirai-announce-itemIcon.is-red{color:rgb(204,0,0)}

.mirai-announce-badge.is-cat-surum_notu{background:rgba(204,0,0,.18);border-color:rgba(204,0,0,.32);color:rgba(255,255,255,.92)}

/* Right header tag badges */
.mirai-announce-tagBadges{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.mirai-announce-tagBadge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.04);
  color:rgba(0,0,0,.70);
  border:1px solid rgba(0,0,0,.06)
}

/* Responsive */
@media (max-width: 768px){
  #miraiPopupModal .modal-dialog{max-width:95vw}
  .mirai-announce-shell{flex-direction:column;min-height:auto}
  .mirai-announce-nav{
    width:100%;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.08)
  }
  .mirai-announce-list{
    display:flex;
    gap:6px;
    overflow:auto;
    padding-bottom:10px
  }
  .mirai-announce-item{min-width:240px}
}

/* LEFT LIST — Group headers (Ay/Yıl) */
.mirai-announce-group{
  padding:14px 10px 8px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.9px;
  color:rgba(255,255,255,.55);
}
.mirai-announce-group.is-pinned{
  color:rgba(255,255,255,.72);
}

/* Pin icon alignment */
.mirai-announce-badge.is-pinned{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.mirai-announce-pinIcon{
  width:12px;
  height:12px;
  flex:0 0 auto;
  opacity:.95;
  vertical-align:-2px;
}

/* Mobile: hide group headers in horizontal list */
@media (max-width: 768px){
  .mirai-announce-group{display:none}
}


/* =========================================================
   V7 — Glass UI + Typography + Wider Sidebar + Header Icon
   ========================================================= */
:root{
  --mirai-ann-nav-width: 360px;         /* Sol menü genişliği */
  --mirai-ann-glass-bg: rgba(255,255,255,.58);
  --mirai-ann-glass-blur: 18px;
  --mirai-red: #b80d12;
}

/* Modal container */
#miraiPopupModal .modal-content{
  background:transparent;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
}

/* Header + Right panel = glass */
#miraiPopupModal .mirai-announce-header{
  background:var(--mirai-ann-glass-bg);
  backdrop-filter: blur(var(--mirai-ann-glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--mirai-ann-glass-blur)) saturate(120%);
}
#miraiPopupModal .mirai-announce-view{
  background:rgba(255,255,255,.62);
  backdrop-filter: blur(var(--mirai-ann-glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--mirai-ann-glass-blur)) saturate(120%);
}

/* Title + subtitle readability */
#miraiPopupModal .modal-title-mirai{font-size:29px}
#miraiPopupModal .mirai-announce-subtitle{
  font-size:14px;
  color:rgba(0,0,0,.74);
}

/* Head icon (same family as popup icon) */
#miraiPopupModal .mirai-announce-headline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
#miraiPopupModal .mirai-announce-headIcon{
  font-size:28px;
  color:var(--mirai-red);
  animation: miraiZip 1.6s ease-in-out infinite;
  transform-origin:center;
}
@keyframes miraiZip{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

/* Larger content typography */
#miraiPopupModal .mirai-announce-title{font-size:22px}
#miraiPopupModal .modal-text-mirai{font-size:16px; line-height:1.55}

/* Sidebar width + better wrapping */
#miraiPopupModal .mirai-announce-nav{
  width:var(--mirai-ann-nav-width);
  flex:0 0 var(--mirai-ann-nav-width);
}
#miraiPopupModal .mirai-announce-itemTitle{
  font-size:14px;
  line-height:1.25;
  white-space:normal;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
#miraiPopupModal .mirai-announce-itemDate{font-size:12px}
#miraiPopupModal .mirai-announce-itemMeta{
  font-size:12px;
  color:rgba(255,255,255,.75);
  margin-top:4px;
}

/* --- FAB tooltips: force visible on hover (fix #8) --- */
#mirai-components-menu, #mirai-news-menu, #mirai-language-menu, #mirai-popup-menu,#mirai-search-menu{
  z-index:99999;
}
#mirai-components-menu .mcm-tooltip,
#mirai-news-menu .mcm-tooltip,
#mirai-language-menu .mcm-tooltip,
#mirai-popup-menu .mcm-tooltip,
#mirai-search-menu .mcm-tooltip{
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translate(-50%, 6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  background:rgba(0,0,0,.76);
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  white-space:nowrap;
}
#mirai-components-menu:hover .mcm-tooltip,
#mirai-news-menu:hover .mcm-tooltip,
#mirai-language-menu:hover .mcm-tooltip,
#mirai-popup-menu:hover .mcm-tooltip,
#mirai-search-menu:hover .mcm-tooltip{
  opacity:1;
  transform:translate(-50%, 0);
}

/* Mobile */
@media (max-width: 768px){
  :root{ --mirai-ann-nav-width: 100%; }
}



/* ===== SOURCE: mirai-announcement-modal.2.css ===== */

/* CSS Document */


/* V7 Patch — modern select + layout fixes */
.mirai-announce-tagsWrap{display:none !important;}
	
	
	
	
.mirai-announce-filters{padding:12px 14px 8px;}
.mirai-announce-filterRow{display:flex; gap:10px; align-items:center;}
.mirai-select{position:relative; flex:1;}
.mirai-selectNative{
  width:100%;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  padding:10px 36px 10px 12px;
  font-size:12px;
  outline:none;
}
.mirai-selectNative:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18);}
.mirai-selectNative:focus{border-color:rgba(120,170,255,.55); box-shadow:0 0 0 3px rgba(120,170,255,.18);}
.mirai-selectChevron{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; pointer-events:none; opacity:.8;
  background:conic-gradient(from 225deg, rgba(255,255,255,.9), rgba(255,255,255,.9));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 10l5 5 5-5z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 10l5 5 5-5z"/></svg>') center/contain no-repeat;
}
/* keep action buttons inside view */
.mirai-announce-actions{justify-content:flex-end; padding-right:18px;}
/* make right body scroll */
.mirai-announce-viewBody{overflow:auto; max-height:calc(82vh - 240px);}

.mirai-announce-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:3px 8px; border-radius:999px;
  font-size:11px; line-height:1; font-weight:600;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.92);
}
.mirai-announce-pill.cat-surum_notu{background:rgba(255,80,80,.18); border-color:rgba(255,80,80,.35); color:rgba(255,220,220,.95);}

/* --- Extended category pill palette (Mirai) --- */
.cat-teknik_guncelleme{background:rgba(255,145,60,.18); border-color:rgba(255,145,60,.35); color:rgba(255,235,220,.95);}
.cat-gelistirme{background:rgba(160,110,255,.18); border-color:rgba(160,110,255,.35); color:rgba(240,232,255,.95);}
.cat-tasarim_ux{background:rgba(255,90,200,.18); border-color:rgba(255,90,200,.35); color:rgba(255,228,247,.95);}
.cat-icerik_yayin{background:rgba(85,215,140,.18); border-color:rgba(85,215,140,.35); color:rgba(226,255,239,.95);}
.cat-medya{background:rgba(70,210,255,.18); border-color:rgba(70,210,255,.35); color:rgba(225,250,255,.95);}
.cat-guvenlik{background:rgba(255,70,90,.18); border-color:rgba(255,70,90,.35); color:rgba(255,228,232,.95);}
.cat-dagitim_deploy{background:rgba(90,130,255,.18); border-color:rgba(90,130,255,.35); color:rgba(230,238,255,.95);}
.cat-bakim{background:rgba(200,200,200,.14); border-color:rgba(200,200,200,.28); color:rgba(245,245,245,.92);}
.mirai-announce-pill.cat-duyuru{background:rgba(255,200,70,.18); border-color:rgba(255,200,70,.35); color:rgba(255,245,210,.95);}
.mirai-announce-pill.cat-haber{background:rgba(80,160,255,.18); border-color:rgba(80,160,255,.35); color:rgba(220,240,255,.95);}

	   



/* ===== SOURCE: mirai-announcement-modal.3.css ===== */

/* CSS Document */

/* =========================================================
   MIRAI — Announcement Modal — Size & Spacing Patch (V7.1)
   Goals:
   1) Modal genel boyutları küçült
   2) Modal yüksekliğini ~%30 azalt
   3) Sağ içerikte üst boşlukları azalt, içeriği yukarı taşı
   ========================================================= */

/* 1) Overall modal footprint (desktop) */
#miraiPopupModal .modal-dialog{max-width:920px !important;}

/* 2) Reduce modal height (~30%) while keeping independent scroll areas */
#miraiPopupModal .mirai-announce-shell{
  height:70vh !important;
  min-height:390px !important; /* 560px -> ~30% reduction */
}

/* Keep panels bounded to shell height */
#miraiPopupModal .mirai-announce-nav,
#miraiPopupModal .mirai-announce-view{
  height:100% !important;
}

/* 3) Move right content up (reduce top paddings) */
#miraiPopupModal .mirai-announce-header{
  padding-top:12px !important;
  padding-bottom:12px !important;
}
#miraiPopupModal .mirai-announce-viewHeader{
  padding-top:10px !important;
  padding-bottom:8px !important;
}
#miraiPopupModal .mirai-announce-viewBody{
  padding-top:12px !important;
}

/* Ensure scroll areas remain functional inside reduced height */
#miraiPopupModal .mirai-announce-list{overflow:auto !important;}
#miraiPopupModal .mirai-announce-viewBody{overflow:auto !important; flex:1 !important; max-height:none !important;}
	
	



/* ===== SOURCE: mirai-announcement-modal.4.css ===== */

/* CSS Document */

	   
/* MIRAI — Announcement Modal — Header Compact + Global Scale (V7.2 + V7.3)
   - Header: Üst başlık alanını ~%55 azalt
   - Scale : Modal yapısını (başlık + içerik) ~%20 küçült (0.80)
*/

/* ========== Global Scale (0.80) ========== */
#miraiPopupModal .modal-content{
  zoom: .80 !important; /* 20% smaller */
}

/* Fallback (non-Chromium) */
@supports not (zoom: 1){
  #miraiPopupModal .modal-content{
    transform: scale(.80) !important;
    transform-origin: top center !important;
  }
}

/* ========== Header Compact ========== */
#miraiPopupModal .mirai-announce-header{
  padding-top:6px !important;
  padding-bottom:6px !important;
}

#miraiPopupModal .mirai-announce-headline{gap:8px !important;}
#miraiPopupModal .mirai-announce-headIcon{font-size:20px !important;}

#miraiPopupModal .modal-title-mirai{
  font-size:22px !important;
  line-height:1.12 !important;
  margin:0 !important;
}

#miraiPopupModal .mirai-announce-subtitle{
  margin-top:2px !important;
  font-size:12px !important;
  line-height:1.2 !important;
}

#miraiPopupModal .mirai-announce-header .btn-close{
  top:12px !important;
  right:14px !important;
}

@media (max-width: 768px){
  #miraiPopupModal .modal-title-mirai{font-size:20px !important;}
  #miraiPopupModal .mirai-announce-headIcon{font-size:18px !important;}
}



/* ===== SOURCE: mirai-announcement-modal.5.css ===== */

/* CSS Document */


/* MIRAI — Announcement Modal — Right Content Top Align Patch (V7.4)
   Goal: Sağ mesaj içeriğini en üstten başlat (viewHeader/top gaps azalt) */

#miraiPopupModal .mirai-announce-view{padding-top:0 !important;}

#miraiPopupModal .mirai-announce-viewHeader{
  padding-top:16px !important;
  padding-bottom:10px !important;
}

#miraiPopupModal .mirai-announce-titleRow{margin-top:0 !important;}
#miraiPopupModal .mirai-announce-meta{margin-top:12px !important;}
#miraiPopupModal .mirai-announce-tagBadges{margin-top:4px !important;}

#miraiPopupModal .mirai-announce-viewBody{
  padding-top:10px !important;
}



/* ===== SOURCE: mirai-announcement-modal.6.css ===== */

/* CSS Document */

	   
/* MIRAI — Announcement Modal — Title Pill + Icon Color (V7.5)
   Goal:
   1) Sağ başlık ikonunu MIRAI kırmızısı yap
   2) Başlığı “pill” olarak belirginleştir */

#miraiPopupModal .mirai-announce-titleIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  color:var(--mirai-red);
}
#miraiPopupModal .mirai-announce-titleIcon svg{
  width:22px;
  height:22px;
  display:block;
}

#miraiPopupModal .mirai-announce-titleRow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  max-width:100%;
  flex-wrap:wrap; /* uzun başlıklarda taşmayı önler */
}

#miraiPopupModal .mirai-announce-title{
  margin:0 !important;
  font-weight:800;
  letter-spacing:.2px;
  color:rgba(0,0,0,.88);
}



/* ===== SOURCE: mirai-announcement-modal.7.css ===== */

/* CSS Document */


	   
/* MIRAI — Announcement Modal — Title Accent Line (V7.6-alt)
   Goal: Pill yerine minimal vurgu */

#miraiPopupModal .mirai-announce-titleRow{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  width:auto !important;
}

#miraiPopupModal .mirai-announce-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:4px 0 4px 12px;
  border-left:4px solid var(--mirai-red);
  font-weight:750;
}

#miraiPopupModal .mirai-announce-titleIcon{
  color:var(--mirai-red) !important;
}



/* ===== SOURCE: mirai-announcement-modal.layout.css ===== */

/* =========================================================
   MIRAI — Announcement Modal — Layout & Typography Fix (V1.0)
   Purpose:
   1) Sağ panel (içerik + buton barı) ile sol sidebar aynı hizada bitsin.
   2) Gizle / Kapat butonları, sol sidebar alt çizgisiyle aynı seviyede olsun.
   3) Mesaj metni: paragraf/bağlantı formatı ve kırılmaları düzelsin.
   Notes:
   - Bu dosyayı diğer Mirai modal CSS’lerinin *sonrasında* yükleyin.
   ========================================================= */

/* --- Flex height alignment (fix: right side ending early) --- */
#miraiPopupModal .mirai-announce-shell{
  align-items: stretch;
}

#miraiPopupModal .mirai-announce-nav,
#miraiPopupModal .mirai-announce-view{
  min-height: 0;              /* critical for nested scroll in flex */
  height: 100%;
}

#miraiPopupModal .mirai-announce-nav{
  display: flex;
  flex-direction: column;
}

#miraiPopupModal .mirai-announce-list{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#miraiPopupModal .mirai-announce-view{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

#miraiPopupModal .mirai-announce-viewHeader{
  flex: 0 0 auto;
}

#miraiPopupModal .mirai-announce-viewBody{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#miraiPopupModal .mirai-announce-actions{
  flex: 0 0 auto;
  margin-top: auto;           /* pushes action bar to the bottom */
}

/* --- Body typography (HTML-based content) --- */
#miraiPopupModal #miraiAnnBody{
  line-height: 1.65;
  word-break: break-word;
}

#miraiPopupModal #miraiAnnBody p{
  margin: 0 0 12px;
}

#miraiPopupModal #miraiAnnBody p:last-child{
  margin-bottom: 0;
}

#miraiPopupModal #miraiAnnBody ul,
#miraiPopupModal #miraiAnnBody ol{
  margin: 0 0 12px;
  padding-left: 18px;
}

#miraiPopupModal #miraiAnnBody a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Callout block used in body HTML */
#miraiPopupModal #miraiAnnBody .mirai-callout{
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}

#miraiPopupModal #miraiAnnBody .mirai-inline-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

#miraiPopupModal #miraiAnnBody .mirai-inline-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
  text-decoration: none;
}

#miraiPopupModal #miraiAnnBody .mirai-inline-links a:hover{
  background: rgba(255,255,255,.75);
}



/* ===== SOURCE: mirai-announcement-modal.scroll.css ===== */

/* CSS Document */

/* =========================================================
   MIRAI — Announcement Center — Scroll Architecture + Scrollbar Skin (B)
   Goals:
   - Modal container never scrolls
   - Left list + Right body scroll independently
   - Custom scrollbar (WebKit + Firefox)
   ========================================================= */

/* 4) Modal container scroll'u kapat (scroll sadece iç panellerde olsun) */
#miraiPopupModal .modal-content{ overflow:hidden; } /* zaten var, garanti olsun */
#miraiPopupModal .modal-body{
  padding:0 !important;
  overflow:hidden !important; /* kritik: modal içinde ikinci bir scroll oluşmasın */
}

/* 5) Sol side list: bağımsız dikey scroll (zaten overflow:auto; netleştir) */
#miraiPopupModal .mirai-announce-list{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}

/* 6) Sağ ana içerik: bağımsız dikey scroll (zaten overflow:auto; netleştir) */
#miraiPopupModal .mirai-announce-viewBody{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}

/* (Opsiyonel ama pratik) Etiketler de modal estetiğinde scroll alsın */
#miraiPopupModal .mirai-announce-tags{
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* 7) Custom Scrollbar — WebKit (Chrome/Safari/Edge) */
#miraiPopupModal .mirai-announce-list::-webkit-scrollbar,
#miraiPopupModal .mirai-announce-viewBody::-webkit-scrollbar,
#miraiPopupModal .mirai-announce-tags::-webkit-scrollbar{
  width:10px;
  height:10px;
}

#miraiPopupModal .mirai-announce-list::-webkit-scrollbar-track,
#miraiPopupModal .mirai-announce-viewBody::-webkit-scrollbar-track,
#miraiPopupModal .mirai-announce-tags::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}

#miraiPopupModal .mirai-announce-list::-webkit-scrollbar-thumb,
#miraiPopupModal .mirai-announce-viewBody::-webkit-scrollbar-thumb,
#miraiPopupModal .mirai-announce-tags::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:999px;
  border:2px solid rgba(0,0,0,0);           /* “glass” hissi için */
  background-clip:padding-box;
}

#miraiPopupModal .mirai-announce-list:hover::-webkit-scrollbar-thumb,
#miraiPopupModal .mirai-announce-viewBody:hover::-webkit-scrollbar-thumb,
#miraiPopupModal .mirai-announce-tags:hover::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.28);
}

/* Sağ panel beyaz zeminde scrollbar daha koyu görünsün */
#miraiPopupModal .mirai-announce-viewBody::-webkit-scrollbar-track{
  background:rgba(0,0,0,.06);
}
#miraiPopupModal .mirai-announce-viewBody::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.22);
}
#miraiPopupModal .mirai-announce-viewBody:hover::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.30);
}

/* 7) Custom Scrollbar — Firefox */
#miraiPopupModal .mirai-announce-list,
#miraiPopupModal .mirai-announce-tags{
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,.26) rgba(255,255,255,.06);
}
#miraiPopupModal .mirai-announce-viewBody{
  scrollbar-width:thin;
  scrollbar-color: rgba(0,0,0,.28) rgba(0,0,0,.06);
}



/* ===== SOURCE: mirai-announcement-modal.meta.css ===== */

/* =========================================================
   MIRAI — Announcement Modal — Meta Pills + Title Icon Patch
   Purpose:
   - Fix oversized SVG icon in right header (title left icon)
   - Render tarih/yazar/kategori/sürüm/etiket bilgilerini pill (badge) formatında
   ========================================================= */

/* Title row (icon + title) */
#miraiPopupModal .mirai-announce-titleRow{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Title icon sizing (critical fix for the giant "+" SVG) */
#miraiPopupModal .mirai-announce-titleIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:10px;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
  color:rgba(0,0,0,.70);
  flex:0 0 auto;
}
#miraiPopupModal .mirai-announce-titleIcon svg{
  width:18px;
  height:18px;
  display:block;
}

/* Meta pills container */
#miraiPopupModal .mirai-announce-meta{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* Pill base */
#miraiPopupModal .mirai-meta-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:600;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
  color:rgba(0,0,0,.72);
}
#miraiPopupModal .mirai-meta-pill b{
  font-weight:700;
  opacity:.82;
}

/* Pill variants (subtle, premium) */
#miraiPopupModal .mirai-meta-pill.is-date{
  background:rgba(90, 110, 255, .10);
  border-color:rgba(90, 110, 255, .18);
}
#miraiPopupModal .mirai-meta-pill.is-category{
  background:rgba(10, 10, 10, .06);
  border-color:rgba(0,0,0,.10);
}
#miraiPopupModal .mirai-meta-pill.is-author{
  background:rgba(50, 180, 130, .10);
  border-color:rgba(50, 180, 130, .18);
}
#miraiPopupModal .mirai-meta-pill.is-version{
  background:rgba(255, 170, 60, .12);
  border-color:rgba(255, 170, 60, .20);
}
#miraiPopupModal .mirai-meta-pill.is-tags{
  background:rgba(180, 80, 255, .10);
  border-color:rgba(180, 80, 255, .18);
}

/* Mobile: keep pills readable */
@media (max-width: 768px){
  #miraiPopupModal .mirai-announce-titleIcon{width:24px;height:24px;border-radius:9px;}
  #miraiPopupModal .mirai-meta-pill{font-size:11px;padding:6px 9px;}
}



/* =========================================================
   PATCH V2 — Date pill red + Sidebar date match + Sidebar author label + Actions placement
   ========================================================= */

/* Date pill (right meta) — IMPORTANT (red) */
.mirai-meta-pill.is-date{
  background:rgba(204,0,0,.10);
  border-color:rgba(204,0,0,.20);
  color:rgba(204,0,0,.92);
}

/* Sidebar date badge — match date pill red */
#miraiPopupModal .mirai-announce-date{
  background:rgba(204,0,0,.12);
  border-color:rgba(204,0,0,.22);
  color:rgba(255,255,255,.92);
}

/* Sidebar author pill sizing */
#miraiPopupModal .mirai-meta-pill.is-author.is-side{
  padding:5px 9px;
  font-size:12px;
  border-radius:999px;
}

/* Actions now inside scroll body: keep them right after content, centered, non-sticky */
#miraiPopupModal .mirai-announce-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  padding:14px 16px 18px;
  margin-top:12px;
  flex-wrap:wrap;
}

/* Prevent action buttons from hugging extreme right */
#miraiPopupModal .mirai-announce-actions .modal-close-btn,
#miraiPopupModal .mirai-announce-actions .modal-close-bounce-cta{
  min-width:110px;
}




/* === MIRAI PATCH — META PILLS SYNC === */

/* DATE — RED (RIGHT + LEFT) */
.mirai-announce-tagBadge.is-date,
.mirai-announce-itemDate{
  background: rgba(184,13,18,.18);
  border: 1px solid rgba(184,13,18,.45);
  color: #b80d12;
  font-weight: 600;
}

/* LEFT AUTHOR — same as right */
.mirai-announce-itemAuthor{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:999px;
  background: rgba(80,160,255,.18);
  border: 1px solid rgba(80,160,255,.35);
  color: #dfeeff;
  font-size:11px;
}

/* LABEL FORMAT */
.mirai-announce-itemAuthor::before{
  content:"Yazar:";
  opacity:.85;
}

/* TAG COUNT */
.mirai-announce-tagBadge.is-tags::before{
  content:"Etiket Sayısı: ";
}

/* ACTION BUTTONS — CONTENT END */
.mirai-announce-actions{
  justify-content:center;
  margin-top:20px;
  padding-bottom:10px;
}



/* ===== SOURCE: mirai-announcement-modal.glass-title.css ===== */

/* =========================================================
   MIRAI — Announcement Modal — Glass Header + Title VFX (E/F)
   - Header watermark-like translucency + stronger glass
   - Right panel glassmorphism (left sidebar stays black)
   - "Duyurular" embossed title + optional centering
   - 3x bell icon + halo / pulse rings animation
   ========================================================= */

:root{
  --mirai-ann-header-bg: rgba(255,255,255,.38);  /* more transparent */
  --mirai-ann-right-bg:  rgba(255,255,255,.46);  /* glass on right */
  --mirai-ann-glass-blur: 22px;
  --mirai-ann-glass-sat:  145%;
  --mirai-ann-glass-bright: 112%;
  --mirai-ann-glass-border: rgba(255,255,255,.28);
  --mirai-ann-glass-shadow: 0 22px 72px rgba(0,0,0,.26);

  --mirai-ann-title-size: 34px;     /* bigger, stronger */
  --mirai-ann-title-weight: 800;
  --mirai-ann-title-letter: .6px;

  --mirai-ann-bell-size: 78px;      /* ~3x previous 26-28px */
  --mirai-ann-bell-color: #b80d12;
}

/* -----------------------------
   E) Header: watermark glass
   ----------------------------- */
#miraiPopupModal .modal-content{
  background: transparent;
  border: 1px solid var(--mirai-ann-glass-border);
  box-shadow: var(--mirai-ann-glass-shadow);
  overflow: hidden;
}

/* Header glass + watermark layer */
#miraiPopupModal .mirai-announce-header{
  background: var(--mirai-ann-header-bg) !important;
  backdrop-filter: blur(var(--mirai-ann-glass-blur)) saturate(var(--mirai-ann-glass-sat)) brightness(var(--mirai-ann-glass-bright));
  -webkit-backdrop-filter: blur(var(--mirai-ann-glass-blur)) saturate(var(--mirai-ann-glass-sat)) brightness(var(--mirai-ann-glass-bright));
  border-bottom: 1px solid rgba(0,0,0,.06);
  position: relative;
}

/* subtle watermark texture */
#miraiPopupModal .mirai-announce-header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 220px at 50% -40px, rgba(255,255,255,.55), rgba(255,255,255,0) 65%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  mix-blend-mode: overlay;
  opacity:.65;
}
#miraiPopupModal .mirai-announce-header::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 42%),
    linear-gradient(315deg, rgba(0,0,0,.05), rgba(0,0,0,0) 46%);
  opacity:.28;
}

/* Keep close button readable */
#miraiPopupModal .mirai-announce-header .btn-close{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
  opacity:.85;
}

/* -----------------------------
   E) Right panel glass
   ----------------------------- */
#miraiPopupModal .mirai-announce-view{
  background: var(--mirai-ann-right-bg) !important;
  backdrop-filter: blur(var(--mirai-ann-glass-blur)) saturate(var(--mirai-ann-glass-sat)) brightness(var(--mirai-ann-glass-bright));
  -webkit-backdrop-filter: blur(var(--mirai-ann-glass-blur)) saturate(var(--mirai-ann-glass-sat)) brightness(var(--mirai-ann-glass-bright));
  border-left: 1px solid rgba(255,255,255,.18);
}

/* Ensure left stays black (explicit) */
#miraiPopupModal .mirai-announce-nav{
  background:#0f0f10 !important;
}

/* -----------------------------
   F) Title typography (emboss)
   ----------------------------- */
#miraiPopupModal .modal-title-mirai{
  font-size: var(--mirai-ann-title-size) !important;
  font-weight: var(--mirai-ann-title-weight) !important;
  letter-spacing: var(--mirai-ann-title-letter) !important;
  text-transform: uppercase;
  line-height: 1.05;
  color: rgba(0,0,0,.88);
  text-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 10px 22px rgba(0,0,0,.22),
    0 2px 6px rgba(0,0,0,.16);
}

/* Optional centering support:
   - default is centered (current markup uses justify-content:center)
   - add class: #miraiPopupModal.is-title-left  -> left align
*/
#miraiPopupModal.is-title-left .mirai-announce-headerInner{max-width:920px;}
#miraiPopupModal.is-title-left .mirai-announce-headline{
  justify-content:flex-start !important;
  text-align:left !important;
}
#miraiPopupModal.is-title-left .mirai-announce-subtitle{
  text-align:left !important;
}

/* subtitle a bit stronger */
#miraiPopupModal .mirai-announce-subtitle{
  color: rgba(0,0,0,.72) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* -----------------------------
   F) Bell icon: 3x + halo/pulse
   ----------------------------- */
#miraiPopupModal .mirai-announce-headIcon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--mirai-ann-bell-size);
  height: var(--mirai-ann-bell-size);
  font-size: calc(var(--mirai-ann-bell-size) * .62) !important;
  color: var(--mirai-ann-bell-color) !important;

  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.22))
    drop-shadow(0 0 18px rgba(184,13,18,.28));
  transform-origin: 50% 12%;
  animation: miraiBellSwing 2.25s ease-in-out infinite;
}

/* rings */
#miraiPopupModal .mirai-announce-headIcon::before,
#miraiPopupModal .mirai-announce-headIcon::after{
  content:"";
  position:absolute;
  inset: 10%;
  border-radius: 999px;
  border: 2px solid rgba(184,13,18,.38);
  box-shadow:
    0 0 0 6px rgba(184,13,18,.10),
    0 0 26px rgba(184,13,18,.22);
  opacity: 0;
  transform: scale(.78);
  animation: miraiHaloPulse 1.55s ease-out infinite;
  pointer-events:none;
}
#miraiPopupModal .mirai-announce-headIcon::after{
  inset: 2%;
  border-color: rgba(184,13,18,.26);
  animation-delay: .55s;
}

@keyframes miraiHaloPulse{
  0%   { opacity: 0; transform: scale(.78); }
  20%  { opacity: .85; }
  65%  { opacity: .18; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.26); }
}
@keyframes miraiBellSwing{
  0%,100%{ transform: rotate(-6deg) translateY(0); }
  50%    { transform: rotate(6deg)  translateY(-2px); }
}

/* Headline spacing: give bell room without blowing header height */
#miraiPopupModal .mirai-announce-headline{
  gap: 14px !important;
}

/* Responsive */
@media (max-width: 768px){
  :root{
    --mirai-ann-title-size: 26px;
    --mirai-ann-bell-size: 58px;
  }
  #miraiPopupModal .mirai-announce-headIcon{
    animation-duration: 2.6s;
  }
}



/* ===== SOURCE: mirai-announcement-modal.layout-fix.css ===== */

/* ======================================================================
   MIRAI — Duyuru Merkezi Modal
   Patch: Bottom Alignment + Body Formatting
   File: mirai-announcement-modal.layout-fix.v2.css
   RefCode: MIRAI-ANNOUNCE-LAYOUT-FIX-V2
   ====================================================================== */

/* 01) Consistent column height + true bottom alignment */
#miraiPopupModal .mirai-announce-shell{
  height: 70vh !important;
  min-height: 390px !important;
}

#miraiPopupModal .mirai-announce-nav,
#miraiPopupModal .mirai-announce-view{
  height: 100% !important;
  min-height: 0 !important;
}

/* Ensure right side is a proper flex column */
#miraiPopupModal .mirai-announce-view{
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Let the body take the remaining space (no artificial max-height) */
#miraiPopupModal .mirai-announce-viewBody{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  /* prevents the last lines from visually “touching” the bottom border */
  padding-bottom: 18px !important;
}

/* Push the button bar to the very bottom */
#miraiPopupModal .mirai-announce-actions{
  margin-top: auto !important;
  flex: 0 0 auto !important;
  padding-bottom: 20px !important; /* aligns with sidebar bottom padding */
}

/* Sidebar bottom padding to match right actions bar baseline */
#miraiPopupModal .mirai-announce-nav{
  padding-bottom: 20px !important;
}

#miraiPopupModal .mirai-announce-list{
  padding-bottom: 20px !important;
}

/* 02) Body typography and spacing (fix “tek paragraf” görünümü) */
#miraiPopupModal #miraiAnnBody{
  line-height: 1.65;
  word-break: break-word;
}

#miraiPopupModal #miraiAnnBody p{
  margin: 0 0 12px;
}

#miraiPopupModal #miraiAnnBody ul{
  margin: 0 0 12px 18px;
  padding: 0;
}

#miraiPopupModal #miraiAnnBody li{
  margin: 0 0 8px;
}

#miraiPopupModal #miraiAnnBody hr{
  border: 0;
  border-top: 1px solid rgba(0,0,0,.10);
  margin: 14px 0;
}

#miraiPopupModal #miraiAnnBody a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

#miraiPopupModal #miraiAnnBody .mirai-note{
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.65);
}

/* Reuse existing YouTube wrapper style even when embedded inside body */
#miraiPopupModal #miraiAnnBody .mirai-announce-yt{
  width: min(520px, 100%);
  margin: 12px auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}

#miraiPopupModal #miraiAnnBody .mirai-announce-yt iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
}



/* ===== SOURCE: mirai-announcement-modal.sidebar.css ===== */

/* CSS Document */

/* =========================================================
   MIRAI — Left Sidebar Polish Pack (V7.8)
   - Sticky search + filters
   - Cleaner list items + stronger active state
   - Scrollbar polish
   ========================================================= */

/* Sidebar: keep it crisp */
#miraiPopupModal .mirai-announce-nav{
  background:#0f0f10 !important;
}

/* 1) Sticky: search bar üstte sabit kalsın */
#miraiPopupModal .mirai-announce-navHeader{
  position:sticky;
  top:0;
  z-index:30;
  background:#0f0f10;
  padding:14px 14px 10px !important;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* 2) Sticky: filtre satırı da sabit kalsın */
#miraiPopupModal .mirai-announce-filters{
  position:sticky;
  top:62px; /* navHeader yüksekliğine göre */
  z-index:25;
  background:#0f0f10;
  padding:10px 14px 12px !important;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Search input biraz daha zarif */
#miraiPopupModal .mirai-announce-search{
  border-radius:14px !important;
  padding:11px 12px !important;
}

/* 3) Liste alanı: üst boşluk ve okunabilirlik */
#miraiPopupModal .mirai-announce-list{
  padding:10px !important;
}

/* Group headers (SABİT / OCAK 2026) daha temiz */
#miraiPopupModal .mirai-announce-group{
  padding:12px 10px 8px !important;
  margin-top:2px;
  border-top:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.58) !important;
}

/* Item: daha az “kaba blok”, daha iyi ayrım */
#miraiPopupModal .mirai-announce-item{
  position:relative;
  padding:10px 10px 12px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
}
#miraiPopupModal .mirai-announce-item:hover{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.10) !important;
}

/* Active: solda MIRAI kırmızısı vurgu + daha net */
#miraiPopupModal .mirai-announce-item.is-active{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.14) !important;
}
#miraiPopupModal .mirai-announce-item.is-active::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:6px;
  background:var(--mirai-red);
  box-shadow:0 0 10px rgba(184,13,18,.28);
}

/* Yazar pill: daha ince ve modern */
#miraiPopupModal .mirai-announce-badge{
  font-size:11px !important;
  padding:3px 8px !important;
  border-radius:999px !important;
  background:rgba(80,160,255,.14) !important;
  border-color:rgba(80,160,255,.28) !important;
  color:rgba(230,245,255,.95) !important;
}

/* Sağ üst kategori pill’leri ile sol kategori pill’leri denge */
#miraiPopupModal .mirai-announce-itemDate{
  opacity:.78 !important;
}



/* ===== SOURCE: mirai-announcement-modal.tags.css ===== */

/* CSS Document */

/* =========================================================
   MIRAI — Announcement Modal — Tags (Right + Optional Left) — V1
   File: mirai-announcement-modal.tags.css
   ========================================================= */

/* RIGHT: Tag badges satırı zaten var; onu "etiket" gibi gösterecek label ekle */
#miraiPopupModal .mirai-announce-tagBadges{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

#miraiPopupModal .mirai-announce-tagBadges::before{
  content:"Etiketler:";
  font-size:12px;
  color:rgba(0,0,0,.55);
  margin-right:4px;
}

/* Tag pill’leri biraz daha premium */
#miraiPopupModal .mirai-announce-tagBadge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(184, 13, 18, .06);
  border:1px solid rgba(184, 13, 18, .16);
  color:rgba(0,0,0,.78);
}
#miraiPopupModal .mirai-announce-tagBadge:hover{
  background:rgba(184, 13, 18, .10);
  border-color:rgba(184, 13, 18, .22);
}



/* ===== SOURCE: mirai-announcement-modal.typography9.css ===== */

/* =====================================================================
   MIRAI — Announcement Modal — Typography + Layout FINAL (V14)

   Bu dosya, index.html içinde announcement CSS'leri arasında EN SON
   yüklenmelidir (son link).

   Neden bu "FINAL" dosya?
   - mirai-announcement-modal.4.css içindeki zoom/scale yaklaşımı,
     görsel olarak modal'ı küçültürken layout ölçülerini birebir küçültmez.
     Sonuç: alt tarafta "boşluk" ve Gizle/Kapat barının aşağıya
     oturmaması gibi davranışlar.

   Çözüm yaklaşımı:
   - Zoom/scale'i bu modal için iptal ediyoruz (zoom:1)
   - Boyutu gerçek ölçülerle küçültüyoruz (max-width + vh height)
   - Sağ paneli gerçek flex column yapıp viewBody'yi doldurtuyoruz
   - Actions bar'ı margin-top:auto ile tabana kilitliyoruz
   ===================================================================== */

/* =========================================================
   1) Typography bump (minimal)
   ========================================================= */

#miraiPopupModal .modal-title-mirai{ font-size:28px !important; }
#miraiPopupModal .mirai-announce-subtitle{ font-size:14px !important; }

#miraiPopupModal .mirai-announce-title{ font-size:21px !important; }
#miraiPopupModal .modal-text-mirai{ font-size:16px !important; }

#miraiPopupModal .mirai-announce-meta{ font-size:12px !important; }
#miraiPopupModal .mirai-announce-tagBadge{ font-size:12px !important; }

#miraiPopupModal .mirai-announce-search{ font-size:13px !important; }
#miraiPopupModal .mirai-announce-filter{ font-size:12px !important; }

#miraiPopupModal .mirai-announce-itemTitle{ font-size:14px !important; }
#miraiPopupModal .mirai-announce-itemDate{ font-size:12px !important; }
#miraiPopupModal .mirai-announce-badge{ font-size:11px !important; }


/* =========================================================
   2) Left list author: pill değil, düz metin
   ========================================================= */

#miraiPopupModal .mirai-announce-itemAuthor{
  display:block !important;
  margin-top:6px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  color:rgba(255,255,255,.68) !important;
  font-size:11px !important;
}

#miraiPopupModal .mirai-announce-itemAuthor::before{
  content:"Yazar: " !important;
  opacity:.78;
}


/* =========================================================
   3) LAYOUT FIX (V14)
      - Zoom/scale kaynaklı boşluğu sıfırlar
      - Sağ panel (viewBody) tabana kadar uzar
      - Gizle/Kapat barı en altta, sol sidebar ile aynı baseline'da biter
   ========================================================= */

/* 3.1) Global scale/zoom'u bu modal için iptal et */
#miraiPopupModal .modal-content{
  zoom: 1 !important;
  transform: none !important;
}

/* 3.2) Boyutu gerçek ölçülerle küçült (zoom yerine) */
#miraiPopupModal .modal-dialog{
  max-width: min(1032px, calc(100vw - 2rem)) !important; /* 1040 * 0.80 ≈ 832 */
}

/* Modal yüksekliği: stabil bir flex dağılımı için içerik kutusuna net yükseklik */
#miraiPopupModal .modal-content{
  height: 62vh !important;
  max-height: 62vh !important;
}



/* modal-content içindeki body alanı gerçekten esnesin */
#miraiPopupModal .modal-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;

  display: flex !important;           /* kritik: shell'i aşağı doğru esnetir */
  flex-direction: column !important;
}

/* shell tüm yüksekliği kaplasın */
#miraiPopupModal .mirai-announce-shell{
  flex: 1 1 auto !important;          /* kritik */
  min-height: 0 !important;
  height: 100% !important;            /* sende zaten var; kalsın */
}










/* 3.3) Shell ve kolonlar: aynı yükseklikte bitsin */
#miraiPopupModal .mirai-announce-shell{
  align-items: stretch !important;
  height: 100% !important;
  min-height: 0 !important; /* mirai-announcement-modal.1.css içindeki min-height:560px'i iptal eder */
}

#miraiPopupModal .mirai-announce-nav,
#miraiPopupModal .mirai-announce-view{
  height: 100% !important;
  min-height: 0 !important;
}

/* 3.4) Sağ panel: gerçek flex column + body doldursun */
#miraiPopupModal .mirai-announce-view{
  display: flex !important;
  flex-direction: column !important;
}

#miraiPopupModal .mirai-announce-viewBody{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important; /* mirai-announcement-modal.2.css max-height kısıtını iptal eder */
  overflow: auto !important;
}

/* 3.5) Actions bar: en alta kilitle (meta.css margin-top override'larını iptal eder) */
#miraiPopupModal .mirai-announce-actions{
  flex: 0 0 auto !important;
  margin: 0 !important;
  margin-top: auto !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;

  padding: 14px 16px 20px !important; /* alt baseline */
}

/* Sol sidebar baseline ile aynı bitsin */
#miraiPopupModal .mirai-announce-list{
  padding-bottom: 20px !important;
}

/* Mobilde daha rahat: yükseklik biraz artsın */
@media (max-width: 992px){
  #miraiPopupModal .modal-content{
    height: 78vh !important;
    max-height: 78vh !important;
  }
}

@media (max-width: 576px){
  #miraiPopupModal .modal-content{
    height: 86vh !important;
    max-height: 86vh !important;
    border-radius: 14px !important;
  }
  #miraiPopupModal .modal-dialog{
    margin: .75rem !important;
    max-width: calc(100vw - 1.5rem) !important;
  }
}

/* =========================================================
   16) HOTFIX (V16) — Modal Flex Chain Hard-Override
   Problem addressed:
   - In some builds, a global rule overrides Bootstrap's `.modal-content{display:flex}`
     causing `.modal-body` not to stretch to the modal height. This leaves empty space
     under the right panel, and the action bar ("Gizle / Kapat") floats above the bottom.

   Fix:
   - Force `#miraiPopupModal .modal-content` back to flex-column.
   - Ensure `.modal-body` expands (flex:1) and becomes a flex-column container.
   - Keep your existing width/height settings intact (no changes above).
   ========================================================= */

#miraiPopupModal .modal-content{
  display: flex !important;
  flex-direction: column !important;
}

#miraiPopupModal .modal-header{
  flex: 0 0 auto !important;
}

#miraiPopupModal .modal-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
}

/* Shell must actually occupy the full modal-body height */
#miraiPopupModal .mirai-announce-shell{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}

/* Right panel: true column flex so actions can sit at the bottom */
#miraiPopupModal .mirai-announce-view{
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
}

#miraiPopupModal .mirai-announce-viewBody{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

#miraiPopupModal .mirai-announce-actions{
  margin-top: auto !important;   /* push to bottom */
  padding-bottom: 20px !important; /* baseline with sidebar */
}


/* =========================================================
   17) HOTFIX (V17) — Typography downscale (requested)
   - Slightly smaller heading/body/chip sizes to reduce visual density.
   ========================================================= */
/* (Applied by editing V14 'Typography bump' values above.) */

/* =========================================================
   18) HOTFIX (V18) — Typography downscale (1 notch more)
   - Requested: make text sizes slightly smaller vs V17.
   - This block is appended to preserve V13 sizing + V16 layout fixes.
   ========================================================= */

#miraiPopupModal .modal-title-mirai{ font-size:27px !important; }
#miraiPopupModal .mirai-announce-subtitle{ font-size:13px !important; }

#miraiPopupModal .mirai-announce-title{ font-size:20px !important; }
#miraiPopupModal .modal-text-mirai{ font-size:15px !important; }

#miraiPopupModal .mirai-announce-meta{ font-size:11px !important; }
#miraiPopupModal .mirai-announce-tagBadge{ font-size:11px !important; }

#miraiPopupModal .mirai-announce-search{ font-size:12px !important; }
#miraiPopupModal .mirai-announce-filter{ font-size:11px !important; }

#miraiPopupModal .mirai-announce-itemTitle{ font-size:13px !important; }
#miraiPopupModal .mirai-announce-itemDate{ font-size:11px !important; }
#miraiPopupModal .mirai-announce-badge{ font-size:10px !important; }
#miraiPopupModal .mirai-announce-itemAuthor{ font-size:10px !important; }


/* =========================================================
   19) SIDEBAR WIDTH TUNE (V19) — Narrow Left Frame
   ========================================================= */
:root{
  --mirai-ann-nav-width: 300px; /* was 360px — adjust as needed */
}

/* Optional: keep list cards from forcing wider than sidebar */
#miraiPopupModal .mirai-announce-item{ min-width: 0 !important; }

/* =========================================================
   20) ACTION BAR DOCK (V20) — Actions bar to the very bottom
   Requirement:
   - "Gizle / Kapat" always at the bottom ("el altı")
   - Baseline aligned with left sidebar end
   - Derived strictly from V19 (no size overrides touched)
   Notes:
   - Works whether .mirai-announce-actions is a sibling of .mirai-announce-viewBody
     OR injected inside .mirai-announce-viewBody by JS.
   ========================================================= */

/* Ensure right panel is a real column that can allocate leftover height */
#miraiPopupModal .mirai-announce-view{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  height:100% !important;
}

/* Make the scroll body a column so we can push the actions to the bottom,
   even if actions live INSIDE the body. */
#miraiPopupModal .mirai-announce-viewBody{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:auto !important;
  padding-bottom:0 !important; /* avoid double bottom padding under the buttons */
}

/* Let the actual announcement HTML fill the available space */
#miraiPopupModal #miraiAnnBody{
  flex:1 1 auto !important;
  min-height:0 !important;
}

/* Dock actions to bottom baseline */
#miraiPopupModal .mirai-announce-actions{
  flex:0 0 auto !important;
  margin-top:auto !important;
  padding-bottom:20px !important; /* match left list baseline */
}

/* =========================================================
   22) HARD DOCK (V22) — Action buttons always at bottom (robust)
   Why:
   - If any max-height / flex chain breaks in the build, the action bar can “float”
     above the bottom even though viewBody is scrollable.
   Fix:
   - Convert the right panel (.mirai-announce-view) into a positioning context
   - Absolutely pin .mirai-announce-actions to the bottom
   - Reserve space via extra padding-bottom on .mirai-announce-viewBody so content
     never sits under the buttons
   Result:
   - "Gizle / Kapat" stays at "el altı" and visually lines up with the sidebar end.
   ========================================================= */

:root{
  --mirai-ann-actions-bottom: 20px;   /* tweak only this if you want lower/higher */
  --mirai-ann-actions-gap: 14px;
  --mirai-ann-actions-safe: 110px;    /* reserved space inside the scroll area */
}

#miraiPopupModal .mirai-announce-view{
  position: relative !important;
}

/* Reserve space in the scroll area for the pinned action bar */
#miraiPopupModal .mirai-announce-viewBody{
  padding-bottom: var(--mirai-ann-actions-safe) !important;
}

/* Pin the buttons to the bottom of the right panel */
#miraiPopupModal .mirai-announce-actions{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--mirai-ann-actions-bottom) !important;
  z-index: 10 !important;

  /* visual + alignment */
  justify-content: center !important;
  gap: var(--mirai-ann-actions-gap) !important;

  /* neutralize old “bar” visuals (we only want the buttons) */
  border-top: 0 !important;
  background: transparent !important;

  /* keep baseline aligned with right panel padding */
  padding: 0 18px !important;
}

/* CTA (Devamını oku) is usually hidden; if enabled later, keep it from breaking centering */
#miraiPopupModal .mirai-announce-actions .mirai-announce-cta{
  position: absolute !important;
  left: 18px !important;
}

/* Mobile tuning */
@media (max-width: 576px){
  :root{
    --mirai-ann-actions-bottom: 14px;
    --mirai-ann-actions-safe: 96px;
  }
  #miraiPopupModal .mirai-announce-actions{
    padding: 0 14px !important;
  }
  #miraiPopupModal .mirai-announce-actions .mirai-announce-cta{
    left: 14px !important;
  }
}


/* =========================================================
   Version Badge (major.minor.build.revision)
   ========================================================= */
.mirai-announce-shell { position: relative; }
.mirai-version-badge{
  position: absolute;
  right: 18px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  user-select: none;
}
.mirai-version-badge .mirai-version-labels{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
  text-align: center;
}
.mirai-version-badge .mirai-version-value{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14em;
}
.mirai-version-badge .vprefix{ font-weight: 800; opacity: .9; margin-right: 4px; }
.mirai-version-badge .dot{ opacity: .6; }
.mirai-version-badge .vrev{ color: #ff3b30; } /* revision red */
@media (max-width: 900px){
  .mirai-version-badge{ right: 10px; bottom: 10px; }
}

/* =========================================================
   MIRAI — VIEWPORT FIT FIX (V26)
   Goal: Modal must fit 100% browser viewport at 100% zoom,
   so the video dock (above action buttons) is always reachable.
   RefCode: MIRAI-ANNOUNCE-VIEWPORT-FIT-V1
   ========================================================= */

/* 1) Constrain the Bootstrap modal to the viewport */
#miraiPopupModal .modal-dialog{
  max-height: 92vh !important;
  height: 92vh !important;
  margin-top: 4vh !important;
  margin-bottom: 4vh !important;
}

#miraiPopupModal .modal-content{
  height: 92vh !important;
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
}

#miraiPopupModal .modal-header{
  flex: 0 0 auto !important;
}

#miraiPopupModal .modal-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* 2) Inner shell must fill modal-body (remove fixed vh dependency) */
#miraiPopupModal .mirai-announce-shell{
  height: 100% !important;
  min-height: 0 !important;
}

#miraiPopupModal .mirai-announce-nav,
#miraiPopupModal .mirai-announce-view{
  height: 100% !important;
  min-height: 0 !important;
}

/* 3) Right panel: keep dock + actions always visible; body scrolls */
#miraiPopupModal .mirai-announce-view{
  overflow: hidden !important;
}

#miraiPopupModal .mirai-announce-viewBody{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

#miraiPopupModal .mirai-announce-mediaDock,
#miraiPopupModal .mirai-announce-actions{
  flex: 0 0 auto !important;
}

/* 4) Optional: slightly tighter right padding so small screens keep the dock visible */
@media (max-height: 740px){
  #miraiPopupModal .mirai-announce-viewHeader{ padding: 14px 18px 8px !important; }
  #miraiPopupModal .mirai-announce-viewBody{ padding: 12px 18px !important; }
  #miraiPopupModal .mirai-announce-actions{ padding: 12px 18px 16px !important; }
  #miraiPopupModal .mirai-announce-mediaDock{ margin: 0 18px 10px !important; }
}


/* =========================================
   GLASS PRESET — More transparent modal
   (Put at VERY END of v26.css)
========================================= */

/* 1) Outer shell: lighter glass */
#miraiPopupModal .mirai-announce-shell{
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}

/* 2) IMPORTANT: inner surfaces that often stay opaque */
#miraiPopupModal .mirai-announce-view,
#miraiPopupModal .mirai-announce-viewHeader,
#miraiPopupModal .mirai-announce-viewBody{
  background: rgba(255,255,255,0.06) !important;
}

/* Cards/boxes inside right panel (if they look too solid) */
#miraiPopupModal .mirai-announce-view .mirai-announce-box,
#miraiPopupModal .mirai-announce-view .mirai-announce-callout,
#miraiPopupModal .mirai-announce-view .mirai-announce-quote,
#miraiPopupModal .mirai-announce-view .mirai-announce-note{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.10);
}

/* 3) Backdrop: make page behind more visible */
.modal-backdrop.show{
  opacity: 0.12 !important;
}

/* 4) Optional: increase text contrast slightly on glass */
#miraiPopupModal .mirai-announce-view,
#miraiPopupModal .mirai-announce-view *{
  text-shadow: 0 1px 0 rgba(0,0,0,0.06);
}



/* =========================================================
   MIRAI — Announcement Modal (Header height ~ -30%)
   Target: #miraiPopupModal header area
   ========================================================= */

#miraiPopupModal .modal-header.mirai-announce-header{
  padding: 14px 22px 10px !important;   /* header yüksekliği düşer */
}

/* Çan ikonunu küçült (yükseklik hissini en çok bu büyütüyor) */
#miraiPopupModal .mirai-announce-headIcon{
  font-size: 46px !important;
  line-height: 1 !important;
  margin-right: 14px !important;
}

/* Başlık */
#miraiPopupModal .modal-title-mirai{
  font-size: 34px !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

/* Alt açıklama satırı */
#miraiPopupModal .mirai-announce-subtitle{
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}





/* MIRAI — Floating Quick Menu | Search Button (FAB) */
#mirai-search-menu{
  position: fixed;
  bottom: var(--backtop-bottom);
  /* Mevcut grubu bozmamak için yeni butonu en sola koyar */
  right: calc(var(--backtop-right) + (var(--backtop-size) + var(--quickmenu-gap)) * 5);
  z-index: 99999;
  width: var(--backtop-size);
  height: var(--backtop-size);
}

/* Tooltip davranışı (diğer FAB'lerle aynı) */
#mirai-search-menu[data-open="false"]:hover .mcm-tooltip,
#mirai-search-menu:hover .mcm-tooltip{
  opacity: 1;
  transform: translate(-50%, 0);
}

#mirai-search-menu[data-open="true"] .mcm-tooltip{
  opacity: 0;
  pointer-events: none;
}