/* Fetih · tarihî arayüz teması (şartname §10): koyu ahşap üst şerit, deri alt panel, parşömen bilgi alanı,
   bronz çerçeveler, elmas mini harita. Apple tarzı cam kartlar / neon yok. index.html'deki temel stilin üstüne yazar. */
@import url('font/font.css');
:root {
  --bronz: #b08a48; --bronz-acik: #e2c27e; --bronz-koyu: #5a4022; --murekkep: #2b1d10; --parsomen: #e6d3a8;
  --yazi: #f3e6c4; --soluk: #c9b38a; --kirmizi: #e0563f; --yesil: #8fc25a; --vurgu: #e2c27e;
  --cam: rgba(30, 20, 12, 0.92); --cizgi: rgba(226, 194, 126, 0.25);
}
html, body { background: #120d08; font-family: 'Alegreya Sans', 'Trebuchet MS', sans-serif; font-weight: 500; }
h1, h2, h3, .serif, #cag { font-family: 'Alegreya SC', Georgia, serif; font-weight: 700; letter-spacing: 0.02em; }

/* --- bronz çerçeve ortak --- */
.bronz { border: 2px solid var(--bronz); box-shadow: inset 0 0 0 1px var(--bronz-koyu), inset 0 1px 0 1px rgba(255, 240, 200, 0.18), 0 2px 6px rgba(0, 0, 0, 0.6); }

/* --- üst şerit --- */
#ust { background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45)), url('varlik/ui/ahsap.jpg') center / 256px;
  border-bottom: 3px solid var(--bronz); box-shadow: 0 1px 0 var(--bronz-koyu), 0 4px 12px rgba(0,0,0,0.6); backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: calc(4px + var(--ust-pay)); padding-bottom: 4px; }
