/* Sayfa başlığı (OGame'in 654×250 resmi), teknoloji kartları ve ayrıntı paneli */

.sayfa-adi { display: none; margin: 4px 0 10px; color: #fff; font-size: 19px; }
.sayfa-adi.gorunur { display: block; }

.baslik-alani { min-height: 0; }
.baslik {
  position: relative; aspect-ratio: 654 / 250; overflow: hidden;
  background: #0b1016 center / cover no-repeat;
  border: 1px solid var(--kenar); border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
}
/* Resmin içindeki üst şeride sayfa adı */
.baslik-yazi {
  position: absolute; left: 21.6%; right: 3%; top: 1.4%; height: 11%;
  display: flex; align-items: center; gap: .4em;
  color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .03em;
  text-shadow: 0 1px 2px #000;
}
.baslik-gezegen { color: var(--yazi-2); font-weight: 500; }
/* Sol alttaki OGame simgesinin üstüne kendi sayfa simgemiz */
.baslik-kose {
  position: absolute; left: 0; bottom: 1.2%; width: 7%; height: 14.4%;
  display: grid; place-items: center;
  background: #0b0f14; border-radius: 0 6px 6px 0; color: #b5c3d3;
}
.baslik-kose .simge { width: 52%; height: 52%; }

.bolum { margin-top: 16px; }
.bolum-adi {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 9px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: var(--baslik-mavi); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.bolum-adi .soluk { letter-spacing: 0; text-transform: none; font-weight: 500; }
.bolum.bizim .bolum-adi { color: var(--zumrut); border-bottom-color: rgba(67, 211, 145, .2); }
.bolum-aciklama { margin: -2px 0 10px; color: var(--yazi-2); font-size: 12.5px; }

/* ——— Kart paneli: OGame'in başlık şeritli çerçevesi ———
   Tek bölümlü panelde kartlar sabit boyda soldan dizilir; yan yana bölümlerde her bölümün kendi sütun sayısı var.
   Kart boyu (--k): OGame'de binalar 100 px, depolar ve araştırmalar 80 px. Araştırmada sekiz kart bir satıra sığar,
   panel genişledikçe büyür (en çok 96 px). */
.kart-paneli {
  --k: 100px; --aralik-k: 8px; --ic: 10px;
  container-type: inline-size;
  margin-top: 12px; padding-bottom: 10px;
  background: linear-gradient(180deg, var(--serit-ust), var(--serit-alt)) top / 100% 30px no-repeat,
    linear-gradient(180deg, rgba(17, 23, 32, .96), rgba(9, 12, 17, .96));
}
.kart-paneli.yan-yana { display: flex; justify-content: center; }
.panel-bolum { min-width: 0; }
.panel-bolum.kucuk { --k: 80px; }
.panel-baslik {
  height: 30px; padding: 0 10px; overflow: hidden;
  color: var(--baslik-mavi); font-size: 12.5px; font-weight: 700; line-height: 30px; text-align: center;
  white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 1px #000;
}
.kart-paneli.yan-yana .panel-bolum + .panel-bolum { border-left: 1px solid rgba(0, 0, 0, .45); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .03); }
.kart-paneli.bizim { border-color: rgba(67, 211, 145, .4); }
.kart-paneli.bizim .panel-baslik { color: var(--zumrut); }
.sayfa-arastirma .kart-paneli { --aralik-k: 4px; --k: min(96px, calc((100cqw - 66px) / 8)); }
/* Tersane (4 + 3 sütun) ve Savunma (5 + 2): kartlar paneli doldurur, yanlarda kart boyunda boşluk kalmaz. Çıkarılan pay:
   bölümlerin iç boşlukları (4 × 10 px), kart aralıkları ve aradaki çizgi. Yeni birimlerle ızgaralar tam: savaş 12 = 4+4+4, sivil 9 = 3+3+3, savunma 10 = 5+5. */
.sayfa-tersane .kart-paneli { --aralik-k: 6px; --k: min(116px, calc((100cqw - 73px) / 7)); }
.sayfa-savunma .kart-paneli { --aralik-k: 6px; --k: min(116px, calc((100cqw - 73px) / 7)); } /* 5 + 2 sütun */
.kart-paneli + .kart-paneli { margin-top: 10px; }
/* Fare üstündeki kartın ad etiketi alttaki panelin altında kalmasın */
.kart-paneli:hover { position: relative; z-index: 2; }

/* ——— Kart ——— */
.kart-izgara { display: grid; grid-template-columns: repeat(auto-fill, var(--k)); gap: var(--aralik-k); padding: 10px var(--ic) 0; }
.yan-yana .kart-izgara { grid-template-columns: repeat(var(--sutun), var(--k)); }
.kart {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  padding: 0; background: none; border: 0; text-align: center; color: inherit;
}
/* OGame: 2 px koyu kenar, 6 px yuvarlak köşe */
.kart-resim {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  background: #0b1016; border: 2px solid #0d1014; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(48, 63, 82, .55), 0 3px 8px rgba(0, 0, 0, .45);
  transition: box-shadow .12s;
}
.kart-resim > img { width: 100%; height: 100%; object-fit: cover; }
.kart:hover .kart-resim { box-shadow: 0 0 0 1px #6f8fb3, 0 3px 10px rgba(0, 0, 0, .5); }
.kart.secili .kart-resim { box-shadow: 0 0 0 2px var(--turuncu), 0 0 14px rgba(255, 157, 46, .4); }
/* Ad: telefonda kartın altında, bilgisayarda fare üstüne gelince küçük bir etiket */
.kart-ad { color: var(--yazi-2); font-size: 11.5px; line-height: 1.25; }
.kart.secili .kart-ad { color: var(--turuncu); }
@media (min-width: 760px) {
  .kart-ad {
    position: absolute; left: 50%; top: calc(100% + 3px); z-index: 6; transform: translateX(-50%);
    display: none; padding: 3px 8px; white-space: nowrap; pointer-events: none;
    background: #0e141c; border: 1px solid var(--kenar-acik); border-radius: 4px; box-shadow: var(--golge);
    color: #fff; font-size: 12px;
  }
  .kart:hover .kart-ad, .kart:focus-visible .kart-ad { display: block; }
}

/* Seviye (ya da adet) şeridi: OGame'deki gibi altta, sol üstü yuvarlak, turuncu sayı sağda */
.kart-seviye {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 16px; padding: 0 5px 0 14px; overflow: hidden;
  background: linear-gradient(#0e1117, #1b222d); border-radius: 15px 0 0 0;
  color: #ff9600; font-size: 11px; line-height: 16px; text-align: right; white-space: nowrap;
}
.kart-seviye em { color: #ffd27a; font-style: normal; }
/* Kurulabilir: sol üstte yeşil sekme, içinde yukarı bakan koyu üçgen */
.kart-yukselt {
  position: absolute; top: 0; left: 0; z-index: 3; width: 22px; height: 14px;
  background: linear-gradient(#53a423, #2f6c04); border-radius: 0 0 4px 0;
}
.kart-yukselt::after {
  content: ""; position: absolute; top: 3px; left: 4px; width: 0; height: 0;
  border: 7px solid transparent; border-top: 0; border-bottom-color: #2b6303;
}
.kart:hover .kart-yukselt { background: linear-gradient(#93e438, #54ad08); }
/* Kaynak yetmiyor: resmin üstünde turuncu çapraz çizgiler (OGame'in "disabled" hâli) */
.kart.hal-kaynak .kart-resim::after, .ayrinti-resim.hal-kaynak::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(255, 150, 0, .33), rgba(255, 150, 0, .33) 2px, transparent 3px, transparent 7px);
}
/* Şartlar sağlanmıyor: gri (OGame'in "off" hâli; şerit de griye döner) */
.kart.hal-sart .kart-resim, .ayrinti-resim.hal-sart img { filter: grayscale(1); }
.kart.hal-sart .kart-ad { color: #7a8796; }
.kart-sirada {
  position: absolute; top: 3px; right: 3px; z-index: 3;
  display: grid; place-items: center; width: 20px; height: 20px;
  background: rgba(5, 8, 12, .85); border: 1px solid #3a4b60; border-radius: 50%; color: var(--baslik-mavi);
}
.kart-sirada .simge { width: 12px; height: 12px; }

/* Resmi henüz çizilmemiş (bizim) bina ya da gemi */
.kart.resimsiz .kart-resim { display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #1a2534, #0a0f15 70%); }
.resimsiz-simge { width: 44%; height: 44%; color: #6f8fb0; stroke-width: 1.3; }
.resimsiz-kaynak { width: 46%; height: 46%; border-radius: 6px; opacity: .6; filter: saturate(.75); }
.kart-etiket {
  position: absolute; top: 4px; right: 4px; padding: 0 5px;
  background: rgba(5, 8, 12, .8); border: 1px solid #33465d; border-radius: 3px;
  color: #7f95ad; font-size: 9px; letter-spacing: .03em; line-height: 14px; white-space: nowrap;
}
.kart.resimsiz.hal-on .kart-etiket { top: 18px; }
/* Kadim: zümrüt kenar */
.kart.kadim .kart-resim { border-color: #0f1a16; box-shadow: 0 0 0 1px rgba(67, 211, 145, .55), 0 0 12px rgba(67, 211, 145, .16); }
.kart.kadim:hover .kart-resim { box-shadow: 0 0 0 1px rgba(67, 211, 145, .9), 0 0 14px rgba(67, 211, 145, .25); }
.kart.kadim .kart-ad { color: #8fd8b5; }
/* Yapımda: sayaç ortada, ilerleme şeridin üstünde */
.kart-yapim {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  background: rgba(0, 0, 0, .5);
}
/* Geri sayım, altında bitiş saati (Sürmenaj 2026-10-30); başlamamış baştaki iş için başlama saati */
/* Altta ilerleme çubuğuna yer: uzun işte bitiş iki satır olur ("18 Ara" / "07:20:47"), çubuğun üstünde kalır */
.kart-sure { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 24px; }
.kart-sure b { padding: 1px 7px; background: rgba(5, 8, 12, .82); border-radius: 4px; color: #fff; font-size: 13px; line-height: 1.35; white-space: nowrap; }
.kart-sure small { padding: 0 5px; background: rgba(5, 8, 12, .72); border-radius: 3px; color: #d3dde9; font-size: 10.5px; line-height: 1.3; text-align: center; }
.kart-sure small > span { white-space: nowrap; }
.kart-yapim.bekliyor .kart-sure { margin-bottom: 0; }
.kart-yapim.bekliyor b { color: var(--kehribar); font-weight: 600; }
.kart-yapim .ilerleme { position: absolute; left: 6px; right: 6px; bottom: 21px; height: 5px; }
.kart.yapimda .kart-resim { box-shadow: 0 0 0 1px #6fae3e, 0 3px 8px rgba(0, 0, 0, .45); }
/* Sıranın başında ama başlamamış (kaynak bekliyor): kehribar çerçeve, kum saati, kehribar sayaç, dolmayan çizgili çubuk */
.kart.bekliyor .kart-resim { box-shadow: 0 0 0 1px #c98a2e, 0 3px 8px rgba(0, 0, 0, .45); }
.kart-yapim.bekliyor .kart-sure { margin-bottom: 24px; }
.kart-kum { display: grid; place-items: center; width: 20px; height: 20px; background: rgba(5, 8, 12, .82); border-radius: 50%; color: var(--kehribar); }
.kart-kum .simge { width: 13px; height: 13px; }
.kart-yapim.bekliyor small { color: #f3d3a2; }

/* ——— Manzara başlığı (Kaynaklar, Tesisler): 654×300, kurulu binalar katman katman ——— */
.baslik.manzara { aspect-ratio: 654 / 300; }
.manzara-katman { position: absolute; max-width: none; height: auto; pointer-events: none; }
.baslik.manzara .baslik-yazi { top: 1%; height: 10%; }
.baslik.manzara .baslik-kose { bottom: 1%; height: 12%; }
.manzara-dugme {
  position: absolute; right: 1.2%; bottom: 2%; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 9px;
  background: rgba(9, 13, 18, .88); border: 1px solid #37485c; border-radius: 4px;
  color: #a6d86a; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.manzara-dugme:hover { border-color: #6f9a46; color: #c7f08f; }
.manzara-dugme .ok { width: 14px; height: 14px; transition: transform .15s; }
.manzara-dugme[aria-expanded="true"] .ok { transform: rotate(180deg); }
.uretim-yeri { margin-top: 12px; }
.uretim-yeri[hidden] { display: none; }
/* Ayrıntı açıkken başlık alanı manzaranın boyunu korusun (sayfa zıplamasın) */
.baslik-alani { container-type: inline-size; }
.baslik-alani > .ayrinti { min-height: calc(100cqw * 250 / 654); }
.baslik-alani.manzarali > .ayrinti { min-height: calc(100cqw * 300 / 654); }
/* Ayrıntı OGame'deki gibi başlığın altından yukarı kayarak açılır, aşağı kayarak kapanır (teknoloji.js kaydir) */
.baslik-alani.kayiyor { position: relative; overflow: hidden; transition: height .38s cubic-bezier(.22, .7, .2, 1); }
.kayan-ayrinti { position: absolute; top: 0; left: 0; right: 0; z-index: 3; transform: translateY(100%); transition: transform .38s cubic-bezier(.22, .7, .2, 1); }
.kayan-ayrinti.yerinde { transform: none; }
.kayan-ayrinti > .ayrinti { min-height: calc(100cqw * 250 / 654); }
.baslik-alani.manzarali .kayan-ayrinti > .ayrinti { min-height: calc(100cqw * 300 / 654); }

/* ——— Ayrıntı ——— */
.ayrinti {
  position: relative; padding: 14px;
  background: linear-gradient(180deg, rgba(17, 24, 33, .98), rgba(8, 11, 16, .98));
  border: 1px solid var(--kenar-acik); border-radius: var(--yuvarlak); box-shadow: var(--golge);
}
.ayrinti.kadim { border-color: rgba(67, 211, 145, .45); }
.ayrinti-kapat { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; background: rgba(255, 255, 255, .04); border: 1px solid var(--kenar); border-radius: 50%; color: var(--yazi-2); }
.ayrinti-kapat:hover { color: #fff; }
.pencere .ayrinti { min-height: 0; padding: 4px 0 0; background: none; border: 0; box-shadow: none; }
.pencere .ayrinti-kapat { display: none; }
.ayrinti-ust { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
.ayrinti-resim {
  position: relative; align-self: start; aspect-ratio: 1; overflow: hidden;
  border: 1px solid #34465c; border-radius: 5px; background: #0a0f15;
}
.ayrinti-resim img { width: 100%; height: 100%; object-fit: cover; }
.ayrinti-resim > span {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 6px 8px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent); color: var(--yazi-2); font-size: 11.5px; text-align: center;
}
.ayrinti-resim.resimsiz { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1a2534, #0a0f15 70%); }
.ayrinti-resim.resimsiz .resimsiz-simge, .ayrinti-resim.resimsiz .resimsiz-kaynak { width: 40%; height: 40%; }
.ayrinti-tur { color: var(--soluk); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.ayrinti-tur .bizim { color: var(--zumrut); }
.ayrinti-ad { margin: 2px 40px 8px 0; color: #fff; font-size: 19px; line-height: 1.25; }
/* Adın yanındaki küçük soru işareti: bilgi yüzünü (açıklama, tablo, gereksinimler) açıp kapatır */
.ayrinti-soru {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; padding: 0; vertical-align: 3px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--kenar-acik); border-radius: 50%;
  color: var(--yazi-2); font-size: 13px; font-weight: 700; line-height: 1;
}
.ayrinti-soru:hover { border-color: #58718f; color: #fff; }
.ayrinti-soru[aria-pressed="true"] { border-color: var(--turuncu); color: var(--turuncu); background: rgba(255, 157, 46, .1); }
.bilgi-satirlari { display: grid; gap: 4px; margin: 0 0 10px; font-size: 13px; }
.bilgi-satirlari > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px; }
.bilgi-satirlari dt { color: var(--soluk); }
.bilgi-satirlari dd { margin: 0; color: var(--yazi); }

.bedel { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 4px; }
.bedel-oge { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.bedel-oge .kaynak-resmi { width: 26px; height: 26px; }
.bedel-oge.eksik b { color: var(--kirmizi); }
.bedel-oge.soluk, .bedel-oge.soluk b { color: var(--soluk); }
/* Yetmeyen kalemin altında "eksik 1.240" */
.bedel-metin { display: inline-flex; flex-direction: column; line-height: 1.2; }
.bedel-metin small { color: var(--kirmizi); font-size: 11px; }
.ayrinti-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.yapim-satiri { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; width: 100%; }
.yapim-satiri .ilerleme { grid-column: 1; }
.yapim-satiri .dugme { grid-row: 1 / span 2; grid-column: 2; }
.eylem-durum { display: flex; align-items: center; gap: 6px; color: var(--yesil); }
.eylem-durum > .simge { flex: none; }
.eylem-durum b { color: #fff; }
.eylem-durum .bitis { color: var(--yazi-2); }
/* Başlamamış iş: satır kehribar, kum saatli; altında dolmayan çizgili çubuk */
.yapim-satiri.bekliyor .eylem-durum { color: var(--kehribar); }
.yapim-satiri.bekliyor .eylem-durum b { color: #ffd9a0; }
/* Başlamış işin iptali sorar (ana.js): düğme kırmızı "İptal edilsin mi?" olur */
.dugme.onay-bekliyor, .dugme.onay-bekliyor:hover:not(:disabled) { background: #a8322c; border-color: var(--kirmizi); color: #fff; }
.dugme.onay-bekliyor > span { display: none; }
.dugme.onay-bekliyor::after { content: "İptal edilsin mi?"; }
.eylem-not { display: inline-flex; align-items: center; gap: 5px; color: var(--soluk); font-size: 12px; }
.adet-girdi { display: inline-flex; align-items: center; gap: 6px; color: var(--soluk); }
.adet-girdi input { width: 72px; }
/* Gemi ve savunma: adet yazıldıkça toplam bedel ve süre kendi satırında; adet boşsa tek birimin değeri soluk */
.birim-toplam { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.birim-toplam .bedel { margin: 0; }
.birim-sure { color: var(--yazi-2); font-size: 12.5px; }
.birim-sure b { color: #fff; }
.birim-sure.soluk, .birim-sure.soluk b { color: var(--soluk); }

/* İstatistikler: taban ve "Senin araştırmanla" yan yana */
.istatistik-tablo { font-size: 13px; }
.istatistik-tablo th, .istatistik-tablo td { padding: 7px 9px; }
.istatistik-tablo tbody th { color: var(--yazi-2); font-weight: 500; }
.istatistik-tablo td, .istatistik-tablo thead th:not(:first-child) { text-align: right; }
.istatistik-tablo td:last-child { color: #fff; font-weight: 600; }
.istatistik-tablo td em { margin-left: 4px; font-size: 11.5px; font-style: normal; }
/* Motor yolu (motor geçişi): her motorun eşiği, temel hızı ve yakıtı; bugünkü motor vurgulu */
.motor-yolu td:nth-child(2), .motor-yolu thead th:nth-child(2) { text-align: left; }
.motor-yolu td:last-child { color: inherit; font-weight: inherit; }
.motor-yolu tr.bugunku th, .motor-yolu tr.bugunku td { color: #fff; font-weight: 600; }
.motor-yolu tr.bugunku .soluk { font-weight: 400; }
.ayrinti-aciklama { margin-top: 12px; color: var(--yazi-2); font-size: 13px; line-height: 1.55; }
/* Sekmeler (OGame'in teknoloji penceresi): küçük, seçili turuncu; altında o sekmenin içeriği */
.ayrinti-sekmeler { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0; }
.ayrinti-sekme { padding: 4px 10px; background: rgba(13, 18, 25, .9); border: 1px solid var(--kenar); border-radius: 4px; color: var(--yazi-2); font-size: 12px; white-space: nowrap; }
.ayrinti-sekme:hover { border-color: var(--kenar-acik); color: #fff; }
.ayrinti-sekme.secili { border-color: var(--turuncu); color: var(--turuncu); background: rgba(255, 157, 46, .08); }
.ayrinti-sekme-govde { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .06); }
.sekme-not { margin: 0 0 10px; color: var(--soluk); font-size: 12px; }
.ayrinti-sekme-govde > .ayrinti-aciklama:first-child { margin-top: 0; }
.bilgi-notlari { margin: 8px 0 0; padding-left: 18px; color: var(--yazi-2); font-size: 12.5px; line-height: 1.5; }
.bilgi-baslik { margin: 14px 0 6px; color: var(--soluk); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.tablo-kaydir + .sekme-not { margin: 8px 0 0; }
.ayrinti-bag { padding: 0; background: none; border: 0; color: var(--bag); font: inherit; text-align: left; }
.ayrinti-bag:hover { color: #b9d8f7; text-decoration: underline; }
/* Hızlı ateş: iki liste yan yana (telefonda alt alta) */
.hizli-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hizli-izgara h3 { margin-bottom: 6px; color: var(--soluk); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.hizli-liste, .gerek-agaci { margin: 0; padding: 0; list-style: none; }
.hizli-liste li, .gerek-agaci li { display: flex; align-items: center; gap: 8px; min-height: 34px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.hizli-sayi b { color: #fff; }
.liste-resim { flex: none; width: 28px; height: 28px; background: #0a0f15; border: 1px solid #34465c; border-radius: 4px; }
.liste-simge { display: grid; place-items: center; }
.liste-simge .simge { width: 60%; height: 60%; }
/* Gereksinim ağacı: girinti derinlikle (--d); tamamsa yeşil onay, eksikse turuncu kilit */
.gerek-agaci li { padding-left: calc(var(--d) * 22px); }
.gerek-agaci .gerek-durum { margin-left: auto; color: var(--soluk); font-size: 12px; white-space: nowrap; }
.gerek-agaci li > .simge { flex: none; width: 15px; height: 15px; }
.gerek-agaci li.tamam > .simge { color: var(--yesil); }
.gerek-agaci li.eksik > .simge, .gerek-agaci li.eksik .gerek-durum { color: var(--turuncu); }
.gerek-agaci li.ozel { color: var(--zumrut); }
.amiral-galeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.amiral-galeri figure { margin: 0; }
.amiral-galeri img { width: 100%; aspect-ratio: 960 / 657; object-fit: cover; border: 1px solid rgba(67, 211, 145, .35); border-radius: 4px; }
.amiral-galeri figcaption { margin-top: 4px; color: var(--yazi-2); font-size: 11.5px; text-align: center; }

/* Kademeler (sekmesinde): kaynak binalarında sıradaki kademeler (yapımdaki en üstte), yatay kaydırılabilir; ilk sütun yerinde kalır */
.ayrinti-kademe-tablo { font-size: 12.5px; }
.ayrinti-kademe-tablo th, .ayrinti-kademe-tablo td { padding: 5px 6px; text-align: right; white-space: nowrap; }
/* Başlıklar iki satıra inebilir ("Yapım / süresi"): tablo ayrıntı paneline sığsın, sütunlar sayının genişliğinde kalsın */
.ayrinti-kademe-tablo thead th { font-size: 10.5px; white-space: normal; vertical-align: bottom; line-height: 1.25; }
.ayrinti-kademe-tablo th:first-child { text-align: left; }
.ayrinti-kademe-tablo tbody th { color: #fff; font-weight: 600; }
.ayrinti-kademe-tablo tbody th em { margin-left: 5px; color: var(--yesil); font-size: 11px; font-weight: 500; }
.ayrinti-kademe-tablo em { font-style: normal; font-size: 11.5px; }
.ayrinti-kademe-tablo td.yetmez { color: rgba(255, 157, 46, .75); }
.ayrinti-kademe-tablo tfoot th, .ayrinti-kademe-tablo tfoot td { color: #fff; font-weight: 700; border-top: 1px solid var(--kenar-acik); }
.ayrinti-kademe-not { margin-top: 6px; color: var(--soluk); font-size: 11.5px; }

@media (max-width: 759px) {
  .sayfa-adi { display: block; }
  .baslik-yazi { display: none; }
  .baslik { border-radius: 6px; }
  /* Telefonda paneller alt alta, kartlar ekran genişliğine göre; adlar kartın altında */
  .kart-paneli.yan-yana { display: block; }
  .kart-paneli.yan-yana .panel-bolum + .panel-bolum { border-left: 0; box-shadow: none; }
  .yan-yana .panel-bolum + .panel-bolum .panel-baslik { margin-top: 10px; background: linear-gradient(180deg, var(--serit-ust), var(--serit-alt)); }
  .kart-izgara, .yan-yana .kart-izgara { grid-template-columns: repeat(var(--tel, 3), minmax(0, 1fr)); gap: 10px 8px; }
  .sayfa-arastirma .kart-izgara, .panel-bolum.kucuk .kart-izgara { --tel: 4; }
  .kart-ad { font-size: 11px; overflow-wrap: anywhere; }
  .sayfa-arastirma .kart-ad, .panel-bolum.kucuk .kart-ad { font-size: 10.5px; }
  /* Telefonda resim küçük, ad yanında; bilgiler, bedel ve düğmeler tam genişlikte */
  .ayrinti-ust { grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; row-gap: 0; }
  .ayrinti-govde { display: contents; }
  .ayrinti-resim { grid-row: 1 / span 2; }
  .ayrinti-resim > span { padding: 3px 4px; font-size: 10px; }
  .ayrinti-tur { grid-column: 2; align-self: end; }
  .ayrinti-ad { grid-column: 2; align-self: start; margin: 2px 40px 0 0; font-size: 17px; }
  .bilgi-satirlari, .ayrinti-govde > .bedel, .ayrinti-govde > .eylem-not, .ayrinti-eylem { grid-column: 1 / -1; }
  .bilgi-satirlari { margin-top: 12px; }
  .bilgi-satirlari > div { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .ayrinti-eylem { margin-top: 10px; }
  .ayrinti-eylem > .dugme.yesil { flex: 1 1 100%; min-height: 44px; }
  .ayrinti-sekmeler { grid-column: 1 / -1; }
  .ayrinti-sekme { padding: 4px 8px; font-size: 11.5px; }
  .hizli-izgara { grid-template-columns: 1fr; }
  .gerek-agaci li { padding-left: calc(var(--d) * 14px); }
  .ayrinti-kademe-tablo { font-size: 12px; }
  .ayrinti-kademe-tablo th, .ayrinti-kademe-tablo td { padding: 5px 5px; }
  .ayrinti-kademe-tablo th:first-child { position: sticky; left: 0; z-index: 1; background: #101722; }
}

/* Kademe tablosunun altında o kademelerin açtıkları (küçük resimler) ve bugün yetmeyen enerji (Terraformer) */
.ayrinti-kademe-acar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; font-size: 12px; }
.kademe-acar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.kademe-acar b { margin-right: 2px; color: #ff9600; font-weight: 600; }
.kademe-acar .acar-resim { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #34465c; border-radius: 3px; object-fit: cover; }
.kademe-acar .acar-resim .simge, .kademe-acar .acar-resim img { width: 70%; height: 70%; }
.ayrinti-kademe-tablo .yetmez-yazi { color: rgba(255, 157, 46, .85); }
/* Getirdiği (öne alınmış sütunlar): bedellerden ince bir çizgiyle ayrılır */
.ayrinti-kademe-tablo td.etki, .ayrinti-kademe-tablo th.etki { color: #fff; }
.ayrinti-kademe-tablo .etki.son { border-right: 1px solid rgba(255, 255, 255, .08); padding-right: 10px; }

/* Hesaplayıcı (ayrıntının ana yüzünde, altta; Sürmenaj 2026-10-30): iki okla seviye aralığı, toplam bedel ve süre, eksik,
   eksiğin üretimle ne zaman biriktiği. Gemi ve savunmada adet toplamının altında hepsinin ne zaman hazır olacağı. */
.ayrinti-hesap { display: grid; gap: 8px; margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 12.5px; }
.hesap-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.hesap-baslik { margin-right: 6px; color: var(--soluk); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.hesap-sayi { display: inline-flex; align-items: center; overflow: hidden; background: #0b1017; border: 1px solid var(--kenar-acik); border-radius: 4px; }
.hesap-sayi button { display: grid; place-items: center; width: 26px; height: 28px; padding: 0; background: #121922; border: 0; color: var(--yazi-2); }
.hesap-sayi button:hover { background: #1b2532; color: #fff; }
.hesap-sayi .simge { width: 14px; height: 14px; }
.hesap-sayi input { width: 46px; height: 28px; padding: 0 2px; background: transparent; border: 0; border-radius: 0; color: #fff; font-weight: 600; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.hesap-sayi input::-webkit-inner-spin-button, .hesap-sayi input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hesap-ara { color: var(--soluk); }
.hesap-govde { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.hesap-govde .bedel { margin: 0; }
.hesap-satir, .birim-hazir { color: var(--yazi-2); }
.hesap-satir b, .birim-hazir b { color: #fff; }
.hesap-durum { flex: 1 1 100%; }
.birim-hazir { flex: 1 1 100%; font-size: 12.5px; }
.birim-hazir.soluk { color: var(--soluk); }
@media (pointer: coarse) {
  .hesap-sayi button { width: 36px; height: 36px; }
  .hesap-sayi input { height: 36px; font-size: 16px; }
}

/* Yık (Sürmenaj 2026-10-30): ikincil, sönük kırmızı; ilk basış "Yıkılsın mı?" diye sorar. Kartta ve sırada yıkım aşağı okla */
.dugme.yik { margin-left: auto; background: transparent; border-color: rgba(240, 98, 90, .45); color: #e79a94; }
.dugme.yik:hover:not(:disabled) { background: rgba(240, 98, 90, .14); border-color: var(--kirmizi); color: #fff; }
.dugme.yik.onay-bekliyor::after { content: "Yıkılsın mı?"; }
.kart-seviye em.yikim, .sira-seviye.yikim { color: #ff8a80; }