/* ======================================================================
   OGAME KLONU - STİL  (OGame'in koyu uzay teması temel alınmıştır)
   ====================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #0d1014 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><rect width='400' height='400' fill='%230d1014'/><g fill='white'><circle cx='20' cy='30' r='0.8' opacity='.6'/><circle cx='120' cy='80' r='0.6' opacity='.4'/><circle cx='300' cy='40' r='1' opacity='.7'/><circle cx='380' cy='200' r='0.7' opacity='.5'/><circle cx='200' cy='300' r='0.9' opacity='.6'/><circle cx='60' cy='350' r='0.5' opacity='.4'/><circle cx='250' cy='150' r='0.6' opacity='.5'/><circle cx='340' cy='330' r='0.8' opacity='.6'/><circle cx='150' cy='220' r='0.5' opacity='.3'/><circle cx='90' cy='170' r='0.7' opacity='.5'/></g></svg>");
  color: #848484; font: 12px Verdana, Arial, Helvetica, sans-serif; min-height: 100vh;
}
a { color: #6f9fc8; text-decoration: none; cursor: pointer; }
a:hover { color: #fff; }
b, .textBeefy { color: #fff; font-weight: bold; }
.ok { color: #99cc00; } .nok { color: #d43635; } .dim { color: #6a6a6a; } .ready { color: #ffd54a; } .inactive { color: #b1b1b1; font-style: italic; }
input, select, button { font: inherit; }
input[type=number], select, .numInput {
  background: #0f1b24; border: 1px solid #2a3a4a; color: #fff; padding: 3px 5px; border-radius: 3px; width: 90px;
}
input[type=number]:focus, select:focus { outline: none; border-color: #6f9fc8; }

#pageContent {
  display: grid; grid-template-columns: 180px 1fr 180px; grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "bar bar bar" "res res res" "left main right" "foot foot foot";
  max-width: 1200px; margin: 0 auto; min-height: 100vh; gap: 0 8px; padding: 0 8px;
}

/* ÜST BAR */
#bar { grid-area: bar; background: linear-gradient(#1a2129, #0d1014); border-bottom: 1px solid #2a3a4a; height: 28px; }
#bar ul { list-style: none; margin: 0; padding: 0 10px; display: flex; gap: 30px; align-items: center; height: 100%; font-size: 11px; }
#bar li:last-child { margin-left: auto; color: #6f9fc8; }

/* KAYNAK BARI */
#resources {
  grid-area: res; display: flex; justify-content: center; gap: 6px; padding: 8px 0;
  background: linear-gradient(#111a22, #0b1016 60%, #0d1014); border-bottom: 1px solid #1f2d3a;
}
.resource {
  position: relative; width: 170px; height: 56px; padding: 6px 8px 6px 54px;
  background: linear-gradient(#2a3a49, #141c24); border: 1px solid #3b4d5e; border-radius: 4px; cursor: help;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.5);
}
.resource .resIcon { position: absolute; left: 6px; top: 6px; width: 42px; height: 42px; border-radius: 50%; }
.resource .resName { display: block; font-size: 10px; text-transform: uppercase; color: #8aa0b3; letter-spacing: .5px; }
.resource .value { display: block; font-size: 15px; color: #fff; font-weight: bold; margin-top: 4px; text-shadow: 0 1px 2px #000; }
.resource .value.middlemark { color: #ffb84d; } .resource .value.overmark { color: #d43635; }
.resource .tooltip { display: none; position: absolute; top: 60px; left: 0; z-index: 50; background: #0e151c; border: 1px solid #3b4d5e; padding: 8px; border-radius: 4px; min-width: 220px; box-shadow: 0 4px 12px #000; }
.resource .tooltip table { width: 100%; } .resource .tooltip td { padding: 2px 4px; } .resource .tooltip td:last-child { text-align: right; color: #fff; }
.resource:hover .tooltip { display: block; }
.resIcon { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.resIcon.metal { background: radial-gradient(circle at 35% 35%, #c9d0d6, #70808d 50%, #2f3a44); box-shadow: inset 0 0 4px #000; }
.resIcon.crystal { background: radial-gradient(circle at 35% 35%, #dff6ff, #4fb4e8 45%, #1b5e8c); box-shadow: inset 0 0 4px #000, 0 0 6px #4fb4e8; }
.resIcon.deuterium { background: radial-gradient(circle at 35% 35%, #c7ffe8, #2fc98c 45%, #0f5e45); box-shadow: inset 0 0 4px #000; }
.resIcon.energy { background: radial-gradient(circle at 35% 35%, #fff6c4, #f7c22c 45%, #9a6a00); box-shadow: 0 0 8px #f7c22c; }
.resIcon.darkmatter { background: radial-gradient(circle at 35% 35%, #c7a8ff, #6a3fd1 45%, #1b0f3c); box-shadow: 0 0 8px #6a3fd1; }

/* SOL MENÜ */
#leftMenu { grid-area: left; padding-top: 10px; }
.menuHead { background: linear-gradient(#2a3a49, #141c24); border: 1px solid #3b4d5e; color: #fff; text-align: center; padding: 5px; border-radius: 4px 4px 0 0; font-weight: bold; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
#menuTable { list-style: none; margin: 0; padding: 0; border: 1px solid #1f2d3a; border-top: none; background: #0b1016; }
#menuTable li.sep { height: 6px; background: #0d1014; border-top: 1px solid #1f2d3a; border-bottom: 1px solid #1f2d3a; }
.menubutton {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; color: #bbb; border-bottom: 1px solid #141c24;
  background: linear-gradient(#1b252e, #10171d); transition: background .15s;
}
.menubutton:hover { background: linear-gradient(#2a3a49, #1b252e); color: #fff; }
.menubutton.selected { background: linear-gradient(#24475f, #15303f); color: #fff; box-shadow: inset 3px 0 0 #6f9fc8; }
.ico { width: 18px; height: 18px; border-radius: 3px; flex: none; opacity: .9; }
.ico-overview { background: radial-gradient(circle at 40% 40%, #7fb3e6, #1d4d7d); }
.ico-empire { background: linear-gradient(135deg, #e8c15a, #8a6a1a); }
.ico-resources { background: conic-gradient(#c9d0d6 0 33%, #4fb4e8 0 66%, #2fc98c 0); }
.ico-facilities { background: linear-gradient(#8a98a6, #3f4b57); clip-path: polygon(10% 100%, 10% 40%, 40% 40%, 40% 10%, 70% 10%, 70% 40%, 90% 40%, 90% 100%); }
.ico-merchant { background: linear-gradient(135deg, #f7c22c, #a06a00); border-radius: 50%; }
.ico-research { background: radial-gradient(circle, #d9a2ff, #5a2b9a); border-radius: 50%; }
.ico-shipyard { background: linear-gradient(135deg, #8fa9c0, #324656); clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%); }
.ico-defense { background: linear-gradient(#d44, #600); clip-path: polygon(50% 0, 100% 25%, 100% 65%, 50% 100%, 0 65%, 0 25%); }
.ico-fleet { background: linear-gradient(135deg, #cfe3f5, #4a7ea8); clip-path: polygon(0 50%, 100% 0, 70% 50%, 100% 100%); }
.ico-galaxy { background: conic-gradient(from 0deg, #0d1014, #6f9fc8, #0d1014, #e8c15a, #0d1014); border-radius: 50%; }
.ico-alliance { background: linear-gradient(135deg, #5ad, #246); border-radius: 50% 50% 0 0; }
.ico-messages { background: linear-gradient(#ffe39a, #c79a2a); clip-path: polygon(0 20%, 100% 20%, 100% 80%, 0 80%); }
.ico-techtree { background: linear-gradient(#9c9, #363); }
.ico-settings { background: radial-gradient(circle, #ccc 30%, #555 32%, #555 60%, transparent 62%); }
.msgBadge, .fleetSlots { margin-left: auto; background: #d43635; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; }
.fleetSlots { background: #2a3a49; color: #bbb; }
.menuFoot { margin-top: 10px; padding: 8px; font-size: 11px; background: #0b1016; border: 1px solid #1f2d3a; border-radius: 4px; }

/* SAĞ MENÜ */
#rightMenu { grid-area: right; padding-top: 10px; }
#planetList { border: 1px solid #1f2d3a; border-top: none; background: #0b1016; }
.planetItem { display: flex; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid #141c24; cursor: pointer; position: relative; }
.planetItem.selected { background: linear-gradient(90deg, #15303f, #0b1016); box-shadow: inset 3px 0 0 #6f9fc8; }
.planetItem.disabled { opacity: .5; cursor: not-allowed; }
.planetItem .planetInfo span { color: #6f9fc8; font-size: 11px; }
.planetBuild { position: absolute; right: 6px; top: 6px; font-size: 12px; }
.planetPic { width: 44px; height: 44px; border-radius: 50%; flex: none; box-shadow: inset -8px -6px 14px rgba(0,0,0,.8), 0 0 8px rgba(111,159,200,.3); }
.planetPic.small { width: 26px; height: 26px; display: inline-block; vertical-align: middle; }
.planetPic.empty { background: transparent; border: 1px dashed #3b4d5e; box-shadow: none; }
.planetBig { width: 180px; height: 180px; border-radius: 50%; margin: 0 auto 10px; box-shadow: inset -30px -20px 50px rgba(0,0,0,.85), 0 0 30px rgba(111,159,200,.25); }
.type1, .planetPic.type1 { background: radial-gradient(circle at 35% 30%, #f8e3a0, #c58b3c 50%, #5e3a12); }
.type2 { background: radial-gradient(circle at 35% 30%, #ffd9b0, #d86a3b 50%, #5c1f10); }
.type3 { background: radial-gradient(circle at 35% 30%, #a9e8ff, #2f8fd0 45%, #1a4a7a 70%, #0b2238); }
.type4 { background: radial-gradient(circle at 35% 30%, #d8f5d0, #4fa05a 50%, #1b4a25); }
.type5 { background: radial-gradient(circle at 35% 30%, #fff, #b7cbe0 50%, #4e6a85); }
.type6 { background: radial-gradient(circle at 35% 30%, #ffb3b3, #a63d3d 50%, #4a1414); }
.type7 { background: radial-gradient(circle at 35% 30%, #e6d2ff, #8a5fd1 50%, #2e1b55); }
.type8 { background: radial-gradient(circle at 35% 30%, #c8c8c8, #6a6a6a 50%, #222); }
.type9 { background: radial-gradient(circle at 35% 30%, #c0ffe6, #2aa58a 50%, #0e4a3c); }

/* ANA İÇERİK */
#contentWrapper { grid-area: main; padding-top: 10px; min-width: 0; }
#planetbar { background: linear-gradient(90deg, #15303f, #0b1016 70%); border: 1px solid #1f2d3a; border-radius: 4px; padding: 6px 12px; margin-bottom: 8px; }
.planetbarInner { display: flex; align-items: baseline; gap: 12px; }
#planetbar h2 { margin: 0; font-size: 16px; color: #fff; }
.planetCoords { color: #6f9fc8; }
.pageTitle { background: linear-gradient(#2a3a49, #141c24); border: 1px solid #3b4d5e; color: #fff; padding: 6px 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; border-radius: 4px 4px 0 0; }
.box { background: rgba(11,16,22,.92); border: 1px solid #1f2d3a; padding: 10px; margin-bottom: 8px; }
.boxHead { color: #fff; font-weight: bold; margin: -10px -10px 10px; padding: 6px 10px; background: #111a22; border-bottom: 1px solid #1f2d3a; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.boxHead .small, a.small { font-size: 10px; font-weight: normal; text-transform: none; margin-left: 8px; letter-spacing: 0; }
.empty { color: #6a6a6a; padding: 12px; text-align: center; font-style: italic; }
.warn { margin-top: 8px; padding: 6px; background: rgba(212,54,53,.15); border: 1px solid #d43635; color: #ff8a8a; border-radius: 3px; }
.row { margin-top: 8px; }
#footer { grid-area: foot; text-align: center; padding: 14px; color: #4a5a6a; font-size: 10px; border-top: 1px solid #1f2d3a; margin-top: 20px; }

/* GENEL BAKIŞ */
.overviewGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.planetBox { text-align: center; }
.planetData { width: 100%; text-align: left; }
.planetData td { padding: 3px 6px; border-bottom: 1px solid #141c24; } .planetData td:first-child { color: #6a6a6a; width: 110px; }
.prodTable { width: 100%; } .prodTable td { padding: 5px 6px; border-bottom: 1px solid #141c24; } .prodTable td:nth-child(2) { text-align: right; font-weight: bold; }
.eventTable { width: 100%; } .eventTable td { padding: 4px 6px; border-bottom: 1px solid #141c24; } .eventTable td.timer { color: #ffd54a; width: 110px; font-weight: bold; }
.evMission { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; color: #fff; }
.evMission.attack { background: #a02a2a; } .evMission.transport { background: #2a6aa0; } .evMission.espionage { background: #6a3fa0; } .evMission.deploy { background: #2a8a4a; } .evMission.expedition { background: #a0742a; }
.demoBox { border-style: dashed; border-color: #3b4d5e; }

/* İŞ SIRASI */
.queueRow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: linear-gradient(90deg, #15303f, #0b1016); border: 1px solid #24475f; margin-bottom: 4px; border-radius: 3px; }
.queueRow .qType { font-size: 10px; text-transform: uppercase; color: #6f9fc8; width: 70px; }
.queueRow .lvl { color: #bbb; }
.queueRow .timer { margin-left: auto; color: #ffd54a; font-weight: bold; font-family: monospace; font-size: 13px; }
.queueRow .cancel { color: #d43635; font-weight: bold; padding: 0 4px; } .queueRow .cancel:hover { color: #fff; }

/* TEKNOLOJİ KUTUCUKLARI */
.techGrid { display: flex; flex-wrap: wrap; gap: 8px; }
.technology { width: 100px; cursor: pointer; text-align: center; }
.techImage { position: relative; width: 100px; height: 100px; border: 2px solid #3b4d5e; border-radius: 4px; box-shadow: inset 0 0 20px rgba(0,0,0,.7), 0 2px 4px #000; overflow: hidden; }
.techImage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%, rgba(0,0,0,.4)); }
.technology.on .techImage { border-color: #4a8a2a; box-shadow: inset 0 0 20px rgba(0,0,0,.7), 0 0 8px rgba(100,200,50,.4); }
.technology.disabled .techImage { border-color: #7a3a2a; filter: saturate(.6); }
.technology.locked .techImage { border-color: #333; filter: grayscale(.9) brightness(.5); }
.technology.busy .techImage { border-color: #7a6a2a; filter: saturate(.7); }
.technology.active .techImage { border-color: #ffd54a; box-shadow: 0 0 12px rgba(255,213,74,.5); }
.technology:hover .techImage { border-color: #6f9fc8; transform: translateY(-1px); }
.techImage .level, .techImage .amount { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.75); color: #fff; font-weight: bold; padding: 1px 6px; border-radius: 3px; font-size: 12px; border: 1px solid #555; z-index: 2; }
.techImage .activeMark { position: absolute; left: 3px; top: 3px; z-index: 2; }
.techName { font-size: 10px; margin-top: 4px; color: #bbb; line-height: 1.2; height: 24px; overflow: hidden; }
.techImage.big { width: 120px; height: 120px; flex: none; }
.miniImg { display: inline-block; width: 22px; height: 22px; border-radius: 3px; vertical-align: middle; margin-right: 6px; border: 1px solid #3b4d5e; }

/* Bina / araştırma / gemi görselleri (CSS ile üretilmiş) */
.b-metal { background: radial-gradient(circle at 50% 110%, #c9d0d6 0 12%, transparent 13%), linear-gradient(160deg, #3a4753, #1b2229 60%, #0c1015); }
.b-crystal { background: radial-gradient(circle at 50% 100%, #9fe3ff 0 10%, transparent 11%), conic-gradient(from 200deg at 50% 70%, #4fb4e8, #1b5e8c, #9fe3ff, #1b5e8c, #4fb4e8); }
.b-deut { background: radial-gradient(ellipse at 50% 80%, #2fc98c 0 25%, #0f5e45 26% 45%, transparent 46%), linear-gradient(#1b2b33, #0b1a22); }
.b-solar { background: repeating-linear-gradient(90deg, #1f4b7a 0 12px, #0d2b4a 12px 14px), linear-gradient(#f7c22c, #f7c22c); background-size: 100% 60%, 100% 100%; background-position: bottom, top; background-repeat: no-repeat; }
.b-fusion { background: radial-gradient(circle, #fff 0 8%, #f7c22c 9% 20%, #d84a2a 21% 35%, #3a1a1a 36% 50%, #1b1414 51%); }
.b-storage { background: repeating-linear-gradient(0deg, #4a5560 0 14px, #2a333b 14px 16px); }
.b-storage2 { background: repeating-linear-gradient(0deg, #3b6a8c 0 14px, #1b3a4c 14px 16px); }
.b-tank { background: repeating-linear-gradient(0deg, #2a7a5a 0 14px, #10402e 14px 16px); }
.b-robot { background: radial-gradient(circle at 50% 40%, #c9d0d6 0 15%, #5a6a7a 16% 20%, transparent 21%), linear-gradient(#4a3a1a, #1b1b22); }
.b-shipyard { background: linear-gradient(135deg, #8fa9c0, #324656 50%, #10171d); }
.b-lab { background: radial-gradient(circle at 50% 50%, #d9a2ff 0 10%, #5a2b9a 11% 30%, transparent 31%), linear-gradient(#1b1430, #0b0b18); }
.b-depot { background: linear-gradient(#5a7a9a, #2a3a4a); }
.b-silo { background: radial-gradient(circle at 50% 50%, #0b1016 0 18%, #5a5a5a 19% 30%, #2a2a2a 31%); }
.b-nanite { background: repeating-radial-gradient(circle, #99cc00 0 2px, #1b2a0b 2px 8px); }
.b-terra { background: linear-gradient(#4fa05a 50%, #c58b3c 50%); }
.b-dock { background: linear-gradient(135deg, #cfe3f5, #4a7ea8 60%, #1b2d3d); }
.r-energy { background: radial-gradient(circle, #fff6c4, #f7c22c 30%, #3a2a00 70%); }
.r-laser { background: linear-gradient(135deg, transparent 45%, #ff3b3b 48% 52%, transparent 55%), #1a0b0b; }
.r-ion { background: radial-gradient(circle, #9fe3ff, #1b5e8c 50%, #0b1a22); }
.r-hyper { background: conic-gradient(#2e1b55, #8a5fd1, #2e1b55, #8a5fd1, #2e1b55); }
.r-plasma { background: radial-gradient(circle, #fff, #d9a2ff 20%, #6a3fd1 50%, #1b0f3c); }
.r-comb { background: linear-gradient(#ff8a2a, #a02a0a 60%, #2a0a0a); }
.r-impulse { background: linear-gradient(#5ad, #246 60%, #0b1a22); }
.r-hdrive { background: linear-gradient(#d9a2ff, #5a2b9a 60%, #1b0f3c); }
.r-esp { background: radial-gradient(circle at 50% 50%, #0b1016 0 12%, #99cc00 13% 18%, #1b2a0b 19% 40%, #0b1016 41%); }
.r-comp { background: repeating-linear-gradient(90deg, #99cc00 0 2px, #0b1016 2px 10px), #0b1016; }
.r-astro { background: radial-gradient(circle at 30% 30%, #fff 0 3%, transparent 4%), radial-gradient(circle at 70% 60%, #fff 0 2%, transparent 3%), radial-gradient(circle at 50% 80%, #f8e3a0 0 6%, transparent 7%), #0b1a30; }
.r-irn { background: repeating-radial-gradient(circle at 20% 20%, #6f9fc8 0 1px, transparent 1px 12px), #0b1016; }
.r-grav { background: radial-gradient(circle, #000 0 20%, #6a3fd1 21% 30%, #000 31%); }
.r-weap { background: linear-gradient(135deg, #d44, #600); }
.r-shield { background: radial-gradient(circle, #4fb4e8, #1b5e8c 60%, #0b1a22); }
.r-armour { background: repeating-linear-gradient(45deg, #70808d 0 6px, #3a4753 6px 12px); }
.s-sc, .s-lc, .s-lf, .s-hf, .s-cr, .s-bs, .s-col, .s-rec, .s-esp, .s-bomb, .s-sat, .s-des, .s-ds, .s-bc { background-color: #0b1a30; background-repeat: no-repeat; background-position: center; }
.s-sc { background-image: linear-gradient(135deg, #cfe3f5, #4a7ea8); background-size: 50% 35%; }
.s-lc { background-image: linear-gradient(135deg, #cfe3f5, #4a7ea8); background-size: 70% 50%; }
.s-lf { background-image: linear-gradient(135deg, #e0e0e0, #777); background-size: 40% 20%; }
.s-hf { background-image: linear-gradient(135deg, #e0e0e0, #777); background-size: 55% 30%; }
.s-cr { background-image: linear-gradient(135deg, #ffd27f, #a06a00); background-size: 70% 25%; }
.s-bs { background-image: linear-gradient(135deg, #ffd27f, #a06a00); background-size: 80% 45%; }
.s-col { background-image: radial-gradient(circle, #4fa05a, #1b4a25); background-size: 60% 60%; }
.s-rec { background-image: linear-gradient(135deg, #9c9, #363); background-size: 60% 50%; }
.s-esp { background-image: radial-gradient(circle, #99cc00, #1b2a0b); background-size: 25% 25%; }
.s-bomb { background-image: linear-gradient(135deg, #d44, #600); background-size: 75% 40%; }
.s-sat { background-image: linear-gradient(90deg, #1f4b7a 0 35%, #f7c22c 35% 65%, #1f4b7a 65%); background-size: 80% 30%; }
.s-des { background-image: linear-gradient(135deg, #c9d0d6, #2f3a44); background-size: 90% 55%; }
.s-ds { background-image: radial-gradient(circle at 40% 40%, #ddd, #555 60%, #111); background-size: 85% 85%; }
.s-bc { background-image: linear-gradient(135deg, #d9a2ff, #5a2b9a); background-size: 80% 35%; }
.d-rl, .d-ll, .d-hl, .d-gc, .d-ic, .d-pt, .d-ss, .d-ls, .d-abm, .d-ipm { background-color: #1a1410; background-repeat: no-repeat; background-position: center 70%; }
.d-rl { background-image: linear-gradient(#999, #444); background-size: 30% 50%; }
.d-ll { background-image: linear-gradient(#ff8a8a, #a02a2a); background-size: 20% 55%; }
.d-hl { background-image: linear-gradient(#ff8a8a, #a02a2a); background-size: 35% 60%; }
.d-gc { background-image: linear-gradient(#cfe3f5, #4a7ea8); background-size: 45% 60%; }
.d-ic { background-image: radial-gradient(circle, #9fe3ff, #1b5e8c); background-size: 50% 50%; }
.d-pt { background-image: radial-gradient(circle, #fff, #d9a2ff 30%, #6a3fd1); background-size: 60% 60%; }
.d-ss { background-image: radial-gradient(circle at 50% 100%, rgba(79,180,232,.6), rgba(79,180,232,.1) 70%, transparent 72%); background-size: 80% 160%; }
.d-ls { background-image: radial-gradient(circle at 50% 100%, rgba(79,180,232,.9), rgba(79,180,232,.2) 70%, transparent 72%); background-size: 100% 200%; }
.d-abm { background-image: linear-gradient(#ddd, #666); background-size: 15% 70%; }
.d-ipm { background-image: linear-gradient(#ffb3b3, #a63d3d); background-size: 20% 80%; }

/* DETAY PANELİ */
#overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 60px; overflow: auto; }
#overlay.hidden { display: none; }
#detailPanel { width: 640px; max-width: 95vw; background: #0e151c; border: 1px solid #3b4d5e; border-radius: 4px; box-shadow: 0 10px 40px #000; padding: 16px; position: relative; }
.detailHead { display: flex; gap: 16px; margin-bottom: 12px; }
.detailHead h2 { margin: 0 0 6px; color: #fff; font-size: 16px; } .detailHead h2 .lvl { color: #6f9fc8; font-weight: normal; font-size: 13px; }
.detailHead .desc { margin: 0; line-height: 1.5; color: #aaa; }
.closeBtn { position: absolute; right: 10px; top: 8px; font-size: 16px; color: #888; }
.reqBox { background: #111a22; padding: 6px 10px; border-left: 3px solid #6f9fc8; margin-bottom: 10px; }
.costBox { background: #111a22; padding: 10px; border: 1px solid #1f2d3a; margin-bottom: 10px; }
.costTitle { color: #fff; margin-bottom: 6px; }
.costItem { display: inline-block; margin-right: 16px; } .costItem b { color: #fff; } .costItem.nok b { color: #d43635; }
.buildTime { margin-top: 6px; color: #aaa; }
.infoTable { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 11px; }
.infoTable th { background: #111a22; color: #fff; padding: 4px; text-align: left; font-weight: normal; }
.infoTable td { padding: 4px; border-bottom: 1px solid #141c24; }
.infoTable tr.cur td { background: rgba(111,159,200,.12); color: #fff; }
.actionRow { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.hint { color: #6f9fc8; }

/* BUTONLAR */
.btn { display: inline-block; padding: 6px 14px; background: linear-gradient(#2a3a49, #141c24); border: 1px solid #3b4d5e; color: #fff; border-radius: 3px; cursor: pointer; text-shadow: 0 1px 1px #000; }
.btn:hover { background: linear-gradient(#3b4d5e, #1b252e); border-color: #6f9fc8; color: #fff; }
.btn.upgrade { background: linear-gradient(#3f8a2a, #1f4a12); border-color: #5ab03a; font-weight: bold; }
.btn.upgrade:hover { background: linear-gradient(#5ab03a, #2a6a1a); }
.btn.danger { background: linear-gradient(#a02a2a, #4a1010); border-color: #d43635; }
.btn.small { padding: 2px 8px; font-size: 10px; }
.maxLink { font-size: 10px; color: #ffd54a; } .maxLink:hover { color: #fff; }

/* ÜRETİM AYARLARI */
.prodSettings { width: 100%; border-collapse: collapse; }
.prodSettings th { text-align: left; padding: 6px; background: #111a22; color: #fff; font-weight: normal; }
.prodSettings td { padding: 5px 6px; border-bottom: 1px solid #141c24; }
.prodSettings tr.sum td { background: rgba(111,159,200,.08); color: #fff; }
.prodSettings select { width: 70px; }

/* FİLO */
.fleetTable, .shipSelect, .galaxyTable, .empireTable, .settingsTable, .espTable, .cr { width: 100%; border-collapse: collapse; }
.fleetTable th, .galaxyTable th, .empireTable th, .cr th { background: #111a22; color: #fff; padding: 6px; text-align: left; font-weight: normal; }
.fleetTable td, .shipSelect td, .galaxyTable td, .empireTable td, .settingsTable td, .espTable td, .cr td { padding: 5px 6px; border-bottom: 1px solid #141c24; }
.fleetTable td.timer { color: #ffd54a; font-weight: bold; }
.fleetTable tr.returning td { opacity: .7; }
.fleetForm { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 16px; }
.formCol label { display: block; color: #fff; margin: 8px 0 4px; font-size: 11px; }
.coordsIn input { width: 60px; }
.cargoIn { margin-bottom: 6px; } .cargoIn input { width: 110px; }
.summary table td { padding: 3px 6px; } .summary table td:first-child { color: #6a6a6a; }
.summary { background: #111a22; padding: 8px; border: 1px solid #1f2d3a; }

/* GALAKSİ */
.galaxyNav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.galaxyNav input { width: 60px; }
.galaxyTable tr.own td { background: rgba(153,204,0,.08); }
.galaxyTable tr.inactive td { color: #777; }
.galaxyTable tr.empty td { color: #444; }
.galaxyTable tr.exp td { color: #6f9fc8; }
.galaxyTable td.actions a { font-size: 15px; margin-right: 6px; opacity: .8; } .galaxyTable td.actions a:hover { opacity: 1; }
.legend { font-size: 11px; }

/* MESAJLAR */
.msgLayout { display: grid; grid-template-columns: 280px 1fr; gap: 8px; }
.msgItem { display: flex; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid #141c24; cursor: pointer; }
.msgItem:hover, .msgItem.active { background: rgba(111,159,200,.1); }
.msgItem.unread b { color: #ffd54a; }
.msgItem b { font-weight: normal; color: #ccc; font-size: 11px; }
.msgType { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #6f9fc8; }
.msgType.combat { background: #d43635; } .msgType.espionage { background: #8a5fd1; } .msgType.fleet { background: #2fc98c; } .msgType.expedition { background: #f7c22c; }
.msgMeta { color: #6a6a6a; margin-bottom: 10px; font-size: 11px; }
.msgContent { line-height: 1.6; }
.espReport h3, .combatReport h3, .expReport h3 { color: #fff; font-size: 14px; margin: 0 0 8px; }
.espTable { margin: 8px 0; } .espTable th { background: #111a22; color: #fff; padding: 4px; text-align: left; }
.espTable td:last-child { text-align: right; color: #fff; }
.espFoot { margin: 8px 0; }
.cr-win { color: #99cc00; } .cr-lose { color: #d43635; } .cr-draw { color: #ffd54a; }
.crSides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; font-size: 11px; }
.cr { margin: 8px 0; }
.crRounds { font-size: 11px; color: #888; margin: 8px 0; }
.crSummary { background: #111a22; padding: 8px; border: 1px solid #1f2d3a; line-height: 1.7; }

/* İMPARATORLUK / TEKNOLOJİ AĞACI */
.empireTable th { text-align: left; }
.ttGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.ttNode { padding: 6px 8px; border: 1px solid #1f2d3a; border-left-width: 3px; background: #111a22; font-size: 11px; }
.ttNode.done { border-left-color: #99cc00; } .ttNode.ready { border-left-color: #ffd54a; } .ttNode.locked { border-left-color: #d43635; opacity: .7; }
.ttNode b { font-weight: normal; color: #fff; }
.merchant { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .merchant label { color: #fff; }

/* TOAST */
#toastArea { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 6px; }
.toast { background: #0e151c; border: 1px solid #3b4d5e; border-left: 4px solid #6f9fc8; color: #fff; padding: 10px 14px; border-radius: 3px; box-shadow: 0 4px 12px #000; opacity: 0; transform: translateX(20px); transition: all .3s; max-width: 360px; }
.toast.show { opacity: 1; transform: none; }
.toast.ok { border-left-color: #99cc00; } .toast.error { border-left-color: #d43635; }



/* GÖRSELLER & BOTLAR */
.techImage, .techImage.big, .miniImg { background-size: cover; background-position: center; }
.planetPic, .planetBig { background-size: cover; background-position: center; box-shadow: none; }
.avatar { vertical-align: middle; border-radius: 4px; border: 1px solid #3b4d5e; margin-right: 4px; }
.ico-highscore { background: linear-gradient(#ffd54a, #a06a00); clip-path: polygon(50% 0, 65% 35%, 100% 40%, 75% 65%, 82% 100%, 50% 80%, 18% 100%, 25% 65%, 0 40%, 35% 35%); }
.eventTable tr.hostile td { background: rgba(212,54,53,.15); } .eventTable tr.hostile td.timer { color: #ff6a4a; }
.hs td.pts { text-align: right; color: #fff; font-weight: bold; }
.msgType.player { background: #ffd54a; }

/* ===== v2 eklemeleri ===== */
#officerBar { display: flex; gap: 4px; margin-left: 20px; }
.offIcon { width: 20px; height: 20px; border-radius: 50%; background-size: cover; opacity: .35; filter: grayscale(1); cursor: pointer; border: 1px solid #3b4d5e; }
.offIcon.on { opacity: 1; filter: none; box-shadow: 0 0 6px #ffd54a; border-color: #ffd54a; }
.ico-officers { background: radial-gradient(circle at 50% 35%, #ffd9a0 30%, #8a5a2a 32%); }
.ico-sim { background: linear-gradient(135deg, #d44 50%, #4a7ea8 50%); }
.ico-notes { background: repeating-linear-gradient(0deg, #f5f0d0 0 4px, #c8c0a0 4px 5px); }
.announce { background: linear-gradient(90deg, rgba(255,213,74,.2), transparent); border: 1px solid #a07a1a; color: #ffd54a; padding: 8px 12px; margin-bottom: 8px; border-radius: 3px; }
.statsRow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11px; color: #888; }
.planetItem.isMoon { padding-left: 20px; background: rgba(0,0,0,.3); } .planetItem.isMoon .planetPic { width: 30px; height: 30px; }
.planetAlert { position: absolute; right: 6px; bottom: 6px; color: #ff6a4a; font-size: 13px; }
.planetPic.tiny { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.shipPick { display: flex; flex-wrap: wrap; gap: 8px; }
.shipCard { width: 92px; text-align: center; background: #111a22; border: 1px solid #1f2d3a; padding: 6px; border-radius: 3px; }
.shipCard .numInput { width: 70px; margin-top: 4px; } .shipCard .maxLink { display: block; margin-top: 2px; }
.techImage.sm { width: 76px; height: 76px; margin: 0 auto; }
.shortcuts { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.officerGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.officerCard { display: flex; gap: 12px; background: #111a22; border: 1px solid #1f2d3a; padding: 10px; border-radius: 3px; }
.officerCard.active { border-color: #ffd54a; box-shadow: inset 0 0 20px rgba(255,213,74,.08); }
.officerCard h3 { margin: 0 0 4px; color: #fff; font-size: 13px; } .officerCard p { margin: 0 0 8px; font-size: 11px; line-height: 1.5; }
.officerCard .techImage { flex: none; }
.dm { color: #c9a2ff; font-weight: bold; }
.dmShop { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.dmItem { background: #111a22; border: 1px solid #1f2d3a; padding: 10px; border-radius: 3px; } .dmItem b { display: block; margin-bottom: 4px; } .dmItem p { font-size: 11px; margin: 0 0 8px; min-height: 30px; }
.msgTabs { display: flex; gap: 2px; margin-bottom: 8px; flex-wrap: wrap; }
.msgTabs a { padding: 5px 10px; background: #111a22; border: 1px solid #1f2d3a; color: #aaa; font-size: 11px; border-radius: 3px 3px 0 0; }
.msgTabs a.active { background: #15303f; color: #fff; border-color: #24475f; } .msgTabs .msgBadge { margin-left: 4px; }
.msgContent .miniImg { width: 20px; height: 20px; }
.notes { width: 100%; min-height: 320px; background: #0f1b24; border: 1px solid #2a3a4a; color: #ddd; padding: 10px; font: 12px/1.6 Verdana, sans-serif; resize: vertical; }
.notes.small { min-height: 80px; }
.lbl { display: block; color: #fff; margin: 10px 0 4px; }
.numInput.wide { width: 220px; } input[type=text] { background: #0f1b24; border: 1px solid #2a3a4a; color: #fff; padding: 3px 5px; border-radius: 3px; }
.scrollX { overflow-x: auto; }
.empireTable th { vertical-align: bottom; text-align: center; } .empireTable td:not(:first-child) { text-align: center; white-space: nowrap; }
.ttNode { display: flex; gap: 8px; align-items: center; } .ttNode .miniImg { flex: none; width: 28px; height: 28px; }
.debris { display: inline-flex; align-items: center; gap: 2px; color: #bbb; font-size: 11px; }
.hint { color: #6f9fc8; margin: 6px 0; font-size: 11px; }
.espMeta { margin-bottom: 8px; }
.fleetTable .miniImg { width: 18px; height: 18px; margin-right: 2px; }

.planetBig { display: block; } .planetPic { display: inline-block; } span.planetPic { flex: none; }
.miniImg { background-color: #0b1016; }

/* GİRİŞ EKRANI */
.hidden { display: none !important; }
#loginScreen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.loginPanel { width: 380px; max-width: 95vw; background: rgba(14,21,28,.96); border: 1px solid #3b4d5e; border-radius: 8px; padding: 28px; text-align: center; box-shadow: 0 10px 50px #000; }
.loginPanel h1 { color: #fff; font-size: 26px; letter-spacing: 4px; margin: 8px 0 2px; text-transform: uppercase; }
.loginPanel p { margin: 4px 0 14px; } .small { font-size: 10px; }
.gBtn { display: flex; justify-content: center; min-height: 44px; margin: 10px 0 4px; }
.orLine { display: flex; align-items: center; gap: 10px; color: #555; margin: 14px 0; font-size: 11px; } .orLine::before, .orLine::after { content: ""; flex: 1; height: 1px; background: #2a3a4a; }
.guestRow { display: flex; gap: 6px; } .guestRow input { flex: 1; }
.accList { text-align: left; margin-bottom: 12px; background: #111a22; border: 1px solid #1f2d3a; border-radius: 4px; padding: 8px; }
.accItem { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 3px; color: #ccc; } .accItem:hover { background: #15303f; }
#profileChip { display: flex; align-items: center; gap: 4px; margin-left: 20px; }

.adminBadge { background: #ffd54a; color: #000; font-size: 9px; font-weight: bold; padding: 1px 5px; border-radius: 3px; margin-left: 4px; letter-spacing: 1px; }

/* ================= MOBİL ================= */
.menuToggle { display: none; }
#menuBackdrop { display: none; }
@media (max-width: 900px) {
  html, body { font-size: 13px; -webkit-text-size-adjust: 100%; }
  #pageContent { display: block; padding: 0 6px; max-width: 100%; }
  #bar ul { gap: 10px; padding: 0 4px; font-size: 10px; overflow: hidden; white-space: nowrap; }
  #bar li#serverName, #officerBar { display: none; }
  #resources { flex-wrap: wrap; gap: 4px; padding: 6px 0; justify-content: space-between; }
  .resource { width: calc(33.33% - 3px); height: 48px; padding: 5px 4px 5px 40px; }
  .resource .resIcon { width: 30px; height: 30px; left: 5px; top: 9px; }
  .resource .resName { font-size: 8px; } .resource .value { font-size: 13px; margin-top: 2px; }
  .resource .tooltip { left: auto; right: 0; }
  #res_dm { width: calc(50% - 2px); } #res_energy { width: calc(50% - 2px); }
  .menuToggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; font-size: 22px; color: #fff; background: #24475f; border-radius: 4px; margin-right: 8px; flex: none; }
  #leftMenu { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 300; background: #0b1016; overflow-y: auto; transform: translateX(-100%); transition: transform .2s; padding: 10px; box-shadow: 4px 0 20px #000; }
  body.menuOpen #leftMenu { transform: none; }
  #menuBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 290; }
  body.menuOpen #menuBackdrop { display: block; }
  .menubutton { height: 42px; font-size: 14px; }
  #rightMenu { padding-top: 6px; }
  #rightMenu .menuHead { display: none; }
  #planetList { display: flex; overflow-x: auto; gap: 6px; border: none; background: transparent; padding-bottom: 4px; }
  .planetItem { flex: none; min-width: 150px; border: 1px solid #1f2d3a; border-radius: 4px; background: #0b1016; }
  .planetItem.isMoon { padding-left: 8px; }
  #contentWrapper { padding-top: 6px; }
  .planetbarInner { gap: 8px; } #planetbar h2 { font-size: 14px; }
  .box { padding: 8px; overflow-x: auto; }
  .overviewGrid, .fleetForm, .msgLayout, .grid2, .grid3 { grid-template-columns: 1fr; }
  .planetBig { width: 130px; height: 130px; }
  .techGrid { gap: 6px; }
  .technology { width: calc(33.33% - 4px); } .techImage { width: 100%; height: auto; aspect-ratio: 1/1; }
  .techImage.big { width: 90px; height: 90px; }
  .techName { font-size: 10px; height: 26px; }
  #overlay { padding-top: 0; align-items: stretch; }
  #detailPanel { width: 100%; max-width: 100%; min-height: 100vh; border-radius: 0; padding: 12px; }
  .detailHead { flex-direction: column; } .closeBtn { font-size: 22px; padding: 6px; }
  .infoTable { font-size: 10px; } .infoTable th, .infoTable td { padding: 3px; }
  .actionRow { flex-wrap: wrap; justify-content: center; }
  .btn { padding: 10px 16px; font-size: 13px; } .btn.small { padding: 5px 10px; font-size: 11px; }
  input[type=number], select, .numInput, input[type=text] { font-size: 16px; padding: 6px; }
  .coordsIn input { width: 64px; } .cargoIn input { width: 140px; }
  .shipPick { gap: 6px; } .shipCard { width: calc(33.33% - 4px); } .techImage.sm { width: 100%; height: auto; aspect-ratio: 1/1; }
  .shipCard .numInput { width: 100%; }
  .galaxyTable th:nth-child(4), .galaxyTable td:nth-child(4), .galaxyTable th:nth-child(7), .galaxyTable td:nth-child(7) { display: none; }
  .galaxyTable td.actions a { font-size: 20px; margin-right: 10px; display: inline-block; padding: 2px; }
  .galaxyNav { gap: 4px; } .galaxyNav input { width: 54px; } .galaxyNav .dim { display: none; }
  .prodSettings { font-size: 11px; } .prodSettings td, .prodSettings th { padding: 4px; }
  .msgList { max-height: 40vh; overflow-y: auto; }
  .msgTabs a { padding: 8px 10px; }
  .fleetTable, .empireTable, .cr, .espTable, .tbl { font-size: 11px; }
  .officerGrid, .dmShop, .ttGrid { grid-template-columns: 1fr; }
  .eventTable td.timer { width: 80px; }
  .queueRow { flex-wrap: wrap; } .queueRow .timer { margin-left: 0; width: 100%; }
  #footer { margin-top: 10px; }
  .loginPanel { padding: 20px; }
  #toastArea { left: 10px; right: 10px; bottom: 10px; } .toast { max-width: 100%; }
}
@media (max-width: 480px) {
  .resource { width: calc(50% - 2px); } #res_dm { width: 100%; }
  .technology, .shipCard { width: calc(50% - 3px); }
  #bar li#playerName { display: none; }
}