/* ============================================================================
   COSMOS OTONOM ÖZET SİSTEMİ — Frontend stilleri (panel + buton)
   ----------------------------------------------------------------------------
   KART YAPISI (beklenen): bir `.news-card { position: relative; display:flex; }`
   içinde solda `.news-card-image` (ör. 96px) + sağda başlık/özet. Panel, görselin
   SAĞINI kaplar (görsel solda açıkta kalır). Aşağıdaki .news-card-image referans
   içindir; kendi kart stilin varsa onu kullan.
   z-index düzeni: deco/edge=1 · body=3 · deep-btn=4 · ai-btn=6 · close2=7 · scrollbar=9
   ============================================================================ */

/* Kırmızı "AI" tetik butonu (kart sağ-üst) */
.news-ai-btn {
  position: absolute; top: 4px; right: 5px; z-index: 6;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border: none; padding: 0; background: none;
  color: #ec1c24; /* logo kırmızı */
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
  transition: transform 0.16s cubic-bezier(.34,1.56,.64,1);
}
.news-ai-btn svg { width: 38px; height: 38px; display: block; }
.news-ai-btn:active, .news-ai-btn.tapped { transform: scale(1.35); }

/* (Kart position:relative — __attachAiBtn inline atıyor; global .card kuralı YOK ki ilgisiz .card'ları etkilemesin) */

/* ===== PANEL — CİDDİ HABER ARKA PLANI (dikey kart: görselin ALTINI kaplar) ===== */
.news-ai-panel {
  position: absolute; top: var(--ai-panel-top, 0); left: 0; right: 0; bottom: 0; z-index: 8;
  /* ciddi/kurumsal: koyu grafit-lacivert degrade + sağ-üstte çok hafif kırmızı aksan hâlesi */
  background:
    radial-gradient(160px 130px at 92% 4%, rgba(236,28,36,0.20), transparent 72%),
    radial-gradient(150px 130px at 6% 98%, rgba(80,110,160,0.16), transparent 72%),
    linear-gradient(165deg, #16202e 0%, #0e1622 55%, #080d15 100%);
  -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
  display: flex; flex-direction: column; justify-content: stretch; padding: 0;
  opacity: 0; transform: scale(0.97); pointer-events: none; transform-origin: top center;
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden; cursor: default; border-radius: inherit;
}
.news-ai-panel.open { opacity: 1; transform: scale(1); pointer-events: auto; }

/* ===== SÜSLEME KATMANI: kenarlara dağılmış hafif haber sembolleri ===== */
.news-ai-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.news-ai-deco s { position: absolute; display: block; color: #b9c6dc; }
.news-ai-deco s svg { display: block; width: 100%; height: 100%; }
.news-ai-edge { position: absolute; top: 0; left: 14px; right: 14px; height: 2px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(236,28,36,0.8), transparent); }

/* ===== Gövde = kaydırılabilir okuma alanı ===== */
.news-ai-body {
  flex: 1; min-height: 0;
  position: relative; z-index: 3; /* süslemenin (z1) üstünde → yazı önde, net */
  display: flex; flex-direction: column; justify-content: safe center;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 13px 12px 17px; scrollbar-width: none;
}
.news-ai-body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ===== Sol mini, sürüklenebilir kaydırma çubuğu ===== */
.news-ai-scrollbar { position: absolute; left: 5px; top: 14px; bottom: 12px; width: 4px;
  background: rgba(255,255,255,0.10); border-radius: 3px; z-index: 9; display: none; touch-action: none; }
.news-ai-scroll-thumb { position: absolute; left: -2px; top: 0; width: 8px; min-height: 26px;
  background: rgba(255,255,255,0.42); border-radius: 4px; cursor: grab; touch-action: none;
  box-shadow: 0 0 4px rgba(0,0,0,0.4); transition: background 0.15s; }
.news-ai-scroll-thumb:active { background: rgba(255,255,255,0.78); cursor: grabbing; }

/* Kapatma butonu — body'nin (z3) ÜSTÜNDE olmalı, yoksa tıklanmaz */
.news-ai-close2 { position: absolute; top: 2px; right: 7px; z-index: 7;
  background: none; border: none; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: 0.75; }
.news-ai-close2:hover { opacity: 1; }

/* 3 madde — dikeyde ferah dağılım */
.news-ai-points { display: flex; flex-direction: column; justify-content: center; width: 100%; gap: 13px; padding: 2px 0; }
.news-ai-points.with-deep { padding-right: 26px; } /* sağdaki 4-nokta butonu için yer */
.news-ai-row { display: flex; align-items: flex-start; gap: 10px; }
.news-ai-dot { width: 8px; height: 8px; min-width: 8px; border-radius: 50%; background: #fff; margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 4px rgba(255,255,255,0.5); }
.news-ai-text { font-size: 12.5px; line-height: 1.5; color: #f2f2f5; flex: 1; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }

/* Yükleme (kısa): 3 kalın nokta — beyaz başlar, JS ile sırayla renge bürünür (mor→sarı→turuncu) */
.news-ai-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 11px; color: #b9b9c9; font-size: 11.5px; }
.news-ai-dots { display: flex; gap: 9px; align-items: center; }
.news-ai-dots span { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255,255,255,0.5); transition: background 0.28s ease, box-shadow 0.28s ease; }
@keyframes aispin { to { transform: rotate(360deg); } }
.news-ai-err { color: #ff8a80; font-size: 11.5px; text-align: center; margin: auto 0; }

/* ===== DERİN ÖZET — 4-nokta (daire) buton + yükleme ===== */
.news-ai-deep-btn { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: none; background: none; padding: 0; cursor: pointer; z-index: 4; }
.news-ai-deep-ring { position: relative; width: 22px; height: 22px; margin: 0 auto; transition: transform 0.15s; }
.news-ai-deep-ring i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255,255,255,0.5); }
.news-ai-deep-ring i:nth-child(1) { top: 0; left: 8px; opacity: 1; }
.news-ai-deep-ring i:nth-child(2) { right: 0; top: 8px; opacity: 0.78; }
.news-ai-deep-ring i:nth-child(3) { bottom: 0; left: 8px; opacity: 0.55; }
.news-ai-deep-ring i:nth-child(4) { left: 0; top: 8px; opacity: 0.32; }
.news-ai-deep-btn:active .news-ai-deep-ring { transform: scale(1.18); }
.news-ai-deep-ring.spin { animation: aispin 0.7s linear infinite; }
/* yükleme: dönme YOK — 4 nokta beyaz başlar, JS ile sırayla renge bürünür (mor→sarı→turuncu→turkuaz) */
.news-ai-deep-ring.blink i { opacity: 1; background: #fff; transition: background 0.28s ease, box-shadow 0.28s ease; }
.news-ai-deep-loading { display: flex; align-items: center; justify-content: center; flex: 1; }
.news-ai-deep-loading .news-ai-deep-ring { width: 32px; height: 32px; }
.news-ai-deep-loading .news-ai-deep-ring i { width: 8px; height: 8px; }
.news-ai-deep-loading .news-ai-deep-ring i:nth-child(1) { left: 12px; }
.news-ai-deep-loading .news-ai-deep-ring i:nth-child(2) { top: 12px; }
.news-ai-deep-loading .news-ai-deep-ring i:nth-child(3) { left: 12px; }
.news-ai-deep-loading .news-ai-deep-ring i:nth-child(4) { top: 12px; }

/* Derin özet — makale tarzı paragraflar */
.news-ai-panel.deep .news-ai-body { justify-content: flex-start; }
.news-ai-deep-text { width: 100%; font-size: 12.5px; color: #f4f4f6; text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.news-ai-para { margin: 0 0 11px; line-height: 1.66; text-align: left; word-break: normal; overflow-wrap: break-word; }
.news-ai-para:last-child { margin-bottom: 0; }
.news-ai-para.lead { font-size: 13px; color: #fff; }

/* Çift-tıkla büyüt: panel içeriğe göre uzar (kaydırmadan oku), kart taşmaya izin verir */
.news-ai-panel.expanded { height: auto; max-height: none; bottom: auto; }
/* Anlık .card'ı overflow:hidden + contain:layout paint style + content-visibility:auto taşır → mutlak paneli
   karta KIRPAR (büyüyemez). Çift-tıkla-büyüt için bu üçünü de override et (yoksa panel kart sınırında kesilir). */
.card.ai-expanded { overflow: visible; contain: none; content-visibility: visible; z-index: 40; }

/* ===== REFERANS kart görseli (kendi stilin yoksa) =====
.news-card-image { width: 96px; min-width: 96px; height: auto; flex-shrink: 0; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #5b2a86, #8E24AA); display: flex; align-items: center; justify-content: center; } */


/* ===== KISA-METİN (EXTRACTIVE) NOTU + ÇEVİR BUTONU =====
   Kısa haberlerde AI yerine cihazda extractive özet üretilir. Bu çubuk özetin ÜSTÜNDE durur:
   ÇEVİR butonu SOLDA (order:-1), kırmızı UYARI notu sağda. */
.news-ai-xbar { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; margin: 0 0 8px; padding: 0 2px; position: relative; z-index: 3; }
.news-ai-xnote { font-size: 9.5px; line-height: 1.25; color: #ff5252; font-weight: 600; flex: 1; text-shadow: 0 0 6px rgba(255,40,40,.35); }
.news-ai-xtr { flex: none; order: -1; font-size: 10px; font-weight: 600; color: #fff; background: rgba(156,39,176,.32); border: 1px solid rgba(255,255,255,.22); border-radius: 11px; padding: 3px 9px; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background .15s; }
.news-ai-xtr:hover, .news-ai-xtr:active { background: rgba(156,39,176,.55); }
.news-ai-xtr[data-busy] { opacity: .7; }