* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', sans-serif;
background: #3a2c1a;
color: #e8d5a3;
min-height: 100vh;
}
/* ===== AUTH ===== */
#auth-screen {
display: flex; justify-content: center; align-items: center;
min-height: 100vh;
background: radial-gradient(circle at center, #2d1f0a 0%, #0f0a02 100%);
}
.auth-box {
background: #2a1e0e; border: 2px solid #8b6914; border-radius: 12px;
padding: 40px; width: 360px;
box-shadow: 0 0 40px rgba(139,105,20,0.3);
}
.auth-box h1 { text-align: center; font-size: 1.8rem; color: #f0c040; margin-bottom: 6px; text-shadow: 0 0 10px rgba(240,192,64,0.5); }
.subtitle { text-align: center; color: #a08040; margin-bottom: 20px; font-size: 0.85rem; }
.tab-buttons { display: flex; gap: 8px; margin-bottom: 20px; }
.tab-btn { flex: 1; padding: 9px; border: 1px solid #8b6914; background: #1a1207; color: #c0a060; border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; }
.tab-btn.active { background: #8b6914; color: #fff; }
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-form input { width: 100%; padding: 10px 12px; margin-bottom: 12px; background: #1a1207; border: 1px solid #5a4010; border-radius: 6px; color: #e8d5a3; font-size: 0.95rem; }
.auth-form input:focus { outline: none; border-color: #f0c040; }
.btn-primary { width: 100%; padding: 12px; background: linear-gradient(135deg, #8b6914, #c0900a); border: none; border-radius: 6px; color: #fff; font-size: 1rem; font-weight: bold; cursor: pointer; transition: opacity 0.2s; }
.btn-primary:hover { opacity: 0.85; }
.msg { margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; text-align: center; display: none; }
.msg.error { background: #4a1010; color: #f08080; display: block; }
.msg.success { background: #104010; color: #80f080; display: block; }
/* ===== HEADER ===== */
#game-screen { display: none; }
header {
background: #1e1508; border-bottom: 2px solid #8b6914;
padding: 0 20px; display: flex; align-items: center; gap: 16px; height: 54px;
}
.logo { font-size: 1.1rem; color: #f0c040; font-weight: bold; white-space: nowrap; }
.main-nav { display: flex; gap: 4px; flex: 1; }
.nav-tab {
padding: 8px 14px; background: transparent; border: none;
color: #a08040; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
transition: all 0.2s; border-bottom: 2px solid transparent;
}
.nav-tab:hover { color: #f0c040; background: #2a1e0e; }
.nav-tab.active { color: #f0c040; border-bottom-color: #f0c040; background: #2a1e0e; }
.header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.player-name { color: #c0a060; font-size: 0.85rem; }
.server-clock {
font-variant-numeric: tabular-nums; font-family: "Consolas", "Menlo", monospace;
font-size: 0.85rem; color: #d8c48a; background: #24211a; border: 1px solid #4a3f22;
padding: 4px 10px; border-radius: 6px; white-space: nowrap; letter-spacing: 0.5px;
}
.btn-logout { background: #3a1010; border: 1px solid #6b2020; color: #f08080; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; }
/* ===== KAYNAK ÇUBUĞU ===== */
.resource-bar {
background: #160e04; border-bottom: 1px solid #3a2a08;
padding: 8px 20px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
}
.res-item { display: flex; align-items: center; gap: 8px; }
.res-icon { font-size: 1.1rem; }
/* 🖼️ [DEPO-IKON-1] Depo göstergesi ikonu — Tahsin'in çizimi (images/ui/depo-mini.png,
64px kaynaktan). 📦 emojisinin geçtiği DÖRT depo göstergesinde ortak: kaynak
çubuğu · Klasik köy kutusu başlığı · depo detay penceresi · Genel Bakış sütunu.
`vertical-align: -4px`: satır içinde metinle yan yana duruyor; taban çizgisine
oturtulursa yazıdan yukarı kaçık görünüyor. Ticaret/paket anlamındaki 📦'ler
(rapor filtresi, emanet, kervan) BİLEREK değiştirilmedi — onlar depo değil. */
.depo-ik {
width: 17px;
height: 17px;
object-fit: contain;
display: inline-block;
vertical-align: -4px;
}
.res-label { display: block; font-size: 0.65rem; color: #806030; text-transform: uppercase; }
.res-value { display: block; font-size: 0.95rem; color: #f0e0a0; font-weight: bold; }
.res-rate { display: block; font-size: 0.65rem; color: #606040; }
.troops-bar { margin-left: auto; display: flex; gap: 16px; color: #c0a060; font-size: 0.85rem; }
.troops-bar span { white-space: nowrap; }
/* ===== GENEL ===== */
.tab-content { min-height: calc(100vh - 110px); }
.game-content { max-width: 1100px; margin: 0 auto; padding: 24px; }
.section-title { font-size: 1.1rem; color: #f0c040; margin: 24px 0 14px; border-bottom: 1px solid #3a2a08; padding-bottom: 8px; }
.loading { text-align: center; padding: 60px; color: #806030; }
.empty-msg { color: #604020; font-size: 0.9rem; padding: 16px 0; }
/* ===== KÖY ===== */
.section-header { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 4px; }
.village-title { font-size: 1.3rem; color: #f0c040; }
.village-coord { color: #806030; font-size: 0.85rem; margin-top: 2px; }
/* Bina kartları */
.buildings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.building-card {
background: #2a1e0e; border: 1px solid #4a3010; border-radius: 10px;
padding: 18px; transition: border-color 0.2s;
}
.building-card:hover { border-color: #8b6914; }
.b-icon { font-size: 1.8rem; margin-bottom: 8px; }
.b-name { font-size: 0.95rem; color: #f0d080; font-weight: bold; }
.b-level { color: #a08040; font-size: 0.8rem; margin-bottom: 6px; }
.b-rate { color: #70a050; font-size: 0.75rem; margin-bottom: 10px; }
.b-costs { font-size: 0.72rem; color: #806040; margin-bottom: 10px; line-height: 1.7; }
.b-costs .ci { display: flex; justify-content: space-between; }
.btn-upgrade {
width: 100%; padding: 7px; background: #3a2808; border: 1px solid #6a4810;
border-radius: 6px; color: #d0b060; font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}
.btn-upgrade:hover:not(:disabled) { background: #6a4810; color: #fff; }
.btn-upgrade:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-upgrade.ok { border-color: #50a030; color: #80d060; }
.btn-upgrade.ok:hover:not(:disabled) { background: #204010; }
/* Asker kartları */
.troops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.troop-card {
background: #1e1a0e; border: 1px solid #4a3810; border-radius: 10px; padding: 18px;
}
.t-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.t-icon { font-size: 1.6rem; }
.t-name { font-size: 0.95rem; color: #f0d080; font-weight: bold; }
.t-count { font-size: 0.8rem; color: #a08040; }
.t-stats { font-size: 0.75rem; color: #807050; margin-bottom: 10px; line-height: 1.7; }
.t-stats .si { display: flex; justify-content: space-between; }
.t-locked { font-size: 0.8rem; color: #604030; padding: 8px 0; }
.train-row { display: flex; gap: 8px; align-items: center; }
.train-input {
width: 70px; padding: 6px 8px; background: #1a1207;
border: 1px solid #4a3010; border-radius: 6px; color: #e8d5a3;
font-size: 0.9rem; text-align: center;
}
.btn-train {
flex: 1; padding: 7px; background: #3a2020; border: 1px solid #8a3020;
border-radius: 6px; color: #e08060; font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}
.btn-train:hover { background: #6a2010; color: #fff; }
.btn-train-max {
padding: 7px 10px; background: #2a2410; border: 1px solid #7a6320;
border-radius: 6px; color: #e8d5a3; font-size: 0.78rem; cursor: pointer;
transition: all 0.2s; white-space: nowrap;
}
.btn-train-max:hover { background: #4a3d16; color: #fff; }
.btn-train-max:disabled { opacity: 0.5; cursor: default; }
/* ===== HARİTA ===== */
.map-legend { font-size: 0.82rem; color: #806030; margin-bottom: 12px; }
.map-wrapper { overflow: auto; max-width: 100%; margin-bottom: 20px; }
#world-map { display: block; border: 2px solid #4a3010; border-radius: 8px; cursor: crosshair; background: #0a1205; touch-action: none; -webkit-user-select: none; user-select: none; }
.village-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.vl-card {
background: #2a1e0e; border: 1px solid #4a3010; border-radius: 8px;
padding: 14px; display: flex; justify-content: space-between; align-items: center;
}
.vl-card.own { border-color: #8b6914; }
.vl-info .vl-name { font-size: 0.9rem; color: #f0d080; }
.vl-info .vl-owner { font-size: 0.75rem; color: #806030; margin-top: 2px; }
.vl-coord { font-size: 0.75rem; color: #605040; }
.btn-attack {
padding: 6px 14px; background: #4a1010; border: 1px solid #8a2020;
border-radius: 6px; color: #f08060; font-size: 0.8rem; cursor: pointer;
}
.btn-attack:hover { background: #6a1010; }
/* ===== SALDIRILAR ===== */
.attacks-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 700px) { .attacks-columns { grid-template-columns: 1fr; } }
.attack-card {
background: #1e1508; border: 1px solid #3a2808; border-radius: 8px;
padding: 14px; margin-bottom: 10px; font-size: 0.85rem;
}
.attack-card.won { border-color: #204010; }
.attack-card.lost { border-color: #401010; }
.attack-card.support { border-color: #6b7075; }
.attack-card.pending { border-color: #404010; }
.atk-title { font-size: 0.9rem; color: #e0c080; margin-bottom: 6px; }
.atk-detail { color: #806040; line-height: 1.8; }
.atk-loot { color: #70a040; }
.atk-countdown { color: #7b2108; font-weight: bold; } /* [SIYAH-YAZI-1] parşömen kartta hardal okunmuyordu */
/* ===== LİDERBOARD ===== */
.leaderboard-table { width: 100%; border-collapse: collapse; }
.leaderboard-table th { background: #2a1e0e; padding: 10px 14px; text-align: left; color: #c0a060; font-size: 0.85rem; border-bottom: 2px solid #4a3010; }
.leaderboard-table td { padding: 10px 14px; border-bottom: 1px solid #2a1e0e; font-size: 0.9rem; }
.leaderboard-table tr:hover td { background: #1e1508; }
.rank-1 td { color: #8a5a00; font-weight: bold; }
.rank-2 td { color: #4a4a4a; font-weight: bold; }
.rank-3 td { color: #7a3f10; font-weight: bold; }
/* ===== MODAL ===== */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.75);
display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-box {
background: #2a1e0e; border: 2px solid #8b6914; border-radius: 12px;
padding: 32px; width: 420px; max-width: 95vw;
}
.modal-box h2 { color: #f0c040; margin-bottom: 16px; }
.modal-target { background: #1a1207; border-radius: 8px; padding: 12px; margin-bottom: 16px; font-size: 0.9rem; color: #c0a060; }
.troop-inputs .ti-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.troop-inputs .ti-label { flex: 1; font-size: 0.9rem; }
.troop-inputs .ti-have { font-size: 0.78rem; color: #806030; }
.troop-inputs input[type=number] { width: 90px; padding: 7px 10px; background: #1a1207; border: 1px solid #5a4010; border-radius: 6px; color: #e8d5a3; font-size: 0.9rem; text-align: center; }
.modal-buttons { display: flex; gap: 10px; margin-top: 16px; }
.btn-danger { flex: 1; padding: 11px; background: linear-gradient(135deg, #8a1010, #c02020); border: none; border-radius: 6px; color: #fff; font-size: 0.95rem; font-weight: bold; cursor: pointer; }
.btn-danger:hover { opacity: 0.85; }
.btn-secondary { padding: 11px 20px; background: #3a2808; border: 1px solid #6a4810; border-radius: 6px; color: #c0a060; cursor: pointer; }
/* ===== TOAST ===== */
#toast {
position: fixed; bottom: 20px; right: 20px;
background: #1e3a1e; border: 1px solid #40a040; color: #80f080;
padding: 10px 18px; border-radius: 8px; font-size: 0.88rem;
opacity: 0; transition: opacity 0.3s; pointer-events: none;
z-index: 10000; /* [FAZ1-5] sohbet paneli 4000'di, bildirimler altında kalıyordu */
}
#toast.show { opacity: 1; }
#toast.err { background: #3a1e1e; border-color: #a04040; color: #f08080; }
/* İnşaat kuyruğu */
.queue-count { color: #a08040; font-size: 0.85rem; font-weight: normal; }
.construction-queue {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 8px;
max-height: 220px;
overflow-y: auto;
padding-right: 4px;
}
.construction-queue::-webkit-scrollbar { width: 8px; }
.construction-queue::-webkit-scrollbar-track { background: #1a1208; border-radius: 4px; }
.construction-queue::-webkit-scrollbar-thumb { background: #4a3010; border-radius: 4px; }
.construction-queue::-webkit-scrollbar-thumb:hover { background: #6a4520; }
.queue-item {
background: #211708;
border: 1px solid #4a3010;
border-radius: 8px;
padding: 10px 12px;
color: #d0b060;
font-size: 0.85rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.queue-item-info { flex: 1; }
/* 🖼️ [KUYRUK-IKON-1] Sıradaki binanın çizimi — kutu YOK, serbest çizim
([ANABINA-TEMA-1] karariyla aynı dil). Üç kuyruk kartında da ortak. */
.queue-ik { flex: 0 0 auto; margin-right: 9px; display: grid; place-items: center; }
.queue-time { color: #80d060; white-space: nowrap; margin-top: 4px; }
.queued-level { color: #2f7a24; } /* [SIYAH-YAZI-1] */
.queue-cancel-btn {
background: #5a1010;
border: 1px solid #8a2020;
color: #ff9090;
border-radius: 6px;
width: 28px;
height: 28px;
font-size: 0.9rem;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.queue-cancel-btn:hover { background: #8a2020; color: #fff; }
/* ===== TEST PANELİ ===== */
.test-panel {
margin: 12px 0 18px 0;
padding: 12px;
background: #241608;
border: 1px dashed #b08020;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.test-title {
color: #f0c040;
font-weight: bold;
font-size: 0.95rem;
}
.test-title span {
color: #a08040;
font-size: 0.78rem;
font-weight: normal;
margin-left: 6px;
}
.test-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.btn-test {
padding: 8px 12px;
background: linear-gradient(135deg, #3a2a08, #6a4810);
border: 1px solid #b08020;
border-radius: 8px;
color: #f0d080;
font-weight: bold;
cursor: pointer;
font-size: 0.82rem;
}
.btn-test:hover { filter: brightness(1.15); }
.report-box { margin-top: 8px; padding: 8px; border-radius: 8px; background: rgba(255, 230, 170, 0.08); border: 1px solid rgba(240, 190, 80, 0.25); }
.report-section { margin-top: 7px; line-height: 1.45; }
.attack-card.spy { border-color: #4fa3ff; }
.spy-report { color: #2a190c; } /* [SIYAH-YAZI-1] koyu dönem renkleri parşömen kartta görünmüyordu */
.battle-report { color: #2a190c; }
.treasure-report { background: rgba(212,160,23,.14); border: 1px solid rgba(212,160,23,.5); box-shadow: 0 0 10px rgba(212,160,23,.2) inset; }
.treasure-reward-box { background: rgba(212,160,23,.12); border-radius: 6px; padding: 6px 8px; border: 1px solid rgba(212,160,23,.3); }
.premium-status {
display: inline-flex;
align-items: center;
padding: 8px 10px;
border-radius: 8px;
background: rgba(255,255,255,0.08);
font-weight: 700;
}
/* ===== Demirci ===== */
.modal-head-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.smithy-modal-box { width:min(1100px, 96vw); max-height:90vh; overflow:auto; }
.smithy-help { color:#2a190c; margin:4px 0 12px; } /* [SIYAH-YAZI-1] */
.smithy-top { margin:8px 0 14px; padding:8px 10px; border:1px solid rgba(220,170,80,.35); border-radius:8px; background:rgba(255,220,130,.06); }
.smithy-columns { display:flex; flex-direction:column; gap:16px; }
.smithy-col { padding:12px; background:#f7e3b8; border:1px solid #b9965e; }
.smithy-col h3 { margin:0 0 10px; font-size:1rem; color:#3f220d; }
.smithy-row-head, .smithy-row {
display:grid;
grid-template-columns: 56px minmax(140px,1.6fr) 1fr 140px 120px;
align-items:center;
}
.smithy-row-head {
background:#e9d19e; color:#2b1707; font-weight:800; font-size:.78rem;
border:1px solid #c7a56a; border-bottom:0;
}
.smithy-row-head span { min-height:32px; display:flex; align-items:center; padding:5px 7px; border-right:1px solid #c7a56a; }
.smithy-row-list { border:1px solid #c7a56a; border-top:0; background:#fff1cc; }
.smithy-row { min-height:46px; border-bottom:1px solid #d7bd82; }
.smithy-row:last-child { border-bottom:0; }
.smithy-row:nth-child(even) { background:#f7e3b6; }
.smithy-icon-cell { display:flex; align-items:center; justify-content:center; font-size:1.5rem; min-height:46px; border-right:1px solid #d7bd82; }
.smithy-name-cell { padding:4px 8px; border-right:1px solid #d7bd82; color:#7a2506; font-weight:700; font-size:.86rem; }
.smithy-req-cell { padding:4px 8px; border-right:1px solid #d7bd82; display:flex; flex-wrap:wrap; gap:4px; align-items:center; color:#6e512d; font-size:.78rem; }
.smithy-cost-cell { padding:4px 8px; border-right:1px solid #d7bd82; text-align:center; color:#1d1308; font-weight:700; font-size:.76rem; }
.smithy-action-cell { padding:4px 6px; display:flex; justify-content:center; }
.smithy-row.done .smithy-name-cell { color:#2f7d1e; }
.smithy-row.locked { opacity:.7; }
.smithy-row.queued .smithy-name-cell { color:#8a5c12; }
.smithy-lock-x { color:#b0231a; font-weight:900; }
.smithy-req-chip {
display:inline-flex; align-items:center; min-height:22px; padding:2px 7px;
border:1px solid #d3b77c; border-radius:4px; background:#fff4d6; color:#8b2b07;
font-weight:800; font-size:.74rem; white-space:nowrap;
}
@media (max-width: 700px) {
.smithy-row-head { display:none; }
.smithy-row { grid-template-columns: 44px 1fr; grid-template-areas: "icon name" "icon req" "icon cost" "icon action"; }
.smithy-icon-cell { grid-area:icon; }
.smithy-name-cell { grid-area:name; border-bottom:0; }
.smithy-req-cell { grid-area:req; border-right:0; }
.smithy-cost-cell { grid-area:cost; border-right:0; text-align:left; justify-content:flex-start; }
.smithy-action-cell { grid-area:action; justify-content:flex-start; padding-bottom:8px; }
}
.smithy-item { border:1px solid rgba(200,150,70,.35); border-radius:10px; padding:9px; margin-bottom:8px; background:rgba(255,240,180,.04); }
.smithy-item.ready { border-color:#8bc36a; }
.smithy-item.done { border-color:#d0b060; background:rgba(120,90,20,.25); }
.smithy-item.locked { opacity:.7; }
.smithy-unit { display:flex; align-items:center; gap:8px; font-size:15px; }
.smithy-unit span { font-size:22px; }
.smithy-status { margin-top:6px; font-weight:bold; }
.smithy-req, .smithy-cost { margin-top:4px; font-size:12px; color:#d5bd8a; }
.btn-smithy { width:100%; margin-top:8px; padding:7px 8px; border-radius:8px; border:1px solid #7d5a1f; background:#2b2012; color:#d7bc78; cursor:pointer; }
.btn-smithy.ok { border-color:#5fa447; color:#9ee085; }
.btn-smithy:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width: 850px) { .smithy-columns { grid-template-columns:1fr; } }
/* Barbar köy kartları */
.vl-card.barbar {
border-color: rgba(120,120,120,.45);
background: linear-gradient(135deg, rgba(75,75,75,.18), rgba(30,30,30,.12));
}
.vl-card.barbar .vl-name { color: #d0d0d0; }
.vl-card.barbar .vl-owner { color: #a8a8a8; }
/* Ust segment pratik menusu */
.quick-menu {
display: flex;
gap: 0;
overflow-x: auto;
background: linear-gradient(180deg, #2b261a, #171108);
border-bottom: 2px solid #c7a56a;
padding: 7px 10px 6px;
}
.quick-menu button {
flex: 0 0 86px;
min-height: 60px;
border: 0;
border-right: 1px solid rgba(255, 232, 180, .14);
background: transparent;
color: #f8e3b0;
cursor: pointer;
display: grid;
place-items: center;
gap: 3px;
font-size: .74rem;
}
.quick-menu button:hover {
background: rgba(255, 232, 180, .12);
}
.quick-menu span {
font-size: 1.35rem;
line-height: 1;
}
.quick-menu b {
font-weight: 700;
line-height: 1.05;
}
#village-panel > h2.section-title,
#village-panel > .construction-queue,
#village-panel > .buildings-grid,
#village-panel > .troops-grid {
display: none !important;
}
.village-troop-overview {
width: min(1020px, 100%);
margin: 0 auto 8px;
background: #f7e3b8;
border: 1px solid #b9965e;
color: #24180e;
}
/* 🎨 [YESIL-KALDIR-1] Başlık satırı FLEX: solda "Köydeki Askerler", sağda
Grafik/Klasik anahtarı (Tahsin: "tam karşısına gelebilir"). */
.troop-overview-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 5px 9px;
font-weight: 800;
font-family: inherit;
font-size: inherit;
color: inherit;
text-align: left;
background: none;
border: none;
border-radius: 4px;
cursor: pointer;
}
.troop-overview-title:hover { background: rgba(0,0,0,.06); }
.village-buffs-panel {
padding: 10px 12px;
background: #f4e4bc;
border: 1px solid #d9bb7c;
border-radius: 8px;
margin-bottom: 12px;
}
.village-buffs-panel h3 { margin: 0 0 8px; font-size: .95rem; color: #3d1a05; }
/* KRİTİK-3b: paket iniş sayacı — köy ekranında HER ZAMAN görünür şerit (buff toggle'ı arkasında değil) */
.village-package-strip {
width: min(1020px, 100%);
margin: 0 auto 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.pkg-waiting-card { border-color: #b5651d !important; box-shadow: 0 0 10px rgba(181, 101, 29, .3) !important; }
.pkg-countdown { color: #f4d889; }
/* Mobil/dar ekranda tablo EZİLMEZ — yatay KAYDIRILIR (Tahsin 2026-07-10: sayılar üst üste biniyordu) */
.troop-overview-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.village-troop-overview table {
width: 100%;
min-width: 620px; /* 12 kolon rahat sığar; dar ekranda kaydırma devreye girer */
border-collapse: collapse;
table-layout: fixed;
}
.village-troop-overview th,
.village-troop-overview td {
border: 1px solid #c7a56a;
padding: 5px;
text-align: center;
font-size: .82rem;
white-space: nowrap; /* sayılar asla sarmasın/binmesin */
}
.village-troop-overview th:first-child,
.village-troop-overview td:first-child {
text-align: left;
font-weight: 700;
width: 118px;
font-size: .74rem;
line-height: 1.15;
}
.main-queue-section,
.construction-manager {
margin-top: 12px;
padding: 12px;
background: #f7e3b8;
border: 1px solid #b9965e;
}
.main-queue-section h3,
.construction-manager h3 {
margin: 0 0 10px;
font-size: 1rem;
}
/* İnşa hız bakiyesi + paket rozeti (Ana Bina + genel bakış kuyruğu — rasathane deseni) */
.mq-speed-line { font-size: .78rem; font-weight: 500; color: #6a4a1f; margin-left: 10px; }
.queue-speed-line { font-size: .8rem; color: #6a4a1f; padding: 4px 8px 6px; border-bottom: 1px dashed #d9c295; margin-bottom: 6px; }
.queue-speed-line b { color: #3a2408; }
.main-queue-list,
.construction-card-grid {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 280px;
overflow-y: auto;
padding-right: 4px;
}
.main-queue-list::-webkit-scrollbar,
.construction-card-grid::-webkit-scrollbar { width: 8px; }
.main-queue-list::-webkit-scrollbar-track,
.construction-card-grid::-webkit-scrollbar-track { background: #ecd9a8; border-radius: 4px; }
.main-queue-list::-webkit-scrollbar-thumb,
.construction-card-grid::-webkit-scrollbar-thumb { background: #c7a56a; border-radius: 4px; }
.main-queue-card,
.construction-card {
background: #fff0c8;
border: 1px solid #c7a56a;
padding: 9px;
flex-shrink: 0;
}
.main-queue-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.main-queue-card-info { flex: 1; }
.main-queue-card span {
display: block;
color: #6e512d;
margin-top: 2px;
}
.construction-card-head {
display: flex;
align-items: center;
gap: 9px;
}
/* 🖼️ [ANABINA-TEMA-1] KOYU KUTU KALDIRILDI — Tahsin 2026-08-14: "o gölgeyi
kaldırabilir misin o zaman önce öyle denesek?"
Bina çizimlerinin arkasında 42px'lik koyu kahverengi bir kutu vardı
(#37261a zemin + koyu kenar). Açık saman satırların üstünde koyu kareler
olarak duruyor, üst çubuktaki serbest çizim diliyle çelişiyordu — "gölge"
dediği oydu. Zemin ve kenar kalktı; ÇİZİMLERE DOKUNULMADI (Tahsin: "görseller
sabit bırak") — boyut 42px, dosyalar aynı. */
.construction-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
background: transparent;
border: 0;
border-radius: 4px;
font-size: 1.5rem;
}
.construction-card-head b,
.construction-card-head span {
display: block;
}
.construction-card-head span {
color: #6e512d;
font-size: .82rem;
}
.construction-card-costs {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
margin: 8px 0;
font-weight: 700;
}
.construction-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.construction-manager {
overflow: hidden;
}
.construction-row-head,
.construction-row {
display: grid;
grid-template-columns: minmax(185px, 1.4fr) 70px 76px 70px 70px 70px 52px 82px 126px;
gap: 0;
align-items: center;
}
.construction-row-head {
position: sticky;
top: 0;
z-index: 2;
padding: 0;
background: #e9d19e;
color: #2b1707;
font-weight: 800;
font-size: .78rem;
border: 1px solid #c7a56a;
border-bottom: 0;
}
.construction-row-head span {
min-height: 32px;
display: flex;
align-items: center;
padding: 5px 7px;
border-right: 1px solid #c7a56a;
}
.construction-row-list {
max-height: min(48vh, 430px);
overflow-y: auto;
border: 1px solid #c7a56a;
border-top: 0;
background: #fff1cc;
}
.construction-show-all {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
border: 1px solid #c7a56a;
border-top: 0;
background: #f7e3b6;
color: #3f220d;
font-weight: 800;
}
.construction-show-all input {
width: 15px;
height: 15px;
}
.construction-row {
min-height: 36px;
padding: 0;
border-bottom: 1px solid #d7bd82;
}
.construction-row:nth-child(even) {
background: #f7e3b6;
}
.construction-row-main {
display: grid;
grid-template-columns: 60px minmax(0, 1fr);
gap: 6px;
align-items: center;
padding: 4px 7px;
border-right: 1px solid #d7bd82;
}
.construction-row-main b {
color: #7a2506;
font-size: .86rem;
}
.construction-row-level,
.construction-row-status {
color: #6e512d;
font-size: .82rem;
}
.construction-row-level,
.construction-resource-cell,
.construction-row-time,
.construction-row-action {
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
padding: 4px 6px;
border-right: 1px solid #d7bd82;
}
.construction-resource-cell {
font-weight: 800;
font-size: .82rem;
color: #1d1308;
}
.construction-row-time {
font-weight: 800;
color: #7b2108;
white-space: nowrap;
}
.construction-progress {
min-height: 36px;
display: grid;
grid-template-columns: 1fr auto;
gap: 4px;
align-items: center;
padding: 4px 6px;
border-right: 1px solid #d7bd82;
}
.construction-progress span {
height: 13px;
border: 1px solid #b06b20;
background: linear-gradient(90deg, #ec9b36 var(--progress, 0%), #f9e8bc 0);
position: relative;
}
.construction-progress em {
font-style: normal;
font-size: .78rem;
color: #3b250c;
}
/* Bina son kademede (kuruldu/kuyrukta) → "Yapım %" sutununda cubuk yerine "Max Kademe" (Tahsin 2026-07-17). */
.construction-progress em.cm-max-badge { grid-column: 1 / -1; text-align: center; color: #2f6b1f; font-weight: 700; }
.construction-row-action .btn-upgrade {
width: 100%;
min-height: 27px;
padding: 6px 8px;
}
.construction-row .construction-icon {
width: 56px;
height: 48px;
display: grid;
place-items: center;
font-size: 1rem;
overflow: hidden;
padding: 3px;
}
.construction-row .construction-icon img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
.construction-row.locked {
grid-template-columns: minmax(185px, 1.4fr) 70px 1fr;
}
.construction-row.locked .construction-row-requirements {
min-height: 36px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
padding: 4px 8px;
color: #3d250d;
}
.construction-req-chip {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 2px 8px;
border: 1px solid #d3b77c;
border-radius: 4px;
background: #fff4d6;
color: #8b2b07;
font-weight: 800;
white-space: nowrap;
}
/* Küçük zorunlu bina ibareleri */
.construction-row-requirements-mini {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
padding: 2px 6px;
}
.req-mini-label {
font-size: 0.68rem;
color: #a05030;
font-weight: 700;
white-space: nowrap;
}
.req-mini-chip {
display: inline-flex;
align-items: center;
padding: 1px 5px;
border: 1px solid #d3b77c;
border-radius: 3px;
background: #fff4d6;
color: #8b2b07;
font-size: 0.65rem;
font-weight: 600;
white-space: nowrap;
}
#test-panel {
display: none !important;
}
#test-panel.village-progress-panel {
display: block !important;
}
.test-buttons-panel {
display: block;
background: #211708;
border: 1px solid #4a3010;
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
}
.village-progress-panel {
width: min(1020px, 100%);
margin: 10px auto 0;
padding: 12px;
background: linear-gradient(180deg, #f6e8c8, #e4c78e);
border: 1px solid #b9965e;
color: #24180e;
}
.progress-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 7px;
}
.progress-head b,
.progress-head span {
display: block;
}
.progress-head span {
color: #6e512d;
font-size: .82rem;
margin-top: 2px;
}
.progress-head strong {
font-size: 1.05rem;
}
.progress-head.points {
margin-top: 11px;
}
.progress-track {
height: 18px;
background: #fff0c8;
border: 1px solid #9d7a42;
overflow: hidden;
}
.progress-track span {
display: block;
height: 100%;
background: linear-gradient(90deg, #d87421, #ffb347);
}
.progress-track.points span {
background: linear-gradient(90deg, #2f7a24, #75bd4a);
}
.building-modal-box {
width: min(1180px, 97vw) !important;
max-height: 94vh;
}
.main-test-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
padding: 10px;
background: #ead2a3;
border: 1px solid #b9965e;
}
.main-test-actions .btn-test {
min-width: 150px;
}
.construction-card-grid {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.construction-card {
padding: 8px;
}
.construction-card-costs {
font-size: .8rem;
}
.construction-card-foot {
align-items: stretch;
}
.construction-card-foot .btn-upgrade {
width: auto;
min-width: 104px;
}
.quick-menu button.quick-test {
flex-basis: 108px;
color: #dff7c8;
background: rgba(46, 96, 28, .22);
}
.main-building-head {
display: grid;
grid-template-columns: 72px 1fr;
gap: 12px;
padding: 12px;
background: #f7e3b8;
border: 1px solid #b9965e;
}
.construction-manager {
margin-top: 12px;
overflow-x: auto;
border: 1px solid #b9965e;
background: #fff0c8;
}
.construction-manager table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}
.construction-manager th,
.construction-manager td {
padding: 8px 9px;
border-bottom: 1px solid #d2b37a;
border-right: 1px solid #d2b37a;
vertical-align: middle;
font-size: .86rem;
}
.construction-manager th {
background: linear-gradient(180deg, #3a2414, #1a0f07);
color: #fff4d7;
text-align: left;
}
.construction-manager .construct-name {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.construction-manager .building-costs {
padding: 0;
border: 0;
background: transparent;
}
.construction-manager .btn-upgrade {
min-width: 110px;
}
/* ===== 2026 Barbar Koyu tema yenilemesi ===== */
:root {
--bg-deep: #3a2c1a;
--bg-panel: #171c1a;
--bg-panel-2: #20241e;
--wood: #55351d;
--wood-light: #8c6334;
--stone: #485052;
--stone-dark: #252c2d;
--gold: #e4b64f;
--gold-soft: #f4d889;
--green: #7fb069;
--green-dark: #2d4a36;
--red: #b94b3f;
--text-main: #f0e5cf;
--text-muted: #aeb29f;
--line: rgba(228, 182, 79, 0.24);
}
html { background: var(--bg-deep); }
body {
font-family: "Segoe UI", Tahoma, Arial, sans-serif;
background:
radial-gradient(circle at 18% 8%, rgba(185, 130, 63, 0.15), transparent 28%),
radial-gradient(circle at 82% 0%, rgba(160, 120, 70, 0.10), transparent 30%),
linear-gradient(180deg, #42321d 0%, #3a2c1a 48%, #2a1f12 100%);
color: var(--text-main);
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0.05));
}
#auth-screen {
background:
radial-gradient(circle at 50% 28%, rgba(228, 182, 79, 0.22), transparent 26%),
linear-gradient(180deg, rgba(13,17,16,0.78), rgba(13,17,16,0.98)),
repeating-linear-gradient(135deg, #1a211d 0 12px, #141917 12px 24px);
padding: 18px;
}
.auth-box {
width: min(390px, 94vw);
background: linear-gradient(180deg, rgba(32,36,30,0.97), rgba(18,22,20,0.98));
border: 1px solid rgba(228, 182, 79, 0.42);
border-radius: 8px;
box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.auth-box h1,
.logo,
.section-title,
.village-title,
.modal-box h2 {
color: var(--gold-soft);
text-shadow: 0 2px 12px rgba(228, 182, 79, 0.2);
}
.subtitle,
.player-name,
.village-coord,
.map-legend,
.empty-msg,
.t-count,
.b-level,
.atk-detail,
.vl-info .vl-owner {
color: var(--text-muted);
}
header {
position: sticky;
top: 0;
z-index: 30;
height: auto;
min-height: 60px;
padding: 10px 18px;
background: rgba(14, 18, 17, 0.94);
border-bottom: 1px solid rgba(228, 182, 79, 0.28);
box-shadow: 0 12px 32px rgba(0,0,0,0.28);
backdrop-filter: blur(10px);
}
.logo {
letter-spacing: 0;
padding-right: 8px;
}
.main-nav {
gap: 6px;
flex-wrap: wrap;
}
.nav-tab,
.tab-btn,
.btn-secondary,
.btn-logout,
.btn-upgrade,
.btn-train,
.btn-test,
.btn-attack,
.btn-smithy,
.btn-primary,
.btn-danger {
border-radius: 6px;
}
.nav-tab {
background: rgba(255,255,255,0.03);
border: 1px solid transparent;
color: #c9c6b4;
padding: 9px 12px;
}
.nav-tab:hover,
.nav-tab.active {
color: var(--gold-soft);
background: linear-gradient(180deg, rgba(85,53,29,0.82), rgba(32,36,30,0.82));
border-color: rgba(228,182,79,0.32);
box-shadow: inset 0 -2px 0 var(--gold);
}
.resource-bar {
position: sticky;
top: 60px;
z-index: 25;
background: linear-gradient(180deg, rgba(32,36,30,0.97), rgba(18,22,20,0.97));
border-bottom: 1px solid rgba(127, 176, 105, 0.22);
padding: 10px 18px;
gap: 10px;
box-shadow: 0 10px 28px rgba(0,0,0,0.24);
}
.res-item {
min-width: 118px;
padding: 8px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(228, 182, 79, 0.14);
border-radius: 7px;
}
.res-label {
color: #9ca895;
letter-spacing: 0;
}
.res-value {
color: #fff2c7;
font-size: 1rem;
}
.res-rate {
color: #8fbe77;
}
.troops-bar {
min-width: min(100%, 280px);
justify-content: flex-start;
overflow-x: auto;
}
.game-content {
max-width: 1180px;
padding: 22px;
}
.village-hero {
position: relative;
height: 176px;
margin: 0 0 18px;
overflow: hidden;
border: 1px solid rgba(228, 182, 79, 0.25);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(32,45,48,0.92) 0%, rgba(39,55,49,0.82) 54%, rgba(45,42,29,0.95) 100%);
box-shadow: 0 18px 42px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.07);
}
.village-hero::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 72% 18%, rgba(244,216,137,0.34), transparent 15%),
linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.22));
}
.hero-sky,
.hero-hills,
.hero-wall,
.hero-huts,
.hero-fire {
position: absolute;
inset: 0;
}
.hero-hills {
top: 70px;
background:
radial-gradient(ellipse at 18% 100%, #243b32 0 34%, transparent 35%),
radial-gradient(ellipse at 54% 100%, #2b4a38 0 42%, transparent 43%),
radial-gradient(ellipse at 86% 100%, #22352f 0 30%, transparent 31%);
}
.hero-wall {
top: 106px;
left: 7%;
right: 7%;
height: 44px;
display: flex;
align-items: end;
justify-content: space-between;
z-index: 3;
}
.hero-wall span {
width: 18%;
height: 32px;
background: linear-gradient(180deg, #596164, #303839);
border: 1px solid rgba(0,0,0,0.32);
box-shadow: inset 0 2px 0 rgba(255,255,255,0.08);
}
.hero-huts {
z-index: 4;
}
.hut {
position: absolute;
bottom: 24px;
width: 74px;
height: 44px;
background: linear-gradient(180deg, #6d4426, #342014);
border: 1px solid rgba(0,0,0,0.35);
clip-path: polygon(50% 0, 100% 35%, 100% 100%, 0 100%, 0 35%);
}
.hut::before {
content: "";
position: absolute;
left: 12px;
right: 12px;
top: 17px;
height: 18px;
background: rgba(12, 10, 8, 0.65);
border-radius: 8px 8px 0 0;
}
.hut-1 { left: 15%; transform: scale(1.12); }
.hut-2 { left: 43%; bottom: 18px; }
.hut-3 { right: 15%; transform: scale(0.92); }
.hero-fire {
left: 50%;
top: auto;
bottom: 20px;
width: 34px;
height: 44px;
transform: translateX(-50%);
z-index: 5;
background:
radial-gradient(circle at 50% 82%, #21160d 0 42%, transparent 44%),
radial-gradient(ellipse at 50% 58%, #ffd166 0 18%, #f05a28 19% 44%, transparent 46%);
filter: drop-shadow(0 0 14px rgba(240,90,40,0.75));
}
.smoke {
position: absolute;
bottom: 78px;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(230,230,220,0.12);
filter: blur(3px);
z-index: 2;
}
.smoke-1 { left: 47%; }
.smoke-2 { left: 50%; bottom: 96px; width: 34px; height: 34px; }
.smoke-3 { left: 53%; bottom: 120px; width: 42px; height: 42px; opacity: 0.7; }
.section-header {
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(228, 182, 79, 0.16);
border-radius: 8px;
}
.section-title {
border-bottom: 1px solid rgba(228, 182, 79, 0.2);
}
.building-card,
.troop-card,
.attack-card,
.vl-card,
.queue-item,
.modal-box,
.test-panel,
.leaderboard-table th {
background: linear-gradient(180deg, rgba(32,36,30,0.95), rgba(20,24,22,0.96));
border-color: rgba(228, 182, 79, 0.18);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.building-card,
.troop-card {
position: relative;
min-height: 210px;
}
.building-card::before,
.troop-card::before,
.vl-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border-top: 3px solid rgba(127,176,105,0.32);
pointer-events: none;
}
.building-card:hover,
.troop-card:hover,
.vl-card:hover {
border-color: rgba(228, 182, 79, 0.48);
transform: translateY(-1px);
transition: border-color 0.18s, transform 0.18s;
}
/* [FAZ1-42] (Tahsin 2026-09-07): bina resimlerinin arkasındaki KOYU kutu/kararma kalktı,
resim kutuya sığdırıldı (sağ-alta taşmış görünüyordu). */
.b-icon,
.t-icon {
width: 42px;
height: 42px;
display: inline-grid;
place-items: center;
border-radius: 8px;
background: transparent;
border: none;
font-size: 1.45rem;
}
.b-name,
.t-name,
.vl-info .vl-name,
.atk-title {
color: #f4dfab;
}
.b-rate,
.atk-loot,
.queue-time {
color: #8fd07b;
}
.btn-primary,
.btn-upgrade.ok,
.btn-smithy.ok {
background: linear-gradient(180deg, #355d3f, #203c2b);
border: 1px solid rgba(143,208,123,0.55);
color: #dff7d8;
}
.btn-upgrade,
.btn-secondary,
.btn-test,
.tab-btn {
background: linear-gradient(180deg, rgba(85,53,29,0.9), rgba(37,44,45,0.95));
border-color: rgba(228, 182, 79, 0.3);
color: #ead196;
}
.btn-danger,
.btn-train,
.btn-attack {
background: linear-gradient(180deg, #8c372f, #4a1714);
border-color: rgba(244, 132, 104, 0.55);
color: #ffe3d8;
}
.btn-logout {
background: rgba(140,55,47,0.22);
border-color: rgba(244,132,104,0.42);
color: #ffb4a5;
}
/* 🔢 [FAZ6-23] (Tahsin: "inputların üzerindeki artırma azaltma tuşları gereksiz, kötü duruyor"):
sayı kutularındaki spinner okları PROJE GENELİNDE kalktı — miktarlar elle/MAX ile giriliyor. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input,
.auth-form input,
.train-input,
.troop-inputs input[type=number] {
background: rgba(8,12,12,0.74);
border-color: rgba(228, 182, 79, 0.25);
color: var(--text-main);
}
#world-map {
width: min(600px, 100%);
height: auto;
border-color: rgba(228, 182, 79, 0.32);
background:
radial-gradient(circle at 35% 34%, rgba(127,176,105,0.16), transparent 18%),
radial-gradient(circle at 70% 72%, rgba(185,75,63,0.14), transparent 20%),
#0b1512;
box-shadow: 0 18px 44px rgba(0,0,0,0.28);
}
.leaderboard-table {
overflow: hidden;
border-radius: 8px;
border: 1px solid rgba(228, 182, 79, 0.16);
}
.leaderboard-table td {
border-bottom-color: rgba(228, 182, 79, 0.1);
}
#toast {
border-radius: 7px;
box-shadow: 0 16px 36px rgba(0,0,0,0.42);
}
@media (max-width: 760px) {
header {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
.header-right {
width: 100%;
justify-content: space-between;
}
.resource-bar {
position: static;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.res-item,
.troops-bar {
min-width: 0;
}
.game-content {
padding: 14px;
}
.village-hero {
height: 142px;
}
.hut-1 { left: 8%; }
.hut-3 { right: 8%; }
}
/* ===== Referans mobil strateji tema: parşömen + izometrik köy ===== */
:root {
--ui-ink: #20150d;
--ui-brown: #3a2414;
--ui-brown-2: #5a371b;
--ui-cream: #f3e3bf;
--ui-cream-2: #ead2a3;
--ui-line: #b9965e;
--ui-green: #2f7a24;
--ui-red: #9d1f17;
}
body {
background: #3a2c1a;
color: #24180e;
font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
body::before { display: none; }
#auth-screen {
background:
linear-gradient(rgba(16,12,8,.28), rgba(16,12,8,.72)),
url("assets/village-isometric.png") center / cover no-repeat;
}
.auth-box {
background: linear-gradient(180deg, rgba(250,237,203,.96), rgba(229,205,156,.96));
border: 2px solid #4a2b13;
color: var(--ui-ink);
}
.auth-box h1,
.subtitle,
.auth-form input,
.msg {
color: var(--ui-ink);
text-shadow: none;
}
.auth-form input {
background: #fff3d0;
border: 1px solid #b9965e;
}
#game-screen {
min-height: 100vh;
background: #3a2c1a;
}
header {
position: sticky;
top: 0;
min-height: 52px;
padding: 7px 10px;
background: linear-gradient(180deg, #20150d, #0f0a06);
border-bottom: 2px solid #c7a56a;
color: #fff5d8;
box-shadow: none;
}
.logo {
color: #fff5d8;
font-size: 1rem;
}
.main-nav {
justify-content: center;
}
.nav-tab {
background: transparent;
border: 0;
color: #f1dcae;
padding: 8px 10px;
box-shadow: none;
}
.nav-tab:hover,
.nav-tab.active {
background: linear-gradient(180deg, #f5e6c4, #d7b879);
color: #28180b;
border: 1px solid #9e7b45;
box-shadow: inset 0 -2px 0 #8f632d;
}
.player-name { color: #f3dfb0; }
.btn-logout {
background: #ead2a3;
border: 1px solid #9e7b45;
color: #3a2414;
}
.resource-bar {
position: sticky;
top: 52px;
z-index: 25;
display: flex;
gap: 0;
padding: 0;
background: linear-gradient(180deg, #fff0c8, #e5c88e);
border-top: 1px solid #fff7dc;
border-bottom: 2px solid #9d7a42;
box-shadow: none;
}
.res-item {
flex: 1 1 120px;
min-width: 112px;
padding: 7px 12px;
border: 0;
border-right: 1px solid #b99255;
border-radius: 0;
background: transparent;
}
.res-item:first-child { padding-left: 24px; }
.res-label {
color: #6b4b25;
font-size: .72rem;
}
.res-value {
color: #2c1b0c;
font-size: 1.08rem;
font-weight: bold;
}
.res-rate {
color: #356f24;
}
.troops-bar {
background: rgba(63,37,15,.08);
}
.game-content {
max-width: 1040px;
padding: 10px;
background: linear-gradient(180deg, #f6e8c8, #e9d0a0);
border-left: 2px solid #4b2c13;
border-right: 2px solid #4b2c13;
color: #24180e;
}
.village-hero {
height: min(64vw, 620px);
min-height: 420px;
margin: 0 0 10px;
border: 2px solid #3a2414;
border-radius: 6px;
background: url("assets/village-isometric.png") center / cover no-repeat;
box-shadow: inset 0 0 0 1px rgba(255,244,214,.55);
}
.village-hero::after {
background:
linear-gradient(180deg, rgba(255,246,220,.08), rgba(0,0,0,.1)),
radial-gradient(circle at 50% 52%, transparent 0 45%, rgba(20,10,4,.18) 76%);
pointer-events: none;
}
.hero-sky,
.hero-hills,
.hero-wall,
.hero-huts,
.hero-fire,
.smoke {
display: none;
}
.section-header {
background: linear-gradient(180deg, #fff0c8, #e7c98f);
border: 1px solid #b58c4d;
border-radius: 4px;
color: #24180e;
}
.village-title,
.section-title {
color: #2a190c;
text-shadow: none;
}
.village-coord,
.map-legend,
.empty-msg,
.b-level,
.t-count,
.atk-detail,
.vl-info .vl-owner {
color: #6e512d;
}
.section-title {
margin: 14px 0 0;
padding: 9px 12px;
background: linear-gradient(180deg, #2b1b10, #120b06);
border: 1px solid #0b0704;
border-radius: 5px 5px 0 0;
color: #fff4d7;
}
.buildings-grid,
.troops-grid,
.village-list,
.construction-queue {
gap: 0;
background: #f4e3bd;
border: 1px solid #b9965e;
border-top: 0;
}
.buildings-grid,
.troops-grid {
grid-template-columns: 1fr;
}
.building-card,
.troop-card,
.queue-item,
.attack-card,
.vl-card,
.smithy-item {
min-height: auto;
border: 0;
border-bottom: 1px solid #c7a56a;
border-radius: 0;
background: linear-gradient(180deg, #fff2d2, #efd6a7);
color: #24180e;
box-shadow: none;
}
.building-card::before,
.troop-card::before,
.vl-card::before {
display: none;
}
.building-card:hover,
.troop-card:hover,
.vl-card:hover {
transform: none;
border-color: transparent;
background: #fff4d8;
}
.b-icon,
.t-icon {
float: left;
width: 58px;
height: 58px;
margin: 0 12px 8px 0;
background: transparent; /* [FAZ1-42] koyu #37261a kutu kalktı */
border: none;
border-radius: 3px;
font-size: 2rem;
}
.b-icon img, .t-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.b-name,
.t-name,
.vl-info .vl-name,
.atk-title {
color: #27180b;
font-weight: 800;
}
.b-rate,
.atk-loot,
.queue-time {
color: #2f7a24;
}
.b-costs,
.t-stats {
color: #4d3920;
}
.btn-primary,
.btn-upgrade.ok,
.btn-smithy.ok {
background: linear-gradient(180deg, #4e9a31, #216015);
border: 1px solid #18480f;
color: #fff5d8;
}
.btn-upgrade,
.btn-secondary,
.btn-test,
.tab-btn,
.btn-smithy {
background: linear-gradient(180deg, #5b371b, #251407);
border: 1px solid #160c05;
color: #fff0c8;
}
.tab-btn.active {
background: linear-gradient(180deg, #f8e8bf, #cfaa6b);
color: #24180e;
}
.btn-danger,
.btn-train,
.btn-attack {
background: linear-gradient(180deg, #7c2e1f, #321007);
border: 1px solid #220a04;
color: #fff0c8;
}
.train-input,
.troop-inputs input[type=number] {
background: #fff2cf;
border: 1px solid #b9965e;
color: #24180e;
}
.test-panel {
background: #ead2a3;
border: 1px dashed #8e642d;
color: #2a190c;
}
.test-title,
.test-title span,
.premium-status {
color: #2a190c;
}
.map-wrapper {
position: relative;
background: #182d12;
border: 2px solid #2a190c;
border-radius: 5px;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(255,244,214,.25), 0 10px 20px rgba(0,0,0,.25);
}
.map-board {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 12px;
align-items: start;
padding: 10px;
background: linear-gradient(180deg, #f5e5bf, #dfc48e);
border: 1px solid #9d7a42;
}
#world-map {
width: min(600px, 100%);
display: block;
border: 0;
border-radius: 0;
background:
radial-gradient(circle at 18% 22%, rgba(30,80,24,.38), transparent 8%),
radial-gradient(circle at 78% 60%, rgba(30,80,24,.32), transparent 10%),
linear-gradient(0deg, rgba(0,0,0,.08), rgba(255,255,255,.05)),
#486c25;
}
.map-controls {
position: absolute;
top: 18px;
right: 14px;
display: grid;
gap: 8px;
z-index: 5;
}
.map-controls button {
width: 44px;
height: 44px;
border: 1px solid rgba(255,240,200,.45);
border-radius: 5px;
background: rgba(35, 24, 13, .82);
color: #fff2ce;
font-size: 1.45rem;
font-weight: 800;
box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.map-controls button:nth-child(n+4) {
font-size: 1.05rem;
}
.map-side-panel {
background: linear-gradient(180deg, #fff0c8, #e8cd96);
border: 1px solid #9d7a42;
color: #2a190c;
padding: 10px;
}
.map-side-panel h3,
.map-side-panel h4 {
margin: 0;
color: #2a190c;
}
.map-side-panel h3 {
padding: 6px 8px;
background: linear-gradient(180deg, #2b1b10, #120b06);
color: #fff4d7;
}
#mini-map {
display: block;
width: 100%;
height: auto;
margin: 8px 0 10px;
border: 2px solid #5a371b;
background: #506f2b;
image-rendering: pixelated;
}
.map-panel-section {
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid #c7a56a;
}
.map-key {
display: flex;
align-items: center;
gap: 7px;
margin-top: 6px;
font-size: .85rem;
}
.key {
width: 14px;
height: 14px;
display: inline-block;
border: 1px solid #2a190c;
}
.key.own { background: #fff03d; }
.key.enemy { background: #c60000; }
.key.barbar { background: #d8d2be; }
.map-side-panel .btn-secondary {
width: 100%;
margin-top: 7px;
padding: 8px;
}
/* 🏆 [SIRALAMA-B-1] "Parşömen Levha" (Tahsin 2026-08-17: "b daha güzel ve açık renkli").
Yuvarlak köşeli levha + koyu ahşap başlık + zebra + ilk 3 renk tonlu satır +
madalyon rozetler + İKİ AYRI vurgu: lb-ben (• SEN, kehribar) ve lb-klandas
(🚩 klan arkadaşı, yumuşak mavi + sol şerit) — Tahsin: "2 ayrı olacak şekilde".
⚠️ SIRA ÖNEMLİ: vurgu kuralları rank-1/2/3'ten SONRA (klandaş 2. sıradaysa
klandaş görünümü kazanmalı; SEN her şeyi ezer). */
.leaderboard-table {
border: 2px solid #c19a52; border-radius: 12px;
border-collapse: separate; border-spacing: 0;
background: linear-gradient(180deg, #f4e7c8, #ecd9ae);
color: #24180e;
box-shadow: 0 2px 10px rgba(60,35,10,.35);
}
.leaderboard-table th {
background: linear-gradient(180deg, #3a2a14, #241a0c);
color: #f0d078;
letter-spacing: .4px;
}
.leaderboard-table th:first-child { border-radius: 10px 0 0 0; }
.leaderboard-table th:last-child { border-radius: 0 10px 0 0; }
.leaderboard-table th,
.leaderboard-table td {
border-right: 1px solid rgba(176,138,78,.4);
}
.leaderboard-table th:last-child,
.leaderboard-table td:last-child {
border-right: none;
}
.leaderboard-table td {
border-bottom-color: #d9c496;
}
.leaderboard-table tbody tr:nth-child(even) td { background: rgba(180,140,60,.10); }
.leaderboard-table tr:hover td { background: #f0dda0; }
.leaderboard-table td:last-child strong { color: #7a4a10; }
/* 🏆 [SIRALAMA-B-2] Kaydırma kabı: tablo TAM genişlik (Tahsin "boşluk bırakmayalım"),
dar ekranda sütun kaybetmeden kap içinde yatay kayar. */
.lb-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.leaderboard-table { width: 100%; min-width: 640px; }
/* Madalyon rozetler (emoji madalyanın yerine) */
.lb-rozet {
display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
align-items: center; justify-content: center;
font-size: .8rem; font-weight: bold; border: 1px solid rgba(0,0,0,.45);
}
.lb-rozet.r1 { background: radial-gradient(circle, #f0d078 20%, #8a6a18 80%); color: #3a2a14; box-shadow: 0 0 8px rgba(200,150,40,.55); }
.lb-rozet.r2 { background: radial-gradient(circle, #e8f0f8 15%, #7a8791 80%); color: #2a3038; }
.lb-rozet.r3 { background: radial-gradient(circle, #f0c8a0 15%, #9a5a24 80%); color: #34200f; }
.lb-rozet.rN { background: #efdfba; color: #6a4a1f; border-color: #c19a52; }
/* İlk 3 satır: altın / gümüş / bronz tonlu parşömen */
.leaderboard-table tr.rank-1 td { background: linear-gradient(90deg, #f3dc9c, #f0e3bd); }
.leaderboard-table tr.rank-2 td { background: linear-gradient(90deg, #e3e6ea, #eee9dc); }
/* 3. satır BRONZ = kahveye çalan sıcak ton (Tahsin: "neden 3.de kırmızı vurgu var?" —
eski #ecc9a2 bakıra/kırmızıya kaçıyordu; sarı-kahve bronza çekildi). */
.leaderboard-table tr.rank-3 td { background: linear-gradient(90deg, #e2c795, #eee1c2); }
/* 🚩 Klan arkadaşı — yumuşak mavi + sol şerit (SEN'den AYRI, daha sakin) */
.leaderboard-table tr.lb-klandas td { background: #e2e9f2; }
.leaderboard-table tr.lb-klandas td:first-child { box-shadow: inset 3px 0 0 #4a6a9a; }
/* Bayrak MAVİ (Tahsin: "kırmızı bayrak yerine mavi") — 🚩 emojisi renk almaz,
⚑ metin işareti CSS ile boyanır; sol şeritle aynı ton. */
.leaderboard-table tr.lb-klandas td:nth-child(2)::after { content: " ⚑"; color: #4a6a9a; font-size: .9rem; }
/* • SEN — kehribar, en güçlü vurgu (klandaş/ilk-3'ü de ezer) */
.leaderboard-table tr.lb-ben td { background: #f6e3a8; border-top: 1px solid #a97c2c; border-bottom: 1px solid #a97c2c; }
.leaderboard-table tr.lb-ben td:nth-child(2)::after { content: " • SEN"; color: #8a5c12; font-size: .72rem; letter-spacing: 1px; font-weight: bold; }
/* Klanlar modunda kendi klanın: aynı kehribar ama etiketi "SANCAĞIN" */
.leaderboard-table tr.lb-klansatiri td:nth-child(2)::after { content: " • SANCAĞIN"; }
/* ── Sıralama: mod sekmeleri + sayfalama ── */
.lb-mode-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.lb-mode-btn { padding: 8px 16px; background: #2b1b10; color: #c0a060; border: 1px solid #4a3010; border-radius: 6px; cursor: pointer; font-size: .88rem; font-weight: 700; }
.lb-mode-btn:hover { background: #3a2415; }
.lb-mode-btn.active { background: linear-gradient(180deg, #c7912f, #8a5c12); color: #2a1608; border-color: #ecc878; }
.lb-period-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.lb-period-btn { padding: 5px 14px; border: 1px solid #d9bb7c; background: #f4e4bc; color: #6a4a1f; cursor: pointer; font-family: Georgia, serif; font-size: .82rem; border-radius: 14px; font-weight: 700; }
.lb-period-btn:hover { background: #f0dda0; }
.lb-period-btn.active { background: #d4b87a; border-color: #7c4a16; color: #3d1a05; }
.lb-no-clan { color: #6b5a3e; }
.lb-pagination { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 16px; }
.lb-page-btn { padding: 6px 12px; background: #2b1b10; color: #c0a060; border: 1px solid #4a3010; border-radius: 4px; cursor: pointer; font-size: .85rem; }
.lb-page-btn:hover { background: #3a2415; }
.lb-page-btn.active { background: linear-gradient(180deg, #c7912f, #8a5c12); color: #2a1608; border-color: #ecc878; font-weight: 700; }
.lb-page-dots { color: #6b5a3e; padding: 6px 4px; }
/* Yardim kilavuzu */
.help-guide {
max-width: 1180px;
}
.building-help-content {
color: #2a190c;
}
.help-summary {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
margin-bottom: 12px;
padding: 10px 12px;
background: linear-gradient(180deg, #fff0c8, #e8cd96);
border: 1px solid #b9965e;
border-radius: 6px;
}
.main-level-select {
display: inline-flex;
align-items: center;
gap: 8px;
justify-self: start;
width: fit-content;
padding: 6px 8px;
background: #f7e3b8;
border: 1px solid #b9965e;
border-radius: 5px;
color: #2a190c;
font-size: .84rem;
font-weight: 700;
}
.main-level-select select {
min-width: 58px;
padding: 4px 6px;
border: 1px solid #9d7a42;
border-radius: 4px;
background: #fff7dd;
color: #24180e;
font-weight: 700;
}
.help-summary b {
font-size: 1rem;
}
.help-summary span {
color: #5c3c1a;
font-size: .88rem;
}
.help-building-list {
display: grid;
gap: 12px;
}
.help-building-card {
background: #f4e3bd;
border: 1px solid #b9965e;
border-radius: 6px;
overflow: hidden;
}
.help-building-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr);
gap: 12px;
padding: 12px;
background: linear-gradient(180deg, #fff0c8, #e9d09a);
border-bottom: 1px solid #c7a56a;
}
.help-building-head h3 {
margin: 0 0 5px;
color: #2a190c;
font-size: 1.05rem;
}
.help-building-head p {
margin: 0;
color: #4e3217;
line-height: 1.35;
}
.help-building-meta {
display: grid;
gap: 6px;
align-content: start;
font-size: .86rem;
color: #4e3217;
}
.help-table-wrap {
overflow-x: auto;
}
/* 🔣 [YARDIM-TABLO-1] KÖK NEDEN DÜZELTMESİ (Tahsin 2026-07-22 "büyük boşluklar var ama yazılar
okunmuyor" → tarama 5 tabloda daha aynı hastalığı buldu).
ESKİDEN: `min-width: 820px` + `table-layout: fixed`. Bu ikili, 10 sütunluk BİRİM tablosu için
yazılmıştı; ama aynı sınıfı kullanan 3/4/8 sütunlu tablolarda 820px sütunlara EŞİT bölünüyordu:
• sayı sütunları (Sv, İşçi, Puan) ~270px BOŞ kalıyor
• metin sütunları (Özellik, Sebep, Açıklama) aynı dar payla sıkışıp `white-space:nowrap`
yüzünden sarmıyor → KOMŞU SÜTUNUN ÜSTÜNE taşıyor, iki yazı üst üste binip okunmuyor
ŞİMDİ: yerleşim `auto` (sütunlar içeriğe göre), min-width yalnız gerçekten geniş olan
tabloya `.hlt-wide` ile verilir. Serbest metin sütunları `.hlt-text` ile sarar. */
.help-level-table {
width: 100%;
border-collapse: collapse;
}
/* Yalnızca 10 sütunlu birim tablosu gerçekten geniş — kaydırma sarmalayıcısı zaten var */
.help-level-table.hlt-wide { min-width: 820px; }
/* Serbest metin sütunu: sarsın, komşuya taşmasın (Özellik / Sebep / Açıklama gibi) */
.help-level-table td.hlt-text {
white-space: normal;
overflow-wrap: anywhere;
text-align: left;
line-height: 1.45;
}
.help-level-table th {
background: linear-gradient(180deg, #2b1b10, #120b06);
color: #fff4d7;
padding: 8px 7px;
font-size: .78rem;
text-align: left;
}
.help-level-table td {
padding: 7px;
border-bottom: 1px solid #d2b77b;
font-size: .82rem;
white-space: nowrap;
}
.help-level-table tr:nth-child(even) td {
background: rgba(255, 244, 215, .42);
}
@media (max-width: 760px) {
.help-summary,
.help-building-head {
grid-template-columns: 1fr;
display: grid;
}
}
/* KS HEADER CLEANUP V7 */
header .logo {
display: none !important;
}
header .main-nav .nav-tab[data-tab="village"],
header .main-nav .nav-tab[data-tab="map"] {
display: none !important;
}
.quick-menu button.quick-test {
display: none !important;
}
.quick-menu button[onclick="showTab('premium')"] {
display: none !important;
}
header .main-nav {
justify-content: center !important;
}
/* Login form alani: hazir gorseldeki eski yazi/form izlerini kapatir. */
#auth-screen .auth-box {
width: min(328px, 88vw) !important;
padding: 14px 12px 14px !important;
background: linear-gradient(180deg, rgba(10, 6, 4, .99), rgba(22, 13, 7, .99)) !important;
position: absolute !important;
z-index: 2 !important;
}
#auth-screen .auth-box::before {
content: "";
position: absolute;
left: -10px;
right: -10px;
top: -85px;
bottom: -22px;
z-index: -1;
border: 1px solid rgba(207, 165, 75, .7);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(8, 5, 3, .995), rgba(22, 13, 7, .985));
box-shadow:
0 14px 30px rgba(0, 0, 0, .72),
inset 0 0 0 1px rgba(255, 225, 150, .08);
}
#auth-screen .tab-buttons {
margin-top: 0 !important;
}
#auth-screen .auth-form input {
height: 40px !important;
}
#auth-screen .btn-primary {
height: 44px !important;
}
.queue-order-actions {
display: inline-flex;
flex-direction: column;
gap: 3px;
margin: 0 7px;
}
.queue-order-btn {
width: 26px;
height: 22px;
padding: 0;
border: 1px solid #8a5b1d;
border-radius: 4px;
background: linear-gradient(180deg, #7d4f18, #3b2109);
color: #fff0c5;
font-size: 11px;
font-weight: 800;
line-height: 1;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.queue-order-btn:hover:not(:disabled) {
filter: brightness(1.18);
}
.queue-order-btn:disabled {
opacity: .35;
cursor: default;
}
/* KS CENTER SHELL V6: breadcrumb okunurlugu, kutulu kaynaklar ve login form kapatici */
.village-nav-bar {
width: 41% !important;
background: linear-gradient(180deg, #fff7dd 0%, #f0d29a 100%) !important;
border-top: 1px solid rgba(255, 255, 255, .75) !important;
border-bottom: 1px solid #a87935 !important;
color: #7a2b05 !important;
font-weight: 800 !important;
opacity: 1 !important;
text-shadow: 0 1px 0 rgba(255, 244, 210, .85) !important;
}
.village-nav-bar a,
.village-nav-bar span,
.village-nav-bar strong,
.village-nav-bar button {
color: #7a2b05 !important;
opacity: 1 !important;
font-weight: 800 !important;
}
.village-nav-bar .vnav-arrow,
.village-nav-bar button {
min-width: 25px !important;
height: 25px !important;
border: 1px solid #8a5b1d !important;
border-radius: 4px !important;
background: linear-gradient(180deg, #7d4f18, #3b2109) !important;
color: #fff0c5 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
/* 🐛 [KOY-LISTE-1] (Tahsin T5) "köy değiştirme butonu ezliyor": bar sabit %41 genişlikte flex.
Uzun köy adı gelince flex varsayılanı (shrink:1) OKLARI da eziyordu → ok tıklanamaz hâle
geliyordu. Oklar artık ASLA küçülmez; sıkışmayı köy adı yutar (altta ellipsis). */
flex: 0 0 auto !important;
}
/* Uzun ad barı taşırmasın: ortadaki köy adı kısalıp "…" ile biter (oklar tam boyutta kalır) */
.village-nav-bar .vnav-current { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.village-nav-bar .vnav-village-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.village-nav-bar .vnav-village-coord { flex: 0 0 auto; white-space: nowrap; }
.village-nav-bar .vnav-caret { flex: 0 0 auto; }
.village-nav-bar .vnav-link { flex: 0 0 auto; white-space: nowrap; }
.resource-bar {
width: 59% !important;
justify-content: flex-start !important;
gap: 6px !important;
padding: 3px 8px 3px 0 !important;
background: linear-gradient(180deg, #fff7dd 0%, #f0d29a 100%) !important;
border-top: 1px solid rgba(255, 255, 255, .75) !important;
border-bottom: 1px solid #a87935 !important;
}
.resource-bar .res-item {
min-height: 24px !important;
height: 24px !important;
padding: 0 6px !important;
border: 1px solid rgba(150, 103, 38, .58) !important;
border-radius: 3px !important;
background: linear-gradient(180deg, rgba(255, 248, 224, .92), rgba(224, 188, 112, .88)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.resource-bar .res-value {
font-size: .76rem !important;
color: #251204 !important;
}
/* ── KAYNAK BARI TEK SATIR (Tahsin 2026-07-10): kılıç/kasa ASLA alt satıra düşüp içeriğe BİNMEZ ──
Kök neden: temel kuraldaki flex-wrap:wrap — bar dolunca son öğeler (⚔️) alt satıra sarıyordu.
Çözüm: nowrap + sağ butonlar sabit (shrink 0) + kaynak kutuları gerekirse daralır. */
.resource-bar { flex-wrap: nowrap !important; min-width: 0; }
.resource-bar .emanet-open-btn,
.resource-bar .inv-chest-btn,
.resource-bar .incoming-indicator { flex: 0 0 auto; }
.resource-bar .res-item { flex: 0 1 auto; min-width: 0 !important; }
/* 🏘️ [KOY-CUBUK-SARMA-1] (Tahsin 2026-09-17: "webde köy adları silik çıkıyor, sağdaki köyü git
tuşu kayboluyor") — üstteki hatanın İKİZİ, köy çubuğunda hiç düzeltilmemişti.
ÖLÇÜLDÜ (1100px, 41%=433px bar, 38 harflik köy adı): temel kuraldaki flex-wrap:wrap yüzünden
çubuk DOLUNCA köy adı 2. satıra (34px'lik çubuğun DIŞINA, 36-56px) düşüp overflow:hidden ile
kırpılıyordu → "silik"; ► oku 66px'e sarıp tamamen kayboluyordu. [KOY-LISTE-1]'deki
ellipsis kuralları doğruydu ama flex SARABİLDİĞİ sürece hiç küçülmüyor (önce sarar).
nowrap ile: ad 283→89px "…", ► 397-423px'te görünür, ad 7-27px çubuğun içinde. */
.village-nav-bar { flex-wrap: nowrap !important; }
/* UÇURUM FİX (Tahsin 2026-07-10): eski gizli asker-sayısı öğesi (#troops-bar-counts) bir !important
kuralla görünür kalıp margin-left:auto'suyla NÜFUS↔KASA arasında dev boşluk açıyordu — kalıcı kapalı. */
.resource-bar .troops-bar,
#troops-bar-counts { display: none !important; margin-left: 0 !important; width: 0 !important; padding: 0 !important; border: none !important; }
/* Dar pencerede sıkıştır: boşluk azalt + sayı fontu küçült (tek satır korunur) */
@media (max-width: 1500px) {
.resource-bar { gap: 4px !important; }
.resource-bar .res-value { font-size: .68rem !important; }
.resource-bar .res-item { padding: 0 4px !important; }
}
#auth-screen .auth-box {
width: min(304px, 84vw) !important;
padding: 10px 10px 12px !important;
background: linear-gradient(180deg, rgba(13, 8, 5, .99), rgba(24, 14, 7, .98)) !important;
border: 1px solid rgba(207, 165, 75, .78) !important;
border-radius: 6px !important;
box-shadow:
0 12px 28px rgba(0, 0, 0, .64),
inset 0 0 0 1px rgba(255, 225, 150, .08) !important;
}
#auth-screen .tab-buttons {
margin: 0 0 9px 0 !important;
}
#auth-screen .auth-form input {
margin-bottom: 8px !important;
}
#auth-screen .btn-primary {
margin-top: 2px !important;
}
@media (max-width: 760px) {
.village-nav-bar,
.resource-bar {
width: 100% !important;
}
.resource-bar .res-item {
min-width: auto !important;
}
}
.modal-box {
background: linear-gradient(180deg, #fff0c8, #e7c98f);
border: 2px solid #3a2414;
color: #24180e;
}
.modal-box h2 {
color: #24180e;
text-shadow: none;
}
.modal-target {
background: #f7e3b8;
color: #3a2414;
border: 1px solid #b9965e;
}
#toast {
background: #2f7a24;
border-color: #18480f;
color: #fff5d8;
}
@media (max-width: 760px) {
header {
flex-direction: row;
align-items: center;
overflow-x: auto;
}
.main-nav {
flex-wrap: nowrap;
justify-content: flex-start;
}
.nav-tab {
white-space: nowrap;
font-size: .78rem;
}
.header-right {
width: auto;
}
.resource-bar {
position: sticky;
top: 52px;
display: flex;
overflow-x: auto;
}
.resource-bar .res-item {
flex: 0 0 112px;
}
.game-content {
padding: 6px;
border-left: 0;
border-right: 0;
}
.village-hero {
height: 430px;
min-height: 430px;
}
}
/* ===== Tiklanabilir koy binalari ===== */
.village-hotspot {
position: absolute;
z-index: 12;
transform: translate(-50%, -50%);
min-width: 68px;
padding: 3px 6px 4px;
border: 1px solid rgba(42, 25, 12, .75);
border-radius: 4px;
background: rgba(42, 25, 12, .82);
color: #fff4d7;
font-size: .68rem;
line-height: 1.05;
text-align: center;
cursor: pointer;
box-shadow: 0 2px 0 rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.22);
}
.village-hotspot b,
.village-hotspot span {
display: block;
}
.village-hotspot b {
font-size: .88rem;
}
.mini-test {
margin: 4px 4px 0 0;
padding: 6px 9px;
font-size: .74rem;
}
.mini-test span {
display: inline-block;
margin-right: 5px;
padding: 1px 4px;
border-radius: 3px;
background: #fff1b8;
color: #6a2f0d;
font-size: .62rem;
}
.training-queue-mini {
display: grid;
gap: 5px;
margin: 6px 0 10px;
padding: 7px;
border: 1px solid #c8a465;
background: #f8e8c4;
}
.training-queue-mini div {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: .78rem;
}
/* Eğitim iptal ✕ (Tahsin 2026-07-10 — %80 iade ile iptal geri geldi) */
.train-cancel-btn {
flex: 0 0 auto;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #8e2418;
background: linear-gradient(#e05b4b, #b03225);
color: #fff;
font-size: .72rem;
font-weight: 900;
line-height: 1;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.train-cancel-btn:hover { filter: brightness(1.15); }
.t-icon,
.building-troop-icon {
font-size: 1.9rem;
}
.village-hotspot:hover {
background: linear-gradient(180deg, #fff0c8, #d7b879);
color: #24180e;
}
.village-hotspot:focus-visible {
outline: 3px solid #ffd35b;
outline-offset: 2px;
}
.hs-main { left: 50%; top: 36%; }
.hs-palace { left: 46%; top: 24%; }
.hs-barracks { left: 27%; top: 44%; }
.hs-stable { left: 72%; top: 43%; }
.hs-workshop { left: 50%; top: 58%; }
.hs-smithy { left: 70%; top: 68%; }
.hs-woodcutter { left: 28%; top: 70%; }
.hs-quarry { left: 45%; top: 80%; }
.hs-iron { left: 78%; top: 79%; }
.hs-farm { left: 55%; top: 72%; }
.hs-market { left: 37%; top: 61%; }
.hs-watchtower { left: 76%; top: 30%; }
.hs-storage { left: 59%; top: 55%; }
.hs-hidden { left: 42%; top: 50%; }
.hs-wall { left: 19%; top: 82%; }
.building-modal-box {
width: min(720px, 96vw);
max-height: 90vh;
overflow: auto;
}
.building-modal-content {
margin-top: 12px;
}
.building-entry {
display: grid;
grid-template-columns: 72px 1fr;
gap: 12px;
padding: 12px;
background: #f7e3b8;
border: 1px solid #b9965e;
}
/* [FAZ1-42b] (Tahsin 2026-09-07: "hâlâ duruyor"): bina SAYFASI üst görselindeki koyu kutu da
kalktı ([ANABINA-TEMA-1] kararının eşi). Taşma sebebi: görsel 72px basılıyordu, kutu 64px —
"sağ aşağı çerçeve dışında" görünüyordu; img artık kutuya sığdırılıyor. */
.building-entry-icon {
width: 64px;
height: 64px;
display: grid;
place-items: center;
background: transparent;
border: none;
border-radius: 4px;
font-size: 2rem;
}
.building-entry-name {
font-weight: 800;
font-size: 1.1rem;
}
.building-entry-level {
margin-top: 2px;
color: #6e512d;
}
.building-entry-lines {
display: grid;
gap: 3px;
margin-top: 8px;
color: #3e2a17;
}
.building-entry-desc {
color: #6a4a1f;
font-size: .88rem;
font-style: italic;
line-height: 1.4;
margin-top: 4px;
margin-bottom: 2px;
}
.building-upgrade-box {
display: grid;
grid-template-columns: 1fr minmax(160px, 220px);
gap: 10px;
align-items: center;
padding: 12px;
background: #ead2a3;
border: 1px solid #b9965e;
border-top: 0;
}
.building-costs {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
color: #3e2a17;
font-weight: 700;
}
/* Kilitli bina açılış şartları (hata8) */
.req-tier-box {
margin-top: 12px;
padding: 12px 14px;
background: #fff0c8;
border: 1px solid #b9965e;
border-radius: 4px;
}
.req-tier-title {
font-weight: 800;
color: #6b2b1f;
margin-bottom: 4px;
font-size: 1rem;
}
.req-tier-hint {
margin: 0 0 10px;
color: #5a4021;
font-size: 0.85rem;
}
.req-tier-row {
display: grid;
grid-template-columns: 22px 1fr auto auto;
gap: 8px;
align-items: center;
padding: 6px 8px;
border-radius: 4px;
font-size: 0.92rem;
}
.req-tier-row + .req-tier-row { margin-top: 4px; }
.req-tier-row.met { background: rgba(60, 140, 60, 0.14); }
.req-tier-row.unmet { background: rgba(150, 60, 40, 0.12); }
.req-tier-status { text-align: center; }
.req-tier-label { font-weight: 700; color: #3e2a17; }
.req-tier-need { color: #3e2a17; font-weight: 700; white-space: nowrap; }
.req-tier-have { color: #7a5a2e; font-size: 0.82rem; white-space: nowrap; text-align: right; }
.req-tier-row.unmet .req-tier-have { color: #9a3b28; }
.building-action-panel {
margin-top: 12px;
padding: 12px;
background: #fff0c8;
border: 1px solid #b9965e;
}
.building-action-panel h3 {
margin: 0 0 10px;
font-size: 1rem;
}
.palace-panel {
display: grid;
gap: 12px;
}
.palace-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.palace-tabs button {
padding: 8px 10px;
border: 1px solid #9d7a42;
border-radius: 5px;
background: #ead2a3;
color: #2a190c;
cursor: pointer;
font-weight: 700;
}
.palace-tabs button.active {
background: linear-gradient(180deg, #2b1b10, #120b06);
color: #fff4d7;
}
.palace-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 8px;
}
.palace-stat {
padding: 10px;
background: #f7e3b8;
border: 1px solid #c7a56a;
border-radius: 5px;
display: grid;
gap: 4px;
}
.palace-stat span,
.palace-row p,
.palace-help p {
color: #5c3c1a;
}
.palace-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 12px;
background: #f7e3b8;
border: 1px solid #c7a56a;
border-radius: 5px;
}
.palace-costs,
.palace-mint {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.palace-costs span {
padding: 5px 8px;
background: #fff0c8;
border: 1px solid #d2b77b;
border-radius: 4px;
font-weight: 700;
}
.palace-mint input {
width: 110px;
padding: 8px;
border: 1px solid #9d7a42;
border-radius: 4px;
background: #fff7dd;
color: #24180e;
font-weight: 700;
}
.palace-help {
display: grid;
gap: 7px;
padding: 12px;
background: #f7e3b8;
border: 1px solid #c7a56a;
border-radius: 5px;
}
.divan-layout {
display: grid;
gap: 6px;
font-size: .86rem;
}
.divan-section-title {
padding: 6px 8px;
background: linear-gradient(180deg, #9a320c, #5a1704);
color: #fff4d7;
border: 1px solid #6f2608;
border-radius: 4px 4px 0 0;
font-weight: 800;
}
.divan-table {
width: 100%;
border-collapse: collapse;
background: #f8e6bd;
color: #2a190c;
border: 1px solid #bc965b;
margin-top: -6px;
}
.divan-table th,
.divan-table td {
padding: 5px 7px;
border-bottom: 1px solid #cdb077;
text-align: left;
vertical-align: middle;
}
.divan-table th {
width: 34%;
color: #3f220d;
font-weight: 800;
background: rgba(255, 244, 215, .45);
}
.divan-table td {
font-weight: 600;
}
.divan-table td b {
color: #7b2108;
}
.divan-status-table td {
color: #8a160b;
font-weight: 800;
}
.divan-action {
justify-self: end;
min-width: 116px;
padding: 7px 12px;
border: 1px solid #6f2608;
border-radius: 5px;
background: linear-gradient(180deg, #8c4218, #4a210d);
color: #fff4d7;
font-weight: 800;
cursor: pointer;
}
.divan-action:disabled {
opacity: .55;
cursor: default;
}
.divan-buy-row {
display: flex;
gap: 6px;
align-items: center;
justify-content: flex-end;
}
.divan-buy-row input {
width: 88px;
padding: 6px;
border: 1px solid #9d7a42;
border-radius: 4px;
background: #fff7dd;
color: #24180e;
font-weight: 800;
}
/* 👑 [OLU-BEY-1] ölü bey notu + akçe biriktirme çubuğu (web parşömen paleti) */
.divan-olu-not { color: #1d7a1d; font-weight: 800; }
.divan-cubuk-kap { margin: 6px 0 10px; }
.divan-cubuk-ust {
display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
font-size: .82rem; color: #5b3a17; margin-bottom: 4px;
}
.divan-cubuk-ust b { font-variant-numeric: tabular-nums; }
.divan-cubuk-ust b.divan-cubuk-kalan { color: #8a5a10; }
.divan-cubuk {
height: 10px; border-radius: 5px; overflow: hidden;
background: #f1e3bd; border: 1px solid #bc965b;
}
.divan-cubuk i {
display: block; height: 100%;
background: linear-gradient(90deg, #c99b3f, #8a5a10);
}
.divan-help {
margin-top: -6px;
padding: 8px 10px;
background: #f8e6bd;
border: 1px solid #bc965b;
color: #3f220d;
}
.divan-help p {
margin: 4px 0;
line-height: 1.3;
}
.res-red {
color: #b31313;
font-weight: 900;
}
/* 👑 [OLU-BEY-1] WEB DİVANI KOYU TEMA (Tahsin 2026-08-31: "ya arka planı değiştir önce")
Mobildeki .bina-sayfa #divan-panel kararının web eşi: parşömen kuralları #palace-panel
kapsamında koyu kahveye çevrilir — önizlemedeki palet (#120c06 zemin, altın vurgular). */
/* Palet: "Akçe Topla" kartının sıcak kahvesi (#4a3722→#3a2c1a, #8b6914 kenar, #f0d890
altın) panele yayıldı — Tahsin: "siyah beyaz alan yapma" (düz siyah kutu istemedi). */
#palace-panel .divan-layout {
background: linear-gradient(160deg, #3a2b16, #241708);
border: 1px solid #8b6914;
border-radius: 12px;
padding: 12px;
box-shadow: inset 0 1px 0 rgba(240, 216, 144, .12);
}
#palace-panel .divan-section-title {
background: linear-gradient(180deg, #5a3d1a, #38240e);
border: 1px solid #8b6914;
border-radius: 7px;
color: #f0d890;
text-transform: uppercase;
letter-spacing: .05em;
font-size: .82rem;
padding: 7px 10px;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
/* İÇ ALANLAR AÇIK (Tahsin: "çerçeveler kahve kalsın, yazı bölgelerinin içleri
kendi temamız — açık sarı turuncu"). Şerit + çerçeve koyu, tablo içi parşömen. */
#palace-panel .divan-table {
background: #f8e6bd;
border: 1px solid #8b6914;
border-radius: 0 0 7px 7px;
color: #2a190c;
margin-top: 0;
}
#palace-panel .divan-table th,
#palace-panel .divan-table td {
border-bottom: 1px solid #cdb077;
}
#palace-panel .divan-table th {
background: rgba(255, 244, 215, .55);
color: #3f220d;
font-weight: 800;
}
#palace-panel .divan-table td { color: #2a190c; }
#palace-panel .divan-table td b { color: #7b2108; }
#palace-panel .divan-status-table td { color: #8a160b; font-weight: 800; }
#palace-panel .divan-olu-not { color: #1d7a1d; }
#palace-panel .divan-buy-row input {
background: #241708;
color: #f0d890;
border-color: #8b6914;
}
#palace-panel .btn-secondary {
background: #4a3722;
color: #f0d890;
border: 1px solid #8b6914;
}
#palace-panel .divan-help {
background: #f8e6bd;
border: 1px dashed #8b6914;
border-radius: 8px;
color: #3f220d;
margin-top: 0;
}
#palace-panel .divan-help b { color: #7b2108; }
/* Çubuk artık AKÇE TABLOSUNUN satırı (Tahsin: "birleştir") — açık zeminde koyu yazı. */
#palace-panel .divan-cubuk-kap { margin: 2px 0; }
#palace-panel .divan-cubuk-ust { color: #5b3a17; }
#palace-panel .divan-cubuk-ust b { color: #2a190c; }
#palace-panel .divan-cubuk-ust b.divan-cubuk-kalan { color: #8a5a10; }
#palace-panel .divan-cubuk {
background: rgba(0, 0, 0, .25);
border-color: #8b6914;
}
#palace-panel .divan-cubuk i { background: linear-gradient(90deg, #8b6914, #c99b3f); }
#palace-panel .divan-table .divan-buy-row { justify-content: flex-start; margin: 2px 0; }
#palace-panel .akce-oto-kutu {
margin: 0;
background: #fff0c8;
border: 1px solid #8b6914;
color: #3d250d;
}
#palace-panel .akce-oto-bas b { color: #6b4a10; }
#palace-panel .akce-oto-kalan { color: #6b4b24; }
#palace-panel .akce-oto-kalan b { color: #8a160b; }
/* Toplu basım köy listesi: çerçeve kahve, içi parşömen */
#palace-panel .akce-toplu-kutu {
background: #f6ead0;
border-color: #8b6914;
}
#palace-panel .empty-msg { color: #7a6440; }
/* Akçe bölgesi: solda kasa/çubuk/basım, sağda otomatik basım (Tahsin: "ortadan ikiye böl,
sola az yasla, sağda otomatik basım için yer bırak"). Dar ekranda alt alta. */
.divan-akce-duzen {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.divan-akce-sol { display: grid; gap: 8px; }
@media (max-width: 760px) {
.divan-akce-duzen { grid-template-columns: 1fr; }
}
/* ⏱ Eğitim süresi "Detay" düğmesi + orta pencere (oyuncu isterse açar) */
.divan-detay-btn {
margin-left: 8px;
padding: 2px 10px;
font-size: .74rem;
border-radius: 5px;
border: 1px solid #8b6914;
background: #4a3722;
color: #f0d890;
cursor: pointer;
}
.divan-sure-arka {
position: fixed;
inset: 0;
z-index: 4000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .6);
padding: 16px;
}
.divan-sure-kutu {
width: min(420px, 100%);
background: linear-gradient(160deg, #3a2b16, #241708);
border: 1px solid #8b6914;
border-radius: 12px;
padding: 14px 16px;
box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
}
.divan-sure-baslik {
color: #f0d890;
font-weight: 800;
margin-bottom: 8px;
}
.divan-sure-tablo {
width: 100%;
border-collapse: collapse;
font-size: .84rem;
background: #f8e6bd;
border: 1px solid #8b6914;
border-radius: 7px;
overflow: hidden;
}
.divan-sure-tablo th,
.divan-sure-tablo td {
padding: 6px 8px;
border-bottom: 1px solid #cdb077;
text-align: left;
}
.divan-sure-tablo th { color: #3f220d; font-weight: 800; width: 46%; background: rgba(255, 244, 215, .55); }
.divan-sure-tablo td { color: #2a190c; }
.divan-sure-tablo td b { color: #7b2108; }
.divan-sure-kapat {
margin-top: 12px;
width: 100%;
padding: 8px;
border-radius: 7px;
border: 1px solid #8b6914;
background: #4a3722;
color: #f0d890;
font-weight: 700;
cursor: pointer;
}
/* 🪟 [ONAY-ORTA-1] ortada onay + hata pencereleri (önizleme Tahsin onaylı) */
.onay-web-arka {
position: fixed;
inset: 0;
/* [EMANET-ONAY-USTTE-1] Tahsin: "onay tablosu arkaya düşüyor" — onay HER modalın
üstünde olmalı (emanet-overlay 10050'nin de); bakıcı 99999 dünya seçiminde, çakışmaz. */
z-index: 11000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .6);
padding: 16px;
}
.onay-web-kutu {
width: min(440px, 100%);
background: linear-gradient(160deg, #3a2b16, #241708);
border: 1px solid #8b6914;
border-radius: 12px;
padding: 14px 16px;
box-shadow: 0 12px 40px rgba(0, 0, 0, .65);
}
.onay-web-kutu.tehlikeli {
border: 2px solid #a01e1e;
box-shadow: 0 12px 40px rgba(0, 0, 0, .65), 0 0 22px rgba(160, 30, 30, .25);
}
.onay-web-baslik { color: #f0d890; font-weight: 800; margin-bottom: 10px; }
.onay-web-kutu.tehlikeli .onay-web-baslik { color: #ff9d7e; }
.onay-web-govde {
background: #f8e6bd;
border: 1px solid #8b6914;
border-radius: 8px;
padding: 12px 13px;
color: #2a190c;
font-size: .9rem;
line-height: 1.55;
}
.onay-web-kutu.tehlikeli .onay-web-govde { border-color: #a01e1e; }
.onay-web-sorma {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 8px 10px;
background: rgba(255, 232, 178, .06);
border: 1px dashed #8b6914;
border-radius: 7px;
font-size: .82rem;
color: #d8c49a;
cursor: pointer;
user-select: none;
}
.onay-web-sorma input { width: 17px; height: 17px; accent-color: #c9a227; cursor: pointer; }
.onay-web-dugmeler { display: flex; gap: 10px; margin-top: 12px; }
.onay-web-dugmeler button {
flex: 1;
padding: 9px;
border-radius: 7px;
font-weight: 700;
font-size: .9rem;
cursor: pointer;
font-family: inherit;
}
.onay-web-vazgec { background: #2c1c0a; color: #cbb68d; border: 1px solid #5b3d17; }
.onay-web-onay { background: linear-gradient(180deg, #68a844, #3f7f24); color: #fff; border: 1px solid #2c5a17; }
.onay-web-onay.tehlikeli { background: linear-gradient(180deg, #b3341c, #7e1810); color: #ffe9e0; border: 1px solid #5e0e0e; }
/* 🔭 [KULE-BOY-1] boy göstergeleri penceresi — alt alta sade liste */
.wt-boy-liste { display: grid; gap: 4px; }
.wt-boy-liste div {
padding: 7px 4px;
border-bottom: 1px solid rgba(240, 216, 144, .16);
color: #f0e2c0;
font-size: .9rem;
}
.wt-boy-liste div:last-child { border-bottom: 0; }
.wt-boy-liste b { color: #f0d890; }
.wt-radar-title .divan-detay-btn { margin-left: 10px; vertical-align: middle; }
/* 👑 [BEY-DAGILIM-1] köy köy bey durumu penceresi (TW Mevcut misyonerler karşılığı) */
.divan-beydurum-kutu { margin-top: 10px; }
.divan-beydurum-kutu .divan-action { margin-top: 4px; }
.divan-beydurum-pencere { width: min(600px, 100%); }
.divan-beydurum-kaydir { overflow-x: auto; }
.divan-beydurum-tablo th { width: auto; white-space: nowrap; }
.divan-beydurum-tablo td { font-variant-numeric: tabular-nums; }
.divan-beydurum-tablo td b { color: #8a5a10; }
.divan-beydurum-not { font-size: .76rem; color: #c8ab74; margin-top: 8px; line-height: 1.4; }
.building-level-info-panel {
margin-top: 12px;
}
.building-level-toggle {
width: 100%;
padding: 10px 12px;
font-weight: 700;
}
.building-level-info {
margin-top: 10px;
background: #ead19b;
border: 1px solid #8f6831;
border-radius: 4px;
overflow: hidden;
}
.building-detail-sheet {
padding: 10px;
color: #2b1a0d;
background:
linear-gradient(rgba(255, 249, 222, .82), rgba(236, 207, 143, .9)),
repeating-linear-gradient(90deg, rgba(112, 78, 33, .06) 0 1px, transparent 1px 18px);
}
.detail-sheet-title {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: center;
text-align: center;
margin-bottom: 10px;
color: #3b220d;
}
.detail-sheet-title > span {
height: 1px;
background: linear-gradient(90deg, transparent, #8a642d, transparent);
}
.detail-sheet-title b {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.12rem;
text-transform: uppercase;
}
.detail-sheet-title small {
display: block;
font-size: .72rem;
color: #6d4a1e;
margin-top: 2px;
}
.detail-summary-grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(170px, .8fr) minmax(130px, .55fr);
gap: 8px;
margin-bottom: 8px;
}
.detail-name-card,
.detail-visual-card,
.detail-rule-card,
.detail-mini-table {
border: 1px solid #b99054;
background: rgba(255, 242, 202, .72);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.detail-name-card {
padding: 10px;
}
.detail-name-card h3 {
margin: 0 0 4px;
font-size: 1.18rem;
color: #2b1608;
}
.detail-name-card p {
margin: 0 0 8px;
line-height: 1.32;
color: #573719;
font-size: .86rem;
}
.detail-stat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid #d2b77b;
border-left: 1px solid #d2b77b;
}
.detail-stat-grid span {
display: grid;
gap: 3px;
min-height: 44px;
padding: 6px;
place-items: center;
text-align: center;
border-right: 1px solid #d2b77b;
border-bottom: 1px solid #d2b77b;
font-weight: 800;
}
.detail-stat-grid b {
font-size: .67rem;
color: #5a3917;
}
.detail-visual-card,
.detail-rule-card {
padding: 8px;
display: grid;
align-content: start;
gap: 6px;
text-align: center;
}
.detail-building-art {
min-height: 94px;
display: grid;
place-items: center;
border: 1px solid #d2b77b;
background:
linear-gradient(rgba(61, 86, 39, .18), rgba(241, 215, 153, .18)),
url("/assets/village-isometric.png") center / cover;
}
.detail-building-art span {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 6px;
background: rgba(48, 27, 10, .78);
color: #fff2ce;
font-size: 2rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.detail-tier-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.detail-tier-row em {
padding: 3px 2px;
background: #f7e7bd;
border: 1px solid #d1ad6f;
font-style: normal;
font-size: .62rem;
color: #5b3b17;
}
.detail-rule-card strong {
font-size: 1.55rem;
color: #7d2c0b;
}
.detail-rule-card small,
.detail-rule-card span {
color: #5b3b17;
font-size: .76rem;
}
.detail-main-select-row {
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
}
.detail-table-grid {
display: grid;
grid-template-columns: 1.45fr .75fr .9fr 1.2fr;
gap: 8px;
align-items: start;
}
.detail-mini-table h4 {
margin: 0;
padding: 7px 8px;
color: #3d220d;
text-align: center;
font-size: .86rem;
background: linear-gradient(180deg, #ead09b, #d4ad64);
border-bottom: 1px solid #ad8445;
}
.detail-mini-scroll {
max-height: 276px;
overflow: auto;
}
.detail-mini-table table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.detail-mini-table th {
position: sticky;
top: 0;
z-index: 1;
padding: 6px 5px;
background: #fff3d1;
border-bottom: 1px solid #b99054;
color: #3d220d;
font-size: .72rem;
text-align: center;
}
.detail-mini-table td {
padding: 5px 5px;
border-bottom: 1px solid #d5b775;
border-right: 1px solid #e1c98f;
color: #27160a;
font-size: .76rem;
text-align: center;
}
.detail-mini-table td:last-child,
.detail-mini-table th:last-child {
border-right: 0;
}
.detail-mini-table tr:nth-child(even) td {
background: rgba(255, 248, 224, .5);
}
.detail-mini-table .current-level-row td {
background: #f4cd76;
font-weight: 900;
}
@media (max-width: 900px) {
.detail-summary-grid,
.detail-table-grid {
grid-template-columns: 1fr;
}
.detail-stat-grid {
grid-template-columns: repeat(2, 1fr);
}
.detail-main-select-row {
justify-content: stretch;
}
}
.building-troop-row {
display: grid;
/* 3. kolon auto: girdi+Max+Eğit yan yana sığar (Tahsin 2026-07-10; eskiden 128px alt alta) */
grid-template-columns: 52px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 0;
border-top: 1px solid #d2b37a;
}
.building-troop-row:first-of-type {
border-top: 0;
}
.watchtower-info {
display: grid;
gap: 8px;
margin-top: 10px;
}
.watchtower-info div {
display: grid;
grid-template-columns: 150px 1fr;
gap: 8px;
padding: 8px 10px;
border: 1px solid #c39b5e;
background: #f6e4b8;
color: #2a190c;
}
.watchtower-info b {
color: #6b260d;
}
/* 🏰 [KULE-RADAR] Gözetleme Kulesi gelen-saldırı tablosu (kule sayfası) */
.wt-radar-wrap { margin-top: 14px; }
.wt-radar-title { margin: 0 0 6px; color: #6b260d; font-size: 1rem; }
.wt-radar-legend { margin: 0 0 8px; padding: 6px 10px; font-size: .78rem; color: #4a2f16; background: #f6e4b8; border: 1px solid #c39b5e; border-radius: 4px; line-height: 1.6; }
.wt-radar-scroll { overflow-x: auto; }
.wt-radar-table { width: 100%; }
.wt-radar-table td .ov-coord { color: #7a5a3a; font-size: .82em; }
.wt-radar-empty { padding: 14px; text-align: center; color: #7a5a3a; background: #f6e4b8; border: 1px solid #c39b5e; }
.wt-radar-note { margin-top: 8px; font-size: .78rem; color: #7a5a3a; line-height: 1.5; }
.building-troop-icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
/* Eğitim satırında koyu kutu KALDIRILDI (Tahsin 2026-07-10) — ikon şeffaf zeminde direkt durur */
background: none;
border: none;
border-radius: 4px;
font-size: 1.65rem;
}
.building-troop-main {
display: grid;
gap: 3px;
}
.building-troop-main span,
.building-troop-main em {
color: #6e512d;
font-size: .82rem;
}
.building-troop-cost {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: .78rem;
color: #3e2a17;
}
.building-troop-actions {
/* Girdi + Max + Eğit YAN YANA (Tahsin 2026-07-10 — eskiden alt alta grid'di) */
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.building-troop-actions .train-input {
width: 72px;
flex: 0 0 auto;
}
#tab-map .game-content {
background: #3a2c1a;
border: 0;
}
#tab-map .section-title {
margin-top: 0;
}
#tab-map .map-legend {
padding: 8px 10px;
margin: 0;
background: linear-gradient(180deg, #fff0c8, #e5c88e);
border: 1px solid #9d7a42;
border-bottom: 0;
color: #3a2414;
}
#tab-map .map-wrapper {
margin-bottom: 0;
}
#tab-map .village-list {
margin-top: 10px;
border: 1px solid #9d7a42;
background: #ead2a3;
}
#tab-map .vl-card {
position: relative;
padding: 10px 12px;
background: linear-gradient(180deg, #fff2d2, #efd6a7);
}
#tab-map .vl-card.own {
background: linear-gradient(180deg, #fff6d8, #e9cd7e);
}
#tab-map .vl-card.barbar {
background: linear-gradient(180deg, #f1ead9, #d2c2a1);
}
#tab-map .game-content {
padding: 0;
background: #2a1f12;
}
#tab-map .section-title {
padding: 10px 14px;
margin: 0;
background: linear-gradient(180deg, #20150b, #0f0904);
border-bottom: 2px solid #c7a56a;
color: #fff0c6;
}
#tab-map .map-board {
grid-template-columns: minmax(0, 1fr) 310px;
gap: 10px;
padding: 8px;
background: linear-gradient(180deg, #f7e8c4, #dfc18a);
border: 1px solid #a47b3f;
}
#tab-map .map-wrapper {
border: 2px solid #24170b;
border-radius: 4px;
background: #203814;
}
#world-map {
width: 100%;
max-width: none;
aspect-ratio: 19 / 14;
image-rendering: auto;
display: block;
}
.world-map-surface {
position: relative;
min-height: 560px;
overflow: hidden;
cursor: grab;
background:
linear-gradient(rgba(18, 35, 10, .18), rgba(18, 35, 10, .08)),
url("assets/world-map-bg-v2.png") center / cover no-repeat;
box-shadow: inset 0 0 0 1px rgba(255, 244, 214, .22);
}
.world-map-surface::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(28, 52, 15, .38) 1px, transparent 1px),
linear-gradient(90deg, rgba(28, 52, 15, .38) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
mix-blend-mode: multiply;
}
.world-map-surface.dragging {
cursor: grabbing;
}
.world-map-surface::after {
content: "";
position: absolute;
inset: 0;
box-shadow: inset 0 0 38px rgba(0, 0, 0, .32);
pointer-events: none;
}
.map-coordinate-layer {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
color: rgba(255, 241, 202, .9);
font-size: .72rem;
font-weight: 900;
text-shadow: 0 1px 2px rgba(0,0,0,.65);
}
.map-tile-layer {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.map-tile {
position: absolute;
display: block;
border-right: 1px solid rgba(29, 55, 17, .16);
border-bottom: 1px solid rgba(29, 55, 17, .16);
}
.map-tile .tile-grass,
.map-tile .tile-forest,
.map-tile .tile-water {
position: absolute;
inset: 0;
display: block;
}
.map-tile .tile-forest::before,
.map-tile .tile-forest::after {
content: "";
position: absolute;
width: 36%;
height: 42%;
border-radius: 50%;
background: #1f5d28;
box-shadow: 9px 3px 0 #2f7630, 17px 8px 0 #244c19;
}
.map-tile .tile-forest::before { left: 18%; top: 18%; }
.map-tile .tile-forest::after { left: 40%; top: 36%; transform: scale(.8); }
.map-tile .tile-water {
border-radius: 45%;
transform: scale(.72);
background: radial-gradient(circle at 50% 45%, #4f8e8e, #1f5d66 70%);
opacity: .78;
}
.map-tile .tile-grass::before {
content: "";
position: absolute;
left: 28%;
top: 30%;
width: 36%;
height: 22%;
border-radius: 50%;
background: rgba(231, 208, 93, .14);
}
.map-coord-x,
.map-coord-y {
position: absolute;
}
.map-coord-x {
top: 6px;
transform: translateX(-50%);
}
.map-coord-y {
left: 7px;
transform: translateY(-50%);
}
.map-village-layer {
position: absolute;
inset: 0;
z-index: 4;
}
.map-village-marker {
position: absolute;
width: 58px;
height: 46px;
transform: translate(-50%, -100%);
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
filter: drop-shadow(0 4px 5px rgba(0,0,0,.42));
}
.map-village-marker.selected {
z-index: 8;
}
.map-village-marker.selected::after {
content: "";
position: absolute;
inset: -6px -8px -5px;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #2b1608, 0 0 12px rgba(255,255,255,.75);
}
.map-village-dot {
position: absolute;
right: 4px;
top: -3px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #2a1608;
background: #b00000;
z-index: 5;
}
.map-village-marker.current .map-village-dot { background: #f8eed2; }
.map-village-marker.own .map-village-dot { background: #fff200; }
.map-village-marker.barbar .map-village-dot { background: #a9a38f; }
.map-village-marker.other .map-village-dot { background: #b00000; }
.map-village-marker.enemy .map-village-dot { background: #ff2b22; }
.map-village-marker.ally .map-village-dot { background: #23a8d5; }
.map-village-marker.tribe .map-village-dot { background: #1538ff; }
.map-village-marker.pact .map-village-dot { background: #8b008b; }
.map-village-marker.treasure .map-village-dot { background: #d4a017 !important; box-shadow: 0 0 6px 2px rgba(212,160,23,.7); }
.map-village-treasure-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
filter: drop-shadow(0 0 3px rgba(212,160,23,.9)) drop-shadow(0 1px 1px rgba(0,0,0,.5));
pointer-events: none;
animation: treasure-pulse 1.6s ease-in-out infinite;
}
.map-village-treasure-icon svg {
width: calc(var(--marker-size, 28px) * 0.92);
height: calc(var(--marker-size, 28px) * 0.92);
display: block;
}
.treasure-inline-icon { display: inline-block; vertical-align: -0.22em; }
.treasure-inline-icon svg { width: 1.15em; height: 1.15em; display: inline-block; }
@keyframes treasure-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.map-village-marker.treasure-chest {
background: radial-gradient(circle, rgba(212,160,23,.35) 0%, transparent 70%);
}
/* 🚩 [REZERV-BAYRAK-1] Kendi sancağın KIRMIZI (varsayılan emoji rengi), müttefik MAVİ.
Emoji rengi doğrudan değiştirilemediği için hue-rotate ile maviye çevriliyor. */
.map-village-reserve-flag {
position: absolute;
left: 2px;
top: -6px;
font-size: 13px;
z-index: 6;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.map-village-reserve-flag.muttefik {
filter: hue-rotate(200deg) saturate(1.6) drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
/* ⭐ [FAZ4-14] favori köy işareti — sol-alt köşe (rezerv sol-üstte, çakışmaz) */
.map-village-fav-flag {
position: absolute; left: 2px; bottom: -4px; font-size: 12px; z-index: 6;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.map-action-btn.fav-aktif { background: #f6e3a8; border-color: #c9a227; }
.fav-eylemler { display: inline-flex; gap: 4px; margin-left: auto; }
.fav-eylemler button { background: #f7e8c2; border: 1px solid #c7a56a; border-radius: 4px; padding: 2px 6px; cursor: pointer; }
/* #2 Harita saldırı ikonları (Tahsin 2026-07-15) — SABİT, ışıltı/nabız/sayı YOK */
/* Sana gelen saldırı — sağ-üst köşe, sabit kırmızı işaret (savunma uyarısı) */
.map-village-attack-flag {
position: absolute;
right: -4px;
top: -8px;
z-index: 7;
font-size: 13px;
line-height: 1;
padding: 0 3px;
border-radius: 6px;
background: #c0392b;
color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.5);
pointer-events: none;
}
/* Gönderdiğin ordu hedefi — sağ-alt köşe, sadece ikon (saldırı ⚔️ / destek 🛡️) */
.map-village-target-flag {
position: absolute;
right: -3px;
bottom: -5px;
z-index: 6;
font-size: 12px;
line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
pointer-events: none;
}
.ks-legend-emoji { display: inline-block; font-size: 12px; margin-right: 4px; font-style: normal; line-height: 1; }
.map-village-icon {
position: absolute;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
object-fit: fill;
pointer-events: none;
}
.map-village-marker.barbar .map-village-icon {
filter: grayscale(.55) saturate(.72) brightness(.88);
}
.map-village-marker.other .map-village-icon,
.map-village-marker.enemy .map-village-icon {
filter: saturate(.88) brightness(.94);
}
.map-village-marker.current {
transform: translate(-50%, -100%) scale(1.18);
}
.map-side-panel {
min-height: 100%;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
}
.selected-map-village {
min-height: 176px;
padding: 10px;
border: 1px solid #c7a56a;
border-top: 0;
background:
linear-gradient(180deg, rgba(255,255,255,.25), transparent 34px),
#fff0c8;
}
.selected-empty {
min-height: 120px;
display: grid;
place-items: center;
color: #6b4b24;
font-weight: 800;
}
.selected-village-head {
display: grid;
grid-template-columns: 24px 1fr;
gap: 8px;
align-items: center;
margin-bottom: 10px;
padding-bottom: 9px;
border-bottom: 1px solid #d2b77b;
}
.selected-village-head b,
.selected-village-head small {
display: block;
}
.selected-village-head b {
color: #2b1608;
font-size: 1rem;
}
.selected-village-head small {
color: #68461f;
margin-top: 2px;
}
.selected-village-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid #d2b77b;
border-left: 1px solid #d2b77b;
margin-bottom: 10px;
}
.selected-village-stats span {
display: grid;
gap: 3px;
padding: 7px;
border-right: 1px solid #d2b77b;
border-bottom: 1px solid #d2b77b;
color: #2a190c;
font-weight: 800;
}
.selected-village-stats b {
color: #6b4b24;
font-size: .72rem;
}
.selected-village-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.map-action {
min-height: 34px;
border: 1px solid #5f3514;
border-radius: 4px;
color: #fff0c6;
font-weight: 900;
cursor: pointer;
}
.map-action:disabled {
opacity: .45;
cursor: not-allowed;
}
.map-action.attack { background: linear-gradient(180deg, #8f240e, #4b1007); }
.map-action.support { background: linear-gradient(180deg, #245d1c, #123b0e); }
.map-legend-table {
grid-column: 1 / -1;
border: 1px solid #c7a56a;
background: #f5e4b9;
color: #2c1a0c;
font-size: .82rem;
}
.legend-row {
display: grid;
grid-template-columns: 90px repeat(4, minmax(140px, 1fr));
min-height: 26px;
border-bottom: 1px solid #d5bb83;
}
.legend-row:last-child {
border-bottom: 0;
}
.legend-row b,
.legend-row span {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-right: 1px solid #d5bb83;
}
.map-swatch {
width: 14px;
height: 14px;
display: inline-block;
flex: 0 0 14px;
border: 1px solid #2a190c;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.map-swatch.current { background: #f8eed2; }
.map-swatch.own { background: #fff200; }
.map-swatch.barbar { background: #a9a38f; }
.map-swatch.other { background: #b00000; }
.map-swatch.tribe { background: #1538ff; }
.map-swatch.ally { background: #23a8d5; }
.map-swatch.pact { background: #8b008b; }
.map-swatch.enemy { background: #ff2b22; }
#tab-map .village-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0;
margin: 0 10px 10px;
max-height: 260px;
overflow: auto;
}
#tab-map .vl-card {
border: 1px solid #c7a56a;
border-top: 0;
border-radius: 0;
}
#tab-map .vl-card.selected {
outline: 2px solid #fff;
z-index: 1;
}
#tab-map .vl-name {
display: flex;
align-items: center;
gap: 6px;
}
.mini-map-surface {
position: relative;
width: 100%;
height: 190px;
margin: 8px 0 10px;
border: 2px solid #5a371b;
background:
linear-gradient(rgba(40, 70, 22, .42), rgba(40, 70, 22, .42)),
url("assets/world-map-bg-v2.png") center / cover no-repeat;
overflow: hidden;
}
.mini-map-surface::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(20,35,12,.35) 1px, transparent 1px),
linear-gradient(90deg, rgba(20,35,12,.35) 1px, transparent 1px);
background-size: 20% 20%;
}
.mini-map-dot {
position: absolute;
width: 7px;
height: 7px;
border: 1px solid #1d1006;
transform: translate(-50%, -50%);
background: #b00000;
z-index: 2;
}
.mini-map-dot.current { background: #f8eed2; }
.mini-map-dot.own { background: #fff200; }
.mini-map-dot.barbar { background: #a9a38f; }
.mini-map-dot.other { background: #b00000; }
.mini-map-dot.enemy { background: #ff2b22; }
.mini-map-dot.ally { background: #23a8d5; }
.mini-map-dot.tribe { background: #1538ff; }
.mini-map-dot.pact { background: #8b008b; }
.mini-map-view {
position: absolute;
border: 1px solid rgba(255,255,255,.7);
box-shadow: 0 0 0 1px rgba(0,0,0,.35);
background: rgba(255, 255, 255, .08);
z-index: 3;
}
/* Ust segment son tema katmani */
.quick-menu {
display: flex;
gap: 0;
overflow-x: auto;
background: linear-gradient(180deg, #2b261a, #171108);
border-bottom: 2px solid #c7a56a;
padding: 7px 10px 6px;
}
.quick-menu button {
flex: 0 0 86px;
min-height: 60px;
border: 0;
border-right: 1px solid rgba(255, 232, 180, .14);
background: transparent;
color: #f8e3b0;
cursor: pointer;
display: grid;
place-items: center;
gap: 3px;
font-size: .74rem;
}
.quick-menu button:hover {
background: rgba(255, 232, 180, .12);
}
.quick-menu span {
font-size: 1.35rem;
line-height: 1;
}
.quick-menu b {
font-weight: 700;
line-height: 1.05;
}
@media (max-width: 760px) {
.village-hotspot {
min-width: 66px;
padding: 4px 5px;
font-size: .65rem;
}
.village-hotspot b {
font-size: .86rem;
}
.building-upgrade-box,
.building-troop-row {
grid-template-columns: 1fr;
}
.building-entry {
grid-template-columns: 56px 1fr;
}
.building-entry-icon {
width: 52px;
height: 52px;
}
.map-board {
grid-template-columns: 1fr;
padding: 6px;
}
.map-side-panel {
order: 2;
}
.map-controls button {
width: 38px;
height: 38px;
}
}
@media (max-width: 900px) {
.construction-row-head {
display: none;
}
.construction-row {
grid-template-columns: 1fr;
gap: 5px;
align-items: stretch;
}
.construction-row-action .btn-upgrade {
width: 100%;
}
}
/* Kompakt koy plani: tek parca gorseli duvar icine sigdirir, tiklama noktalarini kucultur. */
.village-hero {
width: min(100%, 1060px);
height: auto;
min-height: 0;
aspect-ratio: 1 / 1;
margin: 0 auto 10px;
background-color: #171008;
background-image:
radial-gradient(circle at 50% 54%, rgba(92, 126, 45, .22), transparent 43%),
url("assets/village-isometric.png");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.village-hotspot {
z-index: 40;
min-width: 62px;
max-width: 88px;
padding: 3px 5px 4px;
border: 1px solid rgba(255, 232, 170, .45);
border-radius: 4px;
font-size: .64rem;
line-height: 1.02;
pointer-events: auto;
background: linear-gradient(180deg, rgba(58, 34, 14, .92), rgba(28, 15, 6, .92));
box-shadow: 0 2px 6px rgba(0, 0, 0, .38);
}
.village-hotspot b {
font-size: .82rem;
line-height: 1;
}
.village-hotspot span {
white-space: normal;
}
.hs-palace { left: 50%; top: 29%; }
.hs-main { left: 50%; top: 39%; }
.hs-barracks { left: 33%; top: 45%; }
.hs-stable { left: 67%; top: 45%; }
.hs-hidden { left: 42%; top: 49%; }
.hs-storage { left: 58%; top: 52%; }
.hs-workshop { left: 49%; top: 56%; }
.hs-market { left: 38%; top: 58%; }
.hs-watchtower { left: 76%; top: 32%; }
.hs-smithy { left: 64%; top: 61%; }
.hs-farm { left: 55%; top: 66%; }
.hs-woodcutter { left: 31%; top: 67%; }
.hs-quarry { left: 46%; top: 73%; }
.hs-iron { left: 68%; top: 73%; }
.hs-wall { left: 24%; top: 80%; }
@media (max-width: 760px) {
.village-hero {
width: 100%;
aspect-ratio: 1 / 1;
}
.village-hotspot {
min-width: 52px;
max-width: 72px;
padding: 2px 4px;
font-size: .54rem;
}
.village-hotspot b {
font-size: .68rem;
}
}
/* Harita gorsel katmani v56 */
#tab-map .map-board {
background:
linear-gradient(180deg, rgba(95, 55, 22, .25), rgba(50, 27, 10, .18)),
#d8b776;
border: 4px solid #2b1609;
box-shadow: 0 0 0 1px #ba8f44 inset, 0 8px 22px rgba(0, 0, 0, .38);
}
#tab-map .map-wrapper {
border: 4px solid #2b1609;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.05), transparent 12%),
radial-gradient(circle at 80% 60%, rgba(0,0,0,0.08), transparent 18%),
linear-gradient(135deg, #4f6f2f 0%, #5f7f35 45%, #476428 100%);
box-shadow:
inset 0 0 35px rgba(0,0,0,0.45),
0 0 12px rgba(0,0,0,0.7);
}
.world-map-surface {
background:
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .06), transparent 11%),
radial-gradient(circle at 82% 60%, rgba(0, 0, 0, .12), transparent 19%),
radial-gradient(circle at 34% 72%, rgba(225, 204, 90, .08) 0 2px, transparent 3px),
radial-gradient(circle at 66% 28%, rgba(27, 48, 17, .18) 0 1px, transparent 3px),
linear-gradient(135deg, rgba(79,111,47,.88) 0%, rgba(95,127,53,.82) 45%, rgba(71,100,40,.9) 100%),
url("assets/world-map-bg-v2.png") center / cover no-repeat;
border: 0;
box-shadow:
inset 0 0 35px rgba(0,0,0,0.45),
0 0 12px rgba(0,0,0,0.7);
}
.world-map-surface::before {
background-image:
linear-gradient(rgba(0,0,0,0.14) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.14) 1px, transparent 1px);
opacity: .18;
mix-blend-mode: multiply;
}
.map-tile {
border-right-color: rgba(0,0,0,0.14);
border-bottom-color: rgba(0,0,0,0.14);
}
.map-tile .tile-grass {
background:
radial-gradient(circle at 25% 30%, rgba(255,255,255,0.08) 1px, transparent 2px),
radial-gradient(circle at 74% 62%, rgba(24,44,15,0.18) 1px, transparent 3px),
linear-gradient(135deg, rgba(82,111,49,.38), rgba(64,92,39,.32));
}
.map-tile .tile-grass.g1 {
background:
radial-gradient(circle at 38% 70%, rgba(241,223,130,.08) 1px, transparent 3px),
linear-gradient(135deg, rgba(92,125,54,.34), rgba(70,101,43,.28));
}
.map-tile .tile-grass.g2 {
background:
radial-gradient(circle at 58% 28%, rgba(255,255,255,.06) 1px, transparent 2px),
linear-gradient(135deg, rgba(67,103,45,.34), rgba(55,83,35,.3));
}
.map-tile .tile-grass.g3 {
background:
radial-gradient(circle at 22% 48%, rgba(30,58,20,.2) 1px, transparent 3px),
linear-gradient(135deg, rgba(89,119,50,.26), rgba(60,91,36,.34));
}
.map-tile .tile-grass::before {
background:
radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 2px);
width: 100%;
height: 100%;
inset: 0;
border-radius: 0;
}
.map-tile .tile-forest {
filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.45));
}
.map-tile .tile-forest::before,
.map-tile .tile-forest::after {
width: 24%;
height: 27%;
border-radius: 50%;
background: #214a20;
box-shadow:
-12px 8px 0 #2d5a27,
10px 8px 0 #1f3f1e,
0 18px 0 #2a5222,
14px -5px 0 #315f2b,
-3px 25px 0 3px rgba(59,42,18,.72);
}
.map-tile .tile-forest::before {
left: 32%;
top: 21%;
}
.map-tile .tile-forest::after {
left: 52%;
top: 43%;
transform: scale(.82);
opacity: .95;
}
.map-tile .tile-water {
inset: 12% 8%;
border-radius: 45% 55% 50% 50%;
transform: rotate(-8deg);
background:
radial-gradient(circle at 45% 40%, #5fb6d0 0%, #3f8fb0 45%, #245d78 100%);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.35),
0 2px 3px rgba(0,0,0,.24);
opacity: .9;
}
.map-tile .tile-water::after {
content: "";
position: absolute;
left: 24%;
top: 34%;
width: 52%;
height: 18%;
border-top: 1px solid rgba(255,255,255,0.35);
border-radius: 50%;
transform: rotate(8deg);
}
.map-village-marker {
filter: drop-shadow(2px 6px 4px rgba(0,0,0,0.65));
}
.map-village-marker::before {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
width: 54%;
height: 24%;
border-radius: 50%;
background: rgba(0,0,0,.45);
transform: translateX(-50%);
z-index: 1;
}
.map-village-marker.selected::after {
inset: -10px -13px -8px;
border: 3px solid #f2d36b;
border-radius: 50%;
box-shadow:
0 0 0 3px rgba(70,35,10,0.8),
0 0 12px rgba(255,220,100,0.9);
z-index: 2;
}
.map-village-icon {
transform: none;
transform-origin: center bottom;
filter: drop-shadow(2px 4px 3px rgba(0,0,0,0.65));
image-rendering: auto;
z-index: 4;
}
.map-village-dot {
right: -10px;
top: -12px;
width: 12px;
height: 12px;
border: 2px solid #1b0c04;
box-shadow: 0 1px 2px rgba(0,0,0,.45);
z-index: 6;
}
.map-side-panel {
background: linear-gradient(180deg, #f3e1b1, #d9bd79);
border: 3px solid #3a1c0a;
box-shadow:
inset 0 0 18px rgba(90,45,10,0.28),
0 0 10px rgba(0,0,0,0.55);
color: #2b1609;
}
.map-side-panel h3,
.map-side-panel h4 {
background: linear-gradient(180deg, #3a1c0a, #1b0c04);
color: #f6d98a;
border-bottom: 2px solid #b88a38;
padding: 8px 12px;
font-family: Georgia, serif;
}
.selected-map-village {
background:
radial-gradient(circle at 20% 10%, rgba(255,255,255,.24), transparent 24%),
linear-gradient(180deg, #f3e1b1, #d9bd79);
border-color: #7c5521;
color: #2b1609;
}
.selected-village-head,
.selected-village-stats,
.selected-village-stats span {
border-color: rgba(92, 55, 18, .35);
}
.map-action {
border: 2px solid #2b1609;
color: #f8e6b0;
font-weight: bold;
box-shadow: inset 0 0 8px rgba(255,255,255,0.12);
}
.map-action.attack {
background: linear-gradient(180deg, #8b2a12, #3a0d04);
}
.map-action.support {
background: linear-gradient(180deg, #3f712d, #1f3f16);
}
.mini-map-surface {
background:
linear-gradient(rgba(49, 77, 35, .46), rgba(49, 77, 35, .46)),
url("assets/world-map-bg-v2.png") center / cover no-repeat;
border: 4px solid #2b1609;
box-shadow:
inset 0 0 12px rgba(0,0,0,0.45),
0 0 8px rgba(0,0,0,0.6);
}
.mini-map-surface::before {
background-image:
linear-gradient(rgba(0,0,0,.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,.18) 1px, transparent 1px);
opacity: .35;
}
.mini-map-dot {
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.mini-map-view {
border: 2px solid rgba(255, 230, 150, .9);
box-shadow:
0 0 0 1px rgba(43, 22, 9, .85),
0 0 8px rgba(255,220,100,.5);
background: rgba(255,255,255,.08);
}
/* Harita gorsel katmani v57: referans tarzi zemin ve yere oturan koy ikonlari */
.world-map-surface {
background:
linear-gradient(rgba(44, 66, 22, .12), rgba(44, 66, 22, .12)),
url("assets/world-map-bg-v3.png") center / cover no-repeat;
}
/* 🗺️ [FAZ4-18] (Tahsin: "arkaplanda belli belirsiz kareler"): ekran-sabit 50px dekor ızgarası
KAPATILDI — karo kenarlıkları/varyasyonları zaten sökülmüştü ama bu ::before kalıntısı
saydam ağaç/göl/dağ karolarının içinden görünüyordu (kamerayı takip etmediği için karo
sınırlarıyla da çakışmayan "kaymış kareler" izlenimi). app.js'teki karar da böyle:
"belirginlik sadece 5×5 ana ızgarada". */
.world-map-surface::before {
content: none;
}
.map-tile {
border-right-color: rgba(0, 0, 0, .10);
border-bottom-color: rgba(0, 0, 0, .10);
}
.map-tile .tile-grass {
background:
radial-gradient(circle at 30% 28%, rgba(255,255,255,.05) 1px, transparent 2px),
radial-gradient(circle at 70% 68%, rgba(25,45,15,.12) 1px, transparent 3px),
linear-gradient(135deg, rgba(87,111,40,.14), rgba(55,84,32,.12));
}
.map-tile .tile-forest {
opacity: .34;
filter: drop-shadow(1px 2px 2px rgba(0,0,0,.35));
}
.map-tile .tile-forest::before,
.map-tile .tile-forest::after {
width: 20%;
height: 24%;
background: #1f3f1e;
box-shadow:
-10px 7px 0 #2d5a27,
9px 8px 0 #244c19,
1px 17px 0 #315f2b,
12px -4px 0 #2d5a27;
}
.map-tile .tile-water {
opacity: .42;
inset: 18% 14%;
background:
radial-gradient(circle at 45% 40%, rgba(95,182,208,.82) 0%, rgba(63,143,176,.78) 45%, rgba(36,93,120,.8) 100%);
}
.map-village-marker {
transform: translate(-50%, -58%);
filter: none;
}
.map-village-marker.current {
transform: translate(-50%, -58%) scale(1.06);
}
.map-village-marker::before {
left: 50%;
bottom: -1px;
width: 46px;
height: 18px;
border-radius: 50%;
background: rgba(0,0,0,.35);
filter: blur(3px);
transform: translateX(-50%);
z-index: 1;
}
.map-village-marker::after {
content: "";
position: absolute;
left: 50%;
bottom: 1px;
width: 54px;
height: 24px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(27, 34, 12, .34), rgba(27, 34, 12, 0) 70%);
transform: translateX(-50%);
pointer-events: none;
z-index: 1;
}
.map-village-marker.selected::after {
left: 50%;
bottom: -2px;
width: 56px;
height: 30px;
inset: auto auto -2px 50%;
border: 2px solid rgba(242, 211, 107, .9);
border-radius: 50%;
background: radial-gradient(ellipse, rgba(77, 42, 12, .18), rgba(77, 42, 12, 0) 68%);
box-shadow:
0 0 0 1px rgba(58, 31, 9, .78),
0 0 6px rgba(255,220,100,.62);
transform: translateX(-50%);
z-index: 2;
}
.map-village-icon {
transform: scale(1.08);
transform-origin: center bottom;
filter: drop-shadow(0 8px 6px rgba(0,0,0,.45));
}
.map-village-dot {
right: 3px;
top: -5px;
width: 9px;
height: 9px;
border-width: 1px;
}
.mini-map-surface {
background:
linear-gradient(rgba(44, 66, 22, .24), rgba(44, 66, 22, .24)),
url("assets/world-map-bg-v3.png") center / cover no-repeat;
}
/* Harita gorsel katmani v58: Klanlar/Kabile referansina yakin kucuk koy sembolleri */
.map-village-marker {
transform: translate(-50%, -100%);
overflow: visible;
}
.map-village-marker.current {
transform: translate(-50%, -100%) scale(1.04);
}
.map-village-marker::before {
bottom: -2px;
width: 34px;
height: 12px;
background: rgba(0, 0, 0, .34);
filter: blur(2px);
}
.map-village-marker::after {
bottom: 0;
width: 38px;
height: 16px;
background: radial-gradient(ellipse, rgba(22, 32, 10, .28), rgba(22, 32, 10, 0) 72%);
}
.map-village-marker.selected::after {
bottom: -3px;
width: 42px;
height: 24px;
border: 2px solid rgba(238, 226, 170, .95);
box-shadow:
0 0 0 1px rgba(48, 30, 8, .82),
0 0 5px rgba(255,255,255,.55);
}
.map-village-icon {
inset: -10% -18% 0;
width: 136%;
height: 118%;
transform: none;
object-fit: fill;
object-position: center bottom;
filter: drop-shadow(0 5px 3px rgba(0,0,0,.48));
}
.map-village-dot {
right: -5px;
top: -7px;
width: 8px;
height: 8px;
}
.map-village-marker.barbar .map-village-icon {
filter: grayscale(.72) saturate(.58) brightness(.84) drop-shadow(0 5px 3px rgba(0,0,0,.48));
}
.map-village-marker.other .map-village-icon,
.map-village-marker.enemy .map-village-icon {
filter: saturate(.9) brightness(.93) drop-shadow(0 5px 3px rgba(0,0,0,.48));
}
/* Harita gorsel katmani v61: tek merkezli koy oturtma ayarlari */
:root {
--map-village-anchor: translate(-50%, -100%);
--map-village-current-anchor: translate(-50%, -100%) scale(1.04);
--map-village-shadow-width: 34px;
--map-village-shadow-height: 12px;
--map-village-ground-width: 38px;
--map-village-ground-height: 16px;
--map-village-selected-width: 42px;
--map-village-selected-height: 24px;
}
.map-village-marker {
transform: var(--map-village-anchor);
}
.map-village-marker.current {
transform: var(--map-village-current-anchor);
}
.map-village-marker::before {
width: var(--map-village-shadow-width);
height: var(--map-village-shadow-height);
}
.map-village-marker::after {
width: var(--map-village-ground-width);
height: var(--map-village-ground-height);
}
.map-village-marker.selected::after {
width: var(--map-village-selected-width);
height: var(--map-village-selected-height);
}
/* ============================================================
* YENİ HARITA TASARIMI (referans görsel)
* Tüm eski stillerin üzerine yazar (en sonda olduğu için)
* ============================================================ */
#tab-map .game-content,
#tab-map .map-board,
#tab-map .map-wrapper,
#tab-map .map-legend-table { display: none !important; }
.ks-map-shell {
display: grid;
grid-template-columns: 1fr 300px;
gap: 10px;
height: calc(100vh - 140px);
min-height: 600px;
padding: 8px;
background:
repeating-linear-gradient(45deg, #f4e4bc 0 2px, #ecd9a6 2px 4px);
border: 3px solid #3d2418;
border-radius: 8px;
margin: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
/* --- ANA HARITA --- */
.ks-map-area {
position: relative;
overflow: hidden;
border: 3px solid #2b1810;
border-radius: 6px;
background: #6F7D3A;
box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
}
.ks-map-area #world-map {
position: absolute !important;
inset: 22px 0 0 30px !important;
width: calc(100% - 30px) !important;
height: calc(100% - 22px) !important;
border: none !important;
border-radius: 0 !important;
background: #6F7D3A !important;
cursor: grab;
}
.ks-map-area #world-map.dragging { cursor: grabbing; }
/* Cetveller (üst/sol) */
.ks-ruler-top, .ks-ruler-left {
position: absolute;
background: linear-gradient(180deg, #3d2418, #2b1810);
color: #d4a85c;
font-family: 'Courier New', monospace;
font-size: 11px;
font-weight: bold;
z-index: 4;
pointer-events: none;
border-bottom: 1px solid #d4a85c;
border-right: 1px solid #d4a85c;
}
.ks-ruler-top { top: 0; left: 30px; right: 0; height: 22px; }
.ks-ruler-left { top: 22px; left: 0; bottom: 0; width: 30px; }
.ks-ruler-top span, .ks-ruler-left span {
position: absolute;
text-align: center;
width: auto;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
.ks-ruler-top span { top: 4px; transform: translateX(-50%); }
.ks-ruler-left span { left: 4px; transform: translateY(-50%); }
/* Eski cetvelleri gizle (üstte yeni cetvel var) */
.ks-map-area .map-coordinate-layer { display: none !important; }
/* Zoom kontrolleri (sağda) */
.ks-zoom-controls {
position: absolute;
top: 40px;
right: 12px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 25; /* harita köy katmanı z12/koordinat z18'in üstünde kalmalı, yoksa butonlar tıklanmıyor */
}
.ks-zoom-controls button {
width: 38px; height: 38px;
background: linear-gradient(180deg, #4a3018, #2b1810);
color: #d4a85c;
border: 2px solid #d4a85c;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all .15s;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.ks-zoom-controls button:hover {
background: linear-gradient(180deg, #6a4828, #4a3018);
color: #ffd98a;
transform: translateY(-1px);
}
/* 🗺️ [HARITA-7/9] Harita katman butonları (Alan ◎ / Gözetleme G) açıkken vurgulu */
.ks-zoom-controls button#ks-area-btn.active,
.ks-zoom-controls button#ks-goz-btn.active {
background: linear-gradient(180deg, #7a5a2a, #5a3f18);
color: #ffe6a0;
box-shadow: 0 0 0 1px rgba(246, 212, 136, .7) inset, 0 0 8px rgba(246, 212, 136, .35);
}
/* Mini harita (sol alt köşe) */
.ks-minimap-wrap {
position: absolute;
left: 38px;
bottom: 60px;
width: 170px;
height: 130px;
background: #1a0f08;
border: 3px solid #d4a85c;
border-radius: 4px;
overflow: hidden;
z-index: 7;
box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}
.ks-minimap-wrap #mini-map {
position: relative !important;
width: 100% !important;
height: 100% !important;
background: #1a3a14 !important;
cursor: pointer;
}
/* Lejant (alt çubuk) */
.ks-legend {
position: absolute;
left: 220px;
right: 12px;
bottom: 12px;
background: linear-gradient(180deg, rgba(244,228,188,0.97), rgba(228,210,160,0.97));
border: 2px solid #8b6f3f;
border-radius: 4px;
padding: 6px 12px;
font-size: 11px;
color: #2b1810;
z-index: 7;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.ks-legend-row {
display: flex;
gap: 16px;
align-items: center;
margin: 2px 0;
flex-wrap: wrap;
}
.ks-legend-row b { min-width: 60px; color: #5e2b18; }
.ks-dot {
display: inline-block;
width: 11px; height: 11px;
border: 1.5px solid #2b1810;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
box-shadow: inset 0 -1px 2px rgba(0,0,0,0.3);
}
.dot-current { background: #f8eed2; }
.dot-own { background: #f5d042; }
.dot-barbar { background: #999999; }
.dot-other,
.dot-enemy { background: #c92929; }
.dot-tribe { background: #2c5fc0; }
.dot-ally { background: #4ec8ff; }
/* --- KÖY MARKER GÜNCELLEMESİ --- */
.world-map-surface .map-village-marker {
transition: filter .15s;
}
.world-map-surface .map-village-marker:hover {
filter: drop-shadow(2px 6px 4px rgba(0,0,0,0.65)) brightness(1.15);
z-index: 5;
}
.world-map-surface .map-village-marker.selected {
z-index: 6;
}
/* Seçili köy halkası -- pseudo element transform'a etki etmesin */
.world-map-surface .map-village-marker.selected::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 160%;
height: 160%;
border: 3px solid #ffd98a;
border-radius: 50%;
box-shadow: 0 0 12px rgba(255, 217, 138, 0.75),
inset 0 0 6px rgba(255, 217, 138, 0.35);
background: transparent;
pointer-events: none;
animation: ks-pulse 1.8s ease-in-out infinite;
z-index: 2;
}
@keyframes ks-pulse {
0%, 100% { box-shadow: 0 0 12px rgba(255, 217, 138, 0.7), inset 0 0 6px rgba(255, 217, 138, 0.3); }
50% { box-shadow: 0 0 22px rgba(255, 217, 138, 1.0), inset 0 0 10px rgba(255, 217, 138, 0.5); }
}
/* Seçili köyün koordinat tooltip'i */
.ks-selected-tooltip {
position: absolute;
background: rgba(43, 24, 16, 0.95);
color: #ffd98a;
padding: 4px 10px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 12px;
font-weight: bold;
border: 1px solid #d4a85c;
white-space: nowrap;
z-index: 6;
transform: translateX(-50%);
pointer-events: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
/* --- SAĞ PANEL --- */
.ks-side {
background:
linear-gradient(180deg, rgba(244, 228, 188, 0.98), rgba(228, 210, 160, 0.98));
border: 3px solid #8b6f3f;
border-radius: 6px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: inset 0 1px 2px rgba(255,255,255,0.4);
overflow-y: auto;
}
.ks-side-title {
background: linear-gradient(180deg, #8b1a1a, #5e0f0f);
color: #ffd98a;
text-align: center;
font-family: 'Georgia', serif;
font-size: 16px;
font-weight: bold;
padding: 8px;
border: 2px solid #2b1810;
border-radius: 4px;
letter-spacing: 1px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.ks-village-preview {
display: flex;
justify-content: center;
align-items: center;
height: 110px;
background:
radial-gradient(ellipse at center, #6b8a48 0%, #4a6a30 100%);
border: 2px solid #8b6f3f;
border-radius: 4px;
margin-bottom: 6px;
position: relative;
}
.ks-village-preview img {
max-width: 80px;
max-height: 80px;
filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.5));
}
.ks-village-preview .ks-preview-flag {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: 14px; height: 14px;
border-radius: 50%;
border: 2px solid #2b1810;
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.ks-info-row {
display: flex;
justify-content: space-between;
padding: 6px 4px;
border-bottom: 1px dashed rgba(139, 111, 63, 0.5);
font-size: 13px;
color: #2b1810;
}
.ks-info-row b { color: #5e2b18; font-weight: 600; }
.ks-info-row span { font-weight: 700; }
.ks-actions { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ks-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px;
border: 2px solid #2b1810;
border-radius: 4px;
color: #ffffff;
font-size: 15px;
font-weight: bold;
cursor: pointer;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
transition: filter .15s, transform .1s;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.ks-action-btn:hover:not(:disabled) { filter: brightness(1.15); }
.ks-action-btn:active:not(:disabled) { transform: translateY(1px); }
.ks-action-btn:disabled {
background: linear-gradient(180deg, #888, #555) !important;
cursor: not-allowed;
opacity: 0.6;
}
.ks-attack { background: linear-gradient(180deg, #c92929, #8b1a1a); }
.ks-support { background: linear-gradient(180deg, #4a8a3c, #2e5a26); }
.ks-spy { background: linear-gradient(180deg, #5a7a9e, #2c4660); }
.ks-reserve { background: linear-gradient(180deg, #c7912f, #8a5c12); }
.ks-reserve-row span { color: #b6392c; }
.ks-favorite-btn {
margin-top: 6px;
background: transparent;
border: 2px dashed #8b6f3f;
color: #5e2b18;
padding: 8px;
font-size: 12px;
cursor: pointer;
border-radius: 4px;
font-weight: 600;
transition: background .15s;
}
.ks-favorite-btn:hover { background: rgba(212, 168, 92, 0.15); }
.ks-favorite-btn.active { color: #c98a2a; background: rgba(212, 168, 92, 0.2); }
.ks-side .selected-empty {
text-align: center;
color: #8b6f3f;
padding: 40px 12px;
font-style: italic;
}
/* Eski mini-map dot stilleri uygulanmaya devam etsin */
/* ============================================================
KLAN SİSTEMİ
============================================================ */
.clan-wrap { display: flex; flex-direction: column; gap: 16px; padding: 12px; }
.clan-header { background: linear-gradient(180deg,#2b1b10,#1a0e06); border: 1px solid #c7a56a; border-radius: 6px; padding: 14px; color: #fff0c6; }
.clan-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.clan-tag { background: #c7a56a; color: #2a1608; font-weight: 900; font-size: 1.1rem; padding: 2px 8px; border-radius: 4px; }
.clan-name { font-size: 1.2rem; font-weight: 700; color: #fff4d7; }
.clan-desc { color: #d4b88a; font-size: .88rem; margin: 4px 0 8px; }
.clan-meta { margin-bottom: 10px; }
.clan-member-count { font-size: .85rem; color: #a08050; }
.clan-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.clan-members-section { background: #f4e4bc; border: 1px solid #d2b77b; border-radius: 5px; padding: 12px; }
.clan-members-section h4 { margin: 0 0 10px; font-size: .92rem; color: #2a1608; }
.clan-members-list { display: flex; flex-direction: column; gap: 6px; }
.clan-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; flex-wrap: wrap; }
.member-info { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; }
.member-role { font-size: .82rem; font-weight: 700; }
.member-name { font-weight: 700; color: #2a1608; }
.member-village { color: #888; font-size: .8rem; }
.member-stats { font-size: .8rem; color: #6b4b24; }
.member-actions { display: flex; gap: 4px; }
.clan-no-clan { display: flex; flex-direction: column; gap: 16px; }
.clan-section { background: #f4e4bc; border: 1px solid #d2b77b; border-radius: 5px; padding: 14px; }
.clan-section h3 { margin: 0 0 12px; font-size: 1rem; color: #2a1608; }
.clan-create-form { display: flex; flex-direction: column; gap: 10px; }
.clan-form-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.clan-form-group { display: flex; flex-direction: column; gap: 4px; }
.clan-form-group label { font-size: .82rem; font-weight: 700; color: #6b4b24; }
.clan-form-group label small { font-weight: 400; color: #6b4b24; } /* [SIYAH-YAZI-1] */
.clan-form-group input { padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 4px; background: #f4e4bc; font-family: Georgia,serif; font-size: .9rem; color: #2a1608; }
#dip-clan-select, #dip-status-select { padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 4px; background: #f4e4bc; font-family: Georgia,serif; font-size: .85rem; color: #2a1608; }
.clan-list { display: flex; flex-direction: column; gap: 8px; }
.clan-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; }
.clan-list-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.clan-list-meta { font-size: .8rem; color: #2a190c; } /* [SIYAH-YAZI-1] */
/* 🔴 [SANCAK-ADI-OKUNMAZ-1] (Tahsin 2026-09-14 ekran görüntüsü: "bazı yazılarda okunmuyor")
.clan-name KOYU başlık şeridi için yazılmış (#fff4d7, beyaza yakın) ama AÇIK KREM
satırda (.clan-list-row background:#fff0c8) da kullanılıyordu → kontrast 1,02:1,
yani sancak adı GÖRÜNMÜYORDU. Üç liste birden etkileniyordu: bekleyen başvurular,
gelen davetler ve katılınacak sancaklar.
🕳️ Aynı satırdaki .clan-list-meta bir tur önce [SIYAH-YAZI-1] ile düzeltilmiş ama
.clan-name atlanmış — "bir kardeşini düzeltirken diğerine bak" dersi.
🔒 Genel .clan-name DEĞİŞTİRİLMEDİ: koyu .clan-header'da doğru çalışıyor; düzeltme
yalnız açık satıra kapsanıyor. */
.clan-list-row .clan-name { color: #2a190c; }
.clan-list-desc { font-size: .8rem; color: #6b4b24; margin: 2px 0 0; }
.btn-secondary-sm { padding: 5px 12px; background: linear-gradient(180deg,#6b4b24,#3a2010); color: #fff0c6; border: 1px solid #8b6030; border-radius: 4px; cursor: pointer; font-size: .82rem; font-family: Georgia,serif; font-weight: 700; }
.btn-secondary-sm:hover { background: #3a2010; }
.btn-secondary-sm:disabled { opacity: .55; cursor: default; }
.btn-xs { padding: 3px 8px; background: linear-gradient(180deg,#3a6010,#1e3a08); color: #c8f0a0; border: 1px solid #2a5010; border-radius: 3px; cursor: pointer; font-size: .76rem; font-family: Georgia,serif; font-weight: 700; }
.btn-xs:hover { background: #2a5010; }
.btn-danger-xs { background: linear-gradient(180deg,#8f240e,#4b1007); color: #ffd0c8; border-color: #6b1007; }
.btn-danger-xs:hover { background: #6b1007; }
.btn-primary-sm { padding: 6px 14px; background: linear-gradient(180deg,#c7912f,#8a5c12); color: #2a1608; border: 1px solid #ecc878; border-radius: 4px; cursor: pointer; font-size: .82rem; font-family: Georgia,serif; font-weight: 800; }
.btn-primary-sm:hover { filter: brightness(1.08); }
.btn-danger-sm { padding: 6px 14px; background: linear-gradient(180deg,#8f240e,#4b1007); color: #ffd0c8; border: 1px solid #6b1007; border-radius: 4px; cursor: pointer; font-size: .82rem; font-family: Georgia,serif; font-weight: 700; }
.btn-danger-sm:hover { background: #6b1007; }
/* ── Klan sekme barı ── */
.clan-tabbar { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid #c7a56a; padding-bottom: 0; }
/* 🎨 [SAMAN-SEKME-1] Tahsin (TW ekran görüntüsüyle): "sekmelerin rengini saman rengi
tarzı yap — beyaz hiçbir alan bırakmayacağız." Krem-beyaz #fff0c8/#fff8e8 ailesi
TW'nin doygun samanına çekildi. */
.clan-tab-btn { padding: 8px 14px; background: #ead3a0; border: 1px solid #b49058; border-bottom: none; border-radius: 6px 6px 0 0; cursor: pointer; font-family: Georgia,serif; font-size: .85rem; font-weight: 700; color: #5a3c16; }
.clan-tab-btn:hover { background: #e0c488; }
.clan-tab-btn.active { background: #f4e4bc; color: #2a1608; border-bottom: 2px solid #f4e4bc; margin-bottom: -2px; position: relative; }
.clan-tab-body { background: #f4e4bc; border: 1px solid #b49058; border-top: none; border-radius: 0 0 6px 6px; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.clan-genel-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.clan-genel-table th { text-align: left; padding: 8px 10px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.clan-genel-table td { padding: 7px 10px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.clan-genel-table tr:hover td { background: rgba(217,169,78,0.08); }
.clan-genel-date { white-space: nowrap; color: #8a6530; font-size: .8rem; }
/* ── Üyeler tablosu ── */
.clan-uyeler-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.clan-uyeler-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.clan-uyeler-table th { text-align: left; padding: 7px 9px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.clan-uyeler-table td { padding: 7px 9px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.clan-uyeler-table tr:hover td { background: rgba(217,169,78,0.08); }
.clan-role-tag { color: #8a4a12; font-weight: 700; font-size: .8rem; }
/* ── Üye yönetim modalı ── */
.clan-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; }
/* ── Merkezi oyuncu/klan link stili ── */
.player-link, .clan-link {
color: #8a4a12;
cursor: pointer;
text-decoration: none;
font-weight: 700;
}
.player-link:hover, .clan-link:hover { text-decoration: underline; color: #b6392c; }
/* ── Oyuncu/Klan Profili — building-page içinde sayfa olarak ── */
.player-profile-inline {
font-family: Georgia, serif;
color: #2a1608;
}
.player-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 700px) { .player-profile-grid { grid-template-columns: 1fr; } }
.player-profile-col { display: flex; flex-direction: column; gap: 14px; }
/* Profil kartları: beyaz yerine sıcak parşömen + tan başlık şeridi (temaya uyumlu). Tahsin 2026-07-10. */
.player-profile-section { background: linear-gradient(180deg, #f4e7c8, #e8d6a8); border: 1px solid #c19a52; border-radius: 8px; padding: 0 16px 12px; margin: 0 0 16px; box-shadow: 0 1px 3px rgba(60,35,10,.22); }
.player-profile-grid .player-profile-section { margin: 0; }
.player-profile-section h4 { margin: 0 -16px 12px; padding: 9px 15px; font-size: .92rem; color: #4a2e10; background: linear-gradient(180deg, #e7ce8e, #d8b76f); border-bottom: 1px solid #c19a52; border-radius: 8px 8px 0 0; }
.player-profile-section h4 small { font-weight: 400; color: #7c5f2f; font-size: .76rem; }
.player-stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #d9c496; font-size: .85rem; }
.player-stat-row:last-child { border-bottom: none; }
.player-stat-row span { color: #5f4a28; }
.player-stat-row b { color: #2a1608; text-align: right; }
.player-bio-text { margin: 0; font-size: .85rem; line-height: 1.5; color: #4a3520; white-space: pre-wrap; }
/* Kaydırılabilir stat kutusu (Puan + Durum İstatistiği): belirgin, kalın, SÜRÜKLENEBİLİR temalı scrollbar. Tahsin 2026-07-10. */
.player-scroll-table {
max-height: 200px; overflow-y: scroll; -webkit-overflow-scrolling: touch;
border: 1px solid #c19a52; border-radius: 6px; background: rgba(255,252,240,.4);
scrollbar-width: auto; scrollbar-color: #9c6d1c #e8d6a8; /* Firefox: kalın + temalı */
}
.player-scroll-table::-webkit-scrollbar { width: 15px; }
.player-scroll-table::-webkit-scrollbar-track { background: #e8d6a8; border-radius: 0 6px 6px 0; }
.player-scroll-table::-webkit-scrollbar-thumb { background: linear-gradient(#caa054, #9c6d1c); border-radius: 8px; border: 2px solid #e8d6a8; min-height: 32px; }
.player-scroll-table::-webkit-scrollbar-thumb:hover { background: linear-gradient(#d8ae62, #a5751f); }
.player-scroll-table::-webkit-scrollbar-thumb:active { background: linear-gradient(#8a5f16, #6f4a10); }
.player-mini-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.player-mini-table tr:nth-child(even) td { background: rgba(180,140,60,.08); }
.player-mini-table td { padding: 5px 8px; border-bottom: 1px solid #dcc99b; color: #2a1608; }
.player-mini-table tr:last-child td { border-bottom: none; }
/* Geçmiş Profili renk kodu (Tahsin 2026-07-12, spec profil-durum-akisi.ods): köy ALAN=mavi, köy KAYBETME + klan AYRIL=kırmızı, klan KATIL=yeşil. */
.player-mini-table .dst-date { color: #6b5a3e; white-space: nowrap; }
.player-mini-table .dst-take td:last-child { color: #1565c0; font-weight: 600; } /* köy alma (oyuncu/barbar) — MAVİ */
.player-mini-table .dst-lost td:last-child { color: #b23131; font-weight: 600; } /* köy kaybetme + klandan ayrılma — KIRMIZI */
.player-mini-table .dst-join td:last-child { color: #2e7d32; font-weight: 600; } /* klana katılma — YEŞİL */
.dst-plus { color: #8a5c12; cursor: pointer; font-weight: 700; text-decoration: none; margin-left: 2px; }
.dst-plus:hover { text-decoration: underline; }
.dst-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dst-link:hover { opacity: .8; }
.player-mini-table .dst-detail-row td { color: #4a3520; font-style: italic; background: rgba(150,110,40,.12); font-size: .78rem; }
/* 🎖️ Başarımlar Paneli (Tahsin 2026-07-12, sancak_basarimlar.ods) — oyun tan/altın teması. */
.ach-wrap { max-width: 1000px; margin: 0 auto; }
.ach-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ach-metrics { display: flex; gap: 10px; flex-wrap: wrap; font-size: .82rem; color: #6b4b24; font-weight: 600; }
.ach-metrics span { background: #f0dba8; border: 1px solid #d2b77b; border-radius: 8px; padding: 4px 10px; }
.ach-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 16px; border-bottom: 2px solid #d2b77b; padding-bottom: 8px; }
.ach-tab { background: #e8d4a8; border: 1px solid #c7a56a; color: #5c3d18; border-radius: 8px 8px 0 0; padding: 7px 14px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.ach-tab.active { background: #8a5c12; color: #fff; border-color: #8a5c12; }
.ach-tab-badge { background: #a01e1e; color: #fff; border-radius: 999px; padding: 0 6px; font-size: .72rem; margin-left: 3px; }
.ach-group { color: #5c3d18; margin: 16px 0 8px; font-family: Georgia, serif; border-left: 4px solid #c9a227; padding-left: 8px; font-size: 1.02rem; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ach-card { background: #fbf5e6; border: 1px solid #d2b77b; border-radius: 10px; padding: 11px 13px; box-shadow: 0 1px 3px rgba(90,60,20,.1); display: flex; flex-direction: column; }
.ach-card.ach-open { border-color: #c9a227; box-shadow: 0 0 0 2px rgba(201,162,39,.35); }
.ach-card.ach-done { opacity: .62; }
.ach-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ach-card-title { font-weight: 700; color: #2a1608; font-size: .92rem; }
.ach-state { font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.ach-state-locked { background: #e5d6b8; color: #5c4a30; } /* [SIYAH-YAZI-1] kilitli hissi zeminde */
.ach-state-open { background: #fff3cd; color: #8a5c12; }
.ach-state-done { background: #dcecdb; color: #2e6d33; }
.ach-reward { font-size: .8rem; color: #6b4b24; margin-bottom: 8px; flex: 1; }
.ach-bar { height: 7px; background: #e8d4a8; border-radius: 4px; overflow: hidden; }
.ach-bar-fill { height: 100%; background: linear-gradient(90deg, #c7912f, #8a5c12); border-radius: 4px; }
.ach-card.ach-open .ach-bar-fill { background: linear-gradient(90deg, #e0a800, #c9a227); }
.ach-card.ach-done .ach-bar-fill { background: #6bbf6b; }
.ach-progress { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; font-size: .8rem; color: #6b4b24; font-weight: 600; font-variant-numeric: tabular-nums; }
.ach-claim { background: #2e7d32; color: #fff; border: 0; border-radius: 7px; padding: 5px 12px; cursor: pointer; font-weight: 700; font-size: .82rem; }
.ach-claim:hover { background: #256428; }
/* 🏰🗺️ Kule + Hazine etkinlik ekranları (Tahsin 2026-07-13) — Etkinlikler sekmesi özel bölümleri. */
.ev-special { border: 2px solid #c9a227; border-radius: 12px; padding: 12px 16px; background: linear-gradient(180deg, #fdf8ec, #f6ecd2); box-shadow: 0 2px 8px rgba(120,80,20,.12); }
.ev-state { font-weight: 700; margin: 6px 0; padding: 6px 10px; border-radius: 8px; display: inline-block; }
.ev-state.ev-open { background: #dcecdb; color: #2e6d33; }
.ev-state.ev-prot { background: #f2e3b8; color: #5a3f12; } /* 🎨 [TEMA-HERYER-1] maviydi */
.ev-row { color: #5c3d18; font-size: .88rem; margin: 4px 0; }
.ev-claim-box { margin-top: 10px; background: #fff3cd; border: 1px solid #e0a800; border-radius: 9px; padding: 9px 12px; color: #6b4b24; font-size: .9rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 🎁 Hazine Sandığı etkinliği — 9 sandık ızgarası (içerik görünür, altın sikkeyle açılır). */
/* 🗑️ [SANDIK-KALDIR-1] Eski .sd-* stilleri kaldırıldı; yerine .ck-* (Çekiliş) geldi.
⚠️ Aşağıdaki `.rep-sandik` (savaş raporundaki sandık baskını bölümü) BAŞKA bir
sistemdir — haritadaki sandık köylerine saldırı raporu — o DURUYOR. */
/* ══════════ 🎁 ÇEKİLİŞ [CEKILIS-1] ══════════ */
.ck-kur { color: #2a190c; font-size: .82rem; } /* [SIYAH-YAZI-1] */
.ck-say { float: right; color: #7a5a20; font-weight: 700; }
.ck-uyari {
background: rgba(194, 29, 20, .07); border: 1px solid rgba(169, 121, 36, .5);
border-left: 4px solid #c21d14; border-radius: 6px;
padding: 10px 13px; margin: 10px 0 14px; color: #6b3018; font-size: .9rem; line-height: 1.55;
}
/* Katman seçimi — 3 kart */
.ck-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ck-tier {
background: linear-gradient(180deg, #f1e0b6, #f2e4c2); border: 2px solid #b58b41;
border-radius: 9px; padding: 14px; display: flex; flex-direction: column; gap: 7px;
box-shadow: inset 0 0 0 1px rgba(255, 246, 208, .6);
}
.ck-tier-ad { font-size: 1.15rem; font-weight: 800; color: #3c2408; }
.ck-tier-satir { font-size: .88rem; color: #5a3f18; }
.ck-tier-fiyat { font-size: .78rem; color: #7a6440; line-height: 1.5; }
.ck-tier-btn {
margin-top: auto; padding: 10px; border-radius: 6px; cursor: pointer;
background: linear-gradient(180deg, #c21d14, #7e0b07); color: #fff5cf;
border: 2px solid #a97924; font: 700 .95rem Georgia, serif;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.ck-tier-btn:hover { filter: brightness(1.08); }
/* Üst şerit: katman rozeti + bilet + günlük buton */
.ck-serit {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
background: rgba(255, 255, 255, .35); border: 1px solid rgba(140, 94, 34, .4);
border-radius: 6px; padding: 10px 13px; margin: 8px 0 10px;
}
.ck-rozet {
padding: 4px 12px; border-radius: 12px; font-weight: 800; font-size: .9rem;
background: rgba(201, 162, 39, .2); border: 1px solid #c9a227; color: #7a4d0d;
}
.ck-daily-btn {
margin-left: auto; padding: 9px 15px; border-radius: 5px; cursor: pointer;
background: linear-gradient(180deg, #c21d14, #7e0b07); color: #fff5cf;
border: 2px solid #a97924; font: 700 .92rem Georgia, serif; white-space: nowrap;
}
.ck-daily-btn:hover:not(:disabled) { filter: brightness(1.08); }
.ck-daily-btn small { display: block; font-size: .72rem; font-weight: 400; margin-top: 2px; }
/* 9 sandık */
.ck-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.ck-sandik {
background: rgba(255, 255, 255, .3); border: 1px solid rgba(140, 94, 34, .35);
border-radius: 8px; padding: 12px 8px 10px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 7px;
transition: transform .13s ease, box-shadow .13s ease, background .13s ease;
}
.ck-sandik:not(.ck-acik):hover {
transform: translateY(-3px); background: rgba(255, 255, 255, .5);
box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}
.ck-gorsel { width: 100%; max-width: 118px; height: auto; filter: drop-shadow(0 4px 5px rgba(60, 35, 10, .3)); }
.ck-ad { font-weight: 700; font-size: .95rem; color: #3c2408; }
.ck-odul { font-size: .84rem; font-weight: 700; color: #2e6d33; line-height: 1.45; }
.ck-sandik.ck-acik { background: rgba(46, 109, 51, .07); border-color: rgba(46, 109, 51, .35); }
.ck-ac-btn, .ck-yenile-btn {
width: 100%; padding: 8px 6px; border-radius: 5px; cursor: pointer;
background: linear-gradient(180deg, #f1dfad, #cdb27b); color: #4a2a0d;
border: 2px solid #9b7436; font: 700 .9rem Georgia, serif;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.ck-ac-btn:hover:not(:disabled), .ck-yenile-btn:hover:not(:disabled) { filter: brightness(1.07); }
.ck-pasif, .ck-ac-btn:disabled, .ck-yenile-btn:disabled, .ck-daily-btn:disabled {
opacity: .5; cursor: not-allowed; filter: grayscale(.4);
}
.ck-yenile-kutu {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px;
background: rgba(201, 162, 39, .1); border: 1px solid rgba(140, 94, 34, .35);
border-radius: 6px; padding: 11px 14px; font-size: .86rem; color: #5a3f18; line-height: 1.5;
}
.ck-yenile-kutu > span { flex: 1 1 260px; }
.ck-yenile-btn { width: auto !important; white-space: nowrap; padding: 10px 16px; }
/* 🎁 [CEKILIS-ICERIK-1] "Bu sette bunlar var" şeridi — oyuncu NELERİN olduğunu görür,
hangi sandıkta olduğunu görmez. Sunucu listeyi DEĞERE göre sıralı gönderir. */
.ck-set {
background: rgba(200, 161, 60, .10); border: 1px solid rgba(140, 94, 34, .38); /* 🎨 [TEMA-HERYER-1] mavi tint → altın tint */
border-left: 4px solid #c9a227; border-radius: 6px; padding: 10px 13px; margin: 10px 0 2px;
}
/* Başlık = aç/kapa düğmesi (tıklanabilir görünmeli) */
.ck-set-baslik {
display: flex; align-items: center; gap: 7px; width: 100%;
background: none; border: 0; padding: 0 0 8px; cursor: pointer;
font: 800 .92rem Georgia, 'Times New Roman', serif; color: #3c2408; text-align: left;
}
.ck-set-baslik:hover { color: #7a4d0d; }
.ck-set-baslik small { font-weight: 400; color: #7a6440; }
.ck-set-ok { color: #8a6a10; font-size: .8rem; width: 12px; }
.ck-set.ck-set-kapali .ck-set-baslik { padding-bottom: 0; }
.ck-set-liste { display: flex; flex-wrap: wrap; gap: 7px; }
.ck-set-oge {
background: rgba(255, 255, 255, .5); border: 1px solid rgba(140, 94, 34, .32);
border-radius: 13px; padding: 4px 11px; font-size: .84rem; color: #4a3418;
}
/* 🎫 Bilet yetmeyen sandık: ölü buton yerine "Bilet Al" (pazara götürür) */
.ck-sandik.ck-biletsiz .ck-gorsel { opacity: .72; filter: grayscale(.25) drop-shadow(0 4px 5px rgba(60,35,10,.28)); }
/* 🎨 [TEMA-HERYER-1] "Bilet Al" MAVİYDİ ve 9 sandıkta birden görünüyor — altın
düğme ailesine alındı (!important'lar korunuyor, eskisi de öyleydi). */
.ck-al-btn {
background: linear-gradient(135deg, #e4b64f, #c68a31) !important;
color: #2a1a04 !important; border-color: #a86f22 !important;
}
.ck-al-btn:hover { filter: brightness(1.1); }
/* İçerik sekmesi (yaklaşan etkinlik bilgi paneli) */
.ck-ic-katman { margin: 0 0 16px; }
.ck-ic-baslik { font-weight: 800; font-size: 1rem; color: #3c2408; margin: 0 0 6px; }
.ck-ic-baslik small { display: block; font-weight: 400; font-size: .78rem; color: #7a6440; margin-top: 2px; }
.kaydir-kutu { overflow-x: auto; }
.ck-ic-tablo { width: 100%; border-collapse: collapse; font-size: .85rem; background: rgba(255, 255, 255, .35); }
.ck-ic-tablo th {
text-align: left; background: linear-gradient(180deg, #3b190e, #1d0b05); color: #f6df9a;
font-weight: 700; padding: 6px 10px; font-size: .78rem; white-space: nowrap;
}
.ck-ic-tablo td { padding: 5px 10px; border-bottom: 1px solid rgba(140, 94, 34, .2); }
.ck-ic-tablo tr:last-child td { border-bottom: 0; }
.ck-ic-deger { color: #1a7a34; font-weight: 700; white-space: nowrap; text-align: right; }
.ck-ic-sans { color: #1a3a8f; font-weight: 800; white-space: nowrap; text-align: right; }
/* ══ Tahsin 2026-08-03 turu ══ */
/* ✅ Alınan ödülün üstü çizilir — "oyuncu kalan sandıklardan ne olduğunu bilsin".
Sadece line-through yetmiyor; solup geri plana düşmesi lazım ki KALANLAR öne çıksın. */
.ck-set-alindi {
text-decoration: line-through; text-decoration-color: rgba(122, 48, 24, .75); text-decoration-thickness: 2px;
opacity: .48; background: rgba(140, 94, 34, .1); color: #6b5333;
}
.ck-set-alt { font-size: .76rem; color: #7a6440; margin-top: 7px; font-style: italic; }
.ck-set.ck-set-kapali .ck-set-alt { display: none; }
/* ◀ Katman vitrinine gidip gelme düğmesi */
.ck-geri-btn {
padding: 5px 12px; border-radius: 12px; cursor: pointer; white-space: nowrap;
background: rgba(255, 246, 208, .6); border: 1px solid #a97924; /* 🎨 [TEMA-HERYER-1] beyazımsıydı; hover'ın (#fff6d0) ailesine */
font: 700 .84rem Georgia, serif; color: #5a3f18;
}
.ck-geri-btn:hover { background: #fff6d0; color: #3c2408; }
/* 🔒 Katman vitrini: seçili olan öne çıkar, diğerleri kilitli ve tıklanamaz görünür */
.ck-tier-secili { border-color: #1a7a34; box-shadow: 0 0 0 2px rgba(26, 122, 52, .3), inset 0 0 0 1px rgba(255, 246, 208, .6); }
.ck-tier-rozet {
font-size: .72rem; font-weight: 700; color: #1a7a34; background: rgba(26, 122, 52, .13);
border: 1px solid rgba(26, 122, 52, .45); border-radius: 10px; padding: 2px 8px; vertical-align: middle;
}
.ck-tier-kilit { opacity: .62; filter: grayscale(.55); background: linear-gradient(180deg, #f0ebe0, #ded5c3); }
.ck-tier-kilit-not {
margin-top: auto; padding: 9px 10px; border-radius: 6px; text-align: center;
background: rgba(60, 36, 8, .09); border: 1px dashed rgba(90, 63, 24, .5);
font-size: .8rem; font-weight: 700; color: #5a3f18; line-height: 1.45;
}
/* 📊 [CEKILIS-ICERIK-2] Etkinlik BAŞLADIKTAN sonra da açılan içerik/şans paneli.
Kutu .ck-set ile aynı görünür (aynı başlık düğmesini paylaşıyorlar) ama ayrı
sınıf: aç/kapa durumları birbirinden bağımsız olmalı. */
.ck-icerik-kutu {
background: rgba(200, 161, 60, .10); border: 1px solid rgba(140, 94, 34, .38); /* 🎨 [TEMA-HERYER-1] mavi tint + mavi şerit → altın */
border-left: 4px solid #8a6a18; border-radius: 6px; padding: 10px 13px; margin: 14px 0 2px;
}
.ck-icerik-kutu.ck-set-kapali .ck-set-baslik { padding-bottom: 0; }
.ck-icerik-govde { padding-top: 4px; }
/* 🎨 Katman rengi: TEK sandık çizimi var (Tahsin: "yalnızca renkleri değişecek").
Bronz/gümüş tonu görselden CSS filtresiyle türetilir — 3 ayrı dosya tutmaya gerek yok.
Altın katman = çizimin kendi rengi, filtre uygulanmaz. */
.ck-t1 .ck-gorsel { filter: drop-shadow(0 4px 5px rgba(60, 35, 10, .3)) sepia(.45) saturate(1.5) hue-rotate(-18deg) brightness(.88); }
.ck-t2 .ck-gorsel { filter: drop-shadow(0 4px 5px rgba(60, 35, 10, .3)) grayscale(.85) brightness(1.12); }
@media (max-width: 640px) {
.ck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-daily-btn { margin-left: 0; width: 100%; }
}
/* 🧠 Zihin Arenası — bilgi yarışması (15 sn/soru, ilk yanlışta eleme). */
.zihin-intro { margin: 6px 0; }
.zihin-start-btn { margin-top: 8px; font-size: .95rem; padding: 9px 16px; }
.zihin-quiz { margin: 8px 0; }
.zihin-hud { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: #5c3d18; margin-bottom: 6px; }
.zihin-timer { font-weight: 800; font-size: 1.15rem; min-width: 42px; text-align: center; color: #2e6d33; background: #dcecdb; border-radius: 8px; padding: 2px 10px; }
.zihin-timer.zihin-timer-low { color: #a12020; background: #f6d7d7; animation: zihinPulse .6s infinite; }
@keyframes zihinPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.zihin-bar { height: 7px; background: #e8d4a8; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.zihin-bar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #2e8b3a, #c9a227); transition: width .2s linear; }
.zihin-q { font-size: 1.05rem; font-weight: 700; color: #3a2408; margin-bottom: 12px; line-height: 1.35; }
.zihin-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .zihin-opts { grid-template-columns: 1fr; } }
.zihin-opt { background: #fbf5e6; border: 2px solid #d2b77b; border-radius: 10px; padding: 12px 14px; cursor: pointer; font-size: .92rem; font-weight: 600; color: #3a2408; text-align: left; transition: background .12s, border-color .12s; }
.zihin-opt:hover:not(:disabled) { background: #f3e6c4; border-color: #c9a227; }
.zihin-opt:disabled { cursor: default; }
.zihin-opt.zihin-picked { border-color: #2f6fb0; }
.zihin-opt.zihin-correct { background: #dcecdb; border-color: #2e8b3a; color: #23561f; }
.zihin-opt.zihin-wrong { background: #f6d7d7; border-color: #a12020; color: #7a1717; }
/* Etkinlik v2 (Tahsin 2026-07-13): yaklaşan kart bilgi paneli + bölüm bitiş sayacı */
.event-rules-text { color: #5c3d18; font-size: .9rem; line-height: 1.5; margin: 6px 0; }
.rwline-p { padding: 5px 0; border-bottom: 1px dashed #e0cfa0; font-size: .88rem; color: #5c3d18; }
.ev-endtimer { font-size: .78rem; font-weight: 700; color: #a3690f; background: #f3e6c4; border-radius: 999px; padding: 2px 10px; margin-left: 8px; vertical-align: middle; }
.zihin-result { text-align: center; padding: 14px 8px; }
.zihin-result-head { font-size: 1.25rem; font-weight: 800; color: #3a2408; margin-bottom: 8px; }
.zihin-result-score { font-size: 1.05rem; color: #5c3d18; margin-bottom: 4px; }
/* Sorular arası mola/tebrik ekranı (otomatik geçme yok) */
.zihin-feedback { text-align: center; padding: 18px 12px; border-radius: 12px; margin: 6px 0; }
.zihin-feedback.zihin-fb-ok { background: #dcecdb; border: 1px solid #2e8b3a; }
.zihin-feedback.zihin-fb-pause { background: #f3e6c4; border: 1px solid #c9a227; }
.zihin-fb-head { font-size: 1.2rem; font-weight: 800; color: #23561f; margin-bottom: 6px; }
.zihin-fb-pause .zihin-fb-head { color: #6b4b24; }
.zihin-fb-score { font-size: 1.02rem; color: #5c3d18; margin-bottom: 12px; }
.zihin-next-btn { font-size: .98rem; padding: 10px 20px; }
.zihin-fb-hint { font-size: .8rem; color: #2a190c; margin-top: 10px; font-style: italic; } /* [SIYAH-YAZI-1] */
.player-village-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.player-village-table th { text-align: left; padding: 7px 9px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.player-village-table td { padding: 7px 9px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.player-village-build-bar { width: 70px; height: 8px; background: #e8d4a8; border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; }
.player-village-build-fill { height: 100%; background: linear-gradient(90deg, #c7912f, #8a5c12); }
.player-village-table small { color: #8a6530; margin-left: 4px; }
/* ── Klan Profili özel ── */
/* ═══ 🏰 KULE ETKİNLİK DETAYI — Tahsin 2026-07-31 ═══
Oyuncu profili gibi açılır: üst menüde YERİ YOK, geldiği yere "← Geri" ile döner. */
.tower-detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px;
margin-bottom: 12px; background: linear-gradient(135deg, #5a3d1c, #3a2410); color: #ffdca8;
border: 1px solid #a87935; border-radius: 9px; }
.tower-detail-head b { font-size: 1.05rem; flex: 1; min-width: 180px; }
.tower-detail-back { border: 1px solid #b09468; background: #e0d0b0; color: #5a3a10; font: inherit;
font-size: .82rem; font-weight: 700; padding: 6px 13px; border-radius: 6px; cursor: pointer; }
.tower-detail-back:hover { background: #f2e2b8; }
.tower-history-wrap { overflow-x: auto; }
.tower-history { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tower-history th, .tower-history td { color: #3d1a05; padding: 6px 9px; border-bottom: 1px solid #e6d2a4;
text-align: left; white-space: nowrap; }
.tower-history th { background: #e0c088; font-size: .78rem; }
.tower-history tr:nth-child(even) td { background: rgba(255,255,255,.35); }
/* ═══ 📕🎁 OYUN İKONLARI (Tahsin 2026-08-01, arkadaşının oyunundan referans) ═══
Hızlı menünün altında iki küçük ikon: öğretici + günlük giriş. Rozet dikkat çeker,
tıklayınca pencere açılır. Ekranda yer kaplamaz — sayfa/sekme/şerit değil. */
/* 🗑️ [OYUN-IKON-1] Sol yüzen ikon barının kuralları KALDIRILDI (Tahsin 2026-08-23).
Bar index.html'den silindi; kuralları bırakmak ileride "bu ne?" sorusunu doğururdu. */.ikon-solda .oyun-ikon { width: 40px; height: 40px; font-size: 1.25rem; }
.oyun-ikon { position: relative; width: 46px; height: 46px; border-radius: 8px; cursor: pointer;
border: 1px solid #a87935; background: linear-gradient(180deg, #f7ecd4, #e6d2a8);
font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(60,35,10,.28); transition: transform .12s, filter .12s; }
.oyun-ikon:hover { transform: translateY(-2px); filter: brightness(1.06); }
.oyun-ikon:active { transform: translateY(0); }
.oyun-ikon-rozet { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
padding: 0 4px; border-radius: 9px; background: #c4342a; color: #fff; font-size: .72rem;
font-weight: 800; line-height: 18px; text-align: center; border: 1px solid #fff2d0;
box-shadow: 0 1px 3px rgba(0,0,0,.4); animation: ikonNabiz 1.6s ease-in-out infinite; }
@keyframes ikonNabiz { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .oyun-ikon-rozet { animation: none; } }
/* ═══ 🛤️ SANCAK YOLU ŞERİDİ — OYUNUN ORTASINDA (Tahsin 2026-08-01) ═══
Sekme DEĞİL: köy ekranının üstünde ince bir şerit. Üç bölmenin YALNIZCA sıradaki adımı.
Oyuncu kademe bastıkça şerit kendiliğinden bir sonraki adıma geçer. */
.yol-serit { margin: 0 0 10px; background: linear-gradient(180deg, #f7ecd4, #efe0bc);
border: 1px solid #a87935; border-radius: 9px; overflow: hidden;
box-shadow: 0 2px 8px rgba(60,35,10,.18); }
.ys-ust { display: flex; align-items: center; gap: 10px; padding: 7px 12px;
background: linear-gradient(135deg, #5a3d1c, #3a2410); color: #ffdca8; }
.ys-ust b { font-size: .95rem; flex: 1; }
.ys-genel { font-size: .8rem; color: #e0c48a; font-variant-numeric: tabular-nums; }
.ys-gizle { border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.25); color: #ffdca8;
width: 24px; height: 24px; border-radius: 5px; cursor: pointer; font-size: .85rem; line-height: 1; }
.ys-gizle:hover { background: rgba(0,0,0,.5); color: #fff; }
.ys-satir { display: flex; align-items: center; gap: 9px; padding: 8px 12px; color: #3d1a05;
border-top: 1px solid #ddc9a0; flex-wrap: wrap; }
.ys-satir.ys-hazir { background: #e8f0d8; }
.ys-satir.ys-bitti { opacity: .72; }
.ys-bolme { font-size: .78rem; font-weight: 700; color: #6b4a1e; min-width: 92px; }
.ys-ic { font-size: 1.2rem; }
.ys-gorev { flex: 1; min-width: 170px; font-size: .87rem; display: flex; flex-direction: column; gap: 2px; }
.ys-hedef { color: #7a5320; font-weight: 600; }
.ys-oran { display: block; height: 5px; background: #ddc9a0; border-radius: 3px; overflow: hidden; max-width: 260px; }
.ys-oran i { display: block; height: 100%; background: linear-gradient(90deg, #c98a2a, #e4b64f); }
.ys-durum { color: #7a5a2a; font-size: .74rem; font-variant-numeric: tabular-nums; }
/* 🔒 Açılış şartı eksikse sebebini göster — oyuncu "yapamıyorum" diye takılmasın */
.ys-kilit { color: #a8481b; font-size: .74rem; font-weight: 600; }
.ys-adim { font-size: .75rem; color: #8a6a3a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ys-goster, .ys-topla, .ys-bilgi { border: 1px solid #8a5010; font: inherit; font-size: .78rem;
font-weight: 700; padding: 5px 11px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.ys-goster { background: #e4b64f; color: #4a2408; }
.ys-goster:hover { background: #f5d76e; }
.ys-topla { background: linear-gradient(180deg, #7cb342, #5a9c2a); color: #fff; border-color: #4a7a1a; }
.ys-topla:hover { filter: brightness(1.1); }
.ys-bilgi { background: #efe0bc; color: #5a3a10; border-color: #b09468; padding: 5px 9px; }
.ys-bilgi:hover { background: #f7ecd4; }
.yol-serit-kapali { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 7px 12px; font-size: .83rem; color: #5a3a10; }
.yol-serit-kapali button { border: 1px solid #8a5010; background: #e4b64f; color: #4a2408;
font: inherit; font-size: .78rem; font-weight: 700; padding: 4px 11px; border-radius: 6px; cursor: pointer; }
@media (max-width: 620px) {
.ys-bolme { min-width: 0; }
.ys-adim { display: none; }
}
/* ═══ 🛤️ SANCAK YOLU (öğretici) — Tahsin 2026-07-31 ═══ */
.yol-ust { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 11px 14px;
background: linear-gradient(135deg, #5a3d1c, #3a2410); color: #ffdca8;
border: 1px solid #a87935; border-radius: 9px 9px 0 0; }
.yol-baslik { font-weight: 800; font-size: 1.05rem; }
.yol-bar { flex: 1; min-width: 120px; height: 9px; background: rgba(0,0,0,.4); border-radius: 5px; overflow: hidden; }
.yol-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c98a2a, #e4b64f); }
.yol-genel { font-size: .84rem; font-variant-numeric: tabular-nums; }
.yol-not { margin: 0; padding: 8px 14px; background: #f0dfb8; border: 1px solid #c19a52; border-top: none;
color: #5a3a10; font-size: .82rem; }
.yol-tabs { display: flex; gap: 3px; flex-wrap: wrap; background: #e8d5a0; padding: 6px 6px 0;
border: 1px solid #c19a52; border-top: none; }
.yol-tab { background: #f2e2b8; color: #7a5320; border: 1px solid #c19a52; border-bottom: none;
border-radius: 7px 7px 0 0; padding: 8px 14px; font: inherit; font-size: .87rem; font-weight: 700; cursor: pointer; }
.yol-tab:hover { background: #f9eecd; color: #4a2c0c; }
.yol-tab.active { background: #f1e0b6; color: #3d1a05; }
.yol-say { font-size: .76rem; color: #8a6a3a; font-variant-numeric: tabular-nums; }
.yol-tab-badge { background: #a8641b; color: #fff3d8; font-size: .7rem; font-weight: 800;
border-radius: 9px; padding: 0 6px; margin-left: 3px; }
.yol-aciklama { margin: 0; padding: 9px 14px; background: #f1e0b6; border: 1px solid #c19a52; border-top: none;
color: #6b4a1e; font-size: .84rem; }
.yol-liste { background: #f1e0b6; border: 1px solid #c19a52; border-top: none;
border-radius: 0 0 9px 9px; padding: 12px 14px; }
.yol-sat { background: #f5e6c8; border: 1px solid #c9a86a; border-radius: 7px; padding: 9px 11px;
margin-bottom: 8px; color: #3d1a05; }
.yol-sat-ust { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.yol-ic { font-size: 1.25rem; }
.yol-ad { font-weight: 700; font-size: .92rem; flex: 1; min-width: 120px; }
.yol-deger { font-size: .8rem; color: #6b4a1e; font-variant-numeric: tabular-nums; }
.yol-goster { border: 1px solid #8a5010; background: #e4b64f; color: #4a2408; font: inherit;
font-size: .76rem; font-weight: 800; padding: 4px 11px; border-radius: 6px; cursor: pointer; }
.yol-goster:hover { background: #f5d76e; }
/* 🗑️ [TEMA-HERYER-1] Kral Yolu'nun iptal edilen "85 kademe liste" tasarımının ölü
CSS'i (.yol-ogret/.yol-kademeler/.yol-kad*/.yol-odul/.yol-alindi/.yol-topla)
SİLİNDİ — app.js/index.html'de tek kullanım yok (grep'le doğrulandı) ve #fff
zeminler içeriyordu; eski tasarım geri gelirse beyaz sızdırırdı. */
/* ═══════════ 🛤️ [KRAL-YOLU-V2] görev penceresi (Klanlar modeli, Tahsin 2026-09-08) ═══════════ */
#ky2-simge { position: fixed; left: 10px; top: 130px; z-index: 3500; width: 52px; height: 52px;
border-radius: 10px; border: 2px solid #8b6914; background: linear-gradient(180deg, #3a2b16, #241708);
cursor: pointer; padding: 4px; box-shadow: 0 3px 10px rgba(0,0,0,.45); }
#ky2-simge img { width: 100%; height: 100%; object-fit: contain; }
#ky2-simge .msg-badge { position: absolute; top: -6px; right: -6px; display: inline-grid; place-items: center;
min-width: 16px; height: 16px; font-size: .62rem; }
.ky2-arka { position: fixed; inset: 0; background: rgba(20, 12, 4, .62); z-index: 9200;
display: grid; place-items: center; padding: 16px; }
.ky2-pencere { position: relative; width: min(740px, 96vw); max-height: 92vh; overflow-y: auto;
border: 3px solid #4a3722; border-radius: 12px; background: linear-gradient(180deg, #f0e2be, #e4d2a6);
color: #2a190c; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.ky2-kapat { position: absolute; top: 8px; right: 10px; z-index: 3; width: 34px; height: 34px;
border-radius: 7px; border: 1px solid #c9a227; background: rgba(20,11,3,.6); color: #f0dfae;
font-size: 1rem; cursor: pointer; }
.ky2-kapat::after { content: ""; position: absolute; inset: -4px; }
.ky2-kapat:hover { background: #c9a227; color: #2e1c08; }
.ky2-banner { height: 84px; background: url("images/ui/kral-yolu.png") center/cover; }
.ky2-sekmeler { display: flex; gap: 8px; justify-content: center; padding: 8px;
background: linear-gradient(180deg, #6b1610, #48100b); }
.ky2-sek { padding: 6px 16px; border-radius: 6px; border: 1px solid #8b6914; font-weight: 700;
font-size: .82rem; background: linear-gradient(180deg, #3a2b16, #241708); color: #c8ab74; cursor: pointer; }
.ky2-sek.etkin { color: #f0d890; border-color: #f0d890; }
.ky2-sek.ky2-kilitli { opacity: .55; }
.ky2-sek small { font-size: .62rem; }
.ky2-rz { background: #cc2200; color: #fff; border-radius: 999px; padding: 0 6px; font-size: .68rem; margin-left: 4px; }
.ky2-kat-sekmeler { display: flex; border-bottom: 1px solid #c7a56a; }
.ky2-kat { flex: 1; padding: 7px 4px; font-size: .78rem; font-weight: 700; border: 0; cursor: pointer;
background: rgba(255,255,255,.2); color: #7a6440; border-right: 1px solid #d9c496; }
.ky2-kat:last-child { border-right: 0; }
.ky2-kat.etkin { background: #f6e3a8; color: #6b3c11; }
.ky2-kat small { font-weight: 400; color: #7a6440; }
.ky2-gov { display: grid; grid-template-columns: 190px 1fr; min-height: 280px; }
.ky2-sol { border-right: 1px solid #c7a56a; background: rgba(255,255,255,.25); }
.ky2-sol-madde { padding: 9px 12px; font-size: .8rem; border-bottom: 1px solid #d9c496; }
.ky2-sol-madde.aktif { background: #f6e3a8; font-weight: 700; }
.ky2-sol-madde.bitti { color: #4a3010; }
.ky2-sol-madde.bitti::after { content: " ✓"; color: #1d7a1d; font-weight: 800; }
.ky2-gorev-bas { background: linear-gradient(180deg, #8f240e, #5c1408); color: #ffe9c8;
padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.ky2-gorev-bas b { font-size: 1.02rem; font-family: Georgia, serif; display: block; }
.ky2-gorev-bas small { color: #e8b890; }
.ky2-kupa { font-size: 1.5rem; }
.ky2-icerik { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 14px 4px; }
.ky2-sultan { width: 96px; border-radius: 8px; border: 2px solid #8b6914; align-self: start; }
.ky2-metin { font-size: .84rem; font-style: italic; color: #3d2408; line-height: 1.55; }
.ky2-hedefler { display: grid; gap: 10px; padding: 8px 14px 16px; }
.ky2-hedef-ad { font-weight: 700; font-size: .86rem; }
.ky2-cubuk { height: 16px; border: 1px solid #a87935; border-radius: 999px; background: #ddd0ae;
overflow: hidden; position: relative; margin-top: 3px; }
.ky2-cubuk i { display: block; height: 100%; background: linear-gradient(180deg, #8f240e, #5c1408); }
.ky2-cubuk.dolu i { background: linear-gradient(180deg, #3f7f24, #2c5a17); }
.ky2-cubuk span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .68rem;
font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; }
.ky2-odul-not { font-size: .78rem; color: #4a3010; }
.ky2-tamamla { justify-self: center; background: linear-gradient(#68a844, #3f7f24); color: #fff;
border: 1px solid #2c5a17; border-radius: 7px; padding: 10px 30px; font-weight: 800;
font-size: .92rem; cursor: pointer; }
.ky2-tebrik { padding: 40px 20px; text-align: center; font-size: .95rem; color: #3d2408; font-style: italic; }
.ky2-yukleniyor { padding: 50px; text-align: center; color: #6b4a1f; }
.ky2-odul-bas { background: linear-gradient(180deg, #8f240e, #5c1408); color: #ffe9c8; padding: 9px 14px; }
.ky2-odul-bas b { font-family: Georgia, serif; }
.ky2-odul-bas div { font-size: .78rem; margin-top: 2px; }
.ky2-odul-bas2 { background: linear-gradient(180deg, #5a3d1a, #38240e); color: #f0d890;
padding: 7px 14px; font-weight: 700; font-family: Georgia, serif; font-size: .88rem; }
.ky2-odul-not2 { font-size: .76rem; color: #4a3010; padding: 8px 14px; line-height: 1.5; }
.ky2-odul-kaydir { overflow-x: auto; }
.ky2-tablo { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ky2-tablo th { background: #e9d19e; color: #5b2b0c; padding: 5px 10px; text-align: left; border: 1px solid #d9bb7c; }
.ky2-tablo td { padding: 5px 10px; border: 1px solid #d9bb7c; background: #f4e4bc; color: #2a190c; }
.ky2-tablo tr:nth-child(even) td { background: #efe0b0; }
.ky2-orta { text-align: center; }
.ky2-talep { background: linear-gradient(#68a844, #3f7f24); color: #fff; border: 1px solid #2c5a17;
border-radius: 5px; padding: 4px 12px; font-weight: 800; font-size: .74rem; cursor: pointer; }
.ky2-talep.ky2-tumu { background: linear-gradient(180deg, #f0d890, #c9931a); color: #2a1608; border-color: #8b6914; }
@media (max-width: 640px) { .ky2-gov { grid-template-columns: 1fr; } .ky2-sol { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #c7a56a; } .ky2-sol-madde { white-space: nowrap; border-bottom: 0; border-right: 1px solid #d9c496; } }
/* 👉 Göster: hedef binayı nabız + ok ile işaretle */
.yol-parla { position: relative; box-shadow: 0 0 0 3px #e4b64f, 0 0 22px rgba(228,182,79,.8) !important;
background: #fff8e0 !important; z-index: 5; animation: yolNabiz 1.1s ease-in-out infinite; }
@keyframes yolNabiz {
0%, 100% { box-shadow: 0 0 0 3px #e4b64f, 0 0 10px rgba(228,182,79,.5); }
50% { box-shadow: 0 0 0 4px #e4b64f, 0 0 30px rgba(228,182,79,1); }
}
/* [KY2-OK-BUYUK-1] Tahsin: "gösterge okunu büyüt — çok ince ve küçük." 1.6rem → 3.2rem,
kalın kontur + parlama; JS'teki yarı-genişlik hesapları (-26px) bu boyuta göre. */
.yol-ok { position: absolute; left: 50%; top: -56px; transform: translateX(-50%); font-size: 3.2rem;
font-weight: 900; line-height: 1; color: #ffcf3f; animation: yolZipla .7s ease-in-out infinite;
pointer-events: none; -webkit-text-stroke: 2px #6b3c00;
text-shadow: 0 0 4px rgba(0,0,0,.9), 0 3px 10px rgba(0,0,0,.65), 0 0 18px rgba(255,207,63,.9);
z-index: 6; }
@keyframes yolZipla { 0%, 100% { top: -56px; } 50% { top: -38px; } }
/* [FAZ7-8] atanmamış Hazır Birlik düğmesi: soluk "örnek" görünüm (dolu sanılmasın) */
.map-action-btn.hb-empty, .map-toolbar button.hb-empty { opacity: .45; filter: grayscale(.6); }
/* 🎯 [FAZ3-15] Koordinata Git hedef karo vurgusu — yolNabiz animasyonunu paylaşır */
.map-hedef-layer { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
/* 🎯 [HARITA-NISAN-1] (Tahsin madde 9: "haritada KIRMIZI noktalama yok") — nişan altın
(#e4b64f) idi ve uygulamadaki eşi kırmızıydı (#e23a2c). İki istemci ayrışıyordu;
Tahsin'in tarifi kırmızı. Renk uygulamayla eşitlendi. */
.map-hedef-vurgu { position: absolute; border: 3px solid #e23a2c; border-radius: 8px;
box-shadow: 0 0 0 2px #2b1608, 0 0 18px rgba(226,58,44,.85);
animation: yolNabiz 1.1s ease-in-out infinite; }
/* [FAZ1-10] Hızlı menü hedefli ok: body'ye sabitlenir (menünün overflow kırpması onu yutuyordu);
top/left JS'ten gelir, zıplama margin ile (yolZipla top'u ezerdi). */
.yol-ok.yol-ok-sabit { position: fixed; transform: none; z-index: 10001; animation: yolZiplaSabit .7s ease-in-out infinite; }
@keyframes yolZiplaSabit { 0%, 100% { margin-top: 0; } 50% { margin-top: 9px; } }
/* [FAZ1-10] 12659'daki .village-hero .village-hotspot background !important parlamayı eziyordu */
.village-hero .village-hotspot.yol-parla { background: #fff8e0 !important; }
@media (prefers-reduced-motion: reduce) { .yol-parla, .yol-ok, .map-hedef-vurgu { animation: none; } }
/* 🎉 Hoşgeldin penceresi — Tahsin: "oyuncu elle kapatabileceği bişey olmalı" */
.yol-hos-arka { position: fixed; inset: 0; background: rgba(20,12,4,.72); z-index: 9000;
display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.yol-hos { background: #f1e0b6; border: 2px solid #a87935; border-radius: 12px;
width: min(620px, 100%); max-height: 92vh; overflow-y: auto; position: relative;
box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.yol-hos h2 { margin: 0; padding: 18px 20px 4px; text-align: center; font-size: 1.4rem; color: #3d1a05; }
.yol-hos-alt { margin: 0 0 14px; padding: 0 20px; text-align: center; color: #6b4a1e; font-size: .9rem; }
/* [FAZ2-2] (Tahsin: "çarpıya zor tıklanıyor"): z-index:2 ŞART — günlük pencerede filter'lı
başlık (gg-bugun-ust drop-shadow) stacking context alıp DOM sırasıyla ✕'in ÜSTÜNE boyanıyor
ve tıklamayı GÖRÜNMEZCE yutuyordu (background-clip:text yüzünden örtme görünmez).
30→34px + ::after payıyla dokunma alanı 42×42. */
.yol-hos-kapat { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 7px; z-index: 2;
border: 1px solid #b09468; background: #e8d5a0; color: #7a3a05; font-size: 1rem; font-weight: 800; cursor: pointer; }
.yol-hos-kapat::after { content: ""; position: absolute; inset: -4px; }
.yol-hos-kapat:hover { background: #f5d76e; }
.yol-hos-uc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 18px; }
.yol-hos-kart { background: #f5e6c8; border: 1px solid #c9a86a; border-top: 4px solid #c9a86a;
border-radius: 8px; padding: 11px; text-align: center; color: #3d1a05; }
.yol-hos-kart.a { border-top-color: #a8481b; } .yol-hos-kart.k { border-top-color: #5a7a2a; }
.yol-hos-kart.r { border-top-color: #3a6a9a; }
.yol-hos-kart span { font-size: 1.8rem; display: block; }
.yol-hos-kart b { display: block; margin: 3px 0; }
.yol-hos-kart small { color: #6b4a1e; font-size: .79rem; }
.yol-hos-hediye { margin: 14px 18px 0; padding: 10px 13px; background: #e8f0d8; border: 1px solid #8fae5f;
border-radius: 8px; color: #2d4a10; font-size: .89rem; text-align: center; }
.yol-hos-hediye small { display: block; color: #5a7a2a; font-size: .78rem; margin-top: 3px; }
.yol-hos-btn { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 16px 18px 6px; }
.yol-hos-son { margin: 0; padding: 0 18px 16px; text-align: center; font-size: .78rem; color: #7a5a2a; }
@media (max-width: 560px) { .yol-hos-uc { grid-template-columns: 1fr; } }
.clan-profile-box { max-width: 880px; }
/* 🏆 [KLAN-BASARI-1] Klan profili sekmeleri (Tahsin 2026-07-31): 📋 Genel · 👥 Üyeler · 🏆 Başarılar.
Oyun içi klan sekmeleriyle (CLAN_TABS) AYNI dili konuşsun diye aynı kahve/parşömen tonları. */
.clanp-tabs { display: flex; gap: 3px; flex-wrap: wrap; margin: 0 0 14px; border-bottom: 2px solid #c19a52; padding-bottom: 0; }
.clanp-tab {
background: #e8d5a0; color: #7a5320; border: 1px solid #c19a52; border-bottom: none;
border-radius: 7px 7px 0 0; padding: 8px 15px; font-size: .88rem; font-weight: 700;
cursor: pointer; font-family: inherit; position: relative; top: 2px;
}
.clanp-tab:hover { background: #f2e2b8; color: #4a2c0c; }
.clanp-tab.active { background: #f1e0b6; color: #3d1a05; border-bottom: 2px solid #f1e0b6; }
.clanp-count { display: inline-block; background: #a8641b; color: #fff3d8; font-size: .7rem;
font-weight: 800; border-radius: 9px; padding: 0 6px; margin-left: 4px; vertical-align: middle; }
.clanp-panel[hidden] { display: none; }
.clanp-tbl { overflow-x: auto; }
.clanp-ach {
display: flex; gap: 10px; align-items: center; padding: 9px 11px; margin-bottom: 7px;
background: #f7ecd2; border: 1px solid #dcc08a; border-radius: 7px; /* 🎨 [TEMA-HERYER-1] kirli beyazdı */
}
.clanp-ach-ic { font-size: 1.45rem; flex: 0 0 auto; }
.clanp-ach-tx { flex: 1; min-width: 0; font-size: .88rem; color: #3d1a05; }
.clanp-ach-tx b { display: block; }
.clanp-ach-tx small { color: #7a5a2a; }
.clanp-ach-dt { font-size: .76rem; color: #8a6a3a; white-space: nowrap; flex: 0 0 auto; }
.clan-emblem-box { display: flex; align-items: center; justify-content: center; min-height: 100px; }
.clan-emblem-img { max-width: 160px; max-height: 160px; border-radius: 6px; border: 1px solid #d2b77b; }
.clan-emblem-placeholder { font-size: 56px; opacity: .5; }
.clan-modal-box { background: #f4e4bc; border: 2px solid #c7a56a; border-radius: 8px; padding: 18px; width: min(420px, 100%); max-height: 86vh; overflow-y: auto; }
.clan-modal-box h3 { margin: 0 0 14px; color: #2a1608; font-family: Georgia,serif; }
.clan-modal-section { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #e8d4a8; }
.clan-modal-section label { display: block; font-size: .8rem; font-weight: 700; color: #6b4b24; margin-bottom: 6px; }
.pearl-quick-donate-row { display: flex; gap: 6px; margin-bottom: 8px; }
.pearl-quick-donate-row .btn-secondary-sm { flex: 1; text-align: center; }
.clan-perm-checks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; font-size: .84rem; color: #2a1608; }
.clan-perm-checks label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.clan-modal-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
/* ── Profil sekmesi ── */
.clan-profile-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.clan-profile-table th { text-align: left; padding: 9px 12px; background: #f0dba8; color: #4a2e10; width: 42%; border-bottom: 1px solid #e8d4a8; font-weight: 700; }
.clan-profile-table td { padding: 9px 12px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.clan-profile-table td small { color: #8a6530; font-weight: 400; }
.clan-profile-desc { color: #2a1608; font-size: .88rem; line-height: 1.5; white-space: pre-wrap; }
/* ── Diplomasi sekmesi ── */
.dip-status-pill { display: inline-block; padding: 4px 11px; border-radius: 20px; font-size: .8rem; font-weight: 700; }
.dip-status-pill.dip-ally { background: rgba(111,174,94,0.18); color: #3a7a2a; }
.dip-status-pill.dip-enemy { background: rgba(182,57,44,0.18); color: #8f240e; }
.dip-status-pill.dip-peace { background: rgba(120,150,200,0.18); color: #2a4a7a; }
.dip-search-results { position: absolute; top: 100%; left: 0; right: 0; background: #f4e4bc; border: 1px solid #c9a06a; border-radius: 4px; max-height: 200px; overflow-y: auto; z-index: 20; box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
.dip-search-item { padding: 8px 12px; cursor: pointer; font-size: .85rem; color: #2a1608; border-bottom: 1px solid #e8d4a8; }
.dip-search-item:hover { background: #ffe6a8; }
.dip-search-item:last-child { border-bottom: none; }
.dip-search-empty { padding: 10px 12px; font-size: .82rem; color: #8a6530; }
.dip-selected-clan { margin-top: 8px; padding: 8px 12px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; font-size: .85rem; color: #2a1608; }
/* ── Rezerve sekmesi ── */
.clan-rezerve-info { font-size: .82rem; color: #6b4b24; margin-bottom: 12px; }
.clan-rezerve-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.clan-rezerve-table th { text-align: left; padding: 7px 9px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.clan-rezerve-table td { padding: 7px 9px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.clan-rezerve-table tr:hover td { background: rgba(217,169,78,0.08); }
.clan-rezerve-table td small { color: #8a6530; display: block; font-size: .74rem; }
.rezerve-group-head { text-align: center; background: #e8c888 !important; }
.rezerve-filter-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .82rem; margin: 12px 0; padding: 8px 0; border-top: 1px solid #e8d4a8; border-bottom: 1px solid #e8d4a8; }
.rezerve-filter-btn { background: none; border: none; color: #6b4b24; font-weight: 700; cursor: pointer; padding: 4px 6px; font-family: Georgia,serif; font-size: .82rem; }
.rezerve-filter-btn:hover { color: #2a1608; text-decoration: underline; }
.rezerve-filter-btn.active { color: #b6392c; }
.clan-rezerve-limits { margin-top: 16px; border: 1px solid #d2b77b; border-radius: 6px; overflow: hidden; max-width: 320px; }
.clan-rezerve-limits h4 { margin: 0; padding: 8px 12px; background: #f0dba8; color: #4a2e10; font-size: .88rem; }
.clan-rezerve-limit-row { display: flex; justify-content: space-between; padding: 7px 12px; border-top: 1px solid #e8d4a8; font-size: .85rem; color: #2a1608; }
/* ── Klan Forumu (önizlemede onaylanan tema) ── */
.forum-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.forum-new-btn { background: linear-gradient(180deg,#b6392c,#8c2a22); color: #f3cd7e; border: 1px solid #d9a94e; font-size: .83rem; padding: 7px 14px; border-radius: 5px; cursor: pointer; font-weight: 700; font-family: Georgia,serif; }
.forum-new-btn:hover { filter: brightness(1.08); }
.forum-icon-btn-text { background: none; border: 1px solid rgba(196,154,79,0.3); color: #6b4b24; font-size: .8rem; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
.forum-icon-btn-text:hover { background: rgba(217,169,78,0.08); }
.forum-icon-btn-text.danger { color: #8c2a22; border-color: rgba(140,42,34,0.3); }
.forum-icon-btn-text.danger:hover { background: rgba(140,42,34,0.08); }
.forum-box { background: #f4e4bc; border: 1px solid #d2b77b; border-radius: 8px; overflow: hidden; }
.forum-cat-row, .forum-topic-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e8d4a8; cursor: pointer; }
.forum-cat-row:last-child, .forum-topic-row:last-child { border-bottom: none; }
.forum-cat-row:hover, .forum-topic-row:hover { background: rgba(217,169,78,0.08); }
.forum-cat-icon { font-size: 18px; flex: none; }
.forum-topic-icon { font-size: 16px; flex: none; }
.forum-topic-icon.pinned { filter: none; }
.forum-cat-info { flex: 1; min-width: 0; }
.forum-cat-name { margin: 0; font-size: .9rem; font-weight: 700; color: #2a1608; }
.forum-cat-meta { margin: 2px 0 0; font-size: .76rem; color: #8a6530; }
.forum-cat-arrow { color: #8a6530; font-size: 1.1rem; flex: none; }
.forum-icon-btn { background: none; border: none; color: #8a6530; cursor: pointer; font-size: .85rem; padding: 4px; flex: none; }
.forum-icon-btn:hover { color: #8c2a22; }
.forum-breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: .85rem; }
.forum-back-btn { background: none; border: none; color: #8a4a12; cursor: pointer; font-weight: 700; font-size: .85rem; padding: 0; }
.forum-back-btn:hover { text-decoration: underline; }
.forum-breadcrumb-sep { color: #6b4b24; } /* [SIYAH-YAZI-1] */
.forum-breadcrumb-current { color: #2a1608; font-weight: 700; }
/* ── Konu içi yorumlar ── */
.forum-post-row { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e8d4a8; }
.forum-post-row:last-child { border-bottom: none; }
.forum-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(180deg,#c7912f,#8a5c12); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: #2a1608; flex: none; }
.forum-post-body { flex: 1; min-width: 0; }
.forum-post-head { display: flex; align-items: baseline; gap: 6px; }
.forum-post-author { font-size: .85rem; font-weight: 700; color: #8a4a12; }
.forum-post-time { font-size: .72rem; color: #4a3010; } /* [SIYAH-YAZI-1] */
.forum-quote-box { background: rgba(217,169,78,0.08); border-left: 2px solid #8a5c12; border-radius: 0 4px 4px 0; padding: 5px 9px; margin: 4px 0 6px; font-size: .76rem; color: #8a6530; }
.forum-post-text { margin: 2px 0 6px; font-size: .85rem; line-height: 1.5; color: #2a1608; }
.forum-post-actions { display: flex; align-items: center; gap: 12px; }
.forum-reaction { font-size: .78rem; color: #8a6530; cursor: pointer; padding: 2px 6px; border-radius: 10px; }
.forum-reaction:hover { background: rgba(217,169,78,0.12); }
.forum-reaction.active { background: rgba(182,57,44,0.12); color: #8c2a22; }
.forum-action-link { font-size: .78rem; color: #6b4b24; cursor: pointer; }
.forum-action-link:hover { text-decoration: underline; }
.forum-mini-btn { background: none; border: none; color: #4a3010; cursor: pointer; font-size: .78rem; padding: 0; } /* [SIYAH-YAZI-1] */
.forum-mini-btn:hover { color: #8c2a22; }
.forum-quote-preview-box { display: flex; align-items: center; gap: 6px; background: rgba(217,169,78,0.1); border-left: 2px solid #8a5c12; border-radius: 0 4px 4px 0; padding: 6px 10px; margin: 8px 0; font-size: .8rem; color: #6b4b24; }
.forum-write-row { display: flex; gap: 8px; margin-top: 8px; align-items: flex-end; }
.forum-write-row textarea { flex: 1; padding: 8px 10px; border: 1px solid #c9a06a; border-radius: 5px; background: #f4e4bc; font-family: inherit; font-size: .85rem; color: #2a1608; resize: vertical; }
.forum-send-btn { background: linear-gradient(180deg,#b6392c,#8c2a22); color: #f3cd7e; border: 1px solid #d9a94e; font-size: .83rem; padding: 9px 16px; border-radius: 5px; cursor: pointer; font-weight: 700; font-family: Georgia,serif; white-space: nowrap; }
.forum-send-btn:hover { filter: brightness(1.08); }
/* ── Klan Elması bakiyesi (ortak) ── */
.clan-pearl-balance { display: flex; align-items: center; gap: 10px; background: #261d15; border: 1px solid rgba(196,154,79,0.3); border-radius: 8px; padding: 12px 16px; flex-wrap: wrap; }
.clan-pearl-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pearl-ranking-box { max-width: 480px; }
.pearl-ranking-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.pearl-ranking-table th { text-align: left; padding: 6px 8px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.pearl-ranking-table td { padding: 6px 8px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.pearl-ranking-table th:not(:first-child), .pearl-ranking-table td:not(:first-child) { text-align: right; }
.pearl-ranking-table tr.pearl-ranking-me td { background: rgba(217,169,78,0.18); font-weight: 700; }
.clan-pearl-amount { margin: 0; font-size: 1.3rem; font-weight: 800; color: #f3cd7e; font-family: Georgia,serif; }
.clan-pearl-label { margin: 0; font-size: .76rem; color: #a99a7c; }
/* ── Klan Araştırmaları ── */
.clan-research-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.research-card { background: #f4e4bc; border: 1px solid #d2b77b; border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.research-card-head { display: flex; align-items: center; gap: 10px; }
.research-icon { font-size: 26px; flex: none; }
.research-card-title { flex: 1; }
.research-name { margin: 0; font-size: .9rem; font-weight: 700; color: #2a1608; }
.research-level { margin: 2px 0 0; font-size: .76rem; color: #8a6530; }
.research-desc { margin: 0; font-size: .76rem; color: #6b4b24; line-height: 1.4; }
.research-start-btn { background: linear-gradient(180deg,#b6392c,#8c2a22); color: #f3cd7e; border: 1px solid #d9a94e; font-size: .82rem; padding: 8px 12px; border-radius: 5px; cursor: pointer; font-weight: 700; font-family: Georgia,serif; }
.research-start-btn:hover { filter: brightness(1.08); }
.research-maxed { background: rgba(111,174,94,0.15); color: #3a7a2a; font-size: .8rem; padding: 7px 10px; border-radius: 5px; text-align: center; font-weight: 700; }
.research-locked { background: rgba(169,154,124,0.12); color: #8a6530; font-size: .76rem; padding: 7px 10px; border-radius: 5px; text-align: center; }
.research-queued { background: rgba(217,169,78,0.15); color: #8a4a12; font-size: .78rem; padding: 7px 10px; border-radius: 5px; text-align: center; font-weight: 700; }
.research-countdown { display: block; font-weight: 400; font-size: .74rem; margin-top: 2px; }
.research-detail-btn { background: none; border: 1px solid rgba(196,154,79,0.3); color: #6b4b24; font-size: .9rem; padding: 4px 8px; border-radius: 5px; cursor: pointer; flex: none; }
.research-detail-btn:hover { background: rgba(217,169,78,0.1); }
.research-speedup-btn { background: linear-gradient(180deg,#3a6ab0,#274a7a); color: #d8e8ff; border: 1px solid #6a9ad0; font-size: .78rem; padding: 6px 10px; border-radius: 5px; cursor: pointer; font-weight: 700; }
.research-speedup-btn:hover { filter: brightness(1.1); }
.research-active-banner { background: rgba(217,169,78,0.12); border: 1px solid rgba(217,169,78,0.35); color: #6b4b24; font-size: .85rem; padding: 10px 14px; border-radius: 6px; }
.research-active-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.research-active-countdown { font-weight: 700; color: #8a4a12; }
.research-detail-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.research-detail-table th { text-align: left; padding: 6px 9px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.research-detail-table td { padding: 6px 9px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.research-detail-table tr.research-row-done td { background: rgba(111,174,94,0.08); }
.research-status-done { color: #3a7a2a; font-weight: 700; }
.research-status-active { color: #8a4a12; font-weight: 700; }
.research-status-pending { color: #6b4b24; } /* [SIYAH-YAZI-1] */
/* ── Klan Seviyesi ── */
.clan-level-hero { text-align: center; background: linear-gradient(180deg, #2f2419, #261d15); border: 1px solid #d9a94e; padding: 20px 16px 18px; }
.clan-shield-wrap { position: relative; display: inline-block; width: 120px; }
.clan-shield-img { width: 120px; height: auto; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.clan-shield-level {
position: absolute;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.2rem;
font-weight: 800;
color: #fff6e0;
font-family: Georgia, serif;
text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6);
}
.clan-ribbon-wrap { position: relative; display: inline-block; width: 240px; margin-top: -14px; }
.clan-ribbon-img { width: 240px; height: auto; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
.clan-ribbon-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
font-size: 1.05rem;
font-weight: 800;
color: #fff2d0;
font-family: Georgia, serif;
letter-spacing: 0.5px;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
white-space: nowrap;
}
.clan-level-progress-track {
position: relative;
margin: 16px auto 0;
max-width: 360px;
height: 22px;
background: #1a1410;
border: 1px solid #5a3a1a;
border-radius: 12px;
overflow: hidden;
}
.clan-level-progress-fill {
height: 100%;
background: linear-gradient(180deg, #b6392c, #8c2a22);
transition: width 0.3s;
}
.clan-level-progress-label {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: .76rem;
font-weight: 700;
color: #fff2d0;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.clan-level-hero .clan-pearl-balance { justify-content: center; background: rgba(0,0,0,0.2); }
.level-totals-box { background: #f4e4bc; border: 1px solid #d2b77b; border-radius: 8px; padding: 4px 14px; }
.level-total-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e8d4a8; font-size: .85rem; color: #2a1608; }
.level-total-row:last-child { border-bottom: none; }
.level-total-row b { color: #8a4a12; }
.clan-level-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.clan-level-table th { text-align: left; padding: 7px 9px; background: #f0dba8; color: #4a2e10; border-bottom: 2px solid #c7a56a; }
.clan-level-table td { padding: 7px 9px; border-bottom: 1px solid #e8d4a8; color: #2a1608; }
.clan-level-table tr.level-reached td { background: rgba(111,174,94,0.08); }
.clan-donate-row { display: flex; gap: 16px; flex-wrap: wrap; }
.clan-donate-group { flex: 1; min-width: 220px; }
.clan-donate-group label { display: block; font-size: .8rem; font-weight: 700; color: #6b4b24; margin-bottom: 6px; }
.clan-donate-group label small { font-weight: 400; color: #a08a60; }
.clan-donate-group input { flex: 1; padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 4px; background: #f4e4bc; font-size: .85rem; color: #2a1608; }
/* ── Bekleyen başvurular ── */
.clan-requests-list { display: flex; flex-direction: column; gap: 6px; }
.clan-request-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #fff0c8; border: 1px solid #ecc878; border-radius: 4px; }
/* ── İstatistik kartları ── */
.clan-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.clan-stat-card { background: #fff0c8; border: 1px solid #d2b77b; border-radius: 6px; padding: 12px; }
.clan-stat-card .label { font-size: .72rem; color: #8a6530; text-transform: uppercase; letter-spacing: .4px; }
.clan-stat-card .value { font-family: Georgia,serif; font-size: 1.3rem; color: #2a1608; font-weight: 800; margin-top: 4px; }
/* ── Klan günlüğü ── */
.clan-log-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.clan-log-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #e8d4a8; font-size: .82rem; }
.clan-log-icon { flex: none; }
.clan-log-text { flex: 1; color: #2a1608; }
.clan-log-time { flex: none; color: #999; font-size: .74rem; }
@media (max-width: 600px) {
.clan-form-row { grid-template-columns: 1fr; }
.clan-member-row { flex-direction: column; align-items: flex-start; }
.clan-tabbar { overflow-x: auto; }
}
/* ============================================================
MESAJLAŞMA & RAPORLAR & DUYURULAR
============================================================ */
/* BADGE */
.msg-badge { background: #cc2200; color: #fff; font-size: .72rem; font-weight: 900; padding: 1px 5px; border-radius: 10px; margin-left: 4px; vertical-align: middle; }
/* MESAJ WRAP */
.msg-wrap { display: flex; flex-direction: column; gap: 16px; padding: 12px; }
.msg-section { background: #f4e4bc; border: 1px solid #d2b77b; border-radius: 5px; padding: 14px; }
.msg-section h3 { margin: 0 0 12px; font-size: 1rem; color: #2a1608; display: flex; align-items: center; gap: 8px; }
/* MESAJ FORMU */
.msg-form { display: flex; flex-direction: column; gap: 8px; }
.msg-form input, .msg-form textarea { padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 4px; background: #f4e4bc; font-family: Georgia,serif; font-size: .9rem; color: #2a1608; resize: vertical; }
/* MESAJ LİSTESİ */
.msg-list { display: flex; flex-direction: column; gap: 4px; }
.msg-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; cursor: pointer; gap: 8px; }
.msg-row:hover { background: #ffe8a0; }
.msg-unread { background: #fff8d0; border-color: #c7a020; font-weight: 700; }
.msg-row-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.msg-row-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.msg-dot { color: #cc2200; font-size: .9rem; }
.msg-from { font-size: .82rem; font-weight: 700; color: #5a3a10; white-space: nowrap; }
.msg-subject { font-size: .88rem; color: #2a1608; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-time { font-size: .76rem; color: #999; white-space: nowrap; }
/* MODAL */
.msg-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.msg-modal { background: linear-gradient(180deg,#f4e4bc,#f5e4b9); border: 2px solid #c7a56a; border-radius: 8px; max-width: 560px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,.35); }
.msg-modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid #d2b77b; }
.msg-modal-subject { font-size: 1rem; font-weight: 700; color: #2a1608; }
.msg-modal-meta { font-size: .8rem; color: #4a3010; margin-top: 3px; } /* [SIYAH-YAZI-1] */
.msg-modal-close { background: transparent; border: 0; font-size: 1.2rem; cursor: pointer; color: #2a190c; padding: 0 4px; }
.msg-modal-close:hover { color: #cc2200; }
.msg-modal-body { padding: 14px 16px; font-size: .92rem; color: #2a1608; line-height: 1.6; min-height: 80px; white-space: pre-wrap; }
.msg-modal-footer { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid #d2b77b; justify-content: flex-end; }
/* hata2/3: Karargah hareket detay penceresi + tıklanabilir satır */
.kara-row-click { cursor: pointer; }
.kara-row-click:hover { background: rgba(199,165,106,.18); }
/* B2-Hata2: köye dönen destek satırı (ters yön, gri tint) */
/* 🎨 [TEMA-HERYER-1] gri-mavi → kahve (Tahsin: "rengi her yerde kendi temamıza göre") */
.kara-row-return { background: rgba(107,77,28,.10); }
.kara-row-return td { color: #6b4d1c; }
.kara-row-return:hover { background: rgba(107,77,28,.18); }
/* B3-hata7: mobilde Karargah hareket tabloları yatay kaydırılabilsin (süre kolonu ekrandan taşınca görünsün) */
.kara-movement-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kara-emir-table th, .kara-emir-table td { white-space: nowrap; }
.mv-detail-modal { max-width: 460px; padding: 16px 18px; }
.mv-detail-head { font-weight: 700; font-size: 1.08rem; color: #2a1608; margin-bottom: 10px; }
.mv-detail-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.mv-detail-table td { padding: 5px 8px; border-bottom: 1px solid rgba(160,130,80,.22); vertical-align: top; font-size: .9rem; color: #2a1608; }
.mv-detail-table td:first-child { color: #7a6a52; white-space: nowrap; width: 36%; }
.mv-detail-troops-title { font-weight: 700; color: #2a1608; margin: 6px 0; }
.mv-troops-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-troop-cell { display: flex; align-items: center; gap: 5px; padding: 4px 9px; background: rgba(199,165,106,.15); border: 1px solid #d2b77b; border-radius: 6px; font-size: .9rem; }
.mv-troop-icon img { width: 22px; height: 22px; vertical-align: middle; }
.mv-troops-hidden { color: #7a6a52; font-style: italic; padding: 6px 0; font-size: .9rem; }
.mv-detail-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* RAPORLAR */
.reports-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.reports-col h3 { margin: 0 0 10px; font-size: .95rem; color: #2a1608; display: flex; align-items: center; gap: 6px; }
.report-count { font-size: .78rem; background: #c9a06a; color: #fff; padding: 1px 6px; border-radius: 10px; }
.report-card { border: 1px solid #d2b77b; border-radius: 5px; margin-bottom: 6px; overflow: hidden; }
.report-win { border-color: #2a7a20; }
.report-loss { border-color: #8f240e; }
.report-spy { border-color: #5a5a20; }
.report-card-header { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: .82rem; flex-wrap: wrap; }
.report-win .report-card-header { background: #d4edda; }
.report-loss .report-card-header { background: #f8d7da; }
.report-spy .report-card-header { background: #fff3cd; }
.report-result { font-weight: 700; font-size: .85rem; }
.report-enemy { flex: 1; font-weight: 700; color: #2a1608; }
.report-time { color: #999; font-size: .76rem; }
.report-card-body { padding: 7px 10px; background: #f4e4bc; font-size: .82rem; color: #2a1608; }
.report-row { margin-bottom: 2px; }
/* DUYURULAR */
.ann-wrap { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.ann-admin-section { background: #f4e4bc; border: 1px solid #d2b77b; border-radius: 5px; padding: 14px; }
.ann-admin-section h3 { margin: 0 0 12px; font-size: 1rem; color: #2a1608; }
.ann-form { display: flex; flex-direction: column; gap: 8px; }
.ann-form input, .ann-form textarea { padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 4px; background: #f4e4bc; font-family: Georgia,serif; font-size: .9rem; color: #2a1608; resize: vertical; }
.ann-list { display: flex; flex-direction: column; gap: 10px; }
.ann-card { background: linear-gradient(180deg,#f4e4bc,#f5e4b9); border: 1px solid #c7a56a; border-radius: 6px; overflow: hidden; }
.ann-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: linear-gradient(180deg,#2b1b10,#1a0e06); flex-wrap: wrap; gap: 6px; }
.ann-title { font-size: .95rem; font-weight: 700; color: #fff4d7; }
.ann-meta { font-size: .78rem; color: #a08050; }
.ann-body { padding: 12px 14px; font-size: .9rem; color: #2a1608; line-height: 1.6; }
@media (max-width: 700px) {
.reports-wrap { grid-template-columns: 1fr; }
.msg-row { flex-wrap: wrap; }
}
/* ============================================================
RAPORLAR YENİ TASARIM
============================================================ */
.reports-page { display: flex; flex-direction: column; }
.reports-filter-tabs { display: flex; gap: 4px; padding: 10px 12px; background: #f0dca8; border-bottom: 1px solid #d2b77b; flex-wrap: wrap; }
.rep-ftab { padding: 6px 14px; background: #e8cc8e; border: 1px solid #c9a06a; border-radius: 4px; cursor: pointer; font-family: Georgia,serif; font-size: .85rem; font-weight: 700; color: #5a3a10; }
.rep-ftab.active { background: linear-gradient(180deg,#2b1b10,#1a0e06); color: #fff4d7; border-color: #c7a56a; }
.rep-ftab:hover:not(.active) { background: #d8b878; }
.rep-count { background: rgba(0,0,0,.15); padding: 1px 5px; border-radius: 8px; font-size: .78rem; margin-left: 4px; }
.reports-list { display: flex; flex-direction: column; }
/* 📋 [RAPOR-TW-1] TW formülü: tür zeminleri yok — tek parşömen satır, tek hover. */
.rep-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #e8d090; cursor: pointer; font-size: .88rem; }
.rep-row:hover { background: #fff8d0; }
/* SORUN-3 genel raporlar da aynı ince satır — [RAPOR-TW-1] kategori zeminleri kalktı. */
.rep-icon { font-size: 1rem; flex-shrink: 0; }
.rep-title { flex: 1; color: #2a1608; line-height: 1.4; }
.rep-title b { color: #5a3a10; }
.rep-date { font-size: .78rem; color: #4a3010; white-space: nowrap; flex-shrink: 0; } /* [SIYAH-YAZI-1] */
/* RAPOR DETAY MODAL */
.report-modal { max-width: 620px; max-height: 85vh; display: flex; flex-direction: column; }
.report-detail-body { overflow-y: auto; padding: 0; flex: 1; }
.rep-detail-result { padding: 12px 16px; font-size: 1.1rem; font-weight: 700; text-align: center; }
/* Kazanan SARI (kayıp var ama kazandın) · Kaybeden KIRMIZI · Casus MAVİ işaret (Tahsin 2026-07-11) */
.rep-result-win { background: linear-gradient(180deg,#fff3cd,#ffe08a); color: #6b5200; }
.rep-result-loss { background: linear-gradient(180deg,#f8d7da,#f5c6cb); color: #721c24; }
.rep-result-spy { background: linear-gradient(180deg,#dbe9f7,#b8d4ef); color: #1c4e80; } /* MAVİ — casusluk (salt casus raporu) */
.rep-detail-section { padding: 12px 16px; border-bottom: 1px solid #e8d090; }
.rep-detail-section-title { font-weight: 700; color: #2a1608; margin-bottom: 8px; font-size: .92rem; }
.rep-clickable { cursor: pointer; color: #5a3a10; text-decoration: underline; text-decoration-color: #c6a050; }
.rep-clickable:hover { color: #3d1a05; text-decoration-color: #7c4a16; }
.rep-village-line { font-size: .85rem; color: #5a3a10; margin-bottom: 8px; padding-left: 2px; }
.rep-def-hidden { font-size: .85rem; color: #7a5a2a; font-style: italic; background: #faf1d8; border: 1px dashed #d9bb7c; border-radius: 6px; padding: 10px 12px; }
.rep-winner { background: #fdf6d8; border-left: 4px solid #e0a800; } /* SARI — kazanan */
.rep-loser { background: #fce4e4; border-left: 4px solid #e57373; } /* KIRMIZI — kaybeden */
.rep-spy-mark { border-right: 4px solid #2f6fb0; box-shadow: inset -1px 0 0 #2f6fb0; } /* MAVİ — casus attı (sarı-mavi / kırmızı-mavi) */
.rep-loot { background: #fff8e1; border-left: 4px solid #d4a017; }
.rep-detail-troops { margin-bottom: 5px; font-size: .85rem; color: #5a3a10; }
.rep-detail-troops b { color: #2a1608; }
.rep-troop-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rep-troop { background: #fff0c8; border: 1px solid #d2b77b; padding: 2px 8px; border-radius: 4px; font-size: .82rem; color: #2a1608; }
.rep-loot-row { display: flex; gap: 16px; font-size: .95rem; flex-wrap: wrap; }
.rep-loot-row b { font-size: 1rem; color: #2a1608; }
/* SORUN-5: Casus görülen binaları — referans gibi 2 kolon ikonlu tablo */
.rep-bina-wrap { display: flex; gap: 10px; flex-wrap: wrap; }
.rep-bina-col { flex: 1 1 45%; min-width: 150px; background: #f2e3c6; border: 1px solid #c9a06a; border-radius: 6px; overflow: hidden; }
.rep-bina-head { display: flex; justify-content: space-between; padding: 4px 8px; background: #c9a06a; color: #2a1608; font-weight: 700; font-size: .8rem; }
.rep-bina-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-top: 1px solid #e0cba0; font-size: .86rem; }
.rep-bina-ico { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.rep-bina-ad { flex: 1; color: #3a2408; }
.rep-bina-kd { font-weight: 700; color: #2a1608; }
/* KARARGAH */
.karargah-header { padding: 8px 0 4px; }
.karargah-header .section-title { color: #2a1608; font-size: 1.1rem; }
/* ============================================================
KARARGAH PANELİ
============================================================ */
.karargah-inner { display: flex; flex-direction: column; gap: 0; }
.karargah-tabs { display: flex; gap: 0; border-bottom: 2px solid #c7a56a; background: #f0dca8; }
.kar-tab { padding: 8px 20px; background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; font-family: Georgia,serif; font-size: .9rem; font-weight: 700; color: #6b4b24; }
.kar-tab.active { color: #2a1608; border-bottom-color: #c7a020; background: #f4e4bc; }
.kar-tab:hover:not(.active) { background: #e8cc8e; }
#karargah-tab-content { padding: 12px; }
/* EMİRLER */
.emirler-wrap { display: flex; flex-direction: column; gap: 14px; }
.emir-section { background: #f4e4bc; border: 1px solid #d2b77b; border-radius: 5px; padding: 10px; }
.emir-section-title { font-weight: 700; font-size: .9rem; color: #2a1608; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.emir-count { background: #c9a06a; color: #fff; font-size: .75rem; padding: 1px 6px; border-radius: 10px; }
.emir-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; margin-bottom: 5px; border: 1px solid; }
/* 🎨 [TEMA-HERYER-1] gelen satır MAVİYDİ (#f0f5ff) — palete yabancı. Gelen = tehdit,
kızıl TİNT (durum rengi); giden = saman. Aynı çift 3 yerde (emir/emir td/kara-row). */
.emir-out { background: #f7e3b6; border-color: #c9a06a; }
.emir-in { background: #f5e0d2; border-color: #c98a6a; }
.emir-icon { font-size: 1.2rem; flex-shrink: 0; }
.emir-info { flex: 1; min-width: 0; }
.emir-target { font-size: .88rem; color: #2a1608; }
.emir-target b { color: #5a3a10; }
.emir-coords { color: #888; font-size: .82rem; }
.emir-user { color: #aaa; font-size: .78rem; }
.emir-troops { font-size: .8rem; color: #6b4b24; margin-top: 3px; }
.emir-time { flex-shrink: 0; font-size: .82rem; font-weight: 700; color: #cc2200; white-space: nowrap; }
/* BİRLİKLER */
.birlikler-wrap { display: flex; flex-direction: column; gap: 14px; }
.birlik-total { font-size: .88rem; color: #6b4b24; padding: 6px 10px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; }
.birlik-total b { color: #2a1608; font-size: 1rem; }
.birlik-group { background: #f4e4bc; border: 1px solid #d2b77b; border-radius: 5px; overflow: hidden; }
.birlik-group-title { padding: 7px 12px; background: linear-gradient(180deg,#3a2510,#2a1808); color: #fff4d7; font-weight: 700; font-size: .88rem; }
.birlik-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; padding: 10px; }
.birlik-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 5px; text-align: center; }
.birlik-empty { opacity: .45; }
.birlik-icon { font-size: 1.5rem; }
.birlik-name { font-size: .72rem; color: #6b4b24; font-weight: 700; }
.birlik-count { font-size: 1rem; font-weight: 900; color: #2a1608; }
.birlik-empty .birlik-count { color: #2a190c; } /* [SIYAH-YAZI-1] opacity .45 zaten sönükleştiriyor */
/* Karargah hotspot pozisyonu */
.hs-command { left: 22%; top: 56%; }
/* KARARGAH MODAL */
.karargah-modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.6);
z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.karargah-modal {
background: linear-gradient(180deg,#f4e4bc,#f5e4b9);
border: 2px solid #c7a56a; border-radius: 8px;
width: min(700px, 96vw); max-height: 85vh;
display: flex; flex-direction: column;
box-shadow: 0 8px 32px rgba(0,0,0,.4);
overflow: hidden;
}
.karargah-modal-header {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px; background: linear-gradient(180deg,#2b1b10,#1a0e06);
color: #fff4d7; font-size: 1.05rem; font-weight: 700;
}
.karargah-modal-header button {
background: transparent; border: 0; color: #fff4d7;
font-size: 1.2rem; cursor: pointer; padding: 0 4px;
}
.karargah-modal-header button:hover { color: #ff6b6b; }
#karargah-modal-body { overflow-y: auto; flex: 1; }
/* EMİRLER FORMU */
.emir-form-section { background: #f4e4bc; border: 1px solid #d2b77b; border-radius: 5px; margin: 12px; }
.emir-form-title { padding: 8px 12px; background: linear-gradient(180deg,#3a2510,#2a1808); color: #fff4d7; font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.emir-badge { background: #cc2200; color: #fff; font-size: .75rem; padding: 1px 6px; border-radius: 10px; }
.emir-form-body { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px; }
.emir-troop-groups { display: flex; flex-wrap: wrap; gap: 10px; }
.emir-troop-group { background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; padding: 8px; }
.emir-troop-group-title { font-size: .78rem; font-weight: 700; color: #6b4b24; margin-bottom: 6px; }
.emir-troop-row { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.emir-troop-icon { font-size: 1rem; width: 22px; text-align: center; }
.emir-troop-input { width: 60px; padding: 3px 5px; border: 1px solid #c9a06a; border-radius: 3px; font-family: Georgia,serif; font-size: .85rem; text-align: center; background: #f4e4bc; }
.emir-troop-max { font-size: .75rem; color: #4a3010; } /* [SIYAH-YAZI-1] */
.emir-target-section { background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; padding: 10px; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.emir-target-title { font-size: .85rem; font-weight: 700; color: #2a1608; }
.emir-coord-row { display: flex; align-items: center; gap: 5px; }
.emir-coord-row label { font-size: .82rem; font-weight: 700; color: #6b4b24; }
.emir-coord-input { width: 48px; padding: 4px 5px; border: 1px solid #c9a06a; border-radius: 3px; font-family: Georgia,serif; font-size: .88rem; text-align: center; background: #f4e4bc; }
.emir-buttons { display: flex; flex-direction: column; gap: 5px; }
.btn-attack-big { padding: 7px 12px; background: linear-gradient(180deg,#8f240e,#4b1007); color: #ffd0c8; border: 1px solid #6b1007; border-radius: 4px; cursor: pointer; font-family: Georgia,serif; font-weight: 700; font-size: .88rem; }
.btn-attack-big:hover { background: #6b1007; }
.btn-support-big { padding: 7px 12px; background: linear-gradient(180deg,#245d1c,#123b0e); color: #c8f0a0; border: 1px solid #1a4a0c; border-radius: 4px; cursor: pointer; font-family: Georgia,serif; font-weight: 700; font-size: .88rem; }
.btn-support-big:hover { background: #1a4a0c; }
/* AKTİF EMİRLER TABLOSU */
.emir-active-section { margin: 0 12px 12px; background: #f4e4bc; border: 1px solid #d2b77b; border-radius: 5px; overflow: hidden; }
.emir-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.emir-table thead tr { background: #e8cc8e; }
.emir-table th { padding: 6px 10px; text-align: left; font-weight: 700; color: #5a3a10; border-bottom: 1px solid #d2b77b; }
.emir-table-row td { padding: 7px 10px; border-bottom: 1px solid #ead8a0; vertical-align: middle; }
.emir-out td { background: #f7e3b6; } /* 🎨 [TEMA-HERYER-1] */
.emir-in td { background: #f5e0d2; }
.emir-table-row:hover td { filter: brightness(.96); }
.emir-dir-icon { font-size: 1rem; }
.emir-troops-cell { color: #6b4b24; font-size: .8rem; }
.emir-time-cell { font-weight: 700; color: #cc2200; white-space: nowrap; }
.emir-coords { color: #2a190c; font-size: .78rem; } /* [SIYAH-YAZI-1] */
@media (max-width: 600px) {
.emir-form-body { grid-template-columns: 1fr; }
}
/* ============================================================
KARARGAH TAM EKRAN LAYOUT
============================================================ */
.karargah-fullscreen {
width: min(1200px, 99vw) !important;
max-height: 97vh !important;
height: 97vh;
}
.karargah-layout {
display: grid;
grid-template-columns: 160px 1fr;
flex: 1;
overflow: hidden;
min-height: 0;
height: 100%;
}
.karargah-sidemenu {
background: #e8cc8e;
border-right: 1px solid #c9a06a;
display: flex;
flex-direction: column;
padding: 8px 0;
}
.kara-menu-btn {
background: transparent;
border: 0;
border-left: 3px solid transparent;
padding: 10px 14px;
text-align: left;
cursor: pointer;
font-family: Georgia,serif;
font-size: .88rem;
font-weight: 700;
color: #5a3a10;
}
.kara-menu-btn.active {
background: #f4e4bc;
border-left-color: #c7a020;
color: #2a1608;
}
.kara-menu-btn:hover:not(.active) { background: #d8b878; }
.karargah-content {
overflow-y: auto;
padding: 14px 16px;
background: #f4e4bc;
}
/* EMİRLER SAYFASI */
.kara-section-title {
margin: 0 0 10px;
font-size: .95rem;
color: #2a1608;
padding-bottom: 5px;
border-bottom: 1px solid #d2b77b;
}
.kara-troop-grid {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.kara-troop-col {
background: #fff0c8;
border: 1px solid #d2b77b;
border-radius: 4px;
padding: 8px 10px;
min-width: 140px;
}
.kara-troop-col-title {
font-size: .78rem;
font-weight: 700;
color: #6b4b24;
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 1px solid #d2b77b;
}
.kara-troop-row {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 4px;
}
.kara-troop-icon { font-size: 1rem; width: 22px; text-align: center; }
.kara-troop-input {
width: 56px;
padding: 3px 5px;
border: 1px solid #c9a06a;
border-radius: 3px;
font-family: Georgia,serif;
font-size: .85rem;
text-align: center;
background: #f4e4bc;
}
.kara-troop-avail { font-size: .75rem; color: #888; }
.kara-hedef-bar {
background: #fff0c8;
border: 1px solid #d2b77b;
border-radius: 4px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.kara-hedef-group label {
font-size: .82rem;
font-weight: 700;
color: #6b4b24;
display: block;
margin-bottom: 5px;
}
.kara-hedef-inputs {
display: flex;
align-items: center;
gap: 6px;
font-size: .88rem;
color: #5a3a10;
}
.kara-coord {
width: 52px;
padding: 4px 5px;
border: 1px solid #c9a06a;
border-radius: 3px;
font-family: Georgia,serif;
font-size: .9rem;
text-align: center;
background: #f4e4bc;
}
.kara-action-btns {
display: flex;
gap: 8px;
}
.kara-btn-attack {
padding: 8px 18px;
background: linear-gradient(180deg,#8f240e,#4b1007);
color: #ffd0c8;
border: 1px solid #6b1007;
border-radius: 4px;
cursor: pointer;
font-family: Georgia,serif;
font-weight: 700;
font-size: .88rem;
}
.kara-btn-attack:hover { background: #6b1007; }
.kara-btn-support {
padding: 8px 18px;
background: linear-gradient(180deg,#245d1c,#123b0e);
color: #c8f0a0;
border: 1px solid #1a4a0c;
border-radius: 4px;
cursor: pointer;
font-family: Georgia,serif;
font-weight: 700;
font-size: .88rem;
}
.kara-btn-support:hover { background: #1a4a0c; }
/* AKTİF EMİRLER TABLOSU */
.kara-emir-table {
width: 100%;
border-collapse: collapse;
font-size: .85rem;
border: 1px solid #d2b77b;
}
.kara-emir-table th {
background: #e8cc8e;
padding: 6px 10px;
text-align: left;
font-weight: 700;
color: #5a3a10;
border-bottom: 1px solid #d2b77b;
}
.kara-emir-table td {
padding: 7px 10px;
border-bottom: 1px solid #ead8a0;
vertical-align: middle;
}
.kara-row-out td { background: #f7e3b6; } /* 🎨 [TEMA-HERYER-1] */
.kara-row-in td { background: #f5e0d2; }
.kara-countdown { color: #cc2200; font-weight: 700; }
/* ══ Gelen/Giden Ordular — reusable bileşen (Tahsin 2026-07-15 #1) ══ */
.mv-wrap { display: grid; grid-template-columns: 1fr; gap: 12px; }
.mv-box { background: #f4ead0; border: 1px solid #c3a765; border-radius: 7px; overflow: hidden; }
.mv-box > h4 { margin: 0; background: linear-gradient(#3a2a14, #2a1c0e); color: #e6c34a; font-size: 13px; font-weight: 700; padding: 7px 12px; }
.mv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mv-table th, .mv-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid #dcc79c; }
.mv-table td { font-variant-numeric: tabular-nums; }
.mv-table tbody tr:last-child td { border-bottom: none; }
.mv-table thead th { background: #e6d6a8; color: #6b5836; font-size: 12px; font-weight: 700; }
.mv-num { text-align: right; }
.mv-when { font-family: "Consolas", "Courier New", monospace; letter-spacing: -.3px; color: #5a3a1a; }
.mv-when b { color: #a01e1e; } /* salise vurgusu */
.mv-countdown { font-family: "Consolas", "Courier New", monospace; color: #a06010; }
.mv-coord { color: #2a190c; font-size: 12px; } /* [SIYAH-YAZI-1] */
.mv-t { font-weight: 600; }
.mv-t.atk { color: #a01e1e; }
.mv-t.sup { color: #3c7a2e; }
.mv-t.spy { color: #6a4a9a; }
.mv-t.self { color: #7a5a1a; }
.mv-empty { padding: 10px 12px; color: #2a190c; font-style: italic; font-size: 13px; } /* [SIYAH-YAZI-1] */
.ov-troops-movements { margin-top: 14px; }
.ov-troops-movements .mv-wrap { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) { .ov-troops-movements .mv-wrap { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .kara-side .mv-wrap { grid-template-columns: 1fr; } }
/* ══ Klasik köy görünümü — 2 sütun (Tahsin #1) ══ */
/* 🗑️ [YESIL-KALDIR-1] .village-view-toolbar / .vv-hint SİLİNDİ — "Görünüm:" satırı
kalktı, anahtar Köydeki Askerler başlığına ve Klasik üst şeridine taşındı. */
.kv-gorunum { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.vv-tabs { display: flex; border: 1px solid #c3a765; border-radius: 6px; overflow: hidden; }
.vv-tabs button { border: none; background: #e3d3a6; color: #6b5836; font-weight: 700; padding: 6px 16px; cursor: pointer; }
.vv-tabs button.active { background: #3a2a14; color: #e6c34a; }
.vv-tabs button:not(.active):hover { background: #ecdcb0; }
.kv-cols { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }
@media (max-width: 820px) { .kv-cols { grid-template-columns: 1fr; } }
.kv-box { background: #f2e7c6; border: 1px solid #c3a765; border-radius: 6px; margin-bottom: 12px; overflow: hidden; }
.kv-box.hl { border: 2px solid #c9a227; box-shadow: 0 0 0 3px #c9a22722; }
.kv-box > h3 { margin: 0; background: linear-gradient(#3a2a14, #2a1c0e); color: #e6c34a; font-size: 13px; font-weight: 700; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
.kv-box > h3 .kv-meta { margin-left: auto; color: #cbb27a; font-weight: 600; font-size: 11.5px; }
.kv-note { padding: 8px 12px; color: #7a5a1a; font-size: 12px; border-top: 1px solid #d8c398; }
.kv-muted { padding: 12px; color: #6b5836; font-style: italic; }
.kv-blist { list-style: none; margin: 0; padding: 0; }
.kv-blist li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #d8c398; cursor: pointer; }
.kv-blist li:last-child { border-bottom: none; }
.kv-blist li:hover { background: #f7efd6; }
.kv-bico { width: 30px; height: 30px; display: grid; place-items: center; background: #e6d7ab; border: 1px solid #c3a765; border-radius: 5px; font-size: 16px; flex: 0 0 auto; }
.kv-bico img { width: 24px; height: 24px; object-fit: contain; }
.kv-bname { font-weight: 700; color: #5a3a1a; }
.kv-blvl { margin-left: auto; color: #6b5836; font-weight: 600; font-size: 12px; }
.kv-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv-tbl th, .kv-tbl td { padding: 6px 10px; text-align: left; border-bottom: 1px solid #d8c398; font-variant-numeric: tabular-nums; }
.kv-tbl tbody tr:last-child td { border-bottom: none; }
.kv-tbl thead th { background: #e3d3a6; color: #6b5836; font-size: 12px; }
.kv-tbl .kv-num { text-align: right; }
.kv-unit { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.kv-unit img { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
.kv-prog { padding: 12px; }
.kv-prow { margin-bottom: 12px; }
.kv-prow:last-child { margin-bottom: 0; }
.kv-plabel { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 5px; }
.kv-plabel small { color: #6b5836; font-weight: 600; }
.kv-bar { height: 15px; background: #e0d0a4; border: 1px solid #c3a765; border-radius: 8px; overflow: hidden; }
.kv-bar > i { display: block; height: 100%; }
.kv-bar.dev > i { background: linear-gradient(#e0972f, #c97e1c); }
.kv-bar.pt > i { background: linear-gradient(#4f9e3a, #3c7a2e); }
.kv-buffs { padding: 8px 12px; }
.kv-buffs .pm-buff-active-list { gap: 6px; }
/* ══ Toplu Eğitim penceresi (Premium — Tahsin #4) ══ */
.te-open-btn { margin-right: auto; background: linear-gradient(#b98a2e, #8f6a1c); color: #fff; border: 1px solid #6b5010; font-weight: 800; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.te-open-btn:hover { filter: brightness(1.08); }
.te-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; z-index: 900; padding: 24px 12px; overflow: auto; }
.te-box { width: 100%; max-width: 640px; background: #f2e7c6; border: 2px solid #3a2a14; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 44px rgba(0,0,0,.5); }
.te-head { background: linear-gradient(#3a2a14, #2a1c0e); color: #e6c34a; padding: 11px 15px; display: flex; align-items: center; gap: 10px; }
.te-head h2 { margin: 0; font-size: 16px; flex: 1; }
.te-prem { background: #c9a227; color: #2a1c0e; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.te-x { cursor: pointer; color: #e6c34a; font-size: 18px; padding: 0 4px; }
.te-tabs { display: flex; background: #eaddb8; border-bottom: 1px solid #c3a765; }
.te-tabs button { flex: 1; border: none; background: none; color: #6b5836; font-weight: 700; padding: 10px 6px; cursor: pointer; font-size: 13px; border-bottom: 3px solid transparent; }
.te-tabs button.active { color: #3a2c14; border-bottom-color: #c9a227; background: #f2e7c6; }
.te-body { padding: 12px 15px; max-height: 56vh; overflow: auto; }
.te-muted { color: #6b5836; font-style: italic; padding: 16px 4px; }
.te-sec { margin-bottom: 14px; }
.te-sec-h { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #5a3a1a; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid #d8c398; margin-bottom: 4px; }
.te-sec-h .te-lvl { margin-left: auto; color: #6b5836; font-weight: 600; font-size: 12px; }
.te-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid #e3d6b0; }
.te-row:last-child { border-bottom: none; }
.te-u { width: 26px; height: 26px; display: grid; place-items: center; background: #e6d7ab; border: 1px solid #c3a765; border-radius: 5px; font-size: 15px; }
.te-u img { width: 20px; height: 20px; object-fit: contain; }
.te-main b { color: #3a2c14; font-size: 13.5px; }
.te-meta { color: #6b5836; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.te-hint { font-size: 11.5px; color: #7a5a1a; }
.te-hint b { color: #3c7a2e; }
.te-locked { display: block; color: #a06010; font-size: 11.5px; font-style: italic; }
.te-act { display: flex; align-items: center; gap: 5px; }
.te-input { width: 66px; padding: 5px 6px; border: 1px solid #c3a765; border-radius: 5px; background: #f6ead0; color: #3a2c14; text-align: right; font-variant-numeric: tabular-nums; }
.te-input:disabled { background: #e6ddc4; color: #9a8b72; }
.te-mx { font-size: 10.5px; padding: 5px 8px; border: 1px solid #c3a765; border-radius: 5px; background: #eaddb8; color: #6b5836; cursor: pointer; font-weight: 700; }
.te-mx:disabled { opacity: .5; cursor: default; }
.te-cancel { color: #a01e1e; }
.te-foot { border-top: 1px solid #c3a765; padding: 12px 15px; background: #eaddb8; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.te-tot { font-size: 12.5px; color: #6b5836; font-variant-numeric: tabular-nums; }
.te-tot b { color: #3a2c14; }
.te-btn-primary { margin-left: auto; background: linear-gradient(#4f9e3a, #3c7a2e); color: #fff; border: none; font-weight: 800; padding: 9px 18px; border-radius: 7px; cursor: pointer; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.te-btn-danger { margin-left: auto; background: linear-gradient(#b5432f, #8f2e1e); color: #fff; border: none; font-weight: 800; padding: 9px 18px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.te-btn-primary:hover, .te-btn-danger:hover { filter: brightness(1.08); }
/* #10 Mesaj işaretlemeli sil (Tahsin) */
.conv-select-toolbar { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: #eaddb8; border-bottom: 1px solid #c3a765; font-size: 12.5px; }
.conv-select-toolbar label { display: flex; align-items: center; gap: 5px; color: #6b5836; font-weight: 600; cursor: pointer; }
.conv-del-selected { margin-left: auto; background: #b5432f; color: #fff; border: none; border-radius: 5px; padding: 5px 12px; font-weight: 700; cursor: pointer; font-size: 12px; }
.conv-del-selected:hover { filter: brightness(1.08); }
.conv-bubble-head .msg-check { margin-right: 6px; cursor: pointer; vertical-align: middle; }
/* #9 Ödül raporu güzelleştir + Ödülü Topla (Tahsin) */
.reward-report-box { display: flex; align-items: center; gap: 14px; background: linear-gradient(#f4e4bc, #f5ead0); border: 1px solid #c9a227; border-left: 5px solid #c9a227; border-radius: 8px; padding: 16px 18px; margin-bottom: 12px; }
.reward-report-icon { font-size: 30px; flex: 0 0 auto; }
.reward-report-label { font-size: 15px; font-weight: 700; color: #5a3a1a; }
/* 🎨 [RAPOR-TASARIM-PAKETI-1] altın "Ödülleri Al" (mockup: yeşil/turuncu yerine tema altını) */
.reward-collect-btn { display: block; width: 100%; background: linear-gradient(180deg, #f0d890, #c9931a); color: #2a1608; border: 1px solid #8b6914; border-radius: 8px; padding: 12px; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.25); }
.reward-collect-btn:hover { filter: brightness(1.06); }
.reward-collected { text-align: center; color: #3c7a2e; font-weight: 700; padding: 10px; background: #eaf5e6; border-radius: 8px; }
/* Madalya levhası + ödül kartları + İlk 10 + puan çubuğu (Tahsin onayı 2026-09-03, mockup 42cf4768) */
.evm-levha { position: relative; text-align: center; border-radius: 8px; margin-bottom: 10px;
background: linear-gradient(180deg, #3a2b16, #241708); border: 1px solid #8b6914; padding: 14px 10px 12px; }
.evm-madalya { font-size: 2.6rem; line-height: 1; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.evm-sira { font-family: Georgia, serif; font-size: 1.35rem; font-weight: 800; color: #f0d890; letter-spacing: .5px; margin-top: 4px; }
.evm-alt { font-size: .8rem; color: #c8ab74; margin-top: 2px; }
.evm-alt b { color: #f0d890; }
.evm-rozet { display: inline-block; margin-top: 7px; font-size: .72rem; font-weight: 700; color: #2a190c;
background: linear-gradient(180deg, #f0d890, #c9a227); border: 1px solid #8b6914; border-radius: 999px; padding: 3px 12px; }
.evm-bolum { background: rgba(255,255,255,.35); border: 1px solid #c9a06a; border-radius: 7px; padding: 10px 12px; margin-bottom: 10px; }
.evm-bolum-bas { font-family: Georgia, serif; font-weight: 700; color: #1a0f06; font-size: .92rem; margin-bottom: 8px; }
.evm-bolum-bas small { font-weight: 400; color: #4a3010; }
.okrt-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 4px; }
.okrt-kart { background: #f7e3b8; border: 1px solid #c7a56a; border-radius: 7px; padding: 8px 5px 7px;
display: grid; justify-items: center; gap: 3px; text-align: center; }
.okrt-kart img, .okrt-kart svg { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; }
.okrt-emoji { font-size: 2rem; line-height: 44px; height: 44px; }
.okrt-ad { font-size: .68rem; color: #4a3010; line-height: 1.15; }
.okrt-adet { font-size: .86rem; font-weight: 800; color: #1a0f06; font-variant-numeric: tabular-nums; }
.evm-muhur { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
background: rgba(63,127,36,.12); border: 1px solid rgba(47,122,36,.5); border-radius: 7px;
padding: 9px; color: #1d7a1d; font-weight: 800; font-size: .9rem; }
/* 📝 [ODUL-MESAJ-1] admin ödül mesajı (zengin HTML) + sancak imzası (Tahsin: "logomuzu
hediye altına koyalım") — imza görseli oyunun kendi çizimi images/ui/sancak.png. */
.rw-mesaj { line-height: 1.5; }
.rw-mesaj img { max-width: 100%; border-radius: 6px; }
.rw-imza { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 14px; }
.rw-imza img { height: 62px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.rw-imza span { font-size: .76rem; color: #6b4a1e; font-weight: 800; letter-spacing: .5px; }
.evm-t10 { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
.evm-t10 th { background: #e9d19e; color: #5b2b0c; font-size: .74rem; padding: 4px 8px; text-align: left; border: 1px solid #d9bb7c; }
.evm-t10 th.evm-pts, .evm-t10 td.evm-pts { text-align: right; }
.evm-t10 td { padding: 4px 8px; border: 1px solid #d9bb7c; background: #f4e4bc; color: #2a190c; }
.evm-t10 tr:nth-child(even) td { background: #efe0b0; }
.evm-t10 tr.evm-benim td { background: #f6e3a8; border-top: 2px solid #c9a227; border-bottom: 2px solid #c9a227; font-weight: 800; color: #6b3c11; }
.evm-t10 .evm-no { width: 34px; }
.evm-t10 tr.evm-gap td { text-align: center; color: #4a3010; background: transparent; border-left: 0; border-right: 0; }
.evm-t10 tr.evm-kacti td { color: #7a6440; }
.evm-arti { color: #1d7a1d; }
.evm-dis { font-size: .86rem; color: #2a190c; }
.evm-cubuk-ust { display: flex; justify-content: space-between; font-size: .74rem; color: #4a3010; margin: 8px 0 3px; }
.evm-cubuk { height: 10px; background: rgba(0,0,0,.12); border: 1px solid #c7a56a; border-radius: 999px; overflow: hidden; }
.evm-cubuk i { display: block; height: 100%; background: linear-gradient(90deg, #c9a227, #f0d890); }
.evm-dis-not { font-size: .8rem; color: #2a190c; margin-top: 6px; }
/* 🤝 [BAKICI-1] Bakıcılık paneli + bakıcı modu (Tahsin 2026-07-18 onaylı tasarım) */
.sit-sec { margin: 0 0 18px; }
.sit-h { font-weight: 800; color: #5a3a10; font-size: .92rem; margin: 0 0 8px; }
.sit-t { font-weight: 800; color: #5a3a1a; font-size: .95rem; }
.sit-s { font-size: .84rem; color: #8a6a3a; margin-top: 3px; }
.sit-card { background: linear-gradient(#f4e4bc, #f5ead0); border: 1px solid #c9a227; border-left: 5px solid #c9a227;
border-radius: 8px; padding: 13px 16px; margin: 0 0 10px; }
.sit-card.sit-warn { background: linear-gradient(#fdf1e3, #f8e6d0); border-color: #e0b483; border-left-color: #c9762a; }
.sit-card.sit-warn .sit-t { color: #7a4a13; }
.sit-card.sit-active { background: linear-gradient(#eef6e8, #dfeed6); border-color: #8fbf72; border-left-color: #5f9c3f; }
.sit-field { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; flex-wrap: wrap; }
.sit-field input { flex: 1; min-width: 160px; padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 5px;
background: #f6ead0; font-family: Georgia, serif; font-size: .88rem; color: #3a2408; }
.sit-btn { background: linear-gradient(#e0972f, #c97e1c); color: #fff; border: none; border-radius: 6px;
padding: 8px 15px; font-size: .86rem; font-weight: 800; font-family: Georgia, serif; cursor: pointer; }
.sit-btn:hover { filter: brightness(1.07); }
.sit-btn.sit-danger { background: linear-gradient(#b64034, #7e130d); }
.sit-btn.sit-ghost { background: #f0e3c4; color: #5a3a10; border: 1px solid #c9a06a; }
.sit-note { font-size: .82rem; color: #7a6440; margin: 10px 2px 0; line-height: 1.5; }
.sit-cool { background: #fff3d8; border: 1px solid #e0d0a8; border-radius: 6px; padding: 10px 13px; /* 🎨 [TEMA-HERYER-1] grimsiydi */
font-size: .85rem; color: #6b5c3f; }
.sit-log { width: 100%; border-collapse: collapse; font-size: .85rem; background: #f6ead0;
border: 1px solid #e6d7b4; border-radius: 6px; overflow: hidden; }
.sit-log th { text-align: left; font-size: .77rem; color: #8a6a3a; font-weight: 400; padding: 6px 10px;
background: #fdf7e6; border-bottom: 1px solid #e6d7b4; }
.sit-log td { padding: 6px 10px; border-bottom: 1px solid #ece0c4; color: #3a2408; }
.sit-log tr:last-child td { border-bottom: none; }
.sit-log .sit-time { color: #8a6a3a; white-space: nowrap; }
/* 📜 [LANDING-1] Landing içerik sayfası (Kurallar vb.) — Tahsin madde 7 */
body.landing-page-open .world-left-copy,
body.landing-page-open .world-right-copy { display: none !important; }
/* .world-portal-canvas'ın overflow:hidden'ı başlığın position:sticky'sini kırıyor.
SADECE içerik sayfası açıkken gevşetilir (normal giriş ekranı etkilenmez). */
body.landing-page-open .world-portal-canvas { overflow: visible !important; }
/* ÜST MENÜ absolute konumlu (z-index 5, alt kenarı ~54px) → sayfa onun ALTINDAN başlamalı,
yoksa başlık menünün arkasında kalır (Tahsin 2026-07-19 bildirdi). */
/* NOT: burada overflow:hidden KULLANILMAZ — başlığın position:sticky'sini kırar
(uzun kurallar metninde "← Ana Sayfa" hep erişilebilir kalmalı). Köşe yuvarlama başlıkta. */
/* 🪟 [LANDING-KAPAT-1] Landing sayfası artık TAM EKRAN kaplar (Tahsin 2026-07-21):
eskiden ortada yüzen bir karttı → arkasında lobi MOCKUP GÖRSELİ (üye ol butonu, mağaza
rozetleri, sahte "98.Dünya" kutuları, üst menü) sızıyordu. Artık opak koyu zemin + ortada
parşömen sayfa; kaydırılabilir (overflow-y:auto) ve TAM KAPATIR. "← Ana Sayfa" ile lobiye
(giriş ekranından gelindiyse oraya) döner. z-index üst menünün (5) ÜSTÜNDE → menü de örtülür. */
.landing-page { position: fixed; inset: 0; z-index: 60; margin: 0; max-width: none;
border: 0; border-radius: 0; box-shadow: none; padding: 0 0 44px;
background: #0e0a06; overflow-y: auto; overscroll-behavior: contain; }
.landing-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
max-width: 1000px; margin: 0 auto;
background: linear-gradient(180deg,#2b1b10,#1a0e06); color: #fff4d7; padding: 12px 18px; flex-wrap: wrap;
position: sticky; top: 0; z-index: 6; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.landing-page-head h2 { margin: 0; font-size: 1.15rem; color: #fff4d7; }
.landing-page-close { background: #f0dca8; color: #3a2408; border: 1px solid #c9a06a; border-radius: 6px;
padding: 6px 14px; font-family: Georgia, serif; font-weight: 700; cursor: pointer; font-size: .85rem; }
.landing-page-close:hover { filter: brightness(1.05); }
.landing-page-body { max-width: 1000px; margin: 0 auto; min-height: 62vh; background: #f1e0b6;
padding: 16px 22px 24px; color: #2f1c08; font-size: .92rem; line-height: 1.65; }
@media (max-width: 900px) { .landing-page-head, .landing-page-body { max-width: none; } }
.lp-intro { background: linear-gradient(#f4e4bc,#f5ead0); border: 1px solid #c9a227; border-left: 5px solid #c9a227;
border-radius: 8px; padding: 13px 16px; color: #5a3a1a; margin: 0 0 18px; }
.lp-sec { font-size: 1.02rem; color: #7a4d0d; margin: 22px 0 7px; padding-bottom: 5px; border-bottom: 1px solid #e6d7b4; }
.lp-sec:first-of-type { margin-top: 2px; }
.lp-sub { font-size: .95rem; color: #5a3a10; margin: 16px 0 5px; }
.lp-p { margin: 0 0 8px; }
.lp-list { margin: 0; padding-left: 22px; }
.lp-list li { margin: 0 0 7px; }
.lp-list-u { margin: 0 0 8px; padding-left: 20px; list-style: "— " outside; color: #4a3418; }
.lp-list-u li { margin: 0 0 5px; padding-left: 2px; }
.lp-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 10px 0 0;
background: #f6ead0; border: 1px solid #e6d7b4; border-radius: 6px; overflow: hidden; }
.lp-table th { text-align: left; font-size: .8rem; color: #8a6a3a; font-weight: 400; padding: 7px 10px;
background: #fdf7e6; border-bottom: 1px solid #e6d7b4; }
.lp-table td { padding: 7px 10px; border-bottom: 1px solid #ece0c4; }
.lp-table tr:last-child td { border-bottom: none; }
.lp-foot { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid #e6d7b4; font-size: .85rem; color: #7a6440; }
/* 🏢 [SIRKET-KUNYE-KUCUK-1] KÜNYE KÜÇÜK PUNTO (Tahsin 2026-09-11: "küçük yazılarla
yazsak nasıl olur"). Tahsin sanal ofisten vazgeçti, ev adresi yayında kalıyor;
adresin sayfada göze çarpmamasını istedi.
⚠️ SINIR BİLİNÇLİ: yasa bilginin ULAŞILABİLİR olmasını istiyor, BÜYÜK olmasını
değil — fatura/sözleşme dipnotu gibi küçük punto meşru. Ama okunamayacak kadar
küçültmek ya da zemine karıştırmak "bilgilendirme yükümlülüğü yerine getirilmedi"
sayılır ve ödeme kuruluşu bu sayfaları ELLE inceliyor. Bu yüzden:
· 0.78rem — küçük ama net okunur (mobilde 12-13px karşılığı)
· renk #6a5638 — soluk ama zeminle kontrastı korunuyor
· display/visibility/opacity ile GİZLEME YOK, seçilebilir ve kopyalanabilir
Daha fazla küçültme isteği gelirse: gerçek koruma bu değil, adresin kendisini
değiştirmek (sanal ofis). Küçük punto yalnız görsel öne çıkmayı azaltır. */
.lp-kunye { font-size: .78rem; color: #6a5638; line-height: 1.55; }
.lp-kunye b { color: #5a4526; font-weight: 600; }
.lp-table.lp-kunye th, .lp-table.lp-kunye td { padding: 5px 9px; font-size: .78rem; }
/* 🌍 [DUNYA-BILGI-1 v3] Dünya Bilgisi — seçici + 4 sekme + istatistik/sıralama tabloları */
.wi-pick { margin: 0 0 12px; }
.wi-grup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 7px; }
.wi-grup label { font-size: .8rem; color: #7a6440; min-width: 96px; font-weight: 700; }
.wi-chip { border: 1px solid #c9a227; background: #fdf7e6; color: #7a4d0d; border-radius: 999px;
padding: 5px 15px; font-size: .87rem; font-weight: 700; cursor: pointer; user-select: none; }
.wi-chip.on { background: linear-gradient(#7a4d0d,#5a3410); color: #ffe0a4; border-color: #5a3410; }
.wi-chip.kapali { border-style: dashed; opacity: .85; }
.wi-chip.kapali.on { background: linear-gradient(#5c4a2e,#3a2c16); border-color: #3a2c16; color: #e8dcc0; } /* 🎨 [TEMA-HERYER-1] griydi */
.wi-chip small { font-weight: 400; opacity: .8; }
.wi-intro { background: linear-gradient(#f4e4bc,#f5ead0); border: 1px solid #c9a227; border-left: 5px solid #c9a227;
border-radius: 8px; padding: 11px 14px; color: #5a3a1a; margin: 0 0 12px; font-size: .9rem; }
/* 🎨 [TEMA-HERYER-1] "kapalı" durumu soğuk griydi — SOLUK KAHVE ile veriliyor:
kapalı hissi duruyor (canlı karttan mat), palet dışına çıkmıyor. */
.wi-intro.kapali { border-color: #8a7350; border-left-color: #8a7350;
background: linear-gradient(#efe6d2,#ded0b0); color: #5c4a2e; }
.wi-badge { font-size: .78rem; font-weight: 700; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.wi-badge.live { background: #e7f4e4; color: #2e6b25; border: 1px solid #a9d3a0; }
.wi-badge.soon { background: #fdf0d8; color: #8a5a12; border: 1px solid #e0bd72; }
.wi-badge.closed { background: #ded0b0; color: #5c4a2e; border: 1px solid #a08a5e; } /* 🎨 [TEMA-HERYER-1] */
.wi-tabs { display: flex; gap: 3px; border-bottom: 2px solid #d8c49a; margin: 0 0 14px; overflow-x: auto; }
.wi-tab { padding: 8px 14px; font-size: .88rem; font-weight: 700; color: #8a6a3a; cursor: pointer;
border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; margin-bottom: -2px;
white-space: nowrap; user-select: none; }
.wi-tab.on { background: #f4e4bc; color: #5a3410; border-color: #d8c49a; }
.wi-st td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: #3a2408; }
.wi-st td:first-child { width: 44%; }
.wi-avg { display: block; font-weight: 400; font-size: .82rem; color: #4a3010; margin-top: 1px; } /* [SIYAH-YAZI-1] */
.wi-res i { font-style: normal; margin-left: 10px; }
.wi-res i:first-child { margin-left: 0; }
.wi-scroll { overflow-x: auto; border: 1px solid #e6d7b4; border-radius: 6px; background: #f6ead0; }
.wi-units { border-collapse: collapse; font-size: .84rem; min-width: 760px; width: 100%; }
.wi-units th { background: #fdf7e6; padding: 6px; border-bottom: 1px solid #e6d7b4; text-align: center; }
.wi-units td { padding: 7px 6px; border-bottom: 1px solid #ece0c4; text-align: center; font-variant-numeric: tabular-nums; }
.wi-units td:first-child { text-align: left; color: #4a3418; font-weight: 700; white-space: nowrap; padding-left: 10px; }
.wi-units tr:last-child td { border-bottom: none; }
.wi-uico { width: 34px; height: 34px; object-fit: contain; image-rendering: -webkit-optimize-contrast; display: block; margin: 0 auto; }
.wi-rank { border-collapse: collapse; font-size: .89rem; width: 100%; min-width: 560px; }
.wi-rank th { background: #fdf7e6; color: #6a4a1a; font-size: .8rem; padding: 8px 12px; text-align: left;
border-bottom: 1px solid #e6d7b4; }
.wi-rank th.r, .wi-rank td.r { text-align: right; }
.wi-rank td { padding: 7px 12px; border-bottom: 1px solid #ece0c4; font-variant-numeric: tabular-nums; }
.wi-rank tr:last-child td { border-bottom: none; }
.wi-rank tr.ilk3 td { background: #fdf7e6; font-weight: 700; }
@media (max-width: 620px) {
.wi-grup label { min-width: 100%; }
.wi-st td:first-child { width: 52%; }
}
/* ⚡ [HIZLI-ROUND-1] Hızlı Roundlar — aktif round kartı + yaklaşanlar */
.fr-aktif { border: 2px solid #d9932f; border-radius: 10px; background: linear-gradient(#fffaf2,#fff5e8);
overflow: hidden; margin: 0 0 6px; }
.fr-aktif-head { background: linear-gradient(#b45309,#7c3a06); color: #ffe9cf; padding: 10px 14px;
display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fr-aktif-head b { font-size: 1.03rem; }
.fr-aktif-body { padding: 11px 14px; }
.fr-sayac { background: #1c1917; color: #fbbf24; font-variant-numeric: tabular-nums; font-weight: 800;
padding: 3px 12px; border-radius: 6px; font-size: .88rem; letter-spacing: .5px; white-space: nowrap; }
.fr-odul { background: #e7f4e4; color: #166534; border: 1px solid #a9d3a0; font-weight: 800;
font-size: .77rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.fr-oyuncu { font-size: .8rem; opacity: .9; margin-left: auto; white-space: nowrap; }
.fr-yak { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.fr-yak-k { border: 1px solid #e0bd72; border-radius: 9px; background: #f6ead0; padding: 11px 13px; }
.fr-yak-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; flex-wrap: wrap; }
.fr-yak-ust b { font-size: .96rem; color: #5a3410; }
.fr-yak-sayac { background: #fdf0d8; color: #8a5a12; border: 1px solid #e0bd72; font-weight: 800;
font-variant-numeric: tabular-nums; padding: 2px 9px; border-radius: 6px; font-size: .8rem; white-space: nowrap; }
.fr-yak-k ul { margin: 0; padding-left: 18px; font-size: .83rem; color: #6a5230; }
.fr-yak-k li { margin: 0 0 2px; }
.fr-yak-not { font-size: .79rem; color: #4a3010; margin: 6px 0 0; font-style: italic; } /* [SIYAH-YAZI-1] */
/* 🏁 Round bitti ekranı (oyun içindeyken round kapanırsa) */
.fr-bitti-arka { position: fixed; inset: 0; background: rgba(28,25,23,.82); z-index: 9999;
display: flex; align-items: center; justify-content: center; padding: 18px; }
.fr-bitti { background: linear-gradient(#fffaf2,#fff2df); border: 2px solid #d9932f; border-radius: 12px;
max-width: 420px; width: 100%; padding: 22px; text-align: center; color: #3a2408;
box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.fr-bitti h2 { margin: 0 0 6px; color: #7c3a06; font-size: 1.35rem; }
.fr-bitti .kaz { background: #fff2df; border: 1px solid #e0bd72; border-radius: 9px; padding: 12px; margin: 14px 0; } /* 🎨 [TEMA-HERYER-1] saf beyazdı */
.fr-bitti .kaz b { font-size: 1.1rem; color: #b45309; }
.fr-bitti button { background: linear-gradient(#7a4d0d,#5a3410); color: #ffe0a4; border: none;
border-radius: 8px; padding: 10px 22px; font-weight: 800; cursor: pointer; font-size: .95rem; }
/* 🌍 [DUNYA-BILGI-1] Dünya Bilgisi kartları — canlı ayarlardan doldurulur */
.lp-world { border: 1px solid #e6d7b4; border-radius: 8px; background: #f6ead0; padding: 14px 16px; margin: 0 0 16px; }
.lp-world-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
border-bottom: 1px solid #e6d7b4; padding-bottom: 7px; margin-bottom: 10px; }
.lp-world-head .lp-sec { border-bottom: none; padding-bottom: 0; }
.lp-badge { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.lp-badge-live { background: #e7f4e4; color: #2e6b25; border: 1px solid #a9d3a0; }
.lp-badge-soon { background: #fdf0d8; color: #8a5a12; border: 1px solid #e0bd72; }
.lp-world-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: .85rem; color: #5a4526; margin-bottom: 4px; }
.lp-world-meta b { color: #7a4d0d; }
@media (max-width: 620px) {
.lp-world { padding: 12px; }
.lp-table td:first-child { width: 52% !important; }
}
.conn-rules { margin: 10px 0 0; padding-left: 20px; font-size: .85rem; color: #5a4526; line-height: 1.6; }
.conn-rules li { margin: 0 0 4px; }
.world-simple-btn.world-sitter { border-color: #c9762a; background: linear-gradient(#f3e6d2, #e6d3b4); }
.world-simple-btn.world-sitter small { color: #a8601c; font-weight: 800; }
/* Bakıcı modunda kapalı sekmeler ARAYÜZDE de gizlenir (sunucu tarafı zaten 403 veriyor).
DİKKAT: Profil sekmesinin data-tab değeri "profile-settings" — "profile" DEĞİL (Tahsin 2026-07-19
bildirdi: "profil gözüküyor"). Yanlış isim yazılırsa sekme açık kalır. */
/* 🔒 [AYARLAR-MENU-1] `.nav-tab[...]` → `header [data-tab=...]`: Profil düğmesi Ayarlar
açılır menüsüne taşındı ve orada `.nav-tab` sınıfı yok. Kapı düğmenin SINIFINA değil
HEDEFİNE bağlanmalı; `header` sınırı da sayfa gövdesini korur. */
/* 📂 [NAV-PORTAL-1] `#nav-menuler` de kapsamda: menü panelleri gövdede yaşıyor,
Ayarlar panelindeki hesap öğeleri data-tab="profile-settings" taşıyor. */
body.sitter-mode header [data-tab="profile-settings"],
body.sitter-mode header [data-tab="clan"],
body.sitter-mode header [data-tab="premium"],
body.sitter-mode header [data-tab="messages"],
body.sitter-mode #nav-menuler [data-tab="profile-settings"],
body.sitter-mode #nav-menuler [data-tab="clan"],
body.sitter-mode #nav-menuler [data-tab="premium"],
body.sitter-mode #nav-menuler [data-tab="messages"] { display: none !important; }
/* ══════════════════════════════════════════════════════════════════
⚙️ [AYARLAR-MENU-1] ÜST ÇUBUK AÇILIR MENÜSÜ (Tahsin 2026-08-14)
Başarımlar · Yardım · Profil buraya taşındı, Komut Ayarları "yakında".
══════════════════════════════════════════════════════════════════ */
.nav-dd { position: relative; display: inline-flex; }
/* `position: absolute` konumu .nav-dd'ye göre alsın diye kapsayıcı `relative`.
z-index yüksek: menü kaynak çubuğunun ÜSTÜNE düşüyor, o çubuk `sticky` ve kendi
yığın bağlamını kurduğu için düşük bir değer menüyü altında bırakırdı. */
/* 🖼️ [AYARLAR-STIL-1] KUTUNUN KENDİSİ DE ÇERÇEVELİ — Tahsin 2026-08-14 referans
ekranı gönderip "bu şekilde yapman lazım" dedi: süslü altın çerçeve, koyu
kırmızı-kahve iç, altın yazılar, satır aralarında NOKTALI çizgi, ikon yok.
🕳️ `fill` KULLANILMIYOR (düğmelerden farkı bu): `fill` olsaydı kaynak resmin
70px'lik iç şeridi ~170px'e GERİLİR ve deri dokusu bulanırdı. Burada çerçeve
yalnız KENAR olarak çiziliyor, iç kısım düz `background` ile veriliyor — hem
net hem rengi tek satırdan ayarlanabilir. */
.nav-dd-menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 218px;
z-index: 1200;
display: flex;
flex-direction: column;
border: 12px solid transparent;
border-left-width: 13px;
border-right-width: 13px;
border-image-source: url("images/ui/cerceve.png");
border-image-slice: 40 44; /* `fill` YOK — iç kısım aşağıdaki background */
border-image-repeat: stretch;
border-radius: 0;
/* `padding-box`: dolgu KENARIN altına taşmasın, yoksa çerçevenin saydam
köşelerinden düz renk sızar ve süsleme kirlenir. */
background: linear-gradient(180deg, #5c3f1d, #463014) padding-box;
padding: 2px 0;
box-shadow: 0 12px 28px rgba(0, 0, 0, .6);
}
/* `hidden` özniteliği tek başına yetmiyor: `.nav-dd-menu` display:flex veriyor ve
display, hidden'ın user-agent kuralını EZİYOR → menü kapalıyken de görünürdü. */
.nav-dd-menu[hidden] { display: none; }
/* Satırlar: altın yazı + aralarında NOKTALI çizgi (referanstaki gibi).
Çizgi `border-bottom` ile, SON satır hariç — ayrı bir `
` ögesi koymak
klavye/ekran okuyucu için gereksiz gürültü olurdu. */
.nav-dd-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 10px;
background: transparent;
border: 0;
border-bottom: 1px dotted rgba(240, 210, 130, .38);
border-radius: 0;
color: #f0d078;
font-size: .82rem;
font-weight: 600;
text-align: left;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
cursor: pointer;
transition: background .12s, color .12s;
}
.nav-dd-item:last-child { border-bottom: 0; }
/* 🚩 [SANCAK-TEMA-1] Sancak teması seçici (Tahsin #17-A).
⚠️ Bayrak CSS ile ÇİZİLİYOR çünkü figürlü çizimler (kurt/aslan) Tahsin'den gelecek.
Her kartın içinde bir ![]()
var: dosya yoksa `onerror` ile kendini siler ve altındaki
hanedan deseni görünür; çizim eklendiği an KENDİLİĞİNDEN devralır. Görsel uydurmadan
sistemi bugün çalışır kılmanın yolu bu ([URUN-GORSEL-1] deseni). */
.sancak-izgara {
display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 8px; margin-top: 10px;
}
.sancak-kart {
display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 7px 4px; cursor: pointer; border-radius: 7px;
border: 1px solid #c7ad73; background: rgba(255, 246, 208, .45);
font: 600 .72rem Georgia, serif; color: #5a3f18; text-align: center;
}
.sancak-kart:hover { background: #fff6d0; }
.sancak-kart.secili { border-color: #7a5c2c; border-width: 2px; box-shadow: 0 0 0 2px rgba(201, 162, 39, .35); }
.sancak-bayrak {
position: relative; width: 54px; height: 40px; border-radius: 3px; overflow: hidden;
border: 1px solid rgba(74, 47, 8, .5); box-shadow: 0 2px 4px rgba(58, 42, 12, .3);
background: var(--sancak-ana, #8a7c62);
}
.sancak-bayrak img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hanedan bölünmeleri — çizim yokken tema yine de birbirinden AYIRT EDİLEBİLİR olmalı. */
.sancak-bayrak.sancak-capraz {
background: linear-gradient(135deg, var(--sancak-ana) 0 50%, var(--sancak-yan) 50% 100%);
}
.sancak-bayrak.sancak-serit {
background: repeating-linear-gradient(180deg,
var(--sancak-ana) 0 8px, var(--sancak-yan) 8px 16px);
}
.sancak-bagis-satir { display: flex; gap: 7px; align-items: center; margin-top: 9px; flex-wrap: wrap; }
.sancak-bagis-satir input {
flex: 1 1 110px; min-width: 0; padding: 7px 9px; border-radius: 5px;
border: 1px solid #a97924; background: #f6ead0; font: 400 .9rem Georgia, serif; color: #2f1c08;
}
/* 🗑️ .odul-nokta KALDIRILDI (Tahsin 2026-08-24): "buradaki kırmızı noktalamaları
şimdi anladım, onları kaldırabilirsin, gerek yok onlara." Bildirim üst çubuktaki
SAYI rozetinde duruyor (Ödül ⓵) — oyuncu kaç ödül beklediğini oradan görüyor. */
.nav-dd-item:hover:not(:disabled) {
color: #fff3cc;
background: rgba(255, 232, 170, .12);
}
/* Menü ikonu — oyunun kendi çizimleri. `flex: 0 0 auto` şart: kap flex ve görsel
uzun etiketin yanında sıkışıp ezilebiliyor. */
/* ⚠️ [AYARLAR-STIL-1] ARTIK KULLANILMIYOR ama SİLMEDİM: Tahsin referans biçimine
geçince web menüsündeki ikonlar kalktı. Aynı görseller MOBİL Ayarlar öbeğinde
duruyor; ileride "ikonlu hali daha iyiydi" denirse kural burada hazır. */
.nav-dd-ik {
flex: 0 0 auto;
width: 20px;
height: 20px;
object-fit: contain;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}
/* "Yakında" öğesi: tıklanamaz OLDUĞU görünmeli. Yalnız `disabled` verip aynı görünümde
bırakmak, oyuncuya "bozuk" hissi verirdi. İkonsuz olduğu için soldan hizayı
ikonlu satırlarla eşitleyen bir boşluk bırakılıyor. */
.nav-dd-soon { color: #b39a63; cursor: not-allowed; opacity: .85; }
/* ⚙️ [AYARLAR-GENIS-1] İnce ayraç — ekran sekmeleri (Başarımlar/Yardım/Profil) ile
hesap işlemlerini (Lobiye Dön, Bakıcılık…) ayırır. Onaylı maketteki çizgi. */
.nav-dd-ayrac { border-bottom: 1px solid rgba(240, 210, 130, .55); margin: 2px 8px; }
/* 📱 [NAV-PORTAL-1] Menü panelleri UYGULAMA KABUĞUNDA GİZLİ: app-mode kendi alt
çubuğunu kuruyor; #nav-menuler gövdede yaşadığı için kabuk süzgeçlerinden kaçar,
yanlışlıkla açık kalan bir panel ekranda asılı görünürdü. */
body.app-mode #nav-menuler { display: none !important; }
/* 📂 [NAV-PORTAL-1] Portal panelleri: `position: fixed` — navMenuAc düğmenin altına
konumlar (top/left). Gövde yolunda filter'lı ata olmadığı için fixed güvenli;
hiçbir kaydırma kabı kırpamaz. Eski `absolute + right` düzeni ezilir. */
#nav-menuler .nav-dd-menu {
position: fixed;
top: 0;
left: 0;
right: auto;
z-index: 3000;
}
.nav-dd-soon-tag {
margin-left: auto;
font-size: .62rem;
font-weight: 700;
letter-spacing: .4px;
text-transform: uppercase;
color: #e0b954;
background: rgba(228, 182, 79, .12);
border: 1px solid rgba(228, 182, 79, .3);
border-radius: 999px;
padding: 2px 7px;
}
/* Küçük ok — düğmenin açılır menü olduğunu belli eder. Menü açıkken yön değişir. */
.nav-dd-btn::after {
content: "▾";
margin-left: 6px;
font-size: .7em;
opacity: .8;
display: inline-block;
transition: transform .15s;
}
.nav-dd-btn[aria-expanded="true"]::after { transform: rotate(180deg); }
/* Dar ekranda menü sağa taşmasın: sağa yaslı zaten, ama üst çubuk sarınca
düğme sola kayabiliyor — o durumda sola yaslanır. */
@media (max-width: 640px) {
.nav-dd-menu { right: auto; left: 0; min-width: 190px; }
}
/* ✉️ [DESTEK-1] Destek sayfası — form + talep sorgulama (Tahsin 2026-07-20) */
.sup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.sup-f { font-size: .84rem; }
.sup-f label { display: block; color: #6a5230; margin-bottom: 3px; font-weight: 600; }
.sup-f label .zor { color: #b91c1c; }
.sup-f input, .sup-f select, .sup-f textarea { width: 100%; padding: 7px 9px; border: 1px solid #d8c49a;
border-radius: 6px; font-size: .88rem; background: #f6ead0; font-family: inherit; color: #2f1c08; }
.sup-f textarea { min-height: 120px; resize: vertical; }
.sup-genis { grid-column: 1 / -1; }
.sup-ipucu { font-size: .78rem; color: #8a7350; margin: 4px 0 0; }
.sup-gonder { background: linear-gradient(#7a4d0d,#5a3410); color: #ffe0a4; border: none; border-radius: 8px;
padding: 10px 24px; font-weight: 800; cursor: pointer; font-size: .95rem; margin-top: 12px; }
.sup-gonder:disabled { opacity: .6; cursor: default; }
.sup-basari { background: #e7f4e4; border: 1px solid #86c79a; border-left: 5px solid #2e6b25;
border-radius: 8px; padding: 14px 16px; color: #14532d; margin: 0 0 14px; }
.sup-no { font-size: 1.5rem; font-weight: 800; color: #166534; letter-spacing: 1px; }
.sup-sorgu { display: flex; gap: 8px; flex-wrap: wrap; }
.sup-sorgu input { flex: 1; min-width: 160px; padding: 7px 9px; border: 1px solid #d8c49a;
border-radius: 6px; background: #f6ead0; color: #2f1c08; }
.sup-sorgu button { background: #c9a227; color: #3a2408; border: none; border-radius: 6px;
padding: 7px 18px; font-weight: 700; cursor: pointer; }
.sup-takip-sonuc { background: #f6ead0; border: 1px solid #e6d7b4; border-radius: 8px; padding: 13px 15px; margin: 12px 0 0; }
.sup-takip-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sup-takip-ust b { font-size: 1.05rem; color: #7a4d0d; }
.sup-durum { background: #fdf0d8; color: #8a5a12; border: 1px solid #e0bd72; border-radius: 999px;
padding: 2px 11px; font-size: .78rem; font-weight: 700; }
.sup-mesaj { background: #f7f3e8; border: 1px solid #e6d7b4; border-radius: 7px; padding: 10px 12px;
white-space: pre-wrap; font-size: .87rem; margin: 0 0 10px; }
.sup-cevap { background: #e7f4e4; border: 1px solid #a9d3a0; border-radius: 7px; padding: 10px 12px;
white-space: pre-wrap; font-size: .87rem; margin: 0 0 8px; }
.sup-cevap b { display: block; color: #166534; font-size: .8rem; margin-bottom: 3px; }
/* ⚡ [HIZLI-TUR-AD-1] Dünya seçiminde hızlı turlar AYRI bölüm + turuncu tema (Tahsin 2026-07-20).
Adı "Hızlı Round" değil "HIZLI TUR". Normal dünyalarla karışmasın — kuralları farklı. */
.world-section-title.world-section-fast { color: #7b3a06; } /* [SIYAH-YAZI-1] panel açık parşömen, açık turuncu okunmuyordu */
.world-fast-note { font-size: .8rem; color: #2a190c; margin: -4px 0 8px; }
.world-simple-btn.world-fast { border-color: #b45309; background: linear-gradient(#f6e3c8, #e8cba4); }
.world-simple-btn.world-fast strong { color: #7c3a06; }
.world-fast-tag { display: inline-block; background: linear-gradient(#b45309,#7c3a06); color: #ffe9cf;
font-size: .62rem; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 999px;
vertical-align: middle; margin-left: 5px; }
/* ⚡🚫 [HIZLI-TUR-KAPI-1] Hızlı turda premium + başarımlar KOMPLE kapalı (Tahsin 2026-07-20).
Sunucu zaten 403 veriyor (lib/fast-round-gate.js); bu sadece sekmeyi gizler ki oyuncu
boş/kilitli ekrana tıklamasın. İkisi birlikte olmalı — CSS tek başına koruma DEĞİLDİR. */
body.fast-round-mode .nav-tab[data-tab="premium"],
body.fast-round-mode .nav-tab[data-tab="achievements"] { display: none !important; }
/* 🤝 Bakıcı uyarı kutusu (dünya seçiminde) — onaylı önizlemedeki tasarım */
.sit-modal-back { position: fixed; inset: 0; background: rgba(30,18,6,.55); z-index: 99999;
display: flex; align-items: center; justify-content: center; padding: 18px; }
.sit-modal { background: #faf3e0; border: 1px solid #c9a06a; border-radius: 8px; max-width: 430px;
width: 100%; overflow: hidden; box-shadow: 0 8px 26px rgba(0,0,0,.45); font-family: Georgia, serif; }
.sit-modal-bar { background: linear-gradient(180deg,#2b1b10,#1a0e06); color: #fff4d7;
padding: 10px 15px; font-size: .92rem; font-weight: 800; }
.sit-modal-body { padding: 15px 17px; color: #2f1c08; font-size: .92rem; line-height: 1.55; }
.sit-modal-body p { margin: 0 0 6px; }
/* 🎁 [EVRAPOR-1] Etkinlik sonuç/ödül raporu (Tahsin 2026-07-18 onaylı tasarım) */
.evr-rank { display: flex; align-items: center; gap: 13px; background: linear-gradient(#f4e4bc, #f5ead0);
border: 1px solid #c9a227; border-left: 5px solid #c9a227; border-radius: 8px; padding: 14px 18px; margin: 0 0 14px; }
.evr-rank-none { background: linear-gradient(#f7f2e4, #eee6d2); border-color: #c3b189; border-left-color: #c3b189; }
.evr-medal { font-size: 32px; flex: 0 0 auto; }
.evr-rankno { font-size: 1.26rem; font-weight: 800; color: #7a4d0d; }
.evr-ranksub { font-size: .83rem; color: #8a6a3a; }
.evr-rank-none .evr-rankno { color: #5f5138; }
.evr-rank-none .evr-ranksub { color: #8a7d63; }
.evr-panel { background: #f6ead0; border: 1px solid #e6d7b4; border-radius: 7px; padding: 6px 4px; margin: 0 0 14px; }
.evr-t { width: 100%; border-collapse: collapse; font-size: .89rem; }
.evr-t caption { text-align: left; font-weight: 800; color: #5a3a10; font-size: .86rem; padding: 6px 10px 8px; }
.evr-t td, .evr-t th { padding: 6px 10px; border-bottom: 1px solid #ece0c4; color: #3a2408; }
.evr-t th { font-size: .78rem; color: #8a6a3a; text-align: left; font-weight: 400; }
.evr-t tr:last-child td { border-bottom: none; }
.evr-ic { width: 26px; font-size: 1.05rem; }
.evr-amt { text-align: right; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; color: #6b3f06; }
.evr-no { width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: #8a6a3a; }
.evr-pts { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.evr-me { background: #fff2cf; }
.evr-me td { font-weight: 800; color: #6b3f06; }
.evr-gap td { text-align: center; color: #b8a67f; padding: 3px 10px; letter-spacing: 3px; }
.evr-noprize { background: #f7f2e4; border: 1px solid #ddd0ae; border-radius: 7px; padding: 12px 14px; margin: 0 0 14px; font-size: .88rem; color: #5f5138; }
.evr-noprize-sub { font-size: .82rem; color: #8a7d63; margin-top: 5px; }
.evr-where { font-size: .82rem; color: #7a6440; margin: 9px 2px 0; line-height: 1.5; }
.rep-claim-badge { background: linear-gradient(#e0972f, #c97e1c); color: #fff; border: none; border-radius: 6px; padding: 3px 10px; font-size: 11.5px; font-weight: 800; cursor: pointer; margin-right: 6px; white-space: nowrap; }
.rep-claim-badge:hover { filter: brightness(1.08); }
.rep-row.rep-claimable { background: #f4e4bc; }
/* #11 Zengin duyuru gösterimi (oyuncu tarafı) */
/* 📜 [DUYURU-TAMGENIS-1] Duyuru görseli kartın TAM GENİŞLİĞİNİ kullanır (Tahsin isteği).
Duyurular yalnız yönetimin yazdığı afiş/banner'lar olduğu için genişletmek doğru;
oyuncu içeriği burada yok. Admin yükleme sınırı 800→1400 px'e çıkarıldı ki
geniş ekranda büyütülünce bulanıklaşmasın. */
.ann-body-rich img { width: 100%; max-width: 100%; height: auto; border-radius: 6px; margin: 6px 0; display: block; }
.ann-body-rich h2 { font-size: 17px; margin: 8px 0 4px; }
.ann-body-rich h3 { font-size: 15px; margin: 6px 0 3px; }
.ann-body-rich ul, .ann-body-rich ol { margin: 6px 0; padding-left: 22px; }
.ann-body-rich a { color: #2f6fb0; text-decoration: underline; }
.ann-body-rich p { margin: 6px 0; }
.ann-body-rich { overflow-wrap: anywhere; }
/* #13 Kişisel Metin BB kod render */
.bb-rendered { overflow-wrap: anywhere; }
.bb-rendered .bb-quote { border-left: 3px solid #c3a765; background: rgba(195,167,101,.14); margin: 6px 0; padding: 6px 10px; color: #5a4a2a; font-style: italic; border-radius: 0 5px 5px 0; }
.bb-rendered .bb-img { max-width: 100%; height: auto; border-radius: 6px; margin: 4px 0; display: block; }
.bb-rendered a { color: #2f6fb0; text-decoration: underline; }
/* #13 Profil resmi (oyuncu) */
.prof-avatar-row { display: flex; align-items: flex-start; gap: 14px; }
.prof-avatar-preview { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: #eaddb8; border: 1px solid #c3a765; display: grid; place-items: center; flex: 0 0 auto; }
.prof-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.prof-avatar-empty { font-size: 34px; opacity: .5; }
.prof-avatar-ctrl { display: flex; flex-direction: column; gap: 3px; }
.prof-avatar-status { font-size: 12px; font-weight: 600; }
.prof-avatar-status.pending { color: #a06010; }
.prof-avatar-status.rejected { color: #c0392b; }
.player-avatar-box { text-align: center; margin-bottom: 10px; }
.player-avatar-img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; border: 2px solid #c3a765; }
/* YHATA-2 bina eğitiminde tek "Eğit" butonu (alt) */
.building-train-submit { padding: 12px 4px 4px; text-align: center; border-top: 1px solid #d8c398; margin-top: 8px; }
.btn-train-all { min-width: 200px; font-size: 15px; padding: 10px 28px; font-weight: 800; }
/* YHATA-3 Rapor paylaşımı ([report=kod] linki + paylaşılan rapor modalı) */
.bb-report-link { color: #a06010; font-weight: 700; text-decoration: underline; cursor: pointer; }
.bb-report-link:hover { color: #c97e1c; }
.report-detail-topbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.report-share-btn { margin-left: auto; }
.shared-report-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: flex-start; justify-content: center; z-index: 950; padding: 24px 12px; overflow: auto; }
.shared-report-box { width: 100%; max-width: 620px; background: #f2e7c6; border: 2px solid #3a2a14; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 44px rgba(0,0,0,.5); }
.shared-report-head { background: linear-gradient(#3a2a14, #2a1c0e); color: #e6c34a; padding: 11px 15px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.shared-report-x { cursor: pointer; font-size: 18px; padding: 0 4px; }
.shared-report-body { padding: 14px; max-height: 72vh; overflow: auto; }
/* ↩️ [GERI-CAGIR-CARPI-1] Düğmenin yazısı "↩️ İptal et" iken genişliği metinden geliyordu;
✕ tek karakter olunca geriye yalnız dolgu kalırdı → sabit kutu + ortalama (30×26 px).
Renk/gradyan DEĞİŞMEDİ (kontrast aynı). */
.kara-recall-btn {
display: block;
margin-top: 5px;
width: 30px;
min-height: 26px;
padding: 3px 0;
text-align: center;
font-size: .95rem;
font-weight: 700;
color: #fff0e0;
background: linear-gradient(180deg, #8a5a1e, #5a3510);
border: 1px solid #3a2208;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
}
.kara-recall-btn:hover { background: #6b4212; }
/* ↩️ [GERI-CAGIR-CARPI-1] Aynı eylemin ikinci yüzeyi: hareket detay penceresi. Düğme burada
pencerenin sağ altında, yazılı "Kapat" düğmesinin YANINDA duruyor ve onay sorgusu yok →
çıplak ve aynı kahverengi kutudaki bir ✕ "kapat" okunur, yanlış dokunuş orduyu geri çağırır.
Bu yüzden yalnız bu yüzeyde ✕ ETİKETİYLE birlikte ve KIRMIZI ailede çizilir (.btn-danger-sm:
#ffd0c8 yazı / #8f240e-#4b1007 zemin) — "Kapat"ın kahverengisinden (#6b4b24-#3a2010) renkle de
ayrışır. Buradaki iş yalnız dokunma hedefi: 36 px'lik boy. */
.kara-recall-x { min-height: 36px; text-align: center; }
/* ORDULAR TABLOSU */
.kara-ordu-table {
width: 100%;
border-collapse: collapse;
font-size: .88rem;
border: 1px solid #d2b77b;
}
.kara-ordu-table th {
background: #e8cc8e;
padding: 8px 10px;
text-align: center;
border: 1px solid #d2b77b;
font-size: 1.1rem;
}
.kara-ordu-table td {
padding: 7px 10px;
text-align: center;
border: 1px solid #ead8a0;
}
.kara-ordu-label {
background: #f5e4b9;
font-weight: 700;
color: #5a3a10;
text-align: left !important;
padding: 6px 10px !important;
}
@media (max-width: 600px) {
.karargah-layout { grid-template-columns: 1fr; }
.karargah-sidemenu { flex-direction: row; border-right: 0; border-bottom: 1px solid #c9a06a; }
}
/* YENİ SAYFALAR */
.kara-coming-soon {
display: flex; flex-direction: column; align-items: center;
justify-content: center; padding: 60px 20px; text-align: center; color: #6b4b24;
}
.kara-soon-icon { font-size: 3rem; margin-bottom: 12px; }
.kara-coming-soon h3 { font-size: 1.2rem; color: #2a1608; margin-bottom: 8px; }
.kara-coming-soon p { color: #2a190c; font-size: .9rem; } /* [SIYAH-YAZI-1] */
.kara-soon-desc { color: #6b4b24; font-size: .88rem; margin-bottom: 4px; }
/* İSTATİSTİK */
.kara-istatistik { display: flex; flex-direction: column; gap: 12px; }
.kara-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.kara-stat-card {
background: #fff0c8; border: 1px solid #d2b77b; border-radius: 6px;
padding: 14px 10px; text-align: center;
}
.kara-stat-value { font-size: 1.4rem; font-weight: 900; color: #2a1608; }
.kara-stat-label { font-size: .78rem; color: #6b4b24; margin-top: 4px; font-weight: 700; }
.kara-stat-table { width: 100%; border-collapse: collapse; font-size: .88rem; border: 1px solid #d2b77b; }
.kara-stat-table th { background: #e8cc8e; padding: 6px 10px; text-align: left; font-weight: 700; color: #5a3a10; border-bottom: 1px solid #d2b77b; }
.kara-stat-table td { padding: 6px 10px; border-bottom: 1px solid #ead8a0; }
.kara-stat-table tr:hover td { background: #f4e4bc; }
/* HAZIR BİRLİKLER */
.kara-hazir { padding: 4px; }
/* Karargah yazı rengi düzeltme */
.karargah-content,
.kara-emirler,
.kara-troop-col,
.kara-section-title,
.kara-hedef-bar,
.kara-stat-card,
.kara-menu-btn {
color: #1a0e00 !important;
}
.kara-troop-avail { color: #555 !important; }
.kara-troop-click {
cursor: pointer;
text-decoration: underline;
color: #3a1e00 !important;
font-weight: 700;
}
.kara-troop-click:hover { color: #c7a020 !important; }
.kara-troop-col-title { color: #1a0e00 !important; }
.kara-section-title { color: #1a0e00 !important; }
.kara-emir-table th { color: #1a0e00 !important; }
/* Input yazı rengi düzeltme */
.kara-troop-input,
.kara-coord,
.kara-troop-input::placeholder,
.kara-coord::placeholder {
color: #1a0e00 !important;
}
input[id^="kara-"] {
color: #1a0e00 !important;
}
/* SİMÜLATÖR */
.sim-table { width: 100%; border-collapse: collapse; font-size: .88rem; border: 1px solid #d2b77b; }
.sim-table th { background: #e8cc8e; padding: 8px 10px; font-weight: 700; color: #1a0e00; border-bottom: 2px solid #c9a06a; }
.sim-table td { padding: 6px 10px; border-bottom: 1px solid #ead8a0; vertical-align: middle; }
.sim-table tr:hover td { background: #f4e4bc; }
.sim-troop-label { font-weight: 600; color: #1a0e00; min-width: 120px; }
.sim-input { width: 80px; padding: 4px 6px; border: 1px solid #c9a06a; border-radius: 3px; font-family: Georgia,serif; font-size: .88rem; color: #1a0e00; background: #f4e4bc; text-align: center; }
.sim-avail { font-size: .75rem; color: #666; margin-left: 4px; }
.sim-fill-btn { padding: 3px 8px; background: #c9a06a; border: 0; border-radius: 3px; cursor: pointer; font-size: .78rem; font-family: Georgia,serif; color: #1a0e00; margin-left: 8px; }
.sim-fill-btn:hover { background: #a07840; color: #fff; }
.sim-options { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; }
.sim-option-row { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: #1a0e00; }
.sim-option-row label { font-weight: 700; }
.sim-input-sm { width: 60px; padding: 4px 6px; border: 1px solid #c9a06a; border-radius: 3px; font-family: Georgia,serif; font-size: .88rem; color: #1a0e00; background: #f4e4bc; text-align: center; }
.sim-result { margin-top: 12px; border: 2px solid #d2b77b; border-radius: 6px; overflow: hidden; }
.sim-result-header { padding: 12px 16px; font-size: 1.05rem; font-weight: 700; text-align: center; }
.sim-win { background: #d4edda; color: #155724; }
.sim-loss { background: #f8d7da; color: #721c24; }
.sim-result-body { padding: 12px 16px; background: #f4e4bc; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sim-result-row { display: flex; justify-content: space-between; font-size: .88rem; padding: 4px 8px; background: #fff0c8; border-radius: 3px; }
.sim-result-row b { color: #1a0e00; }
/* HAZIR BİRLİKLER */
.kara-hazir-page { display: flex; flex-direction: column; gap: 10px; }
.hb-save-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; }
.hb-save-row label { font-weight: 700; color: #1a0e00; font-size: .88rem; }
.hb-name-input { padding: 5px 10px; border: 1px solid #c9a06a; border-radius: 4px; font-family: Georgia,serif; font-size: .9rem; color: #1a0e00; background: #f4e4bc; min-width: 160px; }
/* HAZIR BİRLİK HIZLI SEÇ BARLARI */
.hb-quick-bar {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding: 8px 10px; background: #fff0c8; border: 1px solid #d2b77b;
border-radius: 4px; margin-bottom: 8px;
}
.hb-quick-label {
font-size: .82rem; font-weight: 700; color: #1a0e00; white-space: nowrap;
}
.hb-quick-btn {
padding: 4px 12px; background: linear-gradient(180deg,#6b4b24,#3a2010);
color: #fff4d7; border: 1px solid #8b6030; border-radius: 4px;
cursor: pointer; font-family: Georgia,serif; font-size: .82rem; font-weight: 700;
}
.hb-quick-btn:hover { background: #3a2010; }
.hb-clear-btn {
background: linear-gradient(180deg,#888,#555) !important;
border-color: #666 !important; color: #fff !important;
}
.hb-clear-btn:hover { background: #444 !important; }
/* SİMÜLATÖR DETAY TABLO */
.sim-result-meta {
display: flex; gap: 16px; flex-wrap: wrap;
padding: 8px 12px; background: #f4e4bc;
border-bottom: 1px solid #d2b77b; font-size: .88rem; color: #1a0e00;
}
.sim-result-meta b { color: #1a0e00; }
.sim-detail-table {
width: 100%; border-collapse: collapse; font-size: .85rem;
}
.sim-detail-table th {
background: #e8cc8e; padding: 6px 8px;
text-align: center; border: 1px solid #d2b77b;
font-size: 1rem; color: #1a0e00;
}
.sim-detail-table th:first-child {
text-align: left; min-width: 90px; font-size: .85rem;
}
.sim-detail-table td {
padding: 5px 8px; text-align: center;
border: 1px solid #e8d090; color: #1a0e00;
}
.sim-detail-table td:first-child {
text-align: left; font-weight: 700;
background: #f5e4b9; color: #5a3a10;
}
.sim-loss-cell {
color: #cc2200 !important; font-weight: 700;
}
/* ============================================================
YENİ MESAJ SİSTEMİ
============================================================ */
.msg-wrap-new { display: flex; flex-direction: column; background: #f4e6c1; }
.msg-tab-bar {
display: flex; flex-wrap: wrap; gap: 2px;
background: #e8cc8e; padding: 6px 8px;
border-bottom: 2px solid #c9a06a;
}
.msg-tab-btn {
padding: 6px 14px; background: transparent;
border: 1px solid transparent; border-radius: 4px 4px 0 0;
cursor: pointer; font-family: Georgia,serif; font-size: .85rem;
font-weight: 700; color: #5a3a10;
}
.msg-tab-btn.active {
background: #f4e4bc; border-color: #c9a06a;
border-bottom-color: #fff8e8; color: #1a0e00;
}
.msg-tab-btn:hover:not(.active) { background: #d8b878; }
.msg-tab-content { padding: 0; background: #f4e4bc; }
/* MESAJ TABLOSU */
.msg-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.msg-table th {
background: #e8cc8e; padding: 7px 10px; text-align: left;
font-weight: 700; color: #1a0e00; border-bottom: 2px solid #c9a06a;
}
.msg-table-row td { padding: 8px 10px; border-bottom: 1px solid #ead8a0; cursor: pointer; }
.msg-table-row:hover td { background: #fff0c8; }
.msg-table-row.msg-unread td { background: #fffde0; font-weight: 700; }
.msg-subject-cell { max-width: 300px; }
.msg-from-cell { color: #5a3a10; white-space: nowrap; }
.msg-date-cell { color: #4a3010; font-size: .8rem; white-space: nowrap; } /* [SIYAH-YAZI-1] */
.msg-dot { color: #cc2200; margin-right: 4px; }
/* MESAJ YAZ FORMU */
.msg-compose { padding: 14px 16px; background: #f4e6c1; }
.msg-compose-title { font-size: 1rem; color: #1a0e00; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid #d2b77b; }
.msg-compose-form { display: flex; flex-direction: column; gap: 10px; }
.msg-compose-row { display: flex; align-items: flex-start; gap: 10px; }
.msg-compose-row label { font-weight: 700; color: #1a0e00; font-size: .88rem; min-width: 90px; padding-top: 6px; }
.msg-compose-row input, .msg-compose-row textarea {
flex: 1; padding: 7px 10px; border: 1px solid #c9a06a; border-radius: 4px;
font-family: Georgia,serif; font-size: .9rem; color: #1a0e00; background: #f4e4bc;
}
.msg-compose-body-row textarea { resize: vertical; }
.msg-compose-actions { display: flex; gap: 8px; padding-left: 100px; }
/* ENGELLEME */
.msg-block-bar { margin-top: 16px; padding: 12px; background: #fff0c8; border: 1px solid #d2b77b; border-radius: 4px; }
.msg-block-bar h4 { margin: 0 0 8px; font-size: .9rem; color: #1a0e00; }
.msg-block-form { display: flex; gap: 8px; }
.msg-block-form input {
flex: 1; padding: 6px 10px; border: 1px solid #c9a06a; border-radius: 4px;
font-family: Georgia,serif; font-size: .9rem; color: #1a0e00; background: #f4e4bc;
}
.msg-block-page { padding: 14px 16px; }
.msg-circular { padding: 14px 16px; }
@media (max-width: 600px) {
.msg-compose-row { flex-direction: column; }
.msg-compose-row label { min-width: auto; padding-top: 0; }
.msg-compose-actions { padding-left: 0; }
}
/* COMPOSE TOGGLE */
.compose-toggle {
display: flex; gap: 0; border: 1px solid #c9a06a; border-radius: 5px;
overflow: hidden; width: fit-content;
}
.compose-toggle-btn {
padding: 7px 20px; background: #e8cc8e; border: 0;
cursor: pointer; font-family: Georgia,serif; font-size: .88rem;
font-weight: 700; color: #5a3a10;
}
.compose-toggle-btn.active {
background: linear-gradient(180deg,#2b1b10,#1a0e06);
color: #fff4d7;
}
.compose-toggle-btn:hover:not(.active) { background: #d8b878; }
/* SOHBET GÖRÜNÜMÜ */
/* ── Konuşma Sidebar (sol panel) ──────────────────────────── */
.msg-conv-sidebar { width: 260px; min-width: 200px; border-right: 2px solid #d2b77b; background: #ecdcab; overflow-y: auto; }
.msg-conv-sidebar-title { padding: 8px 12px; font-weight: 700; color: #3d1a05; font-size: .88rem; border-bottom: 1px solid #d2b77b; background: #e8cc8e; }
.conv-list-item { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #d9bb7c; cursor: pointer; transition: background .1s; position: relative; align-items: center; }
.conv-list-item:hover { background: #e8d7a8; }
.conv-list-active { background: #d4b87a !important; }
.conv-list-unread { background: #f5ecd0; }
.conv-list-unread .conv-list-name { font-weight: 900; }
.conv-list-dot { width: 8px; height: 8px; border-radius: 50%; background: #c0392b; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); }
.conv-list-avatar { width: 34px; height: 34px; border-radius: 50%; background: #c6a050; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 900; color: #fff; flex-shrink: 0; border: 2px solid #b89a5e; }
.conv-list-body { flex: 1; min-width: 0; }
.conv-list-top { display: flex; justify-content: space-between; align-items: center; }
.conv-list-name { font-size: .85rem; color: #3d1a05; font-weight: 700; }
.conv-list-time { font-size: .7rem; color: #8a6a3a; }
.conv-list-preview { font-size: .78rem; color: #6a4a1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv-list-badge { background: #c0392b; color: #fff; font-size: .65rem; padding: 1px 5px; border-radius: 10px; font-weight: 800; }
/* ── Konuşma Detay (Bubble Tarzı) ────────────────────────── */
.conv-container { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; background: #f4e6c1; }
.conv-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(180deg, #3d1f0a, #2a1206); color: #ffe6ad; flex-shrink: 0; border-bottom: 2px solid #7c4a16; }
.conv-back-btn { background: none; border: 1px solid #c9a06a; color: #ffe6ad; border-radius: 4px; padding: 5px 12px; cursor: pointer; font-size: .85rem; font-family: Georgia, serif; }
.conv-back-btn:hover { background: rgba(255,255,255,.08); }
.conv-partner-name { flex: 1; font-weight: 700; font-size: 1rem; }
.conv-header-actions { display: flex; gap: 6px; }
.conv-header-btn { background: none; border: 1px solid rgba(255,255,255,.2); color: #ffe6ad; border-radius: 3px; padding: 4px 10px; cursor: pointer; font-size: .8rem; font-family: Georgia, serif; }
.conv-header-btn:hover { background: rgba(255,255,255,.08); }
.conv-thread { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; background: #f4e4bc; min-height: 0; }
.conv-empty { color: #8a6a3a; font-style: italic; text-align: center; padding: 40px 20px; }
.conv-bubble { max-width: 80%; }
.conv-bubble-sent { align-self: flex-end; }
.conv-bubble-recv { align-self: flex-start; }
.conv-bubble-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; gap: 12px; }
.conv-bubble-sender { font-size: .82rem; font-weight: 700; color: #3d1a05; }
.conv-bubble-time { font-size: .72rem; color: #8a6a3a; }
.conv-bubble-body { padding: 10px 14px; border-radius: 8px; font-size: .9rem; line-height: 1.5; color: #3d1a05; word-break: break-word; }
.conv-bubble-recv .conv-bubble-body { background: #fff0d8; border: 1px solid #d9bb7c; border-radius: 10px 10px 10px 2px; }
.conv-bubble-sent .conv-bubble-body { background: #e8dbb8; border: 1px solid #c6a050; border-radius: 10px 10px 2px 10px; }
.conv-bubble-actions { display: flex; gap: 10px; margin-top: 4px; }
.conv-bubble-actions button { background: none; border: none; font-size: .76rem; color: #8a6a3a; cursor: pointer; font-family: Georgia, serif; padding: 2px 0; }
.conv-bubble-actions button:hover { color: #3d1a05; text-decoration: underline; }
.conv-compose-bottom { display: flex; gap: 8px; padding: 10px 14px; align-items: flex-end; border-top: 2px solid #d2b77b; background: #ecdcab; flex-shrink: 0; }
.conv-compose-bottom textarea { flex: 1; border: 1px solid #b89a5e; border-radius: 4px; padding: 8px 10px; font-family: Georgia, serif; font-size: .88rem; background: #f4e4bc; color: #3d1a05; resize: none; min-height: 40px; max-height: 100px; }
.conv-compose-bottom textarea::placeholder { color: #a08050; }
.conv-send-btn { border: 1px solid #7c4a16; background: linear-gradient(#fff0c2, #c68a31); font-weight: 900; color: #3d1a05; padding: 8px 18px; cursor: pointer; font-family: Georgia, serif; font-size: .88rem; border-radius: 4px; white-space: nowrap; }
.conv-send-btn:hover { background: linear-gradient(#ffe8a0, #b87a20); }
.conv-char-count { font-size: .72rem; color: #8a6a3a; text-align: right; padding: 0 14px 6px; background: #ecdcab; }
/* ── Yardım Sekmesi ──────────────────────────────────────── */
.help-search-box { padding: 12px 16px; border-bottom: 1px solid #d2b77b; }
.help-search-box input { width: 100%; padding: 9px 12px; border: 2px solid #b89a5e; border-radius: 4px; font-size: .92rem; font-family: Georgia, serif; background: #f4e4bc; color: #3d1a05; }
.help-search-box input:focus { border-color: #7c4a16; outline: none; }
.help-search-box input::placeholder { color: #a08050; }
.help-cats { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #d2b77b; flex-wrap: wrap; }
.help-cat { background: #f4e4bc; border: 1px solid #d9bb7c; border-radius: 6px; padding: 10px 16px; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 8px; }
.help-cat:hover { background: #f0dda0; border-color: #b89a5e; }
.help-cat.active { background: #e8cc8e; border-color: #7c4a16; box-shadow: inset 0 0 0 1px #7c4a16; }
.help-cat h3 { font-size: .9rem; color: #3d1a05; margin: 0; }
.help-cat-icon { font-size: 1.2rem; }
.help-content-inner { padding: 14px 16px; }
.help-section-title { font-size: 1.1rem; color: #3d1a05; border-bottom: 2px solid #c6a050; padding-bottom: 6px; margin-bottom: 12px; }
.help-card { display: flex; gap: 12px; padding: 12px; background: #f4e4bc; border: 1px solid #d9bb7c; border-radius: 6px; margin-bottom: 10px; cursor: pointer; transition: background .15s; }
.help-card:hover { background: #f5ecd0; }
.help-card.expanded { background: #f5ecd0; border-color: #b89a5e; }
.help-card-img { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.8rem; }
.help-card-body { flex: 1; min-width: 0; }
.help-card-name { font-size: .95rem; font-weight: 700; color: #3d1a05; margin-bottom: 3px; }
.help-card-desc { font-size: .82rem; color: #5a3a10; line-height: 1.4; }
.help-card-arrow { align-self: center; color: #b89a5e; font-size: 1.1rem; transition: transform .2s; }
.help-card.expanded .help-card-arrow { transform: rotate(90deg); }
.help-detail { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid #d9bb7c; }
.help-card.expanded .help-detail { display: block; }
.help-table-wrap { overflow-x: auto; }
.help-level-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.help-level-table th { background: #e8cc8e; padding: 5px 8px; text-align: center; border: 1px solid #d2b77b; font-weight: 700; color: #3d1a05; font-size: .78rem; }
.help-level-table td { padding: 4px 8px; text-align: center; border: 1px solid #ead8a0; color: #4a2a0f; font-size: .78rem; }
.troop-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.troop-stat { background: #ecdcab; border: 1px solid #d2b77b; border-radius: 4px; padding: 4px 8px; font-size: .8rem; }
.troop-stat b { color: #3d1a05; }
.troop-stat span { color: #6a4a1f; }
.ti-popup-overlay {
position: fixed;
inset: 0;
z-index: 5000;
background: rgba(20,14,4,.6);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.ti-popup-box {
position: relative;
width: min(92vw, 560px);
max-height: 88vh;
overflow-y: auto;
background: #fdf3d9;
border: 3px solid #986d2e;
box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.ti-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(#7a5222, #5c3c17);
color: #f9e8b1;
padding: 10px 14px;
}
.ti-popup-header h3 { margin: 0; font-size: 1.1rem; }
.ti-popup-close {
background: transparent;
border: 0;
color: #f9e8b1;
font-size: 1.1rem;
font-weight: 900;
cursor: pointer;
padding: 2px 8px;
}
.ti-popup-close:hover { color: #ffd27a; }
.ti-popup-body { display: flex; gap: 14px; padding: 14px; flex-wrap: wrap; }
.ti-popup-info { flex: 1; min-width: 220px; }
.ti-popup-desc { font-size: .85rem; color: #4a2a0f; margin: 0 0 10px; line-height: 1.4; }
.ti-popup-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: .78rem; }
.ti-popup-table th { background: #e8cc8e; padding: 5px 8px; border: 1px solid #d2b77b; color: #3d1a05; }
.ti-popup-table td { padding: 5px 8px; border: 1px solid #ead8a0; color: #4a2a0f; text-align: center; }
.ti-popup-image {
width: 130px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ti-popup-image img { max-width: 100%; max-height: 220px; object-fit: contain; }
.help-system-card { padding: 12px 14px; background: #f4e4bc; border: 1px solid #d9bb7c; border-radius: 6px; margin-bottom: 10px; }
.help-system-card h4 { color: #3d1a05; font-size: .92rem; margin-bottom: 5px; }
.help-system-card p { font-size: .85rem; color: #5a3a10; line-height: 1.45; }
/* ⏱️ [YARDIM-TABAN-1] Yardım > Birimler eğitim süresi hesaplayıcısı (Tahsin 2026-07-22).
Tablo TABAN süreyi gösterir; oyuncu kendi kademesini girince süreler yeniden hesaplanır. */
.help-troop-calc { background: linear-gradient(#f4e4bc, #f5ead0); border: 1px solid #c9a227;
border-left: 5px solid #c9a227; border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; }
.help-troop-calc .htc-title { font-family: Georgia, serif; font-weight: 700; color: #6a4a1a; font-size: .95rem; }
.help-troop-calc .htc-note { margin: 4px 0 9px; font-size: .8rem; color: #6a5230; line-height: 1.45; }
.help-troop-calc .htc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.help-troop-calc label { display: flex; flex-direction: column; gap: 3px; font-size: .74rem;
font-weight: 700; color: #5a3410; }
.help-troop-calc input { width: 74px; padding: 4px 6px; border: 1px solid #b9965e; border-radius: 5px;
background: #f6ead0; color: #2f1c08; font-size: .85rem; font-variant-numeric: tabular-nums; }
.help-troop-calc .htc-reset { background: linear-gradient(#e3cf9f, #d3ba82); border: 1px solid #8a6a3a;
border-radius: 5px; padding: 5px 12px; font-size: .78rem; font-weight: 700; color: #4a3418; cursor: pointer; }
.help-troop-calc .htc-reset:hover { filter: brightness(1.05); }
/* Hesaplayıcıyla değiştirilmiş süre — taban olmadığı belli olsun */
.help-level-table td.hc-time.hc-ozel { color: #1a7a34; font-weight: 700; }
/* 🐪 [DEVE-1] Yardım > Birimler altındaki DEVE kutusu. Birim tablosunun DIŞINDA durur çünkü
deve eğitilen bir birim değildir — masrafı/süresi yoktur, sadece hızı vardır. */
.deve-kutu { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
background: linear-gradient(#f4e4bc, #f3e6c8); border: 1px solid #c9a227;
border-left: 5px solid #c9a227; border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; }
.deve-gorsel { width: 130px; height: auto; flex: 0 0 auto;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.32)); }
.deve-bilgi { flex: 1 1 260px; min-width: 0; }
.deve-ad { font-family: Georgia, serif; font-weight: 700; color: #6a4a1a; font-size: 1rem; }
.deve-ad small { font-weight: 400; color: #8a6c3c; font-size: .78rem; margin-left: 6px; }
.deve-aciklama { margin: 5px 0 9px; font-size: .8rem; color: #5a4425; line-height: 1.5; }
.deve-tablo { border-collapse: collapse; font-size: .82rem; }
.deve-tablo td { padding: 4px 12px 4px 0; color: #4a3418; vertical-align: top; }
.deve-tablo td:first-child { white-space: nowrap; color: #6a5230; }
.deve-tablo small { color: #7a5a2a; }
.deve-not { margin: 8px 0 0; font-size: .75rem; color: #7a5a2a; line-height: 1.45; }
.help-icon-legend { margin-top: 16px; padding-top: 12px; border-top: 1px solid #d9bb7c; }
/* 🔣 [YARDIM-SIMGE-1] "Simge Açıklamaları" tablosu (Tahsin 2026-07-22: "çok büyük boşluklar var
ama yazılar okunmuyor"). SEBEP: .help-level-table 10 sütunlu BİRİM tablosu için yazılmış —
`min-width: 820px` + `table-layout: fixed` bu 3 sütunlu sözlüğe uygulanınca sütunlar EŞİT
bölünüyordu: Simge ve Adı ~270px boş kalıyor, Açıklama dar kalıp metni sağdan taşırıyordu
(üstelik legend'da taşma sarmalayıcısı yok → metin kesiliyor, okunmuyordu).
ÇÖZÜM: min-width kaldırılır, sütunlara gerçek genişlik verilir, açıklama SARAR. */
.help-icon-legend table.help-level-table { min-width: 0; width: 100%; }
.help-icon-legend th:nth-child(1), .help-icon-legend td:nth-child(1) { width: 64px; }
.help-icon-legend th:nth-child(2), .help-icon-legend td:nth-child(2) { width: 168px; }
.help-icon-legend td:nth-child(2) { text-align: left; font-weight: 700; }
.help-icon-legend td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; line-height: 1.55; }
.help-icon-legend td { vertical-align: top; padding: 7px 10px; }
.help-icon-legend td:nth-child(1) { font-size: 1.05rem; } /* simge biraz büyüsün */
@media (max-width: 620px) {
.help-icon-legend th:nth-child(2), .help-icon-legend td:nth-child(2) { width: 110px; }
.help-icon-legend td { padding: 6px 6px; font-size: .74rem; }
}
/* ── Oyuncu Autocomplete ─────────────────────────────────── */
.msg-autocomplete-wrap { position: relative; flex: 1; }
.msg-autocomplete-wrap input { width: 100%; box-sizing: border-box; }
.player-suggest {
position: absolute; top: 100%; left: 0; right: 0; z-index: 999;
background: #f4e4bc; border: 1px solid #c9a06a; border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,.15); max-height: 200px; overflow-y: auto;
}
.player-suggest-item {
padding: 8px 12px; cursor: pointer; font-size: .88rem; color: #1a0e00;
border-bottom: 1px solid #ead8a0;
}
.player-suggest-item:last-child { border-bottom: none; }
.player-suggest-item:hover { background: #fff0c8; }
/* Genel rapor satırı */
.report-row { border: 1px solid #c9a06a; border-radius: 4px; margin-bottom: 4px; overflow: hidden; background: #f4e4bc; }
/* 📋 [RAPOR-OKUNDU-1]→[RAPOR-TW-1] (Tahsin 2026-08-31, TW referans): okunmuşluk
ZEMİNLE değil KALINLIKLA — açılmamış KALIN, açılan İNCEYE döner. Zemin/şerit yok. */
.rep-row.rep-unread .rep-title { font-weight: 800; color: #2b1500; }
.rep-row .rep-title { font-weight: 400; color: #4a3418; }
.rep-row.rep-unread::after {
content: "●"; color: #c04000; font-size: .7rem; margin-left: 6px; flex: 0 0 auto;
}
/* 🎨 [RAPOR-IKON-1] deve görseli + savaş kılıcının sonuç noktası */
.rep-mini-gorsel { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
.rep-sonuc {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
margin-left: 2px; vertical-align: super; border: 1px solid rgba(0,0,0,.3);
}
.report-row-title { background: #d8b878; padding: 5px 10px; font-weight: 700; font-size: .88rem; color: #1a0e00; }
.report-row-body { padding: 8px 12px; font-size: .85rem; color: #1a0e00; }
.report-row-time { padding: 2px 12px 6px; font-size: .75rem; color: #4a3010; } /* [SIYAH-YAZI-1] */
/* ── Savaş Raporu Tablo ──────────────────────────────────── */
.rep-troop-grid { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: .82rem; }
.rep-tg-th { border: 1px solid #c9a06a; background: #2b1b10; color: #fff4d7; padding: 4px 8px; text-align: center; font-size: 1rem; min-width: 36px; }
.rep-tg-label { background: #d8b878; border: 1px solid #c9a06a; padding: 4px 8px; font-weight: 700; font-size: .8rem; color: #1a0e00; white-space: nowrap; }
.rep-tg-td { border: 1px solid #c9a06a; padding: 4px 8px; text-align: center; background: #f4e4bc; color: #1a0e00; }
.rep-tg-loss { color: #c04000; font-weight: 700; }
.rep-tg-remain { color: #1a6e00; font-weight: 700; }
.rep-tg-zero { color: #4a3010; background: #f4e4bc; } /* [SIYAH-YAZI-1] gri #bbb açık zeminde görünmüyordu */
.rep-troop-grid-empty { color: #2a190c; font-style: italic; padding: 4px 8px; }
.rep-detail-meta { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 12px; background: #f5e8c0; border: 1px solid #c9a06a; border-radius: 4px; margin: 8px 0; font-size: .85rem; }
.rep-bonus-meta { background: #eef3e6; border-color: #8fae6f; }
.rep-bonus-meta small { color: #6b7a5a; font-weight: 400; margin-left: 4px; }
/* ═══ BİNA DETAY SAYFASI (pencere yerine) ═══ */
/* 🎨 [TEMA-HERYER-1] EN GÖRÜNÜR MADDE: tüm bina sayfalarının zemini kirli beyazdı
(#fff8e8) — Tahsin: "beyazlık istemiyorum kesinlikle, yazı yazılacak bölgeler
hariç." Saman kâğıdına çekildi; içerideki kartlar (#fff0c8/#f7e3b6) bir ton açık
kaldığı için katman hiyerarşisi korunuyor. */
.building-page {
background: #e8dcc0;
border: 1px solid #c9a06a;
border-radius: 8px;
min-height: 400px;
}
/* 🖼️ [ANABINA-TEMA-1] BİNA SAYFASI BAŞLIĞI = ÜST PANEL TEMASI — Tahsin 2026-08-14:
"temayı bizim tema gibi yapmalısın." Şerit düz koyu kahverengiydi (#2b1b10) ve
oyunun hiçbir yüzeyiyle konuşmuyordu. Üst panelin AYNI kahve gradyanına ve altın
çizgisine geçirildi ([CERCEVE-1] ile birebir aynı değerler: #3a2a14→#241a0c +
#8a6a18) — Ana Bina dahil TÜM bina sayfalarının başlığı artık üst panelin devamı
gibi görünüyor. Yazı, açılır menüyle aynı altın (#f0d078). */
.building-page-header {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: linear-gradient(180deg, #3a2a14, #241a0c);
border-radius: 8px 8px 0 0;
border-bottom: 2px solid #8a6a18;
}
.building-page-back {
background: none;
border: 1px solid #8a6a18;
color: #f0d078;
border-radius: 5px;
padding: 6px 14px;
cursor: pointer;
font-size: 0.9rem;
white-space: nowrap;
}
.building-page-back:hover { background: rgba(255, 232, 170, .12); color: #fff3cc; }
.building-page-title {
color: #f0d078;
font-size: 1.1rem;
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.building-page-content { padding: 16px; }
/* Köy adı değiştirme kutusu */
.village-rename-box {
display: flex;
gap: 8px;
align-items: center;
margin: 12px 0;
padding: 12px;
background: #fff0c8;
border: 1px solid #d2b77b;
border-radius: 6px;
}
.village-rename-box input {
flex: 1;
padding: 8px 10px;
border: 1px solid #c9a06a;
border-radius: 5px;
font-family: Georgia, serif;
font-size: 0.9rem;
color: #1a0e00;
background: #f4e4bc;
}
/* Ana bina bina tablosu */
.main-buildings-table-wrap {
margin-top: 12px;
max-height: 420px;
overflow-y: auto;
border: 1px solid #d2b77b;
border-radius: 6px;
}
.main-buildings-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.main-buildings-table thead th {
position: sticky;
top: 0;
background: #2b1b10;
color: #fff4d7;
padding: 8px 10px;
text-align: left;
font-size: 0.8rem;
z-index: 1;
}
.main-buildings-table td {
padding: 7px 10px;
border-bottom: 1px solid #ead8a0;
color: #1a0e00;
}
.main-buildings-table tbody tr:hover { background: #fff0c8; }
.main-buildings-table .construct-name { display: flex; align-items: center; gap: 6px; }
.main-row-locked { opacity: 0.65; background: #f5ece0; }
.main-req-mini { font-size: 0.72rem; color: #a05030; }
.main-done { color: #1a6e00; font-weight: 700; }
/* Kaynak/işçi yetersiz - kırmızı */
.construction-resource-cell.res-lacking {
color: #cc2020;
font-weight: 800;
}
/* Asker eğitimi çiftlik uyarısı */
.troop-pop-warn {
color: #cc2020;
font-weight: 700;
font-size: 0.78rem;
}
/* Demirci araştırma kuyruğu */
.research-queue-box {
background: #fff0c8;
border: 1px solid #c7a56a;
border-radius: 8px;
padding: 12px;
margin: 12px 0;
}
.research-queue-box h3 {
margin: 0 0 8px;
color: #5a3a10;
font-size: 0.95rem;
}
.research-queue-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: #fff0c8; /* 🎨 [TEMA-HERYER-1] #f4e4bc kirli beyazdı, saran kutuyla aynı aileye */
border: 1px solid #d2b77b;
border-radius: 6px;
padding: 8px 10px;
margin-bottom: 6px;
}
.research-queue-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.research-queue-info .queue-time { color: #1a6e00; font-weight: 700; }
.smithy-item.queued {
opacity: 0.8;
border-color: #c8a020;
background: #fff8e0;
}
/* Pazar sekmeleri */
.market-tabs {
display: flex;
gap: 6px;
margin: 12px 0;
border-bottom: 2px solid #c9a06a;
padding-bottom: 0;
}
.market-tab {
background: #ecd9a8;
border: 1px solid #c9a06a;
border-bottom: none;
border-radius: 6px 6px 0 0;
padding: 8px 14px;
cursor: pointer;
font-size: 0.85rem;
color: #5a3a10;
font-weight: 600;
}
.market-tab.active {
background: #fff0c8; /* 🎨 [TEMA-HERYER-1] #f4e4bc beyaza kaçıyordu */
color: #1a0e00;
margin-bottom: -2px;
border-bottom: 2px solid #fff0c8;
}
.market-tab:hover { background: #f5e6c0; }
.npc-info {
font-size: 0.82rem;
color: #6e512d;
background: #fff4d6;
border-radius: 6px;
padding: 8px 10px;
margin: 6px 0 10px;
}
.npc-receive {
background: #e8f4e0;
border: 1px solid #a0c080;
border-radius: 5px;
padding: 8px 10px;
color: #2a5a10;
font-size: 0.9rem;
}
.send-form-group { margin-bottom: 10px; }
.send-form-group label { display: block; font-size: 0.82rem; color: #5a3a10; margin-bottom: 4px; }
.send-form-group input {
width: 100%;
padding: 8px 10px;
border: 1px solid #c9a06a;
border-radius: 5px;
font-family: Georgia, serif;
}
.send-res-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
.send-res-grid label {
display: flex;
align-items: center;
gap: 6px;
font-size: 1rem;
}
.send-res-grid input {
flex: 1;
padding: 7px 8px;
border: 1px solid #c9a06a;
border-radius: 5px;
font-family: Georgia, serif;
}
/* Koordinat girişi */
.coord-input-row {
display: flex;
align-items: center;
gap: 8px;
}
.coord-input-row input {
width: 90px;
padding: 8px 10px;
border: 1px solid #c9a06a;
border-radius: 5px;
font-family: Georgia, serif;
text-align: center;
}
.coord-input-row span { font-weight: 700; color: #5a3a10; }
/* ═══ PAZAR (Travian tarzı) ═══ */
/* 🐪 [DEVE-1] Kervancı kutusu: solda deve görseli, sağda tüccar/hız tablosu.
Dar ekranda deve üste geçer (sarmalayarak), tablo tam genişliği alır. */
.merchant-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.merchant-deve { width: 96px; height: auto; flex: 0 0 auto;
filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.merchant-box .merchant-table { flex: 1 1 220px; width: auto; }
.deve-hiz-satiri .deve-taban { color: #7a5a2a; font-weight: 400; font-size: .78em; }
.merchant-table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
font-size: 0.85rem;
}
.merchant-table th {
background: #e8c87a;
color: #3d250d;
padding: 7px 10px;
text-align: left;
}
.merchant-table th.num, .merchant-table td.num { text-align: right; }
.merchant-table td {
padding: 6px 10px;
border-bottom: 1px solid #e0c890;
background: #fdf3d8;
color: #3d250d;
}
.market-h {
color: #6e3a10;
font-size: 1.05rem;
margin: 14px 0 8px;
}
.send-table, .offer-prep-table, .my-offers-table, .other-offers-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
margin-bottom: 10px;
}
.send-table th, .my-offers-table th, .other-offers-table th {
background: #e8c87a;
color: #3d250d;
padding: 7px 10px;
text-align: left;
}
.send-table td { padding: 10px; border: 1px solid #e0c890; background: #fdf3d8; vertical-align: top; }
.send-res-line { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.send-res-line input { width: 110px; padding: 6px 8px; border: 1px solid #c9a06a; border-radius: 4px; }
.send-res-line small { color: #8a6a3a; }
.send-coord-line { margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.coord-sm { width: 70px; padding: 6px 8px; border: 1px solid #c9a06a; border-radius: 4px; text-align: center; }
.btn-market-send {
background: #7a5018;
color: #fff4d7;
border: 1px solid #5a3a10;
border-radius: 5px;
padding: 7px 16px;
cursor: pointer;
font-size: 0.85rem;
}
.btn-market-send:hover { background: #8a5e20; }
.offer-prep-table td { padding: 7px 8px; border: 1px solid #e0c890; background: #fdf3d8; }
.offer-prep-table .opl { font-weight: 600; color: #3d250d; width: 110px; }
.offer-prep-table input[type="number"] { width: 90px; padding: 6px 8px; border: 1px solid #c9a06a; border-radius: 4px; }
.offer-prep-table .ores label { margin-right: 10px; cursor: pointer; }
.my-offers-table td, .other-offers-table td {
padding: 7px 10px; border-bottom: 1px solid #e0c890; background: #fdf3d8; color: #3d250d;
}
.btn-cancel-sm {
background: #8a2020; color: #fff; border: none; border-radius: 4px;
padding: 4px 12px; cursor: pointer; font-size: 0.8rem;
}
.btn-cancel-sm:hover { background: #a52828; }
.other-offers-table .offer-status.disabled { color: #8a6f4a; font-size: 0.8rem; } /* 🎨 [TEMA-HERYER-1] nötr griydi */
/* Yakut ikonu (SVG) hizalama */
.res-icon-yakut {
display: inline-flex;
align-items: center;
justify-content: center;
}
.res-icon-yakut svg { display: block; }
/* Savaş raporu kuşatma/sadakat */
.rep-siege { border-left: 4px solid #b8800f; }
.rep-loyalty { border-left: 4px solid #8a2be2; }
.siege-line {
font-size: 0.9rem;
color: #3d250d;
margin: 4px 0;
}
.siege-drop { color: #cc2020; font-weight: 700; }
.capture-msg {
margin-top: 6px;
padding: 8px 12px;
background: #4a2020;
color: #ffd700;
border-radius: 6px;
font-weight: 800;
text-align: center;
font-size: 1rem;
}
.capture-fail-msg {
margin-top: 6px;
padding: 8px 12px;
background: #3a2c1a;
color: #e8c88a;
border: 1px solid #7a5a2a;
border-radius: 6px;
font-weight: 600;
text-align: center;
font-size: .85rem;
line-height: 1.35;
}
/* Mancınık hedef bina seçici */
.cat-target-select {
width: 100%;
padding: 8px 10px;
border: 1px solid #c9a06a;
border-radius: 5px;
font-family: Georgia, serif;
font-size: 0.9rem;
background: #f4e4bc;
color: #1a0e00;
}
/* Rapor tablosu - kaynak/işçi sütunları */
.rep-tg-sep { border-left: 2px solid #c9a06a !important; }
.rep-tg-res { font-size: 0.78rem; color: #5a3a10; background: #f1e0b6; }
.rep-troop-grid .rep-tg-loss.rep-tg-res { color: #cc2020; }
/* Simülatör kuşatma kutusu */
.sim-siege-box {
background: #fff0c8;
border: 1px solid #c8a020;
border-radius: 6px;
padding: 8px 12px;
margin: 8px 0;
font-size: 0.88rem;
color: #3d250d;
}
.sim-siege-box div { margin: 2px 0; }
/* Simülatör sonuç - kaynak sütun ayracı */
.sim-detail-table .sim-sep-th,
.sim-detail-table .sim-sep-td { border-left: 2px solid #c9a06a !important; }
/* Simülatöre Ekle butonları */
.sim-add-btn {
margin-top: 8px;
width: 100%;
background: #2d5a3d;
color: #e8f4e0;
border: 1px solid #1d4a2d;
border-radius: 6px;
padding: 8px 12px;
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
}
.sim-add-btn:hover { background: #3d6a4d; }
.sim-add-extras {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.sim-add-btn-sm {
flex: 1;
min-width: 140px;
background: #5a4018;
color: #fff4d7;
border: 1px solid #4a3010;
border-radius: 5px;
padding: 6px 10px;
cursor: pointer;
font-size: 0.76rem;
}
.sim-add-btn-sm:hover { background: #6a5020; }
/* Köy seçici */
.village-selector {
padding: 8px 12px;
border: 2px solid #c9a06a;
border-radius: 8px;
background: #f4e4bc;
color: #3d250d;
font-family: Georgia, serif;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
max-width: 280px;
}
.village-selector:hover { border-color: #b8800f; }
/* ═══ KÖY NAVİGASYON BARI ═══ */
.village-nav-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: linear-gradient(to bottom, #4a3018, #3a2410);
border-bottom: 2px solid #5a3a10;
color: #f0d9a8;
font-size: 0.92rem;
flex-wrap: wrap;
}
.vnav-link {
color: #7b2b06; /* [SIYAH-YAZI-1] çubuk V5'te açık parşömene döndü, koyu dönem renkleri kalmıştı */
cursor: pointer;
font-weight: 600;
text-decoration: none;
}
.vnav-link:hover { color: #1a0f06; text-decoration: underline; }
.vnav-sep { color: #4a3010; }
.vnav-arrow {
background: #5a3a18;
color: #f0d9a8;
border: 1px solid #7a5028;
border-radius: 4px;
width: 26px;
height: 26px;
cursor: pointer;
font-size: 0.85rem;
display: none;
}
.vnav-arrow:hover { background: #6a4a20; }
.vnav-village-name { font-weight: 700; color: #1a0f06; } /* [SIYAH-YAZI-1] */
.vnav-village-coord { color: #4a3010; font-size: 0.85rem; }
/* ── Not2: köy adına tıkla → aşağı açılır köy listesi (Tahsin 2026-07-10) ── */
.vnav-current { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 2px 6px; border-radius: 4px; position: relative; }
.vnav-current:hover { background: rgba(122, 43, 5, .12); } /* [FAZ5-39] açık zeminde görünür hover */
.vnav-current:hover .vnav-village-name { text-decoration: underline; }
.vnav-caret { color: #7b2b06; font-size: .8rem; } /* [SIYAH-YAZI-1] */
.vnav-dropdown {
/* fixed: nav bar'ın mobil overflow-x'i kırpamasın; konumu JS verir (toggleVillageDropdown) */
position: fixed;
min-width: 210px;
background: #f8edcf;
border: 1px solid #a87935;
border-radius: 0 0 8px 8px;
box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
z-index: 4600;
/* MAX 5 KÖY görünür (5 × 34px satır = 170) — fazlası aşağı KAYDIRMALI. [Y2-AD-SIRA] (Tahsin
2026-09-21 Y2) sıra anahtarı satırı kalktı; tavan 212 → 170 (5 köy kuralı) geri döndü. */
max-height: 170px;
overflow-y: auto;
}
.vnav-dd-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; height: 34px; box-sizing: border-box; cursor: pointer; border-bottom: 1px solid #e8d5a0; color: #4a2c0c; font-size: .88rem; }
.vnav-dd-item:last-child { border-bottom: none; }
.vnav-dd-item:hover { background: #f0dca6; }
.vnav-dd-active { background: #e8f0d8; box-shadow: inset 3px 0 0 #6b8e23; font-weight: 800; }
.vnav-dd-name { font-weight: 700; color: #3d1a05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vnav-dd-coord { color: #8a6a3a; font-size: .78rem; white-space: nowrap; }
/* ═══ GENEL BAKIŞ TABLOSU ═══ */
.overview-wrap { padding: 16px; max-width: 1100px; margin: 0 auto; }
.overview-title {
color: #5a3a10;
font-size: 1.3rem;
margin-bottom: 14px;
}
.overview-table {
width: 100%;
border-collapse: collapse;
background: #f1e0b6;
font-size: 0.88rem;
}
.overview-table th {
background: #d8b878;
color: #3d250d;
padding: 10px 12px;
text-align: left;
border: 1px solid #c9a06a;
font-weight: 700;
}
.overview-table td {
padding: 9px 12px;
border: 1px solid #e0c890;
color: #3d250d;
}
.overview-table .ov-num { text-align: right; }
.ov-active-row { background: #fff0c8; }
.ov-active-row .ov-name { font-weight: 700; }
.ov-village-link {
color: #7a3a10;
cursor: pointer;
font-weight: 700;
text-decoration: none;
}
.ov-village-link:hover { color: #a04010; text-decoration: underline; }
.ov-coord { color: #8a6a3a; font-size: 0.82rem; margin-left: 4px; }
.ov-incoming-badge { display: inline-block; background: #c0392b; color: #fff; font-weight: 900; font-size: .78rem; padding: 1px 7px; border-radius: 10px; margin-right: 6px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.3); white-space: nowrap; }
.ov-incoming-badge:hover { background: #a5281c; }
.ov-loyalty {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
background: #9a3d12; /* 🎨 [TEMA-HERYER-1] MOR (#8a2be2) palete tamamen yabancıydı — kızıl-kahve */
color: #fff;
border-radius: 3px;
font-size: 0.72rem;
}
.ov-construction { color: #6a5028; font-size: 0.84rem; }
.overview-table tbody tr:hover { background: #fdeecb; }
/* Liderboard klan rozeti */
.lb-clan { color: #7a3a10; font-weight: 700; }
.lb-rank { font-size: 1.1rem; text-align: center; }
.lb-num { text-align: right; }
/* Genel bakış - sıralama + toplam */
.ov-sortable { cursor: pointer; user-select: none; }
.ov-sortable:hover { background: #c9a05a; }
.ov-total-row td {
background: #e8d4a0 !important;
border-top: 2px solid #b8800f;
font-weight: 700;
}
/* Yakut Damarı hotspot */
.hs-ruby_vein { left: 62%; top: 24%; }
/* Genel bakış inşaat simgeleri */
.ov-build-icon {
display: inline-block;
font-size: 1.1rem;
margin-right: 3px;
}
.ov-build-icon sub { font-size: 0.65rem; color: #7a3a10; font-weight: 700; }
/* Harita kaynak gönder butonu */
.ks-action-btn.ks-transport {
background: #2d6a4d;
color: #e0f4e8;
border-color: #1d5a3d;
}
.ks-action-btn.ks-transport:hover { background: #3d7a5d; }
/* Bina resimleri (hotspot) */
.hs-image-layer {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
}
.hs-building-img {
position: absolute;
width: 56px;
height: 56px;
object-fit: contain;
transform: translate(-50%, -55%);
pointer-events: none;
filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));
}
/* Bina detay büyük ikonu resimken */
/* [FAZ1-42b] !important ŞART: bIcon inline 72px stil basıyor, kutu 64px (mobil kırılımda 52) —
inline'ı ezip kutuya sığdırmazsak görsel sağ-alta taşıyor. */
.building-entry-icon img { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }
.troop-img { height: 1.3em; width: auto; vertical-align: middle; object-fit: contain; }
/* 🎨 [YESIL-KALDIR-1] "TARLA" YEŞİLİ KOMPLE KALKTI — Tahsin 2026-08-14: "bu arka
plandaki yeşillik kalmış, bu yeşilliği hiçbir yerde kullanmayacağız, komple
kaldır." Eski zemin, ileride tarla resmi gelir diye konmuş yeşil çizgili bir
yer tutucuydu (#4f6630→#3a4d22 + çapraz şeritler); oyunun kahve/saman diline
tamamen yabancıydı. Üst çubuğun saman gradyanı ailesine çekildi. */
#village-default-view {
background: linear-gradient(180deg, #cbb083 0%, #b4975a 55%, #a8894f 100%);
border-radius: 12px;
padding: 8px 0 16px;
}
.village-hero {
border-radius: 10px;
box-shadow: 0 6px 22px rgba(0,0,0,.42);
}
/* =========================================================
SANCAK SAVAŞLARI — SİNEMATİK GİRİŞ EKRANI V2 [GIRIS-1 · 2026-07-31]
Dosya: public/assets/giris-1.jpg (Tahsin'in afişi · 1023×1537 dikey · 376 KB)
⚠️ Kaynak PNG 2.59 MB idi; giriş sayfası ilk açılışta indiği için JPEG q84'e
çevrildi (%86 küçüldü). Değiştirilecekse yeniden optimize edilmeli.
⚠️ ESKİ login-sancak-savaslari.png hâlâ .world-hero'da (dünya seçim lobisi)
kullanılıyor — SİLİNMEZ.
Not: Bu blok eski auth tasarımını ezmek için dosyanın sonundadır.
========================================================= */
#auth-screen {
position: fixed;
inset: 0;
/* 📱 [GIRIS-1 · telefon] `100vh` telefonda adres çubuğu gizlenince/klavye açılınca YANLIŞ
ölçülür (Safari/Chrome mobil sanal viewport). `dvh` gerçek görünür yüksekliği verir →
alt şerit ekranın dışına taşmaz, forma binmez. vh satırı eski tarayıcı yedeği olarak kalır. */
min-height: 100vh;
min-height: 100dvh;
height: 100dvh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
/* 🖼️ [GIRIS-1] Tahsin'in yeni afişi (2026-07-31). Dikey (1023×1537) olduğu için `contain`:
poster HİÇ kırpılmaz, başlık ve slogan her ekranda tam görünür; yanlar koyu zeminle dolar.
⚠️ Başlık + slogan GÖRSELİN İÇİNDE → HTML'deki h1/.subtitle GİZLENDİ (çift yazı olmasın). */
background:
radial-gradient(circle at 50% 58%, rgba(0,0,0,0.0), rgba(0,0,0,0.30) 78%),
#1a130c url("assets/giris-1.jpg") center center / contain no-repeat !important;
padding: 0 !important;
}
#auth-screen::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(0,0,0,.4), transparent 23%, transparent 77%, rgba(0,0,0,.4)),
linear-gradient(180deg, rgba(0,0,0,.08), transparent 38%, rgba(0,0,0,.12));
pointer-events: none;
}
/* Form kutusu: afişin ALT yarısındaki savaş alanının üstünde durur → okunabilirlik için
opak koyu panel + altın çerçeve. (Eski hâli şeffaftı; o zamanki görselde arkası düz alandı.) */
#auth-screen .auth-box {
position: absolute;
left: 50%;
top: 63%;
transform: translate(-50%, -50%);
width: min(300px, 82vw) !important;
padding: 14px 14px 12px !important;
background: linear-gradient(180deg, rgba(14,9,5,.93), rgba(26,17,9,.95)) !important;
border: 1px solid rgba(207,165,75,.72) !important;
border-radius: 8px !important;
box-shadow: 0 14px 34px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,225,150,.07) !important;
color: #ead8a5 !important;
/* 🔴 [GIRIS-1 · Tahsin telefon raporu] KATMAN: form, alt şeridin (#auth-imgbox z-index:3)
ÜSTÜNDE olmalı. Eskiden 2 idi → şerit formun üstünde kalıyordu ve birazcık üst üste
binseler bile GİRİŞ DÜĞMESİNİ yutuyordu ("destek kurallar gizlilik yazan bölüm giriş
butonunu eziyo"). Geometrik çakışmayı önlemek tek başına yetmez; gerçek telefonda
adres çubuğu/klavye yüzünden yükseklik oynadığı için katman da doğru olmalı.
⚠️ `!important` ŞART: dosyanın başındaki (satır ~2114) `z-index: 2 !important` kuralı
sırayla değil öncelikle kazanır — düz `z-index: 5` yazınca uygulanmıyordu. */
z-index: 5 !important;
}
/* ⚠️ [GIRIS-1] Başlık ve slogan AFİŞİN İÇİNDE çizili — HTML'de tekrar göstermek
aynı yazıyı iki kez basardı. Erişilebilirlik için DOM'da duruyor, sadece gizli. */
#auth-screen .auth-box h1,
#auth-screen .auth-box .subtitle {
display: none !important;
}
#auth-screen .tab-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 0 0 10px 0 !important;
}
#auth-screen .tab-btn {
height: 34px;
border-radius: 4px;
border: 1px solid rgba(205, 162, 71, .75) !important;
background: linear-gradient(180deg, rgba(37,28,18,.78), rgba(14,10,7,.88)) !important;
color: #d9bf78 !important;
font-family: Georgia, 'Times New Roman', serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .3px;
text-shadow: 0 1px 2px #000;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.35);
}
#auth-screen .tab-btn.active {
background: linear-gradient(180deg, #8c1712, #5e0e0c) !important;
color: #ffe9a8 !important;
border-color: #e0b45a !important;
}
#auth-screen .auth-form input {
height: 38px;
width: 100%;
margin-bottom: 9px !important;
padding: 0 14px !important;
border-radius: 4px !important;
border: 1px solid rgba(170, 132, 63, .7) !important;
background: rgba(12, 9, 6, .76) !important;
color: #f2dfad !important;
font-size: 14px;
box-shadow: inset 0 1px 8px rgba(0,0,0,.55);
}
#auth-screen .auth-form input::placeholder {
color: rgba(226, 199, 142, .62);
}
#auth-screen .auth-form input:focus {
outline: none;
border-color: #f2c76b !important;
box-shadow: 0 0 0 2px rgba(199, 155, 73, .22), inset 0 1px 8px rgba(0,0,0,.55);
}
#auth-screen .btn-primary {
height: 42px;
padding: 0 !important;
border-radius: 4px !important;
border: 1px solid #e2b65c !important;
background: linear-gradient(180deg, #bd2b20, #74120e) !important;
color: #ffe8a6 !important;
font-family: Georgia, 'Times New Roman', serif;
font-size: 17px !important;
font-weight: 800;
letter-spacing: .8px;
text-shadow: 0 2px 2px #280602;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.45);
}
#auth-screen #register-form .btn-primary {
background: linear-gradient(180deg, #31537b, #152c49) !important;
}
#auth-screen .msg {
margin-top: 8px !important;
border-radius: 4px;
border: 1px solid rgba(218, 173, 80, .35);
background: rgba(13, 10, 7, .82);
color: #f4dc9b;
}
#auth-screen .msg.error {
border-color: rgba(187, 52, 45, .75);
background: rgba(66, 10, 8, .86);
color: #ffb2aa;
}
#auth-screen .msg.success {
border-color: rgba(80, 170, 88, .7);
background: rgba(8, 56, 22, .86);
color: #b8ffbe;
}
/* 📱 [GIRIS-1] Telefon. ⚠️ `cover` KALDIRILDI: yeni afiş DİKEY ve başlık üstte —
cover dar ekranda üstü kırpıp "SANCAK SAVAŞLARI" yazısını kesiyordu. `contain` ile
afiş bütün kalır, boşluklar koyu zeminle dolar. */
@media (max-width: 700px) {
#auth-screen .auth-box {
top: 62%;
width: min(286px, 82vw) !important;
}
}
/* 📏 KISA EKRAN (yatay telefon / klavye açık). Tahsin: "ilk hesaba şifre girdiğimizde
yerde alt paneller." ESKİ HÂLİ TERSİNİ YAPIYORDU: yükseklik azalınca formu `top:66%`
ile DAHA AŞAĞI itiyordu → form alt şeridin üstüne biniyordu (740×330'da 14px çakışma
ölçüldü). Artık kısaldıkça form YUKARI çekilir ve şerit inceltilir. */
@media (max-height: 720px) {
#auth-screen .auth-box { top: 58%; transform: translate(-50%, -50%) scale(.94); }
}
@media (max-height: 620px) {
#auth-screen .auth-box { top: 52%; transform: translate(-50%, -50%) scale(.86); }
#auth-footer { padding: 4px 10px calc(4px + env(safe-area-inset-bottom, 0px)); }
#auth-footer button { font-size: 10px; padding: 3px 5px; }
}
/* Çok kısa (yatay telefon): form afişin ortasına çekilir, şerit iyice incelir. */
@media (max-height: 470px) {
#auth-screen .auth-box { top: 47%; transform: translate(-50%, -50%) scale(.80); }
#auth-footer { padding: 2px 8px calc(2px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
}
/* Marka güncellemesi */
.logo { font-family: Georgia, 'Times New Roman', serif; letter-spacing: .4px; }
/* ===== DÜNYA SEÇİMİ / LOBİ ===== */
body.world-mode {
background:#0b0704;
overflow:auto;
}
#world-screen {
min-height:100vh;
background:
radial-gradient(circle at center, rgba(150,96,35,.18), rgba(0,0,0,.92) 70%),
linear-gradient(180deg,#120905,#050302);
color:#2b1608;
font-family: Georgia, 'Times New Roman', serif;
}
.world-shell {
width:min(1380px, 100%);
min-height:100vh;
margin:0 auto;
background:#130b06;
border-left:2px solid rgba(196,145,62,.55);
border-right:2px solid rgba(196,145,62,.55);
box-shadow:0 0 80px rgba(0,0,0,.8);
}
.world-top-nav {
height:54px;
display:flex;
align-items:center;
justify-content:center;
gap:18px;
color:#f5dfae;
font-size:20px;
font-weight:bold;
background:linear-gradient(#3b160d,#1f0c07);
border-bottom:3px solid #b4873d;
text-shadow:0 2px 2px #000;
}
.world-top-nav button {
background:none; border:0; color:#f5dfae; font:inherit; cursor:pointer;
}
.world-hero {
height:310px;
background:
linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.16)),
url('assets/login-sancak-savaslari.png') center 18% / cover no-repeat;
position:relative;
border-bottom:3px solid #9b6d2d;
}
.world-hero::after {
content:''; position:absolute; inset:0;
background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 25%,transparent 75%,rgba(0,0,0,.25));
}
.world-hero-title { display:none; }
.world-main-panel {
position:relative;
display:grid;
grid-template-columns: 250px 1fr 1fr;
gap:0;
min-height:520px;
background:#efe0bb;
border-top:1px solid #dfbc72;
}
.world-character {
background:
linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.2)),
url('assets/login-sancak-savaslari.png') 10% 75% / 740px auto no-repeat;
border-right:2px solid #9b6d2d;
}
.world-info-panel, .world-select-panel {
padding:34px 38px;
background:linear-gradient(180deg,#f6e9c8,#ead7a8);
border-right:2px solid #9b6d2d;
color:#241307;
}
.world-info-panel h2, .world-select-panel h2 {
font-size:34px;
color:#1d0f06;
margin-bottom:18px;
text-shadow:0 1px #fff0c7;
}
.world-select-panel h2 span { font-size:28px; }
.world-info-panel p, .world-select-panel p {
font-size:18px; line-height:1.35; margin:10px 0;
}
.world-select-panel p button {
color:#8d250e; background:none; border:0; font-weight:bold; cursor:pointer; font:inherit;
}
.world-red-btn {
width:100%;
margin:22px 0;
padding:15px;
background:linear-gradient(#c21d14,#7e0b07);
color:#fff5cf;
border:3px solid #a97924;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.12), 0 3px 5px rgba(0,0,0,.35);
font-size:25px;
font-weight:bold;
font-family:Georgia,'Times New Roman',serif;
cursor:pointer;
}
.world-preview-row { display:flex; gap:14px; margin-top:12px; }
.world-preview-card {
flex:1; aspect-ratio:1.15;
display:flex; align-items:end; justify-content:center;
padding:10px;
background:linear-gradient(145deg,#506c30,#1f2a16);
border:3px solid #b58b41;
color:#fff1bf;
font-weight:bold;
box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.world-select-panel h3 {
font-size:22px;
margin:22px 0 12px;
border-bottom:1px solid rgba(98,64,23,.35);
padding-bottom:8px;
}
.world-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.world-btn {
min-height:62px;
padding:10px 12px;
background:linear-gradient(#f1dfad,#cdb27b);
border:3px solid #9b7436;
color:#4a2a0d;
font-family:Georgia,'Times New Roman',serif;
cursor:pointer;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 2px 5px rgba(0,0,0,.22);
text-align:center;
}
.world-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.world-btn strong { display:block; font-size:22px; }
.world-btn small { display:block; font-size:13px; color:#715123; margin-top:4px; }
.world-note {
margin-top:22px!important;
font-size:15px!important;
color:#6c4a1c;
padding:12px;
border:1px solid rgba(111,76,24,.35);
background:rgba(255,255,255,.16);
}
@media (max-width:900px) {
.world-shell { border:0; }
.world-top-nav { overflow:auto; justify-content:flex-start; padding:0 12px; font-size:15px; gap:10px; }
.world-hero { height:210px; }
.world-main-panel { grid-template-columns:1fr; }
.world-character { display:none; }
.world-info-panel, .world-select-panel { border-right:0; border-bottom:2px solid #9b6d2d; padding:24px 18px; }
.world-list { grid-template-columns:1fr; }
}
/* ===== Sancak Savaşları - Dünya Seçim Portalı V2 ===== */
body.world-mode {
margin: 0;
min-height: 100vh;
background:
radial-gradient(circle at center, rgba(70, 40, 18, .35), rgba(0,0,0,.96) 70%),
#050403 !important;
overflow: auto;
}
body.world-mode #auth-screen,
body.world-mode #game-screen { display: none !important; }
#world-screen {
min-height: 100vh;
width: 100%;
display: grid;
place-items: start center;
padding: 0;
background: #050403;
font-family: Georgia, 'Times New Roman', serif;
}
/* 🖼️ [LOBI-1 · 2026-08-01] Zemin `world-portal-bg.png` → `lobi-1.jpg` ile değişti.
SEBEP (Tahsin: "üsttaraftaki kötü görüntüyü kaldırcaz"): eski zeminin ÜST ŞERİDİNE
sahte bir menü ("Ana Sayfa ✦ Kurallar ✦ … ✦ Forum") RESMİN İÇİNE çizilmişti; bizim
gerçek `.world-top-nav`'ımız onun üstüne binince çift yazı görünüyordu. Yeni zeminde
üst şerit BOŞ ve süslü → gerçek menü temiz oturuyor.
⚠️ ORAN DEĞİŞTİ: 1536×1024 (1.5000) → 1473×1040 (1.4163). Paneller yüzdeyle
konumlandığı için aspect-ratio ve AŞAĞIDAKİ tüm yüzdeler birlikte güncellendi;
biri değişip diğeri kalırsa paneller resmin çerçevesinden kayar.
⚠️ Kaynak PNG 2753 KB idi → 5px siyah kenarlık kırpıldı + JPEG q88 = 457 KB (%83 küçük).
Değiştirilecekse yeniden ölçülüp optimize edilmeli. */
.world-portal-canvas {
position: relative;
width: min(96vw, 1473px);
aspect-ratio: 1473 / 1040;
min-height: 650px;
background:
linear-gradient(rgba(0,0,0,.04), rgba(0,0,0,.04)),
url("assets/lobi-1.jpg") center top / cover no-repeat;
border: 3px solid #8a5a1d;
box-shadow: 0 0 55px rgba(0,0,0,.85), inset 0 0 20px rgba(255,210,120,.15);
overflow: hidden;
}
/* [LOBI-1] Yeni zeminin üst şeridi (y=6–52px · %0.6–5.0) BOŞ, süslü altın çerçeveli bir
banttır — eski zeminde bu bandın İÇİNE sahte menü yazısı çizilmişti ve gerçek menümüz
onun üstüne biniyordu ("üsttaraftaki kötü görüntü").
⚠️ Menünün KENDİ zemini + altın çerçevesi ARTIK YOK: bandın çizili çerçevesi zaten
orada duruyor, ikisi üst üste gelince çerçeve içinde çerçeve görünüyordu. Menü
şeffaf ve bandın iç alanına tam oturur. Zemin değişirse bu 4 yüzde yeniden ölçülmeli. */
.world-top-nav {
position: absolute;
left: 0.7%;
right: 0.7%;
top: 0.6%;
height: 4.4%;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(8px, 1.2vw, 18px);
color: #f7e7bd;
background: transparent;
border: 0;
font-size: clamp(14px, 1.35vw, 22px);
font-weight: 700;
text-shadow: 0 2px 3px #000;
z-index: 5;
}
.world-top-nav button {
border: 0;
background: transparent;
color: #f7e7bd;
font: inherit;
cursor: pointer;
}
.world-top-nav span[onclick] {
cursor: pointer;
transition: color .12s ease;
}
.world-top-nav span[onclick]:hover {
color: #ffd27a;
text-decoration: underline;
}
.world-left-copy,
.world-right-copy {
position: absolute;
top: 41%;
bottom: 10.2%;
color: #1e1005;
z-index: 4;
padding: clamp(16px, 2vw, 32px);
background: rgba(237, 213, 164, .83);
border: 1px solid rgba(117, 76, 28, .6);
box-shadow: inset 0 0 18px rgba(255,255,255,.18);
}
/* 🏰 [LOBI-SOL-1] Tahsin 2026-08-25 (ekran görüntülü): "bir sancak kur tablosunu SOLA
doğru genişlet, arka planda gözüküyor, orayı kapatmamız lazım." Sol kenar %25.3 →
%3: afişteki kesik figür + boş doku paneli n altında kalıyor. SAĞ KENAR SABİT
(%55.6) — sağ panelle araları değişmedi. [LOBI-AFIS] notu: afiş kompoze, paneller
yüzdeyle afişe kenetli; bu genişletme bilinçli olarak afiş kutusundan taşıyor. */
.world-left-copy { left: 24%; width: 35.1%; }
.world-right-copy { left: 57%; width: 33.3%; }
.world-left-copy h2,
.world-right-copy h2 {
margin: 0 0 14px;
font-size: clamp(22px, 2.2vw, 38px);
line-height: 1.05;
font-weight: 900;
letter-spacing: .5px;
}
.world-right-copy h2 span { font-size: .82em; }
.world-left-copy p,
.world-right-copy p {
font-size: clamp(13px, 1.1vw, 18px);
line-height: 1.34;
margin: 0 0 12px;
font-weight: 600;
}
.world-right-copy p button {
border: 0;
background: none;
color: #9a270e;
font: inherit;
font-weight: 900;
cursor: pointer;
}
.world-red-btn {
width: 86%;
margin: 12px 0 18px;
padding: clamp(10px, 1.1vw, 16px) 18px;
border: 3px solid #8e5a24;
background: linear-gradient(#d8291b, #8f0905);
color: #fff2c8;
box-shadow: 0 4px 0 #48210d, 0 0 14px rgba(0,0,0,.45);
font-family: Georgia, 'Times New Roman', serif;
font-weight: 900;
font-size: clamp(15px, 1.5vw, 25px);
letter-spacing: .5px;
text-shadow: 0 2px 2px #000;
cursor: pointer;
}
.world-left-copy h3,
.world-right-copy h3 {
margin: 8px 0 10px;
font-size: clamp(15px, 1.3vw, 24px);
font-weight: 900;
}
.world-preview-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(7px, .9vw, 14px);
}
.world-preview-card {
position: relative;
aspect-ratio: 1 / .82;
display: flex;
align-items: end;
justify-content: center;
border: 3px solid #9c7b37;
background: #405a23;
overflow: hidden;
color: #fff5c4;
font-weight: 900;
text-shadow: 0 2px 2px #000;
box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.world-preview-card span { position: relative; z-index: 2; padding: 0 0 8px; }
.world-preview-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(transparent 40%, rgba(0,0,0,.60));
}
.world-preview-card { cursor: pointer; transition: transform .12s ease, filter .12s ease; }
.world-preview-card:hover { transform: translateY(-2px); filter: brightness(1.08); }
.wp-zoom {
position: absolute;
z-index: 3;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
display: grid;
place-items: center;
background: rgba(20,14,4,.65);
border: 1px solid rgba(255,241,191,.55);
border-radius: 50%;
font-style: normal;
font-size: 13px;
line-height: 1;
}
.world-preview-village { background: url("images/village-scene.png") center/cover, #405a23; }
.world-preview-army { background: url("images/troops/sancak_beyi.png") center/cover, #4d3b1f; }
/* [FAZ4-34] "Harita" kartı köy resmi gösteriyordu — parşömen harita görseliyle değişti
(gerçek oyun içi harita kesiti istenirse Tahsin ekran görüntüsü verince güncellenir) */
.world-preview-map { background: url("images/buildings/map.png") center/contain no-repeat, #2b3a18; }
.world-preview-units { background: url("images/troops/archer.png") center/cover, #4d3b1f; }
.world-preview-battle1 { background: url("images/troops/cavalry.png") center/cover, #4d3b1f; }
.world-preview-battle2 { background: url("images/troops/ram.png") center/cover, #3a2c1a; }
.gallery-lightbox {
position: fixed;
inset: 0;
z-index: 5000;
background: rgba(10,7,3,.82);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.gallery-lightbox-box {
position: relative;
max-width: min(90vw, 720px);
max-height: 90vh;
background: linear-gradient(#f1dfad, #cdb27b);
border: 4px solid #7d170e;
box-shadow: 0 10px 30px rgba(0,0,0,.5);
padding: 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.gallery-lightbox-box img {
max-width: 100%;
max-height: 78vh;
object-fit: contain;
border: 2px solid #6b4317;
background: #1c130a;
}
.gallery-lightbox-title {
font-family: Georgia, 'Times New Roman', serif;
font-weight: 900;
color: #3b2108;
}
.gallery-lightbox-close {
position: absolute;
top: -14px;
right: -14px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #7d170e;
color: #f9e8b1;
border: 2px solid #d8b76a;
font-weight: 900;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.world-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(10px, 1vw, 16px);
margin: 8px 0 18px;
}
.world-btn.world-card {
position: relative;
min-height: clamp(70px, 6.3vw, 104px);
padding: 12px 12px 12px 56px;
border: 3px solid #986d2e;
background: linear-gradient(#ead29b, #c49a56);
color: #2a1606;
box-shadow: 0 3px 0 #6b4317, inset 0 0 0 2px rgba(255,245,190,.45);
cursor: pointer;
text-align: left;
font-family: Georgia, 'Times New Roman', serif;
transition: transform .12s ease, filter .12s ease;
}
.world-btn.world-card:hover { transform: translateY(-2px); filter: brightness(1.07); }
.world-btn.world-card strong {
display: block;
font-size: clamp(17px, 1.55vw, 28px);
line-height: 1;
font-weight: 900;
}
.world-btn.world-card small {
display: block;
margin-top: 4px;
color: #6b4015;
font-size: clamp(11px, .9vw, 15px);
font-weight: 700;
}
.world-btn.world-card em {
display: inline-block;
margin-top: 7px;
padding: 3px 8px;
font-style: normal;
background: #7d170e;
color: #f9e8b1;
border: 1px solid #d8b76a;
font-size: clamp(10px, .75vw, 12px);
letter-spacing: .5px;
}
.world-card-badge {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
background: #7d170e;
color: #f7d67c;
border: 2px solid #d1a34f;
font-weight: 900;
}
.world-note {
border: 1px solid rgba(151,103,44,.6);
background: rgba(255, 240, 202, .55);
padding: 12px 14px;
font-size: clamp(12px, .95vw, 16px) !important;
}
@media (max-width: 900px) {
#world-screen { place-items: start center; }
/* 🚨 [LOBI-DAR-1 · Tahsin 2026-08-01: "knk bu ne mk"] DAR EKRANDA TAM AFİŞ KULLANILMAZ.
Afiş, masaüstü için KOMPOZE EDİLMİŞ bir poster: parşömen panelleri, "Oyundan
görüntüler" başlığı, 3 ekran görüntüsü ve Google Play/App Store rozetleri RESMİN
İÇİNE ÇİZİLİ. Masaüstünde tuvalin oranı afişle birebir olduğu için bizim gerçek
panellerimiz çizili panellerin TAM ÜSTÜNE oturuyor ve fark edilmiyor.
Dar ekranda ise tuval dikey oluyor (ör. 757×1072 = 0.71 vs afiş 1.42) → `cover`
afişi 1519px'e büyütüp yanlarını kesiyor, paneller de alt alta diziliyor.
Sonuç: çizili sahte panel bizim gerçek panelimizin ALTINDAN taşıyordu —
ekranda iki "Oyundan görüntüler" ve hayalet mağaza rozetleri görünüyordu.
ÇÖZÜM: dar ekranda afişin YALNIZ ÜST TABELASI (lobi-1-ust.jpg · logo + savaş
sahnesi, çizili panel YOK) üstte tam genişlik gösterilir; gerisi düz koyu zemin.
⚠️ `100% auto` şart: `cover` burada yine kırpardı. Tabela oranı %20.84 →
padding-top onun altında başlamalı (44px menü + %20.84 + boşluk). */
.world-portal-canvas {
width: 100%;
min-height: 100vh;
aspect-ratio: auto;
background:
url("assets/lobi-1-ust.jpg") center 44px / 100% auto no-repeat,
linear-gradient(180deg, #1d1409 0, #120c06 60%, #0d0805 100%);
border: 0;
overflow: auto;
padding-top: calc(44px + 20.84vw + 18px);
}
/* 📱 [LOBI-1] Masaüstünde menü ŞEFFAF (zeminin çizili bandına oturuyor). Telefonda o bant
`cover` ile çok küçülüp menünün altından kayıyor → burada zemin+çerçeve GERİ VERİLİR,
yoksa altın yazı afişin üstünde okunmaz hale gelir. */
.world-top-nav { left: 0; right: 0; top: 0; height: 44px; overflow-x: auto; justify-content: flex-start; padding: 0 12px;
background: rgba(40, 12, 7, .94); border-bottom: 1px solid rgba(218, 171, 78, .8); }
.world-left-copy, .world-right-copy {
position: relative;
left: auto;
top: auto;
bottom: auto;
width: min(92vw, 520px);
margin: 0 auto 18px;
padding: 20px;
}
.world-list { grid-template-columns: 1fr; }
}
/* ===== Dünya Portalı V3 - temiz panel düzeltmesi ===== */
body.world-mode #auth-screen,
body.world-mode #game-screen { display: none !important; }
.world-portal-canvas {
background: url("assets/lobi-1.jpg") center top / cover no-repeat !important; /* [LOBI-1] */
}
/* 📐 [LOBI-1] Yüzdeler `lobi-1.jpg` (1473×1040) üzerinde ÖLÇÜLDÜ — göz kararı değil:
parşömen bloğu y=370–929px → top %35.6 / bottom %10.7
sol panel x=414–869px → left %28.1 / width %31.0
sağ panel x=890–1424px → left %60.4 / width %36.3
Zemin değişirse bu dört satır yeniden ölçülmeli, yoksa paneller çerçeveden taşar. */
.world-left-copy,
.world-right-copy {
top: 35.6% !important;
bottom: 10.7% !important;
background:
linear-gradient(180deg, rgba(252,236,196,.98), rgba(230,200,142,.98)) !important;
border: 2px solid #8c5e22 !important;
box-shadow:
inset 0 0 0 1px rgba(255,246,208,.65),
inset 0 0 34px rgba(112,70,24,.22),
0 10px 24px rgba(0,0,0,.35) !important;
padding: clamp(18px, 1.8vw, 28px) !important;
/* 🔴 [LOBI-KESIK-1 · 2026-08-01] Eskiden `overflow: hidden` idi ve içerik SESSİZCE
kesiliyordu: 901px'de sağ panelde 136px, 1000px'de 96px, 1100px'de 28px taşma
ölçüldü — yani dar dizüstünde DÜNYA BUTONLARININ bir kısmı hiç görünmüyordu ve
hiçbir uyarı çıkmıyordu. Panel yüksekliği afişe bağlı (%35.6–%89.3) olduğu için
ekran daraldıkça mutlaka daralır; kesmek yerine KAYDIRILIR.
⚠️ overflow-x hâlâ hidden: yatay kaydırma parşömen çerçevesini bozar. */
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(140, 94, 34, .55) transparent;
}
/* Parşömenin içindeki kaydırma çubuğu: ince ve altın — beyaz sistem çubuğu tasarımı bozuyordu */
.world-left-copy::-webkit-scrollbar,
.world-right-copy::-webkit-scrollbar { width: 8px; }
.world-left-copy::-webkit-scrollbar-track,
.world-right-copy::-webkit-scrollbar-track { background: rgba(112,70,24,.10); border-radius: 4px; }
.world-left-copy::-webkit-scrollbar-thumb,
.world-right-copy::-webkit-scrollbar-thumb { background: rgba(140,94,34,.55); border-radius: 4px; }
.world-left-copy::-webkit-scrollbar-thumb:hover,
.world-right-copy::-webkit-scrollbar-thumb:hover { background: rgba(140,94,34,.8); }
/* 🏰 [LOBI-SOL-1] ASIL AKTİF KURAL BU (!important — alttaki %25.3 temel değeri ölüydü,
ilk denemem onu değiştirip "neden değişmiyor" yaşadı). Sağ kenar SABİT (%59.1),
sol %28.1 → %3: afişteki kesik figür + boş doku panelin altında. */
.world-left-copy {
/* 🏰 [LOBI-SOL-2] Tahsin: "sadece arkadaki tabloyu gizleyecektin, çok fazla
büyütmüşsün" — %3 fazla agresifti. Afişin çizili kutusu ~%25.3'te; %24 kutu
kenarını ve ince şeridi örter, soldaki figürü ezmez. Sağ kenar SABİT (%59.1). */
left: 24% !important;
width: 35.1% !important;
}
.world-right-copy {
left: 60.4% !important;
width: 36.3% !important;
}
.portal-panel-title,
.world-user-strip {
display: flex;
align-items: center;
gap: 9px;
min-height: 44px;
margin: 0 0 14px;
padding: 8px 13px;
background: linear-gradient(180deg, #3b190e, #1d0b05);
border: 1px solid #b1843d;
color: #f6df9a;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(18px, 1.65vw, 30px);
font-weight: 900;
line-height: 1.05;
letter-spacing: .3px;
text-shadow: 0 2px 2px #000;
box-shadow: inset 0 0 10px rgba(255,205,100,.13), 0 3px 8px rgba(0,0,0,.22);
}
.world-left-copy > h2,
.world-right-copy > h2 { display: none !important; }
.world-left-copy p,
.world-right-copy p {
color: #2a1606 !important;
font-size: clamp(13px, 1vw, 17px) !important;
line-height: 1.35 !important;
font-weight: 700 !important;
text-shadow: none !important;
}
.world-exit-line {
padding-bottom: 11px;
margin-bottom: 13px !important;
border-bottom: 1px solid rgba(132,85,32,.35);
}
.world-left-copy h3,
.world-right-copy h3 {
color: #2a1606 !important;
font-size: clamp(18px, 1.35vw, 25px) !important;
margin: 10px 0 12px !important;
text-shadow: none !important;
}
.world-red-btn {
width: 100% !important;
margin: 12px 0 16px !important;
}
.world-preview-row {
gap: clamp(10px, .75vw, 13px) !important;
}
.world-preview-card {
aspect-ratio: 1 / .86 !important;
border: 3px solid #8a6728 !important;
box-shadow: 0 4px 10px rgba(0,0,0,.35) !important;
}
.world-list {
margin-top: 8px !important;
gap: clamp(10px, .9vw, 14px) !important;
}
.world-btn.world-card {
min-height: clamp(86px, 7.2vw, 118px) !important;
background: linear-gradient(180deg, #ecd092, #c89948) !important;
}
.world-note {
margin-top: 12px !important;
background: rgba(255,244,210,.72) !important;
color: #3b2108 !important;
}
/* ── Dünya Seçimi: Aktif Dünyalar / Tüm Dünyalar (sade buton stili) ── */
.world-list-sections { margin: 8px 0 18px; }
.world-section-title {
font-family: Georgia, 'Times New Roman', serif;
font-size: 15px;
font-weight: 700;
color: #1a0f06; /* [SIYAH-YAZI-1] panel açık parşömene döndü; açık krem + gölge okunmuyordu */
margin: 14px 0 8px;
}
.world-section-title:first-child { margin-top: 0; }
.world-simple-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.world-simple-btn {
padding: 12px 14px;
border-radius: 6px;
border: 1px solid #a9803c;
background: #e8d6ab;
color: #3b2610;
text-align: center;
cursor: pointer;
font-family: Georgia, 'Times New Roman', serif;
transition: transform .12s ease, filter .12s ease;
}
.world-simple-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.world-simple-btn strong { display: block; font-size: 16px; font-weight: 800; }
.world-simple-btn small { display: block; margin-top: 3px; font-size: 11px; color: #6b4d24; }
/* 🟢 [LOBI-CEVRIMICI-1] Çevrimiçi oyuncu sayısı — yeşil, sayaçlarla aynı hizada */
.world-simple-btn small .world-online { color: #1a7a34; font-weight: 700; }
.world-simple-btn.world-fast small .world-online { color: #166534; }
@media (max-width: 900px) {
.world-simple-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
/* ⚠️ [LOBI-DAR-1] Bu blok `!important` ile yukarıdaki dar-ekran kuralını EZİYOR —
tam afişi geri getiriyordu (çizili sahte paneller yeniden görünürdü). Aynı
"yalnız üst tabela" kuralı burada da tekrarlanmalı, yoksa düzeltme etkisiz kalır. */
.world-portal-canvas {
padding-top: calc(44px + 20.84vw + 18px) !important;
background:
url("assets/lobi-1-ust.jpg") center 44px / 100% auto no-repeat,
linear-gradient(180deg, #1d1409 0, #120c06 60%, #0d0805 100%) !important;
}
.world-left-copy,
.world-right-copy {
top: auto !important;
bottom: auto !important;
left: auto !important;
width: min(94vw, 560px) !important;
}
}
/* ══════════ PREMIUM MARKET ══════════ */
.pm-wrap{background:#080604;border-radius:8px;overflow:hidden}
.pm-wrap{position:relative;overflow:hidden;background:linear-gradient(180deg,#1a140e,#14100a,#18130c);width:100%}
#tab-premium { padding:0; margin:0; }
#tab-premium.tab-content { min-height:auto; }
.pm-banner{width:100%;height:150px;overflow:hidden;background:#0e0a06}
.pm-banner img{width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block}
.pm-sultan-right{position:fixed;top:70px;right:8px;width:120px;height:calc(100vh - 70px);z-index:50;pointer-events:none;overflow:hidden}
.pm-sultan-right{right:0}
.pm-sultan-right img{width:100%;height:100%;object-fit:cover;object-position:top center;opacity:.75}
.pm-sultan-right img{transform:scaleX(-1)}
.pm-header-compact{text-align:center;padding:6px 0;background:linear-gradient(90deg,transparent 10%,rgba(10,6,4,.9) 30%,rgba(10,6,4,.95) 50%,rgba(10,6,4,.9) 70%,transparent 90%);position:relative;z-index:2}
.pm-header-label{font-size:1rem;font-weight:900;color:#c9a84c;letter-spacing:3px}
.pm-balance{display:flex;gap:16px;padding:8px 22px;background:linear-gradient(90deg,rgba(26,58,143,.1),rgba(139,32,32,.05));border-bottom:1px solid rgba(201,168,76,.2);position:relative;z-index:2}
.pm-bal{font-size:.78rem;color:#9a8b72}.pm-bal b{color:#e8d48b;margin-left:4px}
.pm-tabs{display:flex;gap:2px;padding:0 22px;background:rgba(30,22,14,.85);border-bottom:1px solid rgba(201,168,76,.2);overflow-x:auto;position:relative;z-index:2}
.pm-tab{padding:10px 14px;font-size:.7rem;font-weight:600;color:#9a8b72;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;user-select:none;transition:all .2s}
.pm-tab:hover{color:#e8d48b}.pm-tab.active{color:#c9a84c;border-bottom-color:#c9a84c;background:rgba(201,168,76,.06)}
.pm-body{padding:16px 22px;margin-right:130px;min-height:400px;position:relative;z-index:2}
.pm-tab-content{display:none}.pm-tab-content.pm-active{display:block}
.pm-sec{font-size:.9rem;font-weight:700;color:#c9a84c;margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid rgba(201,168,76,.2)}
.pm-sec:first-child{margin-top:0}
/* Diamond grid */
.pm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pm-card{background:#201810;border:1px solid rgba(201,168,76,.25);border-radius:8px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .25s;position:relative;overflow:hidden}
.pm-card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,rgba(26,58,143,.1),transparent 70%);pointer-events:none}
.pm-card:hover{background:#221a12;border-color:rgba(201,168,76,.5);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.pm-kral{border-color:#c9a84c;box-shadow:0 0 16px rgba(201,168,76,.3)}
.pm-card-title{font-size:.78rem;font-weight:700;color:#e8d48b;margin-bottom:6px}
.pm-chest{height:70px;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.pm-gem-pile{position:relative;width:70px;height:55px}
.pm-gem{position:absolute;width:14px;height:18px;background:linear-gradient(135deg,#0d2b6e,#1a4cc0 30%,#4488ee 50%,#1a4cc0 70%,#0d2b6e);clip-path:polygon(50% 0%,100% 35%,80% 100%,20% 100%,0% 35%);animation:pmGlow 2s ease-in-out infinite alternate}
.pm-gem:nth-child(1){left:26px;top:6px;transform:rotate(-8deg)}.pm-gem:nth-child(2){left:38px;top:2px;transform:rotate(12deg);animation-delay:.3s}
.pm-gem:nth-child(3){left:18px;top:20px;transform:rotate(5deg);animation-delay:.6s}.pm-gem:nth-child(4){left:34px;top:18px;transform:rotate(-15deg);animation-delay:.2s}
.pm-gem:nth-child(5){left:48px;top:12px;transform:rotate(20deg);animation-delay:.5s}.pm-gem:nth-child(6){left:12px;top:10px;animation-delay:.4s;width:11px;height:14px}
.pm-gem:nth-child(7){left:52px;top:22px;animation-delay:.7s;width:11px;height:14px}
.pm-chest-box{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:58px;height:28px;background:linear-gradient(180deg,#3a2810,#1a0e04);border:2px solid #5a3a18;border-radius:3px 3px 5px 5px}
.pm-chest-box::before{content:"";position:absolute;top:0;left:0;right:0;height:9px;background:linear-gradient(180deg,#6d4e1e,#4a3010);border-bottom:1px solid #3a2008}
.pm-chest-box::after{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);width:7px;height:6px;background:#c9a84c;border-radius:2px}
@keyframes pmGlow{0%{filter:brightness(1)}100%{filter:brightness(1.3)}}
.pm-price{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#1a1208,#2a1f10);border:1px solid #6d4e1e;border-radius:4px;padding:4px 10px;font-weight:700;font-size:.78rem;color:#e8d48b}
/* Item cards */
.pm-items{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
/* Yüzdelik paket alt-sekmeleri (Saldırı/Savunma/Kuşatma) */
.pm-pct-tabs{display:flex;gap:6px;margin:0 0 10px}
.pm-pct-tab{flex:1;padding:8px 6px;font-size:.78rem;font-weight:700;color:#c9a84c;background:linear-gradient(160deg,#3a2c1a,#2a200f);border:1px solid #6a5232;border-radius:6px;cursor:pointer;transition:all .15s}
.pm-pct-tab.active{background:linear-gradient(160deg,#6a5232,#4a3722);color:#f4d889;box-shadow:0 0 8px rgba(201,168,76,.3)}
/* Yüzdelik paket önizleme penceresi (kasada: kaç asker gelecek) */
.pkg-preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:6000;display:flex;align-items:center;justify-content:center;padding:16px}
.pkg-preview-modal{background:linear-gradient(180deg,#f8edcf,#f0dca6);border:1px solid #a87935;border-radius:10px;width:min(360px,94vw);box-shadow:0 12px 32px rgba(0,0,0,.45);overflow:hidden}
.pkg-prev-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:linear-gradient(180deg,#4a3722,#3a2c1a);color:#f4d889;font-weight:900}
.pkg-prev-head button{background:none;border:none;color:#f4d889;font-size:1.2rem;cursor:pointer;line-height:1}
.pkg-prev-body{padding:12px 14px}
.pkg-prev-note{font-size:.85rem;color:#5a3a10;margin-bottom:8px}
.pkg-prev-title{font-weight:800;color:#3d1a05;font-size:.9rem;margin-bottom:6px}
.pkg-prev-list{background:#fffaf0;border:1px solid #d9bb7c;border-radius:6px;overflow:hidden;margin-bottom:8px}
.pkg-prev-row{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-bottom:1px solid #ecdcab;color:#4a2c0c;font-size:.9rem}
.pkg-prev-row:last-child{border-bottom:none}
.pkg-prev-row b{color:#7c4a16;font-size:1rem}
.pkg-prev-total{font-size:.82rem;color:#5a3a10;text-align:center}
.pkg-prev-warn{margin-top:8px;font-size:.82rem;color:#9a2020;background:#fde7e7;border:1px solid #ef9a9a;border-radius:6px;padding:8px 10px}
.pkg-prev-actions{display:flex;gap:8px;padding:10px 14px 14px}
.pkg-prev-cancel{flex:1;padding:9px;border:1px solid #b89b5e;border-radius:8px;background:#f0dca6;color:#5a3a10;font-weight:700;cursor:pointer}
.pkg-prev-confirm{flex:2;padding:9px;border:1px solid #a86f22;border-radius:8px;background:linear-gradient(#e4b64f,#c68a31);color:#3d1a05;font-weight:900;cursor:pointer}
.pkg-prev-confirm:disabled{opacity:.5;cursor:default}
.pm-military-reset{display:flex;justify-content:center;margin:4px 0 14px}
.pm-military-reset .btn-test{padding:8px 16px;font-size:0.85rem}
.pm-item{background:#201810;border:1px solid rgba(201,168,76,.2);border-radius:8px;padding:14px;cursor:pointer;transition:all .2s}
.pm-item:hover{border-color:rgba(201,168,76,.45);transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.pm-item-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
/* 🖼️ [URUN-GORSEL-1] Kutu 38 → 64px: Tahsin'in ürün görselleri DETAYLI SAHNELER
(atlı yağma, sancak yöneticisi masası, yaya yağma) ve 38-42px'te ÖLÇÜLEREK tanınmaz
çıktılar — scratchpad/ikon-boyut.png karşılaştırması. 64px'te siluetler ayrışıyor;
96px daha net ama kart yüksekliğini gereksiz büyütüyordu. Emoji kalan ürünler de
aynı kutuda büyüdü (yazı boyu orantılı arttı), kart dili tek kalsın diye. */
.pm-item-icon{width:64px;height:64px;background:linear-gradient(135deg,#2a1a08,#3a2810);border:1px solid #5a3a18;border-radius:6px;display:grid;place-items:center;font-size:1.9rem;flex-shrink:0;overflow:hidden}
.pm-item-title{font-size:.82rem;font-weight:700;color:#fff4d7}
.pm-item-sub{font-size:.65rem;color:#9a8b72;margin-top:1px}
.pm-item-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.pm-tag{padding:3px 8px;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.18);border-radius:3px;font-size:.65rem;color:#e8d48b}
.pm-item-foot{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05);flex-wrap:wrap}
.pm-item-price{font-weight:700;font-size:.85rem;color:#c9a84c}
.pm-cd{font-size:.6rem;color:#9a8b72}
.pm-buy-btn{margin-left:auto;padding:5px 14px;border:none;border-radius:4px;font-weight:700;font-size:.7rem;cursor:pointer;background:linear-gradient(135deg,#8b6914,#c9a84c);color:#1a0e00;transition:all .2s}
.pm-buy-btn:hover{background:linear-gradient(135deg,#c9a84c,#e8d48b);box-shadow:0 0 10px rgba(201,168,76,.35)}
/* Shields */
.pm-shields{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.pm-shield{background:#201810;border:1px solid rgba(201,168,76,.2);border-radius:8px;padding:12px;text-align:center;cursor:pointer;transition:all .2s}
.pm-shield:hover{border-color:rgba(201,168,76,.45);transform:translateY(-2px)}
.pm-shield-icon{font-size:1.6rem;margin-bottom:4px}
.pm-shield-dur{font-size:.82rem;font-weight:700;color:#fff4d7;margin-bottom:2px}
.pm-shield-price{font-size:.75rem;color:#c9a84c;font-weight:600}
/* Rules box */
.pm-rules{padding:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:6px;font-size:.7rem;color:#9a8b72;line-height:1.7;margin-bottom:10px}
.pm-rules b{color:#e8dcc8;display:block;margin-bottom:4px;font-size:.75rem}
/* Buff sekmesi */
/* 🎨 [PM-PANO-3] Avantaj panosu v3 (Tahsin: "yazı sade duruyor + tonları TEMAYA göre").
Oyun zemini KOYU kahve + altın vurgu (body #42321d→#2a1f12, vurgu #f0c040) — v2'nin
açık parşömeni temadan kopuktu, iki kart da koyu aileye çekildi. Başlıklar altın
VARAK (gradyan metin + kabartma); süsler tipografik (CSS eşkenar dörtgen), İKON YOK. */
.pm-avantaj-pano { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 0 0 16px; }
.pma2-kart { position: relative; border-radius: 10px; padding: 18px 18px 14px;
background:
radial-gradient(circle at 50% 0%, rgba(240,192,64,.10), transparent 55%),
radial-gradient(circle at 50% 115%, rgba(0,0,0,.35), transparent 60%),
linear-gradient(180deg, #5c4526, #4a3619 55%, #3d2c14) padding-box,
linear-gradient(135deg, #8a6a18, #f0d078 30%, #8a6a18 55%, #d8b868 80%, #8a6a18) border-box;
border: 3px solid transparent;
box-shadow: inset 0 0 0 1px rgba(240,208,120,.30), inset 0 14px 22px rgba(0,0,0,.22), 0 3px 10px rgba(0,0,0,.35); }
.pma2-kart.pma2-vip {
background:
radial-gradient(circle at 50% 0%, rgba(240,120,40,.16), transparent 55%),
radial-gradient(circle at 50% 115%, rgba(40,12,0,.40), transparent 60%),
linear-gradient(180deg, #56301a, #452312 55%, #381c0d) padding-box,
linear-gradient(135deg, #7a3a22, #e8c05a 30%, #a52a2a 55%, #e8c05a 80%, #7a3a22) border-box;
box-shadow: inset 0 0 0 1px rgba(232,192,90,.35), inset 0 14px 22px rgba(0,0,0,.30), 0 0 16px rgba(217,179,85,.35); }
.pma2-kose { position: absolute; width: 15px; height: 15px; border: 2px solid #c9a227; opacity: .95; }
.pma2-vip .pma2-kose { border-color: #e8c05a; }
.ko-tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; border-top-left-radius: 7px; }
.ko-tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; border-top-right-radius: 7px; }
.ko-bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; border-bottom-left-radius: 7px; }
.ko-br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; border-bottom-right-radius: 7px; }
/* Başlık: BÜYÜK HARF serif + altın VARAK metin + kabartma; çizgi uçları eşkenar dörtgenli */
.pma2-bas { display: flex; align-items: center; gap: 10px; justify-content: center;
font-family: Georgia, "Times New Roman", serif; font-weight: 900; font-size: 1.18rem;
text-transform: uppercase; letter-spacing: .09em; margin-bottom: 3px; white-space: nowrap;
background: linear-gradient(180deg, #ffe9a8 18%, #f0c040 46%, #a8741a 72%, #ffd870 96%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(240,192,64,.25)); }
.pma2-vip .pma2-bas {
background: linear-gradient(180deg, #fff2c0 14%, #f6df9a 40%, #c9832a 70%, #ffe9a8 96%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.65)) drop-shadow(0 0 9px rgba(232,192,90,.45)); }
.pma2-cizgi { flex: 1; height: 1px; position: relative;
background: linear-gradient(90deg, transparent, #c9a227); }
.pma2-cizgi:last-child { background: linear-gradient(270deg, transparent, #c9a227); }
/* Çizgi ucundaki eşkenar dörtgen — tipografik süs (döndürülmüş kare, ikon değil) */
.pma2-cizgi::after { content: ""; position: absolute; top: -3.5px; width: 8px; height: 8px;
background: linear-gradient(135deg, #f0d078, #8a6a18); transform: rotate(45deg); right: -2px; }
.pma2-cizgi:last-child::after { right: auto; left: -2px; }
.pma2-vip .pma2-cizgi { background: linear-gradient(90deg, transparent, #e8c05a); }
.pma2-vip .pma2-cizgi:last-child { background: linear-gradient(270deg, transparent, #e8c05a); }
.pma2-vip .pma2-cizgi::after { background: linear-gradient(135deg, #ffe9a8, #a52a2a); }
/* Başlık altında ince çift çizgi — tabela alt rayı */
.pma2-liste { margin: 8px 0 0; padding: 8px 0 0; list-style: none; text-align: center;
border-top: 1px solid rgba(201,162,39,.35); position: relative; }
.pma2-liste::before { content: ""; position: absolute; top: 2px; left: 12%; right: 12%; height: 1px;
background: rgba(201,162,39,.18); }
/* Satırlar: her biri KOYU KADİFE BANTTA (sarı plakaların "boş" kardeşi) — Tahsin v5:
"sarılar kalsın, beyazla yazılanları güzelleştir". Ayraç çizgisi kalktı, bant ayırıyor. */
.pma2-liste li { margin: 4px 8%; padding: 5.5px 0; font-family: Georgia, serif;
font-size: 1.0rem; font-style: italic; letter-spacing: .02em; border-radius: 5px;
background: linear-gradient(180deg, rgba(20,11,3,.40), rgba(20,11,3,.16));
box-shadow: inset 0 1px 2px rgba(0,0,0,.38), inset 0 -1px 0 rgba(240,208,120,.12); }
.pma2-vip .pma2-liste li {
background: linear-gradient(180deg, rgba(26,8,2,.44), rgba(26,8,2,.18));
box-shadow: inset 0 1px 2px rgba(0,0,0,.42), inset 0 -1px 0 rgba(232,192,90,.14); }
/* 🚩 [SANCAK-PROFIL-1] Profil arması — DOSYASIZ bayrak: temanın ana/yan rengi ve
deseninden çizilir (24 temanın png'si hiç yoktu; katalog bu yüzden "etkisiz"
görünüyordu). Dikey sancak + kırlangıç kuyruk (clip-path) + gönder çizgisi. */
.sp-arma-kutu { display: flex; justify-content: center; padding: 14px 0 6px; }
/* 🛡️ [ARMA-ONAY-1] flama/CSS bayrağı KALDIRILDI (Tahsin: "flama kaldır — serbest stil,
resim yüklesinler"). Arma yoksa dürüst boş kutu. */
.sp-arma-bos { width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;
border: 2px dashed #c7ad73; border-radius: 8px; color: #9a8b72; font-size: .85rem; text-align: center; padding: 12px; }
.clan-emblem-img { max-width: 240px; max-height: 240px; border-radius: 6px; border: 2px solid #8a6a18; }
/* 🎨 [G-PENCERE-1] Günlük ödül penceresi BİZİM TEMADA (Tahsin: "arka tonu beyaz değil
bizim temamız yap"). Kapsam .gunluk-pencere-arka — .yol-hos ORTAK kabuk (Kral Yolu
penceresi de kullanıyor), o yüzden koyulaştırma yalnız bu kapının altında. */
.gunluk-pencere-arka .yol-hos {
background:
radial-gradient(circle at 50% 0%, rgba(240,192,64,.10), transparent 55%),
linear-gradient(180deg, #5c4526, #4a3619 55%, #3d2c14) padding-box,
linear-gradient(135deg, #8a6a18, #f0d078 30%, #8a6a18 55%, #d8b868 80%, #8a6a18) border-box;
border: 3px solid transparent;
box-shadow: inset 0 0 0 1px rgba(240,208,120,.30), 0 10px 40px rgba(0,0,0,.5); }
/* ✕ [G-PENCERE-2] Tahsin: "çarpı kalkmış, kapatamıyorum" — koyulaştırmada rengi krem
yapmışım ama düğme zemini AÇIK kalmıştı: açık üstünde açık = görünmez. Koyu kutu+krem. */
.gunluk-pencere-arka .yol-hos-kapat { background: rgba(20,11,3,.55); border-color: #c9a227; color: #f0dfae; }
.gunluk-pencere-arka .yol-hos-kapat:hover { background: #c9a227; color: #2e1c08; }
.gunluk-pencere-arka .gg-bugun-ust { font-family: Georgia, serif; font-weight: 900;
font-size: 1.16rem; text-transform: uppercase; letter-spacing: .09em; text-align: center;
background: linear-gradient(180deg, #ffe9a8 18%, #f0c040 46%, #a8741a 72%, #ffd870 96%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)); margin-bottom: 10px; }
.gunluk-pencere-arka .gg-bugun-kutu { background: linear-gradient(180deg, rgba(20,11,3,.40), rgba(20,11,3,.16));
border: 2px solid #c9a227; border-radius: 8px; }
.gunluk-pencere-arka .gg-bugun-kutu.alindi { border-color: #6cc24a; }
.gunluk-pencere-arka .gg-bugun-ad { color: #f2e2b6; font-style: italic;
text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.gunluk-pencere-arka .gg-bugun-adet { color: #f0c860; }
.gunluk-pencere-arka .gg-alt { color: #e8d5a3; }
.gunluk-pencere-arka .gg-alt b { color: #f0c860; }
.gunluk-pencere-arka .gg-alindi { color: #8fd97a; }
.gunluk-pencere-arka .gg-al { border: 1px solid #8a6a18; border-radius: 6px; cursor: pointer;
font-family: Georgia, serif; font-weight: 900; color: #2e1c08;
text-shadow: 0 1px 0 rgba(255,236,170,.55);
background: linear-gradient(180deg, #f0d078, #c9a227 60%, #a8741a);
box-shadow: inset 0 1px 0 rgba(255,244,200,.7), inset 0 -1px 0 rgba(0,0,0,.28); }
.gunluk-pencere-arka .gg-takvim-git { background: none; border: 1px solid rgba(201,162,39,.5);
color: #e8d5a3; border-radius: 6px; cursor: pointer; }
/* 👑 [PM-SURE-1] pencere gün çipleri — seçili çip altın plaka, diğerleri kadife bant */
.pmd-gunler { display: flex; gap: 6px; padding: 10px 14px 0; flex-wrap: wrap; }
.pmd-gun { flex: 1 1 0; min-width: 58px; padding: 7px 4px; border-radius: 6px; cursor: pointer;
font-family: Georgia, serif; font-weight: 700; font-size: .88rem; color: #e8d5a3;
background: linear-gradient(180deg, rgba(20,11,3,.40), rgba(20,11,3,.16));
border: 1px solid rgba(201,162,39,.4); }
.pmd-gun:hover { border-color: #e8c05a; }
.pmd-gun.secili { color: #2e1c08; font-weight: 900; border-color: #f0d078;
background: linear-gradient(180deg, #f0d078, #c9a227 60%, #a8741a);
box-shadow: inset 0 1px 0 rgba(255,244,200,.7), 0 0 6px rgba(232,192,90,.4); }
.pmd-gun[disabled] { opacity: .35; cursor: default; }
/* Pano Satın Al düğmesi — plakalarla aynı altın dil, tam genişlik */
.pma2-al { display: block; width: 84%; margin: 10px auto 2px; padding: 8px 0; cursor: pointer;
font-family: Georgia, serif; font-weight: 900; font-size: .95rem; color: #2e1c08;
text-shadow: 0 1px 0 rgba(255,236,170,.55); border: 1px solid #8a6a18; border-radius: 6px;
background: linear-gradient(180deg, #f0d078, #c9a227 60%, #a8741a);
box-shadow: inset 0 1px 0 rgba(255,244,200,.7), inset 0 -1px 0 rgba(0,0,0,.28), 0 2px 5px rgba(0,0,0,.35); }
.pma2-al:hover { filter: brightness(1.07); }
.pma2-vip .pma2-al { background: linear-gradient(180deg, #ffe9a8, #e8c05a 55%, #b8741f);
box-shadow: inset 0 1px 0 rgba(255,248,214,.8), 0 0 9px rgba(232,192,90,.4); }
/* "…ve daha fazlası" — bantsız, küçük, soluk: kartın devamı olduğunu fısıldar */
.pma2-liste li.pma2-daha { background: none; box-shadow: none; margin: 2px 8% 0; padding: 3px 0; font-size: .88rem; opacity: .8; }
/* Yazı: başlıkla aynı VARAK tekniği — altın-krem gradyan metin + kabartma */
.pma2-yz { background: linear-gradient(180deg, #fff4d6 12%, #f2dfa8 45%, #cfa14a 78%, #f6df9a 98%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.pma2-vip .pma2-yz { background: linear-gradient(180deg, #fff6dc 10%, #f6e2b0 42%, #d8952f 76%, #ffe9a8 98%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.65)); }
/* Vurgulu satırlar (paket farkı): altın plaka şeridi + koyu kabartma yazı */
.pma2-liste li.pma2-one { font-weight: 900; font-size: .95rem; margin: 3px 14%; padding: 5px 0;
color: #2e1c08; text-shadow: 0 1px 0 rgba(255,236,170,.55); border-bottom: 0; border-image: none;
background: linear-gradient(180deg, #f0d078, #c9a227 60%, #a8741a); border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255,244,200,.7), inset 0 -1px 0 rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.35); }
/* 3 ➜ 5/7 yükseliş hissi: eski kuyruk soluk ve çizili, ok altın, yeni sayı iri */
.pma2-liste li.pma2-one s { opacity: .5; font-weight: 400; font-size: .82em; text-decoration-thickness: 2px; }
.pma2-liste li.pma2-one .pma2-ok { font-style: normal; font-size: .9em; opacity: .85; }
.pma2-liste li.pma2-one b { font-size: 1.18em; }
.pma2-vip .pma2-liste li.pma2-one {
background: linear-gradient(180deg, #ffe9a8, #e8c05a 55%, #b8741f);
box-shadow: inset 0 1px 0 rgba(255,248,214,.8), inset 0 -1px 0 rgba(90,20,10,.35), 0 0 8px rgba(232,192,90,.35); }
.pm-buff-none{padding:12px;color:#9a8b72;font-size:.78rem;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:6px;margin-bottom:14px}
.pm-buff-active-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pm-buff-active-card{display:flex;align-items:center;gap:8px;background:linear-gradient(160deg,#3a2c1a,#2a200f);border:1px solid #c9a84c;border-radius:8px;padding:8px 14px;box-shadow:0 0 10px rgba(201,168,76,.25)}
.pm-buff-active-icon{font-size:1.1rem}
.pm-buff-active-pct{color:#e8dcc8;font-weight:800;font-size:.85rem}
.pm-buff-active-time{color:#c9a84c;font-size:.75rem}
/* Bottom trust */
.pm-bottom{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 22px;background:rgba(30,22,14,.85);border-top:1px solid rgba(201,168,76,.2);position:relative;z-index:2}
.pm-trust{display:flex;align-items:flex-start;gap:6px;font-size:.62rem;color:#9a8b72;line-height:1.3}
.pm-trust>span{font-size:.9rem;flex-shrink:0}
.pm-trust b{display:block;color:#e8dcc8;font-size:.68rem}
@media(max-width:1000px){.pm-sultan-right{display:none !important;position:static}.pm-body{margin-right:0}}@media(max-width:900px){.pm-grid,.pm-shields{grid-template-columns:repeat(2,1fr)}.pm-items{grid-template-columns:1fr}.pm-bottom{grid-template-columns:repeat(2,1fr)}}
/* Orta govde tema V5: sadece oyun ici. Giris, dunya ve premium ekranlarini bozmaz. */
:root {
--ks-shell-width: 1060px;
--ks-bg-a: #77705d;
--ks-bg-b: #5e5949;
--ks-paper: #f4dfad;
--ks-paper-light: #fff1cf;
--ks-paper-row: #f2d9a5;
--ks-line: #b89458;
--ks-dark: #21190e;
--ks-dark-2: #111007;
--ks-gold: #d1a04c;
--ks-ink: #2a1608;
}
html {
min-height: 100%;
background:
radial-gradient(circle at 14px 18px, rgba(255,255,255,.08) 0 1px, transparent 2px),
radial-gradient(circle at 38px 42px, rgba(0,0,0,.08) 0 1px, transparent 2px),
linear-gradient(135deg, var(--ks-bg-a), var(--ks-bg-b)) !important;
background-size: 54px 54px, 54px 54px, auto !important;
}
body {
background: transparent !important;
}
body:not(.world-mode)::before {
content: "";
display: block !important;
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background:
radial-gradient(circle at 14px 18px, rgba(255,255,255,.08) 0 1px, transparent 2px),
radial-gradient(circle at 38px 42px, rgba(0,0,0,.08) 0 1px, transparent 2px),
linear-gradient(135deg, var(--ks-bg-a), var(--ks-bg-b));
background-size: 54px 54px, 54px 54px, auto;
}
body:not(.world-mode)::after {
content: "";
display: block;
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: .22;
background-image:
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(180deg, rgba(0,0,0,.08) 1px, transparent 1px),
repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px);
background-size: 96px 96px, 96px 96px, auto;
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 24%, transparent 42%, transparent 58%, #000 76%, #000 100%);
mask-image: linear-gradient(90deg, #000 0%, #000 24%, transparent 42%, transparent 58%, #000 76%, #000 100%);
}
body.world-mode::before,
body.world-mode::after {
display: none !important;
}
#game-screen {
width: min(var(--ks-shell-width), 100vw);
min-height: 100vh;
margin: 0 auto !important;
background: var(--ks-paper) !important;
border-left: 2px solid #3b2810;
border-right: 2px solid #3b2810;
box-shadow: 0 0 30px rgba(0,0,0,.44);
overflow-x: hidden;
}
header {
background: linear-gradient(180deg, var(--ks-dark), var(--ks-dark-2)) !important;
border-bottom: 2px solid var(--ks-gold) !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
🖼️ [CERCEVE-1] ÜST PANEL — SÜSLÜ ÇERÇEVE + KAHVE ZEMİN (Tahsin 2026-08-14)
"bu şekilde sana çerçeveyi koysam en üst paneldekilerin hepsine uyarlayıp arka
temasını değiştirebilir misin?" · "kahve tonlarında olmalı en üst panel"
· "çerçeveyi uygula ve o sekmelerdeki uydurma ikonlarımızı kaldır."
ÇERÇEVE NASIL ÇALIŞIYOR — `border-image` 9-DİLİM:
Kaynak `cerceve.png` 480×150. `border-image-slice: 40 44 fill` resmi 9 parçaya
böler: 4 KÖŞE sabit kalır, 4 KENAR uzar, ORTA (`fill`) düğmenin arkasını doldurur.
Bu sayede aynı görsel "Köyüm" (dar) ve "Etkinlikler" (geniş) düğmesinde de
bozulmadan durur — düz arka plan resmi kullansaydım köşe süslemeleri gerilirdi.
🕳️ KENAR KALINLIĞI 10/11 RASTGELE DEĞİL: kaynak dilimleri 40 (üst/alt) ve 44
(sağ/sol), oranı 0,909. Hedefte 10/11 = 0,909 — AYNI oran. Oran bozulsaydı
köşe süslemeleri yatayda ya da dikeyde ezilirdi.
🕳️ `.main-nav .nav-tab` (iki sınıflı) SEÇİLDİ, düz `.nav-tab` DEĞİL: dosyada
`.nav-tab` üç kez tanımlı ve biri arka plan/gölge veriyor. İki sınıflı seçici
özgüllükle kazanır, sıraya bağlı kalmaz.
⚠️ Ortadaki elmas süsleme gövdeden SİLİNMİŞTİ (kenar uzayınca gerilmesin diye) ve
ayrı sprite olarak duruyor: yalnız AKTİF sekmede, "buradasın" işareti olarak
basılıyor. On bir düğmenin hepsinde olsaydı çubuk okunmaz hâle gelirdi.
══════════════════════════════════════════════════════════════════════════════ */
header {
/* Kahve zemin — çerçevenin iç tonuyla (rgb 96,66,30) akraba ama ondan KOYU:
düğmeler panelden ayrışıp kabartma gibi dursun. */
background: linear-gradient(180deg, #3a2a14, #241a0c) !important;
border-bottom: 2px solid #8a6a18 !important;
}
/* ⬇️ Sekme düğmelerinin ÇERÇEVE kuralları bu dosyada DAHA AŞAĞIDA (`.nav-tab` için
`!important` kullanan son tema katmanının hemen ardında). Sebebi orada yazılı. */
.logo,
.player-name {
color: #fff2c8 !important;
text-shadow: 0 1px 2px #000;
}
.main-nav {
min-width: 0;
overflow-x: auto;
scrollbar-width: thin;
}
.nav-tab {
color: #f1d8a4 !important;
white-space: nowrap;
}
.nav-tab:hover,
.nav-tab.active {
background: linear-gradient(180deg, #f7e3b8, #c99a4d) !important;
color: #241407 !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
🖼️ [CERCEVE-1] ÜST SEKME DÜĞMELERİ — SÜSLÜ ÇERÇEVE (Tahsin 2026-08-14)
Kahve zemin ve gerekçenin tamamı için yukarıdaki [CERCEVE-1] başlığına bak.
🕳️ NEDEN TAM BURADA, KENDİ BLOĞUNUN YANINDA DEĞİL — ÖLÇÜLEREK BULUNDU:
Hemen ÜSTTEKİ iki kural `.nav-tab` için `!important` kullanıyor. `!important`
özgüllüğü YENER: benim `.main-nav .nav-tab` kuralım (üç sınıf) yukarıda dursaydı
yine kaybederdi ve aktif sekmeye AÇIK ALTIN GRADYAN basılırdı — yani çerçevenin
deri içi tamamen kapanırdı. Tarayıcıda ölçüldü: renk #ffe9a8 yerine #f1d8a4
dönüyordu. Çözüm: kurallar o katmanın ARKASINA alındı ve çakışan üç bildirim
(`background`, `color`, `box-shadow`) `!important` ile karşılandı.
⚠️ Üstteki kuralları SİLMEDİM: `.nav-tab` başka ekranlarda da kullanılıyor
(lobi sekmesi, alt kısayollar) — orada o görünüm hâlâ doğru.
📏 ÖLÇÜLDÜ, GÖZ KARARI DEĞİL: ilk denemede kenar 10/11px ve punto .82rem'di;
dokuz görünür düğme 950px istiyordu, çubukta 842px yer var → menü İKİ SATIRA
sarıyor, başlık 97px'e çıkıyordu. Kenar 9/10 + punto .75rem + iç boşluk 2px ile
toplam 820px'e indi, tek satırda kalıyor (başlık 52px).
⚠️ 9/10 oranı (0,90) kaynak dilim oranına (40/44 = 0,909) yakın tutuldu —
uzaklaşsaydı köşe süslemeleri bir eksende ezilirdi.
══════════════════════════════════════════════════════════════════════════════ */
/* ⚙️ İKİNCİ SEÇİCİ ŞART: Ayarlar düğmesi `.main-nav`'ın İÇİNDE DEĞİL, kardeşi
(nav bir kaydırma kabı, açılır kutu orada kırpılıyordu — bkz index.html notu).
`header .nav-dd .nav-tab` yazılmasaydı Ayarlar tek başına çerçevesiz kalırdı.
Özgüllük (0,2,1) — üstteki `!important` katmanını zaten `!important`la karşılıyoruz. */
.main-nav .nav-tab,
header .nav-dd .nav-tab {
position: relative;
border: 9px solid transparent;
border-left-width: 10px;
border-right-width: 10px;
border-image-source: url("images/ui/cerceve.png");
border-image-slice: 40 44 fill;
border-image-repeat: stretch;
border-radius: 0; /* border-image yuvarlatmayı yok sayar; kalıntı kırpma olmasın */
background: transparent !important;
box-shadow: none !important;
/* 📏 [BASLIK-HIZA-1] İÇ YÜKSEKLİK SABİT — göz kararı değil, ölçümle bulundu.
Premium düğmesi tek başına 35px kalıyordu: içinde `vertical-align: middle` ile
hizalanmış bir ![]()
var ve satır kutusu, düz metinli düğmelerinkinden yüksek
çıkıyor (12px yazı → 16px kutu; görselli → 17,4px). Satır kutusu matematiğine
güvenmek yerine düğme FLEX yapıldı ve iç yükseklik 16px'e sabitlendi:
16 + 0 dolgu + 18 kenar = 34px, içeriği ne olursa olsun.
`content-box` ŞART: `border-box` olsaydı 16px'in İÇİNDEN 18px kenar düşerdi. */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 16px;
box-sizing: content-box;
line-height: 1;
padding: 0 1px; /* 2→1px: cüzdan 6 haneliyken son 4px'lik taşmayı bu kapattı */
color: #e8d9b4 !important;
font-size: .75rem;
font-weight: 600;
letter-spacing: .1px;
white-space: nowrap; /* "Klan Sancağı" iki satıra düşerse çerçeve deforme olur */
text-shadow: 0 1px 2px rgba(0, 0, 0, .75); /* deri dokusu üstünde okunurluk */
transition: color .15s, filter .15s;
}
/* Vurgu ve seçim: çerçevenin KENDİSİ değişmiyor, AYDINLATILIYOR. Ayrı bir "açık"
çerçeve dosyası tutmak ikinci bir görsel varlık ve ikinci bir bakım yükü olurdu. */
.main-nav .nav-tab:hover,
header .nav-dd .nav-tab:hover {
background: transparent !important;
color: #fff0c4 !important;
filter: brightness(1.14);
}
/* Aktif sekme: çerçeve DAHA GÜÇLÜ aydınlatılıyor + yazı parlıyor.
Eskiden buna ek olarak çerçevenin elmas süslemesi "buradasın" işareti olarak
basılıyordu — KALDIRILDI, sebebi aşağıda. Süsleme gidince aktiflik yalnız hafif
bir parlaklık farkıyla kalıyordu, o yüzden 1,22 → 1,38 ve yazıya altın gölge. */
.main-nav .nav-tab.active,
header .nav-dd .nav-tab.active {
background: transparent !important;
color: #fff0b8 !important;
filter: brightness(1.38) saturate(1.12);
text-shadow: 0 0 6px rgba(255, 214, 120, .55), 0 1px 2px rgba(0, 0, 0, .8);
}
/* 💠 [CERCEVE-SUS-1] "BURADASIN" ELMAS SÜSLEMESİ KALDIRILDI — Tahsin 2026-08-14:
"sadece premıumun üstüne taç gibi bişey binmiş bi bozukluk var."
O "taç" bu süslemeydi. GEOMETRİ TUTMUYOR, ayar meselesi değil: düğme 34px ve
9px'lik iki kenar düşünce İÇERİYE yalnız 16px kalıyor; süsleme 18px ve `top:-2px`
ile üstten taşıyor → yazının tepesine biniyor, "Premium" yazısı "Prem..." gibi
görünüyordu. Aktif sekmede (Premium ekranındayken) ortaya çıktığı için ilk
ölçümlerimde görünmedi.
Küçültmeyi denemek yerine kaldırdım: kenar bandı 9px, elması oraya sığdırmak
50×40'lık çizimi tanınmaz hale getirirdi. Aktiflik artık parlaklık + altın
gölgeyle veriliyor (üstteki kural).
🖼️ `cerceve-sus.png` SİLİNMEDİ: Tahsin'in çizimi, ileride başlık şeritleri gibi
GENİŞ ve YÜKSEK ögelerde asıl yerini bulacak — orada 40px'lik bir bandı var. */
/* Rozetler çerçevenin İÇİNDE kalmalı: dış kenara taşarsa süslemenin üstüne biner.
Yükseklik 16px'i AŞMAMALI — düğmenin iç yüksekliği sabit; rozet 17px kalsaydı
sayı görünen düğme komşularından yarım piksel taşar, hiza yine bozulurdu. */
/* 🔔 BİLDİRİM ROZETLERİ — küçük olması DOĞRU: taşıdıkları bilgi tek haneli bir sayı,
asıl iş etiketin kendisinde. Dört rozet birden görününce her piksel çubuktan yer alıyor. */
.main-nav .nav-tab .msg-badge,
header .nav-dd .nav-tab .msg-badge {
position: relative;
z-index: 1;
height: 15px;
min-width: 14px;
padding: 0 3px;
font-size: .58rem;
flex: 0 0 auto;
/* [FAZ2-3] sayı rozette ortalı değildi: sabit 15px kutuda miras line-height:1 satırı
tepeye yaslıyordu; grid ortalaması yükseklik/yazı tipinden bağımsız garanti. */
display: inline-grid;
place-items: center;
}
/* 🪙 [HDR-SIKKE-2] SİKKE BAKİYESİ ROZETLERDEN AYRILDI — Tahsin 2026-08-14:
"hiç belli olmuyor ki ne kadar altın sikkesi olduğu."
HATA BENDE: bakiyeyi yukarıdaki bildirim rozetleriyle AYNI kurala koymuştum ve
`.58rem` (9,3px) ona da uygulanıyordu. Ama bu bir bildirim sayacı değil —
oyuncunun parası, üst panelde okunması gereken TEK sayı.
11,8px'e çıkarıldı, dolgu genişletildi, yazı kalınlaştı. Yükseklik 16px:
düğmenin iç yüksekliği zaten 16px, taşmıyor ve hizayı bozmuyor. */
.main-nav .nav-tab .hdr-elmas {
position: relative;
z-index: 1;
height: 16px;
padding: 0 9px;
/* .58rem (9,3px) → .82rem (13,1px). Tahsin "aranın doldurulmasına" izin verdi,
yani genişleme serbest: okunurluk boyuttan önce geliyor. Rozet düğmenin 16px'lik
iç kutusuna sığdığı için hiza yine bozulmuyor. */
font-size: .82rem;
font-weight: 800;
letter-spacing: .2px;
flex: 0 0 auto;
}
/* Ayarlar `.main-nav`'ın kardeşi: başlık flex satırında sekmelerle aynı hizada
dursun diye. `flex: 0 0 auto` — `.main-nav` `flex:1` olduğu için Ayarlar sıkışıp
ezilmesin. Sol boşluk sekmeler arası boşlukla (6px) aynı. */
header > .nav-dd {
flex: 0 0 auto;
align-self: center;
margin-left: 2px;
}
/* Başlık öbekleri arası boşluk 16 → 8px. Sikke rozeti büyüyünce (13,1px yazı ve
"90.850" gibi 6 haneli cüzdan) sekmeler taşıp Premium'un sağ kenarı kırpılıyordu —
iki kez ölçüldü: rozet büyütmede 5px, Sıralama menüsü eklenince 10px. Boşluklardan
kazanılan ~12px ikisini de kapatıyor; öbekler yine yapışık değil. */
header { gap: 8px; }
/* ══════════════════════════════════════════════════════════════════════════════
📏 [BASLIK-HIZA-1] ÜST PANEL HİZASI — Tahsin 2026-08-14: "aynı hizaya oturtalım
çok kalabalık duruyo" · "birde zamanı gerekirse küçült".
ÖLÇÜLEN SORUN: satırdaki üç grup ÜÇ AYRI YÜKSEKLİKTEYDİ — çerçeveli sekmeler
35px, saat 28px, Çıkış 27px. Hepsi dikeyde ortalı olduğu için "hizasız" değil
ama farklı boyları göz KALABALIK okuyor: aynı satırda üç ayrı ritim var.
Çözüm: sağdaki ikisi de sekmelerle AYNI 34px'e sabitlendi ve puntoları küçüldü
(saat 13,6 → 11,5px) — hem yer açıldı hem satır tek ritme oturdu.
⚠️ `height` + `display:inline-flex` birlikte: yalnız `height` verseydim metin
dikeyde yapışık kalırdı (satır kutusu yüksekliği takip etmez). */
/* 🕳️ SON 1 PİKSEL: sekmeler 35px, sağdakiler 34px çıkıyordu. Sebep `.main-nav`ın
varsayılan `align-items: stretch` değeri — sekmeler kabın yüksekliğine GERİLİYOR,
Ayarlar ise `align-self: center` olduğu için kendi içeriğine göre 34px kalıyordu.
`center` ile sekmeler de gerilmeyi bırakıyor; dördü de birebir aynı kutuda. */
/* 🔴 [BASLIK-HIZA-1] `flex-wrap: nowrap` — BAŞLIK BİR DAHA İKİYE KATLANMASIN.
ÖLÇÜLDÜ: dört rozet birden görününce (Sancak/Mesajlar/Raporlar/Duyurular'da sayı
varken) sekmeler 821px istiyor, çubukta 733px yer var → `flex-wrap: wrap` ikinci
satır açıyor ve başlık 52px'ten 90px'e fırlıyordu. Tahsin'in istediği tam tersi:
"aynı hizaya oturtalım, çok kalabalık duruyo".
Sarma kapatılınca o nadir durumda çubuk yatayda KAYDIRIR (zaten `overflow-x: auto`
bunun için orada) — başlık her koşulda tek satır, 52px kalır.
⚠️ Ayarlar bu çubuğun DIŞINDA olduğu için kaydırmada asla kaybolmaz. */
/* 🔴 [BASLIK-BOSLUK-1] `flex: 1` → `flex: 0 1 auto` — Tahsin 2026-08-14:
"premıum ile ayarlar arasını doldur gerekirse."
SEBEP: `.main-nav` `flex: 1` ile satırdaki BOŞ ALANIN TAMAMINI yutuyordu; düğmeler
sola yaslı olduğu için artan yer nav'ın SAĞ ucunda boşluk olarak kalıyor ve Ayarlar
o boşluğun ardına itiliyordu. Şimdi nav yalnız içeriği kadar yer kaplıyor, Ayarlar
Premium'un hemen yanına geliyor. Saat/Çıkış `margin-left: auto` ile yine en sağda.
`0 1 auto` (büyüme YOK, küçülme VAR): dar ekranda nav yine sıkışıp kaydırabilsin. */
header .main-nav { align-items: center; flex-wrap: nowrap; gap: 3px; flex: 0 1 auto; }
/* Kaydırma çubuğu YER KAPLAMASIN. Sarma kapatıldıktan sonra bile başlık 52 → 60px
çıkıyordu: taşma olan durumda tarayıcı çubuğun 8px'ini nav'ın YÜKSEKLİĞİNDEN
alıyor ve satır yine büyüyordu (ölçüldü). Çubuk gizlenince yükseklik her koşulda
sabit; tekerlek/dokunmayla kaydırma çalışmaya devam ediyor.
⚠️ Bu ancak ÜÇ-DÖRT rozet aynı anda görünürken devreye girer; rozetsiz halde
sekmeler 694px, yer 760px — taşma yok. */
header .main-nav { scrollbar-width: none; }
header .main-nav::-webkit-scrollbar { height: 0; width: 0; }
header .header-right { align-items: center; gap: 8px; }
/* Premium düğmesi tek başına 35px kalıyordu: içindeki GERÇEK sikke görseli
(`.para-ikon`) yazı satırından yüksek ve düğmeyi 1px büyütüyordu. Çerçeveli
düğmenin iç yüksekliği 34−18(kenar)=16px; görsel ona sığdırıldı.
`vertical-align: middle` olmadan resim taban çizgisine oturur ve yazıya göre
1-2px aşağı kayar — hizayı yine bozardı. */
header .main-nav .nav-tab .para-ikon {
height: 15px;
width: auto;
vertical-align: middle;
}
header .server-clock {
height: 34px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
padding: 0 9px;
font-size: .72rem;
letter-spacing: .3px;
}
header .btn-logout {
height: 34px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
padding: 0 11px;
font-size: .72rem;
}
/* Dar ekran: çerçeve kalınlığı sabit kalırsa düğmeler yazıdan çok çerçeve olur. */
@media (max-width: 820px) {
.main-nav .nav-tab,
header .nav-dd .nav-tab {
border-width: 8px 9px;
font-size: .7rem;
padding: 0 1px;
}
.main-nav .nav-tab.active::before,
header .nav-dd .nav-tab.active::before { width: 18px; height: 15px; }
}
.quick-menu {
background: linear-gradient(180deg, #2e2517, #141006) !important;
border-bottom: 2px solid #9d7b3f !important;
}
.quick-menu button:hover {
background: rgba(255, 232, 180, .12) !important;
}
/* Genel bakis/koy adi ve kaynaklar ayni satir: float ile yer kaplar, uste binmez. */
.village-nav-bar {
float: left;
width: 47%;
height: 34px !important;
min-height: 34px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 0 10px !important;
overflow: hidden;
white-space: nowrap;
background: linear-gradient(180deg, #fff2d2, #ecd09b) !important;
border-bottom: 1px solid var(--ks-line) !important;
color: #7b2b06 !important;
}
.resource-bar {
float: right;
width: 60%;
height: 34px !important;
min-height: 34px !important;
display: flex !important;
align-items: center !important;
/* UÇURUM FİX (Tahsin 2026-07-10): flex-end + gizli troops-bar'ın auto marjı nüfus↔kasa arasında
dev boşluk açıyordu. flex-start: kaynaklar solda akar, kasa+kılıç nüfusun hemen ardından gelir. */
justify-content: flex-start !important;
gap: 10px !important;
padding: 0 9px 0 0 !important;
margin: 0 !important;
background: linear-gradient(180deg, #fff2d2, #ecd09b) !important;
border-bottom: 1px solid var(--ks-line) !important;
box-shadow: none !important;
overflow: visible;
}
.resource-bar .res-item {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
min-width: 0 !important;
min-height: 34px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.resource-bar .res-item > div {
display: inline-flex !important;
align-items: center !important;
}
.resource-bar .res-label,
.resource-bar .res-rate {
display: none !important;
}
/* 🧱 [KAYNAK-GORSEL-1] ÜST KAYNAK ÇUBUĞU — ŞERİDİN TAMAMI TEK ÖLÇÜ: 22px.
🔴 BURADA NEYİN DÜZELTİLDİĞİ: ilk [KAYNAK-GORSEL-1] partisi yalnız odun/kil/demir'i
22px yaptı; AYNI ŞERİTTEKİ yakut (gömülü SVG) 16px'te, depo (.depo-ik) 17px'te,
çiftlik 👥 emojisi (.res-icon font-size:.95rem ≈ 15px) 15px'te kaldı. Yamadan
ÖNCE şeritteki her şey 15-17px aralığındaydı; yani "mobil şeritle aynı ölçü"
niyetiyle yazılan kural TEK ŞERİTTE 22/17/16/15 karışıklığı ÜRETTİ. Mobilde
(uygulama.css .kaynak-ikon) BEŞ çipin hepsi 22px — parite ancak beşi birden
22px olunca gerçek olur, üçü için doğru olan bir iddia şerit için doğru değildi.
⚠️ 22px'te BİRLEŞTİ, 16px'e geri DÖNÜLMEDİ: Tahsin'in çizimleri 256px kaynaktan
küçülüyor ve 16px'te kil/demir siluetleri birbirine yaklaşıyor. .res-item'ın
min-height'ı zaten 34px olduğu için şerit UZAMIYOR.
⚠️ İKİ AYRI ÖLÇÜ BİRİMİ, TEK HEDEF: ![]()
/