.kaynak { background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55)); border: 1px solid rgba(176,138,72,0.55); border-radius: 4px; padding: 2px 9px 2px 3px; gap: 6px; }
.kaynak img { width: 28px; height: 28px; border-radius: 3px; flex: none; }
.kaynak b { color: var(--yazi); font-size: 16px; font-weight: 700; text-shadow: 0 1px 2px #000; }
#zaman { align-items: center; }
#cag { font-size: 15px; color: var(--bronz-acik); text-shadow: 0 1px 2px #000; }
#saat { color: var(--soluk); }
.ust-dugme { background: linear-gradient(180deg, #4a3520, #2a1c10); border: 1.5px solid var(--bronz); border-radius: 4px; color: var(--bronz-acik); box-shadow: inset 0 1px 0 rgba(255,230,180,0.2); }
.ust-dugme:active { background: #5a4228; }

/* --- bildirimler: parşömen şerit --- */
.tost { background: linear-gradient(180deg, #ecdcb4, #d9c191); color: var(--murekkep); border: 2px solid var(--bronz); border-radius: 3px; box-shadow: 0 3px 10px rgba(0,0,0,0.55); backdrop-filter: none; -webkit-backdrop-filter: none; font-weight: 700; }
.tost.hata { border-color: #9b2f22; color: #5a120a; background: linear-gradient(180deg, #f0d6c4, #ddb79c); }
.tost.iyi { border-color: #5d7f33; color: #233a0d; }

/* --- hızlı düğmeler: bronz madalyon --- */
#hizli button { border-radius: 50%; width: 54px; height: 54px; border: 2px solid var(--bronz); background: radial-gradient(circle at 50% 35%, #4b3621, #1e140b 75%);
  box-shadow: inset 0 0 0 1px var(--bronz-koyu), 0 3px 8px rgba(0,0,0,0.6); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--soluk); font-size: 9px; gap: 0; }
#hizli button img { width: 30px; height: 30px; border-radius: 50%; }
#hizli button.etkin { border-color: #f0d28c; box-shadow: 0 0 0 2px rgba(240,210,140,0.5), 0 3px 8px rgba(0,0,0,0.6); color: var(--bronz-acik); }
#bosSayi { background: #9b2f22; border: 1px solid var(--bronz-acik); }

/* --- alt panel: deri zemin; solda komut ızgarası, ortada parşömen, sağda elmas harita --- */
#panel { display: grid; grid-template-columns: auto minmax(0, 1fr) 236px; align-items: stretch; gap: 10px; min-height: 196px; padding: 10px 10px calc(10px + var(--alt-pay));
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.5)), url('varlik/ui/deri.jpg') center / 320px;
  border-top: 3px solid var(--bronz); box-shadow: 0 -1px 0 var(--bronz-koyu), 0 -6px 14px rgba(0,0,0,0.55); backdrop-filter: none; -webkit-backdrop-filter: none; }
#eylemler { order: 0; display: grid; grid-template-columns: repeat(4, 66px); grid-auto-rows: 66px; gap: 5px; max-height: 214px; overflow-y: auto; align-content: start;
  padding: 6px; background: rgba(0,0,0,0.35); border: 2px solid var(--bronz-koyu); border-radius: 4px; scrollbar-width: thin; scrollbar-color: var(--bronz) transparent; }
#eylemler.bos { display: grid; } /* boşken de ızgara yeri kalır (AoE gibi) */
#bilgi { order: 1; width: auto; position: relative; padding: 10px 14px; color: var(--murekkep); border-radius: 3px;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,250,235,0.25), rgba(120,80,30,0.25) 100%), url('varlik/ui/parsomen.jpg') center / 300px;
  border: 2px solid var(--bronz); box-shadow: inset 0 0 18px rgba(90,55,20,0.55), 0 2px 6px rgba(0,0,0,0.6); overflow-y: auto; }
#miniKap { order: 2; position: relative; display: flex; align-items: center; justify-content: center; }
#miniKap::before, #miniKap::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
#miniKap::before { width: 234px; height: 124px; background: linear-gradient(135deg, #f0d28c, #8a6630 45%, #e2c27e 55%, #5a4022); }
#miniKap::after { width: 222px; height: 116px; background: #1a120a; }
#mini { position: relative; z-index: 1; inset: auto; top: auto; right: auto; width: 218px; height: 114px; border: 0; border-radius: 0; background: transparent;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* bilgi içeriği */
.baslik h3 { color: #3a240f; font-size: 18px; }
.baslik p, .ipucu, .ozellik { color: #4d3519; font-weight: 500; }
.baslik p.can { color: #2a5a14; font-weight: 700; }
.baslik img, .dugum-ikon, .parsel-ikon { width: 72px; height: 72px; border-radius: 3px; background: rgba(60,35,12,0.18); border: 2px solid var(--bronz); }
.dugum-ikon img { width: 100%; height: 100%; }
.grup-oge, .kuyruk-oge { background: rgba(60,35,12,0.2); border: 1.5px solid var(--bronz); border-radius: 3px; }
.grup-oge b { color: #fff3d6; }
.kuyruk-oge .ilerleme { background: #2a5a14; height: 4px; }

/* komut düğmeleri: bronz çerçeveli kare */
.eylem { position: relative; min-height: 0; width: 66px; height: 66px; padding: 3px; gap: 0; justify-content: flex-end; overflow: hidden; border-radius: 3px;
  border: 2px solid var(--bronz); background: radial-gradient(circle at 50% 35%, #4a3622, #1d130a 80%); color: var(--yazi);
  box-shadow: inset 0 0 0 1px var(--bronz-koyu), inset 0 1px 0 1px rgba(255,235,190,0.15); }
.eylem:hover { border-color: var(--bronz-acik); }
.eylem:active { background: #5a4228; }
.eylem img { position: absolute; inset: 2px 2px 14px; width: calc(100% - 4px); height: calc(100% - 16px); object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6)); }
.eylem .ad { position: relative; z-index: 1; font-size: 10px; line-height: 1.05; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 3px #000; max-width: 100%; }
.eylem .alt { position: relative; z-index: 1; font-size: 9.5px; color: #f6e3b0; gap: 0 3px; text-shadow: 0 1px 2px #000; line-height: 1.05; }
.eylem .alt img, .m img { position: static; width: 11px; height: 11px; vertical-align: -1px; margin-right: 1px; filter: none; border-radius: 2px; display: inline; inset: auto; }
.m.eksik { color: #ff8f7a; }
.eylem.kapali { opacity: 1; filter: grayscale(0.85) brightness(0.6); }
.eylem.tek, .eylem.cag, .eylem.ikincil, .eylem.genis { width: 66px; min-height: 0; justify-content: flex-end; }
.eylem.genis { grid-column: span 2; width: auto; }
.eylem.cag { border-color: #f0d28c; box-shadow: 0 0 0 1px #f0d28c, inset 0 0 12px rgba(240,210,140,0.35); }
.eylem.etkin { border-color: var(--kirmizi); }
.eylem:not(:has(img)) { justify-content: center; }
.eylem:not(:has(img)) .ad { font-size: 11px; }

/* yerleştirme onayı */
#yerKontrol button { border: 2px solid var(--bronz); background: radial-gradient(circle at 50% 35%, #4b3621, #1e140b 75%); color: var(--bronz-acik); backdrop-filter: none; -webkit-backdrop-filter: none; }
#onay { background: radial-gradient(circle at 50% 35%, #6f9a3a, #2f4a14 80%) !important; color: #f3f8d8 !important; }
#onay.gecersiz { background: radial-gradient(circle at 50% 35%, #8a3326, #3a120c 80%) !important; }

/* menüler ve giriş: parşömen kart, ahşap kenar */
.kaplama { background: radial-gradient(ellipse at 50% 30%, rgba(40,24,10,0.6), rgba(8,5,2,0.94)); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kart { background: radial-gradient(ellipse at 50% 40%, rgba(255,250,235,0.2), rgba(110,70,25,0.2)), url('varlik/ui/parsomen.jpg') center / 340px;
  color: var(--murekkep); border: 3px solid var(--bronz); border-radius: 4px; box-shadow: inset 0 0 30px rgba(90,55,20,0.6), 0 10px 40px rgba(0,0,0,0.8); }
.kart h1 { font-family: 'Alegreya SC', Georgia, serif; color: #3a1f0b; letter-spacing: 0.04em; }
.kart .alt-baslik, .kart .etiket, #dogumBilgi, #kurucuBilgi, .millet small, .kultur-baslik { color: #5c4021; }
.kart button { background: linear-gradient(180deg, #5a4127, #33220f); color: var(--yazi); border: 1.5px solid var(--bronz); border-radius: 3px; }
.kart button.ana { background: linear-gradient(180deg, #8a3a22, #5a1e0e); color: #fbe9c4; border: 2px solid var(--bronz-acik); font-family: 'Alegreya SC', Georgia, serif; font-size: 18px; }
.sekmeler button.etkin { background: linear-gradient(180deg, #8a3a22, #5a1e0e); color: #fbe9c4; }
.alan { background: rgba(255,250,235,0.6); color: var(--murekkep); border: 1.5px solid var(--bronz); border-radius: 3px; }
#girisHata { color: #8a1e0e; }
#nasil { color: #3d2a14; } #nasil b { color: #2b1608; }
.millet.secili { border-color: #f0d28c; background: linear-gradient(180deg, #8a6a32, #4f3816); }
#haritaKap { border: 2px solid var(--bronz); border-radius: 3px; }
#adresKutu { display: flex; gap: 6px; margin: 8px 0 6px; } #adresKutu .alan { margin: 0; flex: 1; }
#adresKutu button { width: auto; margin: 0; padding: 0 16px; }
#kureKap { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 52vh; margin: 0 auto; border: 3px solid var(--bronz); border-radius: 50%; overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--bronz-koyu), 0 4px 18px rgba(0,0,0,0.6); background: #080a12; touch-action: none; }
#kure { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#kureDugmeler { position: absolute; right: 12%; bottom: 10%; display: flex; flex-direction: column; gap: 6px; }
#kureDugmeler button { width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; }
#dogumOzet { display: flex; gap: 10px; align-items: center; text-align: left; margin: 8px 0; }
#yerOnizleme { width: 92px; height: 92px; flex: none; border: 2px solid var(--bronz); border-radius: 3px; background: #2a2016; image-rendering: auto; }
#dogumBilgi { margin: 0 0 4px; color: #3a240f !important; font-weight: 700 !important; }

/* ana menü */
#anaMenu { z-index: 26; background: linear-gradient(180deg, rgba(10,6,2,0.15) 0%, rgba(10,6,2,0.35) 55%, rgba(10,6,2,0.85) 100%), url('varlik/ui/menu.webp') center / cover, #1a120a; align-items: flex-end; padding-bottom: calc(40px + var(--alt-pay)); }
.menu-ic { width: min(520px, 100%); text-align: center; }
.oyun-adi { margin: 0; font-family: 'Alegreya SC', Georgia, serif; font-size: clamp(56px, 14vw, 104px); color: #f6e2a6; letter-spacing: 0.06em;
  text-shadow: 0 2px 0 #6a4a1a, 0 6px 18px rgba(0,0,0,0.85), 0 0 40px rgba(240,200,120,0.25); }
.slogan { margin: -4px 0 22px; color: #f3e6c4; font-family: 'Alegreya SC', Georgia, serif; font-size: 18px; text-shadow: 0 2px 6px #000; }
.menu-dugmeler { display: flex; flex-direction: column; gap: 10px; }
.ana-mod, .ikincil-mod { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 16px; border: 2px solid var(--bronz); border-radius: 4px; cursor: pointer;
  background: linear-gradient(180deg, rgba(90,62,30,0.95), rgba(40,26,12,0.95)); color: var(--yazi); box-shadow: inset 0 0 0 1px var(--bronz-koyu), 0 4px 14px rgba(0,0,0,0.7); }
.ana-mod b { font-family: 'Alegreya SC', Georgia, serif; font-size: 26px; color: #f6e2a6; } .ana-mod small { color: var(--soluk); font-size: 13px; }
.ana-mod:hover { border-color: #f0d28c; } .ikincil-mod { padding: 10px; font-size: 15px; background: rgba(30,20,10,0.85); }
.menu-nasil { display: none; margin-top: 12px; text-align: left; padding: 14px 16px; border: 2px solid var(--bronz); border-radius: 4px; color: var(--murekkep);
  background: radial-gradient(ellipse at 50% 40%, rgba(255,250,235,0.2), rgba(110,70,25,0.2)), url('varlik/ui/parsomen.jpg') center / 320px; font-size: 14px; max-height: 40vh; overflow-y: auto; }
.menu-nasil.acik { display: block; } .menu-nasil p { margin: 0 0 8px; }
/* akın kurulum */
#akinKur { z-index: 27; align-items: flex-start; overflow-y: auto; }
.akin-kart { width: min(620px, 100%); margin: auto 0; }
.harita-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin: 10px 0; }
.kart button.harita-kart { margin: 0; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; font-size: 14px; }
.harita-kart canvas { width: 96px; height: 96px; border: 1.5px solid var(--bronz-koyu); border-radius: 3px; transform: rotate(45deg) scale(0.72); margin: -6px 0; image-rendering: auto; }
.harita-kart small { color: var(--soluk); font-size: 11.5px; line-height: 1.2; }
.kart button.harita-kart.secili, .secenekler button.secili { border-color: #f0d28c; background: linear-gradient(180deg, #8a6a32, #4f3816); box-shadow: 0 0 0 1px #f0d28c; }
.secenekler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .kart .secenekler button { margin: 0; padding: 10px; }
#akinMillet { font-size: 15px; }
body.akin #hizli [data-a=toprak] { display: none; }

/* telefon: üstte bilgi + elmas harita, altta yatay komut şeridi */
@media (max-width: 760px) {
  #anaMenu { background-position: center, 24% center, center; padding-left: 16px; padding-right: 16px; }
  .kaynak { padding: 1px 5px 1px 1px; gap: 3px; } .kaynak img { width: 22px; height: 22px; } .kaynak b { font-size: 13px; }
  #mini { top: auto; }
  #panel { grid-template-columns: minmax(0, 1fr) 128px; grid-template-rows: auto auto; gap: 6px; min-height: 0; padding: 6px 6px calc(6px + var(--alt-pay)); }
  #bilgi { grid-column: 1; grid-row: 1; padding: 6px 8px; max-height: 120px; }
  #miniKap { grid-column: 2; grid-row: 1; }
  #miniKap::before { width: 126px; height: 68px; } #miniKap::after { width: 118px; height: 63px; }
  #mini { width: 116px; height: 62px; }
  #eylemler { grid-column: 1 / -1; grid-row: 2; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 60px; grid-auto-rows: 60px; overflow-x: auto; overflow-y: hidden; max-height: none; padding: 4px; }
  #eylemler.bos { display: none; }
  .eylem, .eylem.tek, .eylem.cag, .eylem.ikincil { width: 60px; height: 60px; }
  .eylem.genis { grid-column: auto; width: 124px; }
  .baslik img, .dugum-ikon, .parsel-ikon { width: 52px; height: 52px; }
  .baslik h3 { font-size: 15px; }
  #hizli button { width: 46px; height: 46px; } #hizli button img { width: 24px; height: 24px; }
}