/* 4c2 · Galaksi olayları, korsanlar, BÜYÜK İSTİLA, Dönüşüm, Bahçe, gezegen gelişimi (DILIM-4c2.md §9; kod/ek-4c2.js). Renkler: olay turkuaz-gri,
   korsan pas-kızıl, Yabancılar soğuk mor. Telefon önce: dar ekranda satır eylemleri simge, açıklamalar küçük ? arkasında, ek kutular kapalı gelir.
   Sınıflar yalnız 4c2'nin alanları varken çizilir: kapalıyken bu dosyanın hiçbir kuralı bir şeye değmez. */
:root {
  --olay: #7fb3b0; --olay-rgb: 127 179 176; --olay-zemin: rgba(127, 179, 176, .1);
  --korsan: #d0704c; --korsan-rgb: 208 112 76; --korsan-zemin: rgba(208, 112, 76, .12);
  --yabanci: #a397f2; --yabanci-rgb: 163 151 242; --yabanci-zemin: rgba(163, 151, 242, .12);
  --bahce: #7fc781;
}

/* ——— Galaksi: satırlar ——— */
.e-korsan { --e: var(--korsan); }
.e-savun { --e: var(--yabanci); }
.e-olay { --e: var(--olay); }
.sayfa-galaksi .dugme.kucuk.e-olay { color: var(--olay); border-color: rgba(127, 179, 176, .55); background: var(--olay-zemin); }
.olay-resim-yok { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #16212c, #070b10 72%); }
.olay-resim-yok .simge { width: 20px; height: 20px; }
.olay-resim-yok.korsan { color: var(--korsan); box-shadow: inset 0 0 0 1px rgba(208, 112, 76, .45); }
.olay-resim-yok.olay-yeri { color: var(--olay); box-shadow: inset 0 0 0 1px rgba(127, 179, 176, .4); }
.sayfa-galaksi .sistem-tablosu tr.korsan-satir td { background: linear-gradient(90deg, var(--korsan-zemin), transparent 75%); }
.sayfa-galaksi .sistem-tablosu tr.korsan-satir .ad .kes, .korsan-yazi { color: var(--korsan); }
.korsan-yazi { font-size: 12px; }
.sayfa-galaksi .sistem-tablosu tr.bahce-satir .ad .kes { color: var(--bahce); }
.sayfa-galaksi .sistem-tablosu tr.olay-satir td { background: linear-gradient(90deg, var(--olay-zemin), transparent 70%); }
.olay-rozet { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; color: var(--olay); }
.olay-rozet .simge { flex: none; width: 15px; height: 15px; }
.olay-rozet .kes { min-width: 0; }
.olay-rozet .olay-sayac { flex: none; color: #cfe3e1; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.olay-rozet small { flex: none; font-size: 11px; }
.ozellik-rozet { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 4px; vertical-align: -3px; border-radius: 50%; color: #e2d6a8;
  background: rgba(226, 214, 168, .1); box-shadow: inset 0 0 0 1px rgba(226, 214, 168, .35); cursor: help; }
.ozellik-rozet .simge { width: 12px; height: 12px; }
.ozellik-rozet.buyuk { width: 22px; height: 22px; margin-left: 0; }
.ozellik-rozet.buyuk .simge { width: 15px; height: 15px; }
.istila-rozet { display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; padding: 0 6px; border: 1px solid rgba(163, 151, 242, .55); border-radius: 8px;
  color: var(--yabanci); background: var(--yabanci-zemin); font-size: 11px; line-height: 16px; white-space: nowrap; }
.istila-rozet .simge { width: 12px; height: 12px; }
.sayfa-galaksi .sistem-tablosu tr.istila-hedefi td { box-shadow: inset 0 1px 0 rgba(163, 151, 242, .18), inset 0 -1px 0 rgba(163, 151, 242, .18); }
/* Sistem başlığının olay rozetleri */
.sistem-olaylar { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; }
.etiket.olay-etiket { display: inline-flex; align-items: center; gap: 4px; border-color: rgba(127, 179, 176, .5); color: var(--olay); background: var(--olay-zemin); }
.etiket.olay-etiket .simge { width: 13px; height: 13px; }
.etiket.olay-etiket small { color: #cfe3e1; font-variant-numeric: tabular-nums; }
.etiket.olay-etiket a { color: inherit; }
.etiket.olay-supernova { border-color: rgba(240, 168, 67, .55); color: #f0b866; background: rgba(240, 168, 67, .1); }
.etiket.olay-korsanDonanmasi { border-color: rgba(208, 112, 76, .55); color: var(--korsan); background: var(--korsan-zemin); }

/* ——— Galaksi: harita ——— */
.harita .olay-nokta { fill: var(--olay); stroke: #061312; stroke-width: .6; }
.harita .olay-nokta.yaklasiyor { fill: none; stroke: var(--olay); stroke-dasharray: 1.2 1.2; }
.harita .olay-nokta.dyson { fill: #e9d9a6; }
.harita .istila-halka { fill: none; stroke: var(--yabanci); stroke-width: 1.1; opacity: .9; }
.harita .solucan-cizgi { stroke: rgba(127, 179, 176, .6); stroke-width: .8; stroke-dasharray: 3 3; }
.lej.olay-lej { background: var(--olay); }
.lej.solucan { width: 16px; height: 2px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--olay) 0 3px, transparent 3px 6px); }
.lej.istila { background: none; border: 1.5px solid var(--yabanci); }

/* ——— Olay listesi (cerceve.js; D.olaylar4c2): korsan pas, istila mor ——— */
.olay.olay4c2.olay-korsan { --iliski: var(--korsan-rgb); --gorev: var(--korsan-rgb);
  background: linear-gradient(90deg, rgb(var(--korsan-rgb) / .26), rgb(var(--korsan-rgb) / .07) 60%, transparent);
  box-shadow: inset 5px 0 0 var(--korsan), inset 0 0 0 1px rgb(var(--korsan-rgb) / .45); }
.olay.olay4c2.olay-korsan.gorev-korsanSonda { background: linear-gradient(90deg, rgb(var(--korsan-rgb) / .12), transparent 70%); box-shadow: inset 3px 0 0 var(--korsan); }
.olay.olay4c2.olay-istila { --iliski: var(--yabanci-rgb); --gorev: var(--yabanci-rgb);
  background: linear-gradient(90deg, rgb(var(--yabanci-rgb) / .26), rgb(var(--yabanci-rgb) / .07) 60%, transparent);
  box-shadow: inset 5px 0 0 var(--yabanci), inset 0 0 0 1px rgb(var(--yabanci-rgb) / .45); }
.olay.olay4c2 .gorev-etiket { border-color: rgb(var(--gorev) / .6); color: rgb(var(--gorev)); }
.olay.olay4c2 .olay-kim { color: rgb(var(--gorev)); }
.olay.olay4c2 .olay-resim.nereden .olay-yer-resim.bilinmez { color: rgb(var(--gorev)); background: rgb(var(--gorev) / .14); }
.olay.gorev-istilaSavun { --gorev: var(--yabanci-rgb); }
.olay.gorev-olay { --gorev: var(--olay-rgb); }
.olay.gorev-korsanSaldiri { --gorev: var(--korsan-rgb); }

/* ——— Filo ——— */
.gorev-resim.simgeli.gorev-olay { color: var(--olay); }
.gorev-resim.simgeli.gorev-korsanSaldiri { color: var(--korsan); }
.gorev-resim.simgeli.gorev-istilaSavun { color: var(--yabanci); }
.sefer-resim.yer-korsan { color: var(--korsan); }
.sefer-resim.yer-olay { color: var(--olay); }
.takas-kutusu { margin: 8px 0; border: 1px solid rgba(127, 179, 176, .35); border-radius: 6px; background: var(--olay-zemin); }
.takas-kutusu > summary { display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer; list-style: none; color: var(--olay); font-size: 13px; min-height: 36px; }
.takas-kutusu > summary::-webkit-details-marker { display: none; }
.takas-kutusu > summary .simge { width: 16px; height: 16px; }
.takas-kutusu > summary b { color: #e6f0ef; }
.takas-ic { padding: 0 10px 10px; }
.takas-ic p { margin: 0 0 8px; font-size: 12.5px; }
.takas-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.takas-cipler .kesif-cip { min-height: 36px; }
.dyson-eksik { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; font-size: 12.5px; }
.korsan-simule-satir { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12.5px; }

/* ——— Genel Bakış ——— */
.gelisim-satiri { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -4px 0 8px; color: #dfe7f0; font-size: 13px; text-shadow: 0 1px 3px #000; }
.gelisim-kademe b { color: #f0d79a; font-weight: 600; }
.donusum-asama { display: inline-flex; align-items: center; gap: 4px; color: var(--bahce); font-size: 12.5px; }
.donusum-asama .simge { width: 14px; height: 14px; }
.gelisim-soru { position: relative; }
.gelisim-soru > summary { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); color: var(--soluk);
  font-size: 11px; cursor: pointer; list-style: none; }
.gelisim-soru > summary::-webkit-details-marker { display: none; }
.gelisim-soru[open] { flex-basis: 100%; }
.gelisim-soru p { margin: 6px 0 0; max-width: 46ch; padding: 8px 10px; border-radius: 6px; background: rgba(4, 7, 11, .86); color: var(--yazi-2, #c9d3de); font-size: 12px; line-height: 1.45; }
.golge-rozet { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: -4px 0 8px; padding: 1px 8px; border: 1px solid rgba(163, 151, 242, .5); border-radius: 10px;
  color: var(--yabanci); background: rgba(16, 12, 34, .7); font-size: 12px; }
.golge-rozet .simge { width: 13px; height: 13px; }
.istila-serit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; padding: 8px 12px; border: 1px solid rgba(163, 151, 242, .5); border-radius: var(--yuvarlak, 6px);
  color: #ddd8ff; background: linear-gradient(90deg, rgba(163, 151, 242, .22), rgba(163, 151, 242, .05)); font-size: 13px; }
.istila-serit > .simge { width: 18px; height: 18px; color: var(--yabanci); }
.istila-serit b { color: var(--yabanci); }
.istila-serit .dugme { margin-left: auto; }
.gunluk-kutusu { margin-top: 14px; }
.gunluk-kutusu > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.gunluk-kutusu > summary::-webkit-details-marker { display: none; }
.gunluk-kutusu > summary .simge { width: 16px; height: 16px; }
.gunluk-kutusu:not([open]) > .kutu-govde { display: none; }
.gunluk-listesi { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.gunluk-listesi li { display: flex; align-items: baseline; gap: 6px; }
.gunluk-listesi .olay-simge { flex: none; width: 14px; height: 14px; color: var(--soluk); align-self: center; }
.gunluk-listesi .not-gunu { flex: none; }
/* Dönüşüm görünüşü (resim çizilene dek): büyük resmin üstüne aynı yerde katman. g1 atmosfer halesi, g2 bulut ve mavi parıltı, g3 yeşil ton ve bulut */
.donusum-katman { position: absolute; right: -4%; top: 50%; width: 52%; aspect-ratio: 1; transform: translateY(-50%); z-index: 0; pointer-events: none; border-radius: 50%;
  clip-path: circle(41% at 50% 50%); mix-blend-mode: screen; }
.donusum-katman.kucukten { width: 40%; right: 2%; }
.gezegen-buyuk.donusum-g1 { filter: drop-shadow(0 0 30px rgba(140, 200, 255, .5)); }
.gezegen-buyuk.donusum-g2 { filter: drop-shadow(0 0 34px rgba(120, 200, 255, .6)) saturate(1.1); }
.gezegen-buyuk.donusum-g3 { filter: drop-shadow(0 0 34px rgba(130, 230, 170, .55)) saturate(1.15) hue-rotate(-12deg); }
.donusum-katman.donusum-g1 { background: radial-gradient(circle, transparent 74%, rgba(150, 205, 255, .35) 92%, transparent 100%); }
.donusum-katman.donusum-g2 { background:
    radial-gradient(ellipse 30% 9% at 34% 36%, rgba(255, 255, 255, .34), transparent 70%),
    radial-gradient(ellipse 34% 8% at 62% 58%, rgba(255, 255, 255, .28), transparent 70%),
    radial-gradient(ellipse 22% 7% at 44% 74%, rgba(255, 255, 255, .22), transparent 70%),
    radial-gradient(circle, transparent 72%, rgba(120, 190, 255, .42) 92%, transparent 100%); }
.donusum-katman.donusum-g3 { background:
    radial-gradient(ellipse 30% 9% at 30% 34%, rgba(255, 255, 255, .3), transparent 70%),
    radial-gradient(ellipse 34% 8% at 64% 62%, rgba(255, 255, 255, .26), transparent 70%),
    radial-gradient(circle at 46% 52%, rgba(90, 190, 110, .28), rgba(60, 150, 90, .12) 55%, transparent 74%),
    radial-gradient(circle, transparent 72%, rgba(130, 230, 170, .4) 92%, transparent 100%); }
@media (max-width: 759px) {
  .donusum-katman { right: -16%; width: 68%; }
  .donusum-katman.kucukten { width: 46%; right: -4%; }
  .gelisim-satiri { font-size: 12.5px; margin-bottom: 6px; }
  .istila-serit .dugme { margin-left: 0; }
}

/* ——— Mesajlar ——— */
.rapor-4c2 .olay-sahne, .olay-sahne { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 0 8px; border-radius: 6px; }
.istila-ek { margin-top: 6px; }
.gozlem-olay-metin { margin: 0 0 6px; }
.galaksi-rapor.g-olay { border-left: 3px solid var(--olay); }
.olay-ikinci { display: inline-block; max-width: 100%; font-size: 12.5px; }
.olay-ikinci .olay-sayac { color: #cfe3e1; font-variant-numeric: tabular-nums; }
/* Galaksi satırında olayın simgesi resim hücresinde: ad hücresinde tekrar edilmez (dar ekranda ada yer kalsın) */
.sayfa-galaksi .sistem-tablosu tr.olay-satir .ad .olay-rozet > .simge { display: none; }
/* Dar Ad sütununda istila rozeti sığmazsa alt satıra iner (Enkaz sütununa taşmaz) */
.sistem-tablosu .istila-rozet { max-width: 100%; white-space: normal; line-height: 1.25; }