/* ========================================================================== DIRILIŞ ONLINE - THEME: GÖKTÜRK DEMİR & KEHRİBAR (Forged Blackened Iron & Steppe Amber) Inspired by Imperial Strategy UI Reference Scoped to: html[data-theme="gokturk"] ========================================================================== */ /* -------------------------------------------------------------------------- 1. ROOT THEME DESIGN TOKENS (SMOKY SLATE STEEL GRAY & IMPERIAL GOLD) -------------------------------------------------------------------------- */ html[data-theme="gokturk"] { --targun-bg-dark: #101622; --targun-panel-bg: rgba(36, 48, 66, 0.72); --targun-panel-border: #c89b3c; --targun-gold-accent: #f5c542; --targun-gold-glow: rgba(245, 197, 66, 0.45); --targun-text-bright: #ffffff; --targun-text-muted: #94a3b8; --targun-wood-gradient: linear-gradient(180deg, rgba(42, 54, 72, 0.75) 0%, rgba(26, 36, 50, 0.70) 100%); --targun-gold-button: linear-gradient(180deg, #d97706 0%, #9a3412 52%, #5c1d08 100%); --targun-blue-button: linear-gradient(180deg, #252932 0%, #161920 52%, #0c0e13 100%); --targun-red-button: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%); --targun-green-button: linear-gradient(180deg, #16a34a 0%, #14532d 100%); /* Lighter Smoky Slate Frosted Glass Tokens */ --targun-glass-modal-bg: transparent; --targun-glass-gradient-top: rgba(45, 55, 72, 0.55); --targun-glass-gradient-bottom: rgba(30, 41, 59, 0.50); --targun-glass-well-bg: rgba(10, 12, 16, 0.92); --targun-glass-overlay-bg: rgba(10, 16, 26, 0.35); /* Legacy Smoky Slate Tokens for Compatibility: rgba(42, 52, 68, 0.72) / rgba(26, 34, 48, 0.65) */ --targun-smoky-top: rgba(42, 52, 68, 0.72); --targun-smoky-bottom: rgba(26, 34, 48, 0.65); } /* -------------------------------------------------------------------------- 2. MODALS & DIALOGS (SMOKY FROSTED GLASS & DUAL GOLD FILIGREE FRAME) -------------------------------------------------------------------------- */ /* Soften backdrop overlay dimming: background village remains clearly visible through blur */ html[data-theme="gokturk"] .modal-overlay, html[data-theme="gokturk"] .modal-backdrop, html[data-theme="gokturk"] div[class*="modal-overlay"], html[data-theme="gokturk"] div[class*="modal-backdrop"], html[data-theme="gokturk"] div[id$="Modal"] { background: rgba(10, 16, 26, 0.35) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } /* Modal Window Card: Lighter Smoky slate-gray semi-transparent frosted glass with filigree frame */ html[data-theme="gokturk"] .modal-dark-card, html[data-theme="gokturk"] .modal-window, html[data-theme="gokturk"] .modal-content, html[data-theme="gokturk"] .custom-modal, html[data-theme="gokturk"] .hud-panel, html[data-theme="gokturk"] .ranking-modal-card, html[data-theme="gokturk"] .send-movement-modal-card, html[data-theme="gokturk"] .mobile-menu-drawer-card, html[data-theme="gokturk"] div[id*="Modal"] > .modal-dark-card, html[data-theme="gokturk"] div[id*="Modal"] > .modal-window, html[data-theme="gokturk"] div[id$="Modal"] .modal-dark-card, html[data-theme="gokturk"] div[id$="Modal"] .modal-window, html[data-theme="gokturk"] div[id$="Modal"] > div:first-child:not(.modal-close-btn), html[data-theme="gokturk"] .modal-overlay > div:first-child, html[data-theme="gokturk"] .modal-backdrop > div:first-child { position: relative !important; background-origin: border-box !important; background-clip: border-box !important; background-color: transparent !important; background-image: url('../../assets/ui/theme-glassmorphism/filigree-corner-tl.svg'), url('../../assets/ui/theme-glassmorphism/filigree-corner-tr.svg'), url('../../assets/ui/theme-glassmorphism/filigree-corner-bl.svg'), url('../../assets/ui/theme-glassmorphism/filigree-corner-br.svg'), url('../../assets/ui/theme-glassmorphism/filigree-crest-bottom.svg'), url('../../assets/ui/theme-glassmorphism/filigree-crest-top.svg'), /* Lighter slate-gray gradient: rgba(45, 55, 72, 0.55) 0%, rgba(30, 41, 59, 0.50) 100% */ linear-gradient(175deg, rgba(58, 76, 102, 0.44) 0%, rgba(36, 50, 72, 0.38) 100%) !important; background-position: top 0 left 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0, bottom -1px center, top -1px center, 0 0 !important; background-size: 44px 44px, 44px 44px, 44px 44px, 44px 44px, 80px 24px, 120px 28px, auto !important; background-repeat: no-repeat !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; border: 1.5px solid #d4af37 !important; border-radius: 16px !important; box-shadow: 0 0 0 1px rgba(245, 215, 130, 0.32), 0 25px 65px rgba(0, 0, 0, 0.50), inset 0 1px 1px rgba(255, 255, 255, 0.32), inset 0 0 20px rgba(100, 130, 175, 0.12) !important; } /* Modal Body Transparency */ html[data-theme="gokturk"] .modal-window .modal-body, html[data-theme="gokturk"] .modal-body { background: transparent !important; } /* Modal Headers: Centered title layout with absolute close button */ html[data-theme="gokturk"] .modal-dark-card > div:first-child, html[data-theme="gokturk"] .modal-window .modal-header, html[data-theme="gokturk"] .ranking-modal-card > div:first-child, html[data-theme="gokturk"] .modal-overlay .modal-header, html[data-theme="gokturk"] .modal-backdrop .modal-header, html[data-theme="gokturk"] .modal-dark-card .modal-header, html[data-theme="gokturk"] div[id$="Modal"] .modal-header { position: relative !important; display: flex !important; justify-content: center !important; align-items: center !important; padding-left: 50px !important; padding-right: 50px !important; box-sizing: border-box !important; border-bottom: 1.5px solid rgba(212, 175, 55, 0.45) !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) !important; padding-bottom: 12px !important; margin-bottom: 14px !important; background: transparent !important; min-height: 44px !important; } /* Modal Title Imperial Cartouche Plaque (Reference Image Section 1 & 3) */ html[data-theme="gokturk"] .modal-dark-card #modalTitle, html[data-theme="gokturk"] .modal-dark-card > div:first-child h3, html[data-theme="gokturk"] .modal-dark-card > div:first-child h2, html[data-theme="gokturk"] .modal-window .modal-header h3, html[data-theme="gokturk"] .ranking-modal-card > div:first-child h3, html[data-theme="gokturk"] #medreseResearchModal .modal-dark-card > div:first-child h3, html[data-theme="gokturk"] #cephaneArmoryModal .modal-dark-card > div:first-child h3, html[data-theme="gokturk"] #clanModal #clanModalHeaderTitle, html[data-theme="gokturk"] #sendMovementModal #sendMovementModalTitle, html[data-theme="gokturk"] #buildingDetailConstructModal #constructDetailName, html[data-theme="gokturk"] .modal-dark-card .modal-header-plaque, html[data-theme="gokturk"] .modal-window .modal-header-plaque { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 5px 18px !important; background: linear-gradient(180deg, rgba(36, 48, 68, 0.95) 0%, rgba(18, 26, 38, 0.98) 100%) !important; border: 1.5px solid #d4af37 !important; border-radius: 6px !important; box-shadow: inset 0 1px 0 rgba(255, 235, 160, 0.35), 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 12px rgba(245, 197, 66, 0.25) !important; color: #fff9db !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 10px rgba(245, 197, 66, 0.45) !important; font-weight: 800 !important; font-size: 14px !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; margin: 0 auto !important; position: relative !important; } html[data-theme="gokturk"] .modal-dark-card #modalTitle::before, html[data-theme="gokturk"] .modal-dark-card > div:first-child h3::before, html[data-theme="gokturk"] .ranking-modal-card > div:first-child h3::before, html[data-theme="gokturk"] .modal-window .modal-header h3::before { content: "♦" !important; color: #d4af37 !important; font-size: 9px !important; margin-right: 8px !important; text-shadow: 0 0 6px rgba(245, 197, 66, 0.6) !important; } html[data-theme="gokturk"] .modal-dark-card #modalTitle::after, html[data-theme="gokturk"] .modal-dark-card > div:first-child h3::after, html[data-theme="gokturk"] .ranking-modal-card > div:first-child h3::after, html[data-theme="gokturk"] .modal-window .modal-header h3::after { content: "♦" !important; color: #d4af37 !important; font-size: 9px !important; margin-left: 8px !important; text-shadow: 0 0 6px rgba(245, 197, 66, 0.6) !important; } /* Clean Header Formatting: Hide redundant emoji spans in header, keep cartouche pristine */ html[data-theme="gokturk"] .header-title-emoji, html[data-theme="gokturk"] #diamondShopModal .modal-header span[style*="font-size:1.4rem"], html[data-theme="gokturk"] #diamondShopModal .modal-header > div > span[style*="font-size:1.4rem"], html[data-theme="gokturk"] .modal-dark-card > div:first-child > div:first-child > span:first-child:not(#marketGoldDisplayBadge), html[data-theme="gokturk"] .ranking-modal-card > div:first-child > div:first-child > span:first-child, html[data-theme="gokturk"] .modal-window .modal-header > div:first-child > span:first-child, html[data-theme="gokturk"] #clanModal #clanModalHeaderIcon, html[data-theme="gokturk"] #medreseResearchModal .modal-dark-card > div:first-child > div:first-child > div:first-child, html[data-theme="gokturk"] #cephaneArmoryModal .modal-dark-card > div:first-child > div:first-child > div:first-child { display: none !important; } /* Modal Header Title Wrapper: Column layout ensures centered title & subtitle stacking */ html[data-theme="gokturk"] .modal-dark-card > div:first-child > div:first-child, html[data-theme="gokturk"] .ranking-modal-card > div:first-child > div:first-child, html[data-theme="gokturk"] .modal-window .modal-header > div:first-child { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; text-align: center !important; } /* Modal Header Subtitles: Centered neatly beneath the title cartouche */ html[data-theme="gokturk"] .modal-header-subtitle, html[data-theme="gokturk"] .modal-dark-card > div:first-child span[style*="color:#94a3b8"], html[data-theme="gokturk"] .modal-dark-card > div:first-child span[style*="color:var(--targun-text-muted)"], html[data-theme="gokturk"] .modal-dark-card > div:first-child div[style*="color:#94a3b8"], html[data-theme="gokturk"] .modal-dark-card > div:first-child div[style*="color:var(--targun-text-muted)"], html[data-theme="gokturk"] .modal-window .modal-header div[style*="color:#94a3b8"], html[data-theme="gokturk"] .modal-window .modal-header div[style*="color:#cbd5e1"], html[data-theme="gokturk"] #clanModal #clanModalHeaderSubtitle, html[data-theme="gokturk"] .shop-header-subtitle { display: block !important; text-align: center !important; font-size: 12px !important; color: #94a3b8 !important; margin-top: 4px !important; font-weight: 500 !important; width: 100% !important; } /* Modal Header Secondary Badges: Clean absolute right alignment */ html[data-theme="gokturk"] .modal-dark-card > div:first-child #marketGoldDisplayBadge, html[data-theme="gokturk"] .modal-dark-card > div:first-child #medreseHeaderLevelBadge, html[data-theme="gokturk"] #diamondShopModal .modal-header > div:last-child > div:first-child, html[data-theme="gokturk"] #diamondShopModal #shopDiamondBalanceBadge, html[data-theme="gokturk"] #troopUpgradeModal .troop-upgrade-cap-badge, html[data-theme="gokturk"] #troopUpgradeModal #upgBuildingCapLabel { position: absolute !important; right: 54px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; background: rgba(16, 19, 25, 0.95) !important; border: 1px solid rgba(212, 175, 55, 0.4) !important; border-radius: 9999px !important; padding: 3px 12px !important; font-size: 0.72rem !important; color: #f5c542 !important; font-weight: 700 !important; } /* Responsive Diamond Shop Header for Mobile (<= 768px) */ @media (max-width: 768px) { html[data-theme="gokturk"] #diamondShopModal .modal-header { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 12px 48px 12px 48px !important; min-height: auto !important; position: relative !important; } html[data-theme="gokturk"] #diamondShopModal .modal-header .modal-close-btn { position: absolute !important; right: 10px !important; top: 14px !important; transform: none !important; } html[data-theme="gokturk"] #diamondShopModal .modal-header .modal-info-btn { position: absolute !important; left: 10px !important; top: 14px !important; transform: none !important; } html[data-theme="gokturk"] #diamondShopModal .diamond-shop-title-container, html[data-theme="gokturk"] #diamondShopModal .modal-header > div:nth-child(2) { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; text-align: center !important; } html[data-theme="gokturk"] #diamondShopModal .modal-header h3 { max-width: 100% !important; font-size: 13px !important; padding: 4px 14px !important; white-space: nowrap !important; } html[data-theme="gokturk"] #diamondShopModal .modal-header .shop-header-subtitle { font-size: 11px !important; margin-top: 4px !important; text-align: center !important; line-height: 1.3 !important; white-space: normal !important; } html[data-theme="gokturk"] #diamondShopModal #shopDiamondBalanceBadge, html[data-theme="gokturk"] #diamondShopModal .modal-header .shop-diamond-badge, html[data-theme="gokturk"] #diamondShopModal .modal-header > div:last-child > div:first-child { position: static !important; transform: none !important; right: auto !important; top: auto !important; margin: 8px auto 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(16, 19, 25, 0.95) !important; border: 1px solid rgba(212, 175, 55, 0.5) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; } html[data-theme="gokturk"] #diamondShopModal .diamond-shop-badge-container, html[data-theme="gokturk"] #diamondShopModal .modal-header > div:last-child { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 !important; } } /* Send Movement Modal Header */ html[data-theme="gokturk"] #sendMovementModal .modal-dark-card > div:first-child { flex-direction: column !important; justify-content: center !important; align-items: center !important; position: relative !important; } html[data-theme="gokturk"] #sendMovementModal .modal-dark-card > div:first-child > div:first-child { flex-direction: column !important; align-items: center !important; justify-content: center !important; } html[data-theme="gokturk"] #sendMovementModal #movementEtaContainer { margin-top: 6px !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 4px !important; } html[data-theme="gokturk"] #sendMovementModal #movementEtaContainer > span { font-size: 9.5px !important; padding: 2px 5px !important; white-space: nowrap !important; letter-spacing: -0.2px !important; } html[data-theme="gokturk"] #sendMovementModal .modal-close-btn { top: 2px !important; transform: none !important; } html[data-theme="gokturk"] #sendMovementModal .modal-close-btn:hover { transform: none !important; } html[data-theme="gokturk"] #sendMovementModal .modal-info-btn { top: 4px !important; transform: none !important; } html[data-theme="gokturk"] #sendMovementModal .modal-info-btn:hover { transform: none !important; } html[data-theme="gokturk"] #btnMovementSpeedBoost { white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; } html[data-theme="gokturk"] #btnMovementSpeedBoost span { font-size: inherit !important; font-weight: inherit !important; white-space: nowrap !important; display: inline-block !important; } /* Header Close Button (Circular Antique Bronze/Gold Medallion with Crimson/Dark Core) */ html[data-theme="gokturk"] .modal-close-btn, html[data-theme="gokturk"] .modal-dark-card > div:first-child > button:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] .modal-window .modal-close-btn, html[data-theme="gokturk"] .modal-dark-card button[style*="font-size:1.4rem"]:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] .modal-dark-card button[style*="font-size: 1.4rem"]:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] .modal-dark-card button[style*="font-size:1.6rem"]:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] .modal-dark-card button[style*="font-size: 1.6rem"]:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] #troopUpgradeModal button[onclick*="closeModal"]:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] .modal-overlay button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn), html[data-theme="gokturk"] .modal-backdrop button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn), html[data-theme="gokturk"] .modal-dark-card button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn), html[data-theme="gokturk"] .modal-window button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn), html[data-theme="gokturk"] .ranking-modal-card button[onclick*="closeModal"]:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] .ranking-modal-card > div:first-child > button:not(.btn):not(.modal-info-btn) { position: absolute !important; right: 12px !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; width: 32px !important; height: 32px !important; min-width: 32px !important; max-width: 32px !important; max-height: 32px !important; border-radius: 50% !important; background: radial-gradient(circle at 35% 35%, #521818 0%, #220808 100%) !important; border: 1.5px solid #d4af37 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 230, 160, 0.6) !important; color: #ffe6a3 !important; font-size: 0.88rem !important; font-weight: 900 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important; padding: 0 !important; line-height: 1 !important; z-index: 20 !important; } html[data-theme="gokturk"] .modal-close-btn:hover, html[data-theme="gokturk"] .modal-dark-card > div:first-child > button:not(.btn):not(.modal-info-btn):hover, html[data-theme="gokturk"] .modal-window .modal-close-btn:hover, html[data-theme="gokturk"] .modal-dark-card button[style*="font-size:1.4rem"]:not(.btn):not(.modal-info-btn):hover, html[data-theme="gokturk"] .modal-dark-card button[style*="font-size: 1.4rem"]:not(.btn):not(.modal-info-btn):hover, html[data-theme="gokturk"] #troopUpgradeModal button[onclick*="closeModal"]:not(.btn):not(.modal-info-btn):hover, html[data-theme="gokturk"] .modal-overlay button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn):hover, html[data-theme="gokturk"] .modal-backdrop button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn):hover, html[data-theme="gokturk"] .modal-dark-card button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn):hover, html[data-theme="gokturk"] .modal-window button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn):hover, html[data-theme="gokturk"] .ranking-modal-card button[onclick*="closeModal"]:not(.btn):not(.modal-info-btn):hover, html[data-theme="gokturk"] .ranking-modal-card > div:first-child > button:not(.btn):not(.modal-info-btn):hover { background: radial-gradient(circle at 35% 35%, #7f1d1d 0%, #3a0d0d 100%) !important; border-color: #ef4444 !important; color: #ffffff !important; box-shadow: 0 0 16px rgba(239, 68, 68, 0.8), 0 0 24px rgba(245, 197, 66, 0.4), inset 0 1px 2px #fff !important; transform: translateY(-50%) !important; } html[data-theme="gokturk"] .modal-close-btn:active, html[data-theme="gokturk"] .modal-dark-card > div:first-child > button:not(.btn):not(.modal-info-btn):active, html[data-theme="gokturk"] .modal-window .modal-close-btn:active, html[data-theme="gokturk"] .modal-dark-card button[onclick*="closeModal"]:not(.btn):not(.modal-info-btn):active { transform: translateY(-50%) !important; background: radial-gradient(circle at 35% 35%, #450a0a 0%, #1a0505 100%) !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(239, 68, 68, 0.5) !important; } /* -------------------------------------------------------------------------- 3. MOBILE RESPONSIVE OVERRIDES (NATIVE BOTTOM-SHEET ON SMARTPHONES) -------------------------------------------------------------------------- */ @media (max-width: 768px) { html[data-theme="gokturk"] .modal-dark-card, html[data-theme="gokturk"] .modal-window, html[data-theme="gokturk"] .ranking-modal-card, html[data-theme="gokturk"] .send-movement-modal-card { border-radius: 20px 20px 0 0 !important; border-left: none !important; border-right: none !important; border-bottom: none !important; border-top: 2px solid #d4af37 !important; background-color: transparent !important; background-image: url('../../assets/ui/theme-glassmorphism/filigree-corner-tl.svg'), url('../../assets/ui/theme-glassmorphism/filigree-corner-tr.svg'), url('../../assets/ui/theme-glassmorphism/filigree-crest-top.svg'), linear-gradient(175deg, rgba(42, 52, 68, 0.78) 0%, rgba(26, 34, 48, 0.72) 100%) !important; background-position: top 0 left 0, top 0 right 0, top -1px center, 0 0 !important; background-size: 36px 36px, 36px 36px, 96px 22px, auto !important; background-origin: border-box !important; } /* Mobile GPU Compositing Optimization: Reduce heavy composite backdrop-filters over active game canvas */ html[data-theme="gokturk"] .hud-panel, html[data-theme="gokturk"] .top-bar, html[data-theme="gokturk"] .bottom-nav, html[data-theme="gokturk"] .events-bar, html[data-theme="gokturk"] .chat-overlay, html[data-theme="gokturk"] .village-footer-bar, html[data-theme="gokturk"] .modal-overlay, html[data-theme="gokturk"] .modal-backdrop { backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; } /* Send Movement Modal Mobile Compact Header & Single-Row Action Bar */ html[data-theme="gokturk"] #sendMovementModal .modal-dark-card > div:first-child { padding-left: 8px !important; padding-right: 8px !important; } html[data-theme="gokturk"] #sendMovementModal #movementEtaContainer { gap: 3px !important; margin-top: 5px !important; } html[data-theme="gokturk"] #sendMovementModal #movementEtaContainer > span { font-size: 8.5px !important; padding: 1.5px 4px !important; } html[data-theme="gokturk"] .send-movement-footer-actions { display: flex !important; width: 100% !important; gap: 6px !important; align-items: center !important; } html[data-theme="gokturk"] .send-movement-footer-actions button { flex: 1 1 auto !important; text-align: center !important; justify-content: center !important; align-items: center !important; padding: 7px 6px !important; font-size: 10px !important; white-space: nowrap !important; min-width: 0 !important; } html[data-theme="gokturk"] .send-movement-footer-actions button:first-child { flex: 0 0 auto !important; padding: 7px 10px !important; } } /* -------------------------------------------------------------------------- 4. BUTTONS (3D AMBER GOLD PRIMARY & SAPPHIRE STEEL SECONDARY) -------------------------------------------------------------------------- */ /* Primary Buttons (YÜKSELT, Saldır, Araştır, Onayla, vb.) */ html[data-theme="gokturk"] .btn-primary, html[data-theme="gokturk"] #modalUpgradeConfirmBtn, html[data-theme="gokturk"] .btn-construct-small, html[data-theme="gokturk"] .quick-village-btn, html[data-theme="gokturk"] .btn-gold-3d, html[data-theme="gokturk"] .modal-overlay .btn-primary, html[data-theme="gokturk"] .modal-backdrop .btn-primary, html[data-theme="gokturk"] .modal-dark-card .btn-primary, html[data-theme="gokturk"] .modal-window .btn-primary, html[data-theme="gokturk"] .ranking-modal-card .btn-primary, html[data-theme="gokturk"] .modal-overlay button[onclick*="confirm"], html[data-theme="gokturk"] .modal-backdrop button[onclick*="confirm"], html[data-theme="gokturk"] .modal-dark-card button[onclick*="confirm"], html[data-theme="gokturk"] .modal-window button[onclick*="confirm"], html[data-theme="gokturk"] .modal-overlay button[onclick*="Confirm"], html[data-theme="gokturk"] .modal-backdrop button[onclick*="Confirm"], html[data-theme="gokturk"] .modal-dark-card button[onclick*="Confirm"], html[data-theme="gokturk"] .modal-overlay button[onclick*="exchange"], html[data-theme="gokturk"] .modal-dark-card button[onclick*="exchange"], html[data-theme="gokturk"] .modal-overlay button[onclick*="simulate"], html[data-theme="gokturk"] .modal-backdrop button[onclick*="simulate"], html[data-theme="gokturk"] .modal-window button[onclick*="simulate"], html[data-theme="gokturk"] .modal-overlay button[onclick*="Simulate"], html[data-theme="gokturk"] .modal-backdrop button[onclick*="Simulate"], html[data-theme="gokturk"] .modal-window button[onclick*="Simulate"], html[data-theme="gokturk"] .modal-overlay button[onclick*="Submit"], html[data-theme="gokturk"] .modal-dark-card button[onclick*="Submit"], html[data-theme="gokturk"] .modal-overlay button[onclick*="Save"], html[data-theme="gokturk"] .modal-dark-card button[onclick*="Save"], html[data-theme="gokturk"] .modal-dark-card button[onclick*="openTrainModal"], html[data-theme="gokturk"] .modal-window button[onclick*="executeCombatSimulation"] { background: linear-gradient(180deg, #d97706 0%, #9a3412 52%, #5c1d08 100%) !important; color: #ffffff !important; border: 1.5px solid #ffe285 !important; border-radius: 8px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 0 rgba(0, 0, 0, 0.35) !important; transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; } html[data-theme="gokturk"] .btn-primary:hover, html[data-theme="gokturk"] #modalUpgradeConfirmBtn:hover, html[data-theme="gokturk"] .btn-construct-small:hover, html[data-theme="gokturk"] .quick-village-btn:hover, html[data-theme="gokturk"] .btn-gold-3d:hover, html[data-theme="gokturk"] .modal-overlay .btn-primary:hover, html[data-theme="gokturk"] .modal-backdrop .btn-primary:hover, html[data-theme="gokturk"] .modal-dark-card .btn-primary:hover, html[data-theme="gokturk"] .modal-window .btn-primary:hover, html[data-theme="gokturk"] .modal-overlay button[onclick*="confirm"]:hover, html[data-theme="gokturk"] .modal-backdrop button[onclick*="confirm"]:hover, html[data-theme="gokturk"] .modal-dark-card button[onclick*="confirm"]:hover, html[data-theme="gokturk"] .modal-window button[onclick*="confirm"]:hover, html[data-theme="gokturk"] .modal-overlay button[onclick*="exchange"]:hover, html[data-theme="gokturk"] .modal-dark-card button[onclick*="exchange"]:hover, html[data-theme="gokturk"] .modal-overlay button[onclick*="simulate"]:hover, html[data-theme="gokturk"] .modal-backdrop button[onclick*="simulate"]:hover, html[data-theme="gokturk"] .modal-window button[onclick*="simulate"]:hover { background: linear-gradient(180deg, #f59e0b 0%, #b45309 52%, #78350f 100%) !important; border-color: #ffffff !important; box-shadow: 0 6px 20px rgba(245, 197, 66, 0.55), inset 0 1px 0 #ffffff !important; transform: translateY(-1px) !important; } html[data-theme="gokturk"] .btn-primary:active, html[data-theme="gokturk"] #modalUpgradeConfirmBtn:active, html[data-theme="gokturk"] .btn-construct-small:active, html[data-theme="gokturk"] .quick-village-btn:active { background: linear-gradient(180deg, #b46b14 0%, #8e4909 100%) !important; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.7) !important; transform: translateY(1px) !important; } /* Secondary / Dismiss / Cancel Buttons (VAZGEÇ, Kapat, İptal) */ html[data-theme="gokturk"] .btn-secondary, html[data-theme="gokturk"] .btn-sapphire, html[data-theme="gokturk"] #modalUpgradeCancelBtn, html[data-theme="gokturk"] .upgrade-modal-footer button:not(#modalUpgradeConfirmBtn):not(#modalUpgradeFastBtn), html[data-theme="gokturk"] .construct-detail-footer button:not(#constructDetailConfirmBtn):not(#constructDetailFastBtn), html[data-theme="gokturk"] .modal-dark-card .upgrade-modal-footer button:first-child, html[data-theme="gokturk"] .modal-overlay .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones), html[data-theme="gokturk"] .modal-backdrop .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones), html[data-theme="gokturk"] .modal-dark-card .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones), html[data-theme="gokturk"] .modal-window .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones), html[data-theme="gokturk"] .ranking-modal-card .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones), html[data-theme="gokturk"] .modal-overlay button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn), html[data-theme="gokturk"] .modal-backdrop button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn), html[data-theme="gokturk"] .modal-dark-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn), html[data-theme="gokturk"] .modal-window button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn), html[data-theme="gokturk"] .ranking-modal-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn) { background: linear-gradient(180deg, #252932 0%, #161920 52%, #0c0e13 100%) !important; color: #e2e8f0 !important; border: 1.5px solid #a88149 !important; border-radius: 8px !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.4) !important; transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; } html[data-theme="gokturk"] .btn-secondary:hover, html[data-theme="gokturk"] .btn-sapphire:hover, html[data-theme="gokturk"] #modalUpgradeCancelBtn:hover, html[data-theme="gokturk"] .upgrade-modal-footer button:not(#modalUpgradeConfirmBtn):not(#modalUpgradeFastBtn):hover, html[data-theme="gokturk"] .construct-detail-footer button:not(#constructDetailConfirmBtn):not(#constructDetailFastBtn):hover, html[data-theme="gokturk"] .modal-dark-card .upgrade-modal-footer button:first-child:hover, html[data-theme="gokturk"] .modal-overlay .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover, html[data-theme="gokturk"] .modal-backdrop .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover, html[data-theme="gokturk"] .modal-dark-card .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover, html[data-theme="gokturk"] .modal-window .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover, html[data-theme="gokturk"] .modal-overlay button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):hover, html[data-theme="gokturk"] .modal-backdrop button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):hover, html[data-theme="gokturk"] .modal-dark-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):hover, html[data-theme="gokturk"] .modal-window button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):hover, html[data-theme="gokturk"] .ranking-modal-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):hover { background: linear-gradient(180deg, #3a2b1c 0%, #241a10 52%, #140e08 100%) !important; border-color: #f59e0b !important; color: #ffffff !important; box-shadow: 0 6px 18px rgba(245, 158, 11, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; transform: translateY(-1px) !important; } html[data-theme="gokturk"] .btn-secondary:active, html[data-theme="gokturk"] #modalUpgradeCancelBtn:active, html[data-theme="gokturk"] .upgrade-modal-footer button:not(#modalUpgradeConfirmBtn):not(#modalUpgradeFastBtn):active, html[data-theme="gokturk"] .construct-detail-footer button:not(#constructDetailConfirmBtn):not(#constructDetailFastBtn):active, html[data-theme="gokturk"] .modal-overlay button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):active, html[data-theme="gokturk"] .modal-backdrop button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):active, html[data-theme="gokturk"] .modal-dark-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):active, html[data-theme="gokturk"] .modal-window button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):active, html[data-theme="gokturk"] .ranking-modal-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):active { background: linear-gradient(180deg, #0b0d11 0%, #15181f 100%) !important; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.7) !important; transform: translateY(1px) !important; } /* ⚡ Diamond Speedup Buttons (Gold / Amber 3D - %50 Hızlandırma) */ html[data-theme="gokturk"] .btn-warning, html[data-theme="gokturk"] #modalUpgradeFastBtn, html[data-theme="gokturk"] #constructDetailFastBtn, html[data-theme="gokturk"] .medrese-fast-btn, html[data-theme="gokturk"] .cephane-fast-btn { background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important; color: #ffffff !important; border: 1.5px solid #fbbf24 !important; border-radius: 8px !important; font-weight: 800 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.4) !important; transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; } html[data-theme="gokturk"] .btn-warning:hover, html[data-theme="gokturk"] #modalUpgradeFastBtn:hover, html[data-theme="gokturk"] #constructDetailFastBtn:hover, html[data-theme="gokturk"] .medrese-fast-btn:hover, html[data-theme="gokturk"] .cephane-fast-btn:hover { background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important; border-color: #fde68a !important; color: #ffffff !important; box-shadow: 0 6px 18px rgba(245, 158, 11, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; transform: translateY(-1px) !important; } html[data-theme="gokturk"] .btn-warning:active, html[data-theme="gokturk"] #modalUpgradeFastBtn:active, html[data-theme="gokturk"] #constructDetailFastBtn:active, html[data-theme="gokturk"] .medrese-fast-btn:active, html[data-theme="gokturk"] .cephane-fast-btn:active { background: linear-gradient(180deg, #b45309 0%, #92400e 100%) !important; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.7) !important; transform: translateY(1px) !important; } /* Disabled Buttons (Reference Image Section 2: BUTTON -> Disabled) */ html[data-theme="gokturk"] .btn:disabled, html[data-theme="gokturk"] .btn[disabled], html[data-theme="gokturk"] button:disabled, html[data-theme="gokturk"] button[disabled] { background: linear-gradient(180deg, #15171c 0%, #0b0c0f 100%) !important; color: #64748b !important; border: 1.5px solid rgba(255, 255, 255, 0.1) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important; text-shadow: none !important; cursor: not-allowed !important; transform: none !important; opacity: 0.65 !important; filter: grayscale(40%) !important; } html[data-theme="gokturk"] .btn:disabled:hover, html[data-theme="gokturk"] .btn[disabled]:hover, html[data-theme="gokturk"] button:disabled:hover, html[data-theme="gokturk"] button[disabled]:hover { background: linear-gradient(180deg, #15171c 0%, #0b0c0f 100%) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important; transform: none !important; } /* -------------------------------------------------------------------------- 5. SUNKEN INNER WELLS (RESOURCE STATS, INFO BLOCKS, TABLES, OVERRIDES) -------------------------------------------------------------------------- */ html[data-theme="gokturk"] .glass-sunken-well, html[data-theme="gokturk"] .cost-res-well, html[data-theme="gokturk"] .modal-dark-card div[style*="background:rgba(255,255,255,0.0"], html[data-theme="gokturk"] .modal-dark-card div[style*="background:rgba(255, 255, 255, 0.0"], html[data-theme="gokturk"] .modal-dark-card div[style*="background: rgba(255, 255, 255, 0.0"], html[data-theme="gokturk"] .modal-dark-card div[style*="background: rgba(255,255,255,0.0"], html[data-theme="gokturk"] .modal-dark-card div[style*="background:rgba(0,0,0,0.2)"], html[data-theme="gokturk"] .modal-dark-card div[style*="background:rgba(0,0,0,0.3)"], html[data-theme="gokturk"] .modal-dark-card div[style*="background:rgba(0,0,0,0.4)"], html[data-theme="gokturk"] .modal-dark-card div[style*="background:rgba(0,0,0,0.5)"], html[data-theme="gokturk"] .modal-dark-card div[style*="background:rgba(0,0,0,0.6)"], html[data-theme="gokturk"] .modal-dark-card div[style*="background:rgba(0,0,0,0.7)"], html[data-theme="gokturk"] .modal-window div[style*="background:rgba(255,255,255,0.0"], html[data-theme="gokturk"] .modal-window div[style*="background:rgba(0,0,0,0.3)"], html[data-theme="gokturk"] .modal-window div[style*="background:rgba(0,0,0,0.4)"]:not(.quests-tab-bar), html[data-theme="gokturk"] .modal-window div[style*="background:rgba(0,0,0,0.5)"]:not(.quests-tab-bar), html[data-theme="gokturk"] .ranking-modal-card div[style*="background:rgba(0,0,0,0.4)"], html[data-theme="gokturk"] .ranking-modal-card div[style*="background:rgba(0,0,0,0.55)"], html[data-theme="gokturk"] .ranking-tab-capsule-bar, html[data-theme="gokturk"] .modal-overlay [style*="background:#120b06"], html[data-theme="gokturk"] .modal-overlay [style*="background: #120b06"], html[data-theme="gokturk"] .modal-backdrop [style*="background:#120b06"], html[data-theme="gokturk"] .modal-backdrop [style*="background: #120b06"], html[data-theme="gokturk"] .modal-dark-card [style*="background:#120b06"], html[data-theme="gokturk"] .modal-window [style*="background:#120b06"], html[data-theme="gokturk"] .modal-overlay [style*="background:#120c06"], html[data-theme="gokturk"] .modal-backdrop [style*="background:#120c06"], html[data-theme="gokturk"] .modal-dark-card [style*="background:#120c06"], html[data-theme="gokturk"] .modal-window [style*="background:#120c06"], html[data-theme="gokturk"] .modal-overlay [style*="background:#181008"], html[data-theme="gokturk"] .modal-overlay [style*="background: #181008"], html[data-theme="gokturk"] .modal-backdrop [style*="background:#181008"], html[data-theme="gokturk"] .modal-dark-card [style*="background:#181008"], html[data-theme="gokturk"] .modal-window [style*="background:#181008"], html[data-theme="gokturk"] .modal-overlay [style*="background:#181009"], html[data-theme="gokturk"] .modal-dark-card [style*="background:#181009"], html[data-theme="gokturk"] .modal-overlay [style*="background:#140d08"], html[data-theme="gokturk"] .modal-overlay [style*="background: #140d08"], html[data-theme="gokturk"] .modal-backdrop [style*="background:#140d08"], html[data-theme="gokturk"] .modal-dark-card [style*="background:#140d08"], html[data-theme="gokturk"] .modal-overlay [style*="background:#1a130e"], html[data-theme="gokturk"] .modal-dark-card [style*="background:#1a130e"], html[data-theme="gokturk"] .modal-overlay [style*="background:#1e140d"], html[data-theme="gokturk"] .modal-dark-card [style*="background:#1e140d"], html[data-theme="gokturk"] .modal-overlay [style*="background:#0b111e"], html[data-theme="gokturk"] .modal-dark-card [style*="background:#0b111e"], html[data-theme="gokturk"] .modal-overlay [style*="background:#0a0604"], html[data-theme="gokturk"] .modal-dark-card [style*="background:#0a0604"], html[data-theme="gokturk"] .modal-overlay [style*="background:#0b0f19"], html[data-theme="gokturk"] .modal-backdrop [style*="background:#0b0f19"], html[data-theme="gokturk"] .modal-window [style*="background:#0b0f19"], html[data-theme="gokturk"] .modal-overlay [style*="background:#1e1b4b"], html[data-theme="gokturk"] .modal-backdrop [style*="background:#1e1b4b"], html[data-theme="gokturk"] .modal-window [style*="background:#1e1b4b"], html[data-theme="gokturk"] .modal-backdrop [style*="background:#0a0f1c"], html[data-theme="gokturk"] .modal-backdrop [style*="background:#0b101d"], html[data-theme="gokturk"] .modal-backdrop [style*="background:#0f172a"], html[data-theme="gokturk"] .modal-backdrop [style*="background:#111827"], html[data-theme="gokturk"] .modal-backdrop [style*="background:#1e293b"], html[data-theme="gokturk"] .modal-overlay [style*="background:#1e293b"], html[data-theme="gokturk"] .modal-overlay [style*="background:linear-gradient(180deg, #18110b"], html[data-theme="gokturk"] .modal-overlay [style*="background: linear-gradient(180deg, #18110b"], html[data-theme="gokturk"] .modal-dark-card [style*="background:linear-gradient(180deg, #18110b"], html[data-theme="gokturk"] .modal-overlay [style*="background:linear-gradient(180deg, #1a120b"], html[data-theme="gokturk"] .modal-dark-card [style*="background:linear-gradient(180deg, #1a120b"], html[data-theme="gokturk"] .modal-overlay [style*="background: radial-gradient(circle at center, #1e1b4b"], html[data-theme="gokturk"] .modal-overlay [style*="background:radial-gradient(circle at center, #1e1b4b"], html[data-theme="gokturk"] .modal-backdrop [style*="background:radial-gradient(circle at center, #1e1b4b"], html[data-theme="gokturk"] .modal-backdrop [style*="background: radial-gradient(circle at center, #1e1b4b"], html[data-theme="gokturk"] .modal-overlay [style*="background:rgba(20, 13, 8"], html[data-theme="gokturk"] .modal-overlay [style*="background:rgba(20,13,8"], html[data-theme="gokturk"] .modal-overlay [style*="background: rgba(20, 13, 8"], html[data-theme="gokturk"] .modal-overlay [style*="background: rgba(20,13,8"], html[data-theme="gokturk"] .modal-backdrop [style*="background:rgba(20, 13, 8"], html[data-theme="gokturk"] .modal-backdrop [style*="background:rgba(20,13,8"], html[data-theme="gokturk"] .modal-dark-card [style*="background:rgba(20, 13, 8"], html[data-theme="gokturk"] .modal-dark-card [style*="background:rgba(20,13,8"], html[data-theme="gokturk"] .modal-window [style*="background:rgba(20, 13, 8"], html[data-theme="gokturk"] .modal-overlay [style*="background:rgba(20, 14, 9"], html[data-theme="gokturk"] .modal-dark-card [style*="background:rgba(20, 14, 9"], html[data-theme="gokturk"] .modal-overlay [style*="background:rgba(18, 14, 10"], html[data-theme="gokturk"] .modal-dark-card [style*="background:rgba(18, 14, 10"], html[data-theme="gokturk"] .modal-overlay [style*="background:rgba(18, 12, 8"], html[data-theme="gokturk"] .modal-dark-card [style*="background:rgba(18, 12, 8"], html[data-theme="gokturk"] .modal-overlay [style*="background:rgba(15, 10, 6"], html[data-theme="gokturk"] .modal-dark-card [style*="background:rgba(15, 10, 6"], html[data-theme="gokturk"] .modal-overlay [style*="background:rgba(10, 6, 3"], html[data-theme="gokturk"] .modal-dark-card [style*="background:rgba(10, 6, 3"], html[data-theme="gokturk"] .modal-overlay [style*="background:rgba(10,15,28"], html[data-theme="gokturk"] .modal-backdrop [style*="background:rgba(10,15,28"], html[data-theme="gokturk"] .modal-window [style*="background:rgba(10,15,28"], html[data-theme="gokturk"] .modal-backdrop [style*="background:rgba(15,23,42"], html[data-theme="gokturk"] .modal-window [style*="background:rgba(15,23,42"], html[data-theme="gokturk"] .modal-overlay [style*="background:rgba(15,23,42"], html[data-theme="gokturk"] .modal-dark-card [style*="background:rgba(15,23,42"], html[data-theme="gokturk"] .modal-backdrop [style*="background:rgba(30,41,59"], html[data-theme="gokturk"] .modal-window [style*="background:rgba(30,41,59"], html[data-theme="gokturk"] .modal-overlay [style*="background:rgba(30,41,59"], html[data-theme="gokturk"] .modal-dark-card [style*="background:rgba(30,41,59"], html[data-theme="gokturk"] .reports-list-side-panel, html[data-theme="gokturk"] .report-detail-panel, html[data-theme="gokturk"] #troopUpgradeRightPanel, html[data-theme="gokturk"] #clanFeedComposerCard, html[data-theme="gokturk"] #clanSetDiplomacyCard, html[data-theme="gokturk"] #clanInviteCard, html[data-theme="gokturk"] #clanPostAnnouncementCard, html[data-theme="gokturk"] #clanApplicationsContainerCard, html[data-theme="gokturk"] .shop-item-card, html[data-theme="gokturk"] #movementEtaContainer, html[data-theme="gokturk"] #supportContingentDetailBox, html[data-theme="gokturk"] tr[style*="rgba(20, 13, 8"], html[data-theme="gokturk"] tr[style*="rgba(20,13,8"] { background: rgba(10, 12, 16, 0.92) !important; background: rgba(10, 12, 16, 0.92) !important; border: 1px solid rgba(212, 175, 55, 0.22) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.08) !important; border-radius: 10px !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* Sunken inner well token: rgba(10, 11, 14, 0.94) */ html[data-theme="gokturk"] .glass-sunken-well, html[data-theme="gokturk"] .cost-res-well { background: rgba(10, 11, 14, 0.94) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04) !important; border-radius: 12px !important; } /* Clean Icon-First Resource Display: Hide redundant Turkish text words (Odun, Taş, vb.) */ html[data-theme="gokturk"] .res-name-label, html[data-theme="gokturk"] .cost-res-name { display: none !important; } /* Resource Tiles in Section 3 Modals */ html[data-theme="gokturk"] .cost-tile-icon-box { width: 42px !important; height: 42px !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important; } /* Upgrade resource requirement cards */ html[data-theme="gokturk"] #modalBody div[style*="display:grid"] > div { background: rgba(11, 13, 18, 0.94) !important; border: 1.5px solid rgba(212, 175, 55, 0.3) !important; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6) !important; border-radius: 10px !important; } /* Insufficient Resource Alert Preservation (Red Warning Borders) */ html[data-theme="gokturk"] .cost-tile.insufficient .cost-tile-icon-box, html[data-theme="gokturk"] #modalBody div[style*="display:grid"] > div[style*="rgba(239,68,68"], html[data-theme="gokturk"] #modalBody div[style*="display:grid"] > div[style*="rgba(239, 68, 68"], html[data-theme="gokturk"] #modalBody div[style*="display:grid"] > div[style*="#ef4444"] { background: rgba(65, 15, 15, 0.75) !important; border: 1.5px solid #ef4444 !important; box-shadow: 0 0 10px rgba(239, 68, 68, 0.35), inset 0 2px 5px rgba(0, 0, 0, 0.6) !important; } /* Upgrade Level Badge & Construction Time Pill (Reference Image Section 3) */ html[data-theme="gokturk"] .upgrade-level-badge { background: rgba(16, 19, 25, 0.95) !important; border: 1.5px solid rgba(212, 175, 55, 0.45) !important; border-radius: 9999px !important; padding: 3px 12px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } html[data-theme="gokturk"] .construction-time-pill { background: rgba(9, 11, 15, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 9999px !important; padding: 4px 22px !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important; display: inline-flex !important; align-items: center !important; letter-spacing: 1.5px !important; } /* Market Resource Choice Buttons */ html[data-theme="gokturk"] .market-res-choice { background: rgba(20, 28, 42, 0.6) !important; border: 1.5px solid rgba(255, 255, 255, 0.12) !important; border-radius: 10px !important; transition: all 0.18s ease !important; } html[data-theme="gokturk"] .market-res-choice:hover { background: rgba(30, 42, 64, 0.75) !important; border-color: rgba(212, 175, 55, 0.4) !important; } html[data-theme="gokturk"] .market-res-choice.active { background: linear-gradient(180deg, #d97706 0%, #78350f 100%) !important; border: 1.5px solid #d4af37 !important; box-shadow: 0 0 12px rgba(245, 197, 66, 0.35) !important; } /* Dynamic Cards in Medrese, Cephane, Combat Simulator */ html[data-theme="gokturk"] #medreseResearchesGrid > div, html[data-theme="gokturk"] #cephaneTroopsGrid > div, html[data-theme="gokturk"] #combatSimulatorModal div[style*="background:rgba(239,68,68"], html[data-theme="gokturk"] #combatSimulatorModal div[style*="background:rgba(59,130,246"] { background: rgba(20, 28, 42, 0.50) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(212, 175, 55, 0.25) !important; border-radius: 12px !important; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4) !important; } /* Inputs & Form Controls */ html[data-theme="gokturk"] .input-field, html[data-theme="gokturk"] input[type="text"], html[data-theme="gokturk"] input[type="number"], html[data-theme="gokturk"] input[type="password"], html[data-theme="gokturk"] select { background: rgba(9, 11, 15, 0.95) !important; border: 1.5px solid rgba(212, 175, 55, 0.35) !important; color: #f8fafc !important; border-radius: 8px !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important; } html[data-theme="gokturk"] .input-field:focus, html[data-theme="gokturk"] input:focus, html[data-theme="gokturk"] select:focus { border-color: #f5c542 !important; box-shadow: 0 0 12px rgba(245, 197, 66, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.4) !important; outline: none !important; } /* -------------------------------------------------------------------------- 6. TABLES & DATA GRIDS (REFERENCE IMAGE SECTION 1: KAYNAKLAR - TABLO) -------------------------------------------------------------------------- */ html[data-theme="gokturk"] table { border-collapse: separate !important; border-spacing: 0 4px !important; } html[data-theme="gokturk"] table th { background: linear-gradient(180deg, #241d15 0%, #14110d 100%) !important; color: #f5c542 !important; font-weight: 800 !important; font-size: 11px !important; letter-spacing: 0.5px !important; border-top: 1px solid rgba(212, 175, 55, 0.35) !important; border-bottom: 1.5px solid rgba(212, 175, 55, 0.45) !important; padding: 6px 8px !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; } html[data-theme="gokturk"] table td { background: rgba(14, 16, 21, 0.90) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; color: #e2e8f0 !important; font-size: 11px !important; padding: 6px 8px !important; } html[data-theme="gokturk"] table tr:hover td { background: rgba(38, 30, 20, 0.88) !important; } /* -------------------------------------------------------------------------- 7. SUB-TABS & CHAMFER TABS (MEDRESE, SHOP, REPORTS, RANKINGS) -------------------------------------------------------------------------- */ html[data-theme="gokturk"] .chat-chamfer-tab-btn, html[data-theme="gokturk"] .ranking-tab-btn, html[data-theme="gokturk"] .profile-tab-btn, html[data-theme="gokturk"] .medrese-cat-btn, html[data-theme="gokturk"] .support-tab-btn, html[data-theme="gokturk"] .clan-noclan-tab-btn, html[data-theme="gokturk"] .clan-tab-btn, html[data-theme="gokturk"] .landing-auth-tab-btn { background: rgba(18, 21, 27, 0.92) !important; color: #94a3b8 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px !important; font-size: 14px !important; font-family: inherit !important; font-weight: 700 !important; letter-spacing: 0.3px !important; transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important; } html[data-theme="gokturk"] .chat-chamfer-tab-btn:hover, html[data-theme="gokturk"] .ranking-tab-btn:hover, html[data-theme="gokturk"] .profile-tab-btn:hover, html[data-theme="gokturk"] .medrese-cat-btn:hover, html[data-theme="gokturk"] .support-tab-btn:hover, html[data-theme="gokturk"] .clan-noclan-tab-btn:hover, html[data-theme="gokturk"] .clan-tab-btn:hover, html[data-theme="gokturk"] .landing-auth-tab-btn:hover { background: rgba(42, 33, 22, 0.94) !important; border-color: rgba(212, 175, 55, 0.4) !important; color: #ffffff !important; } html[data-theme="gokturk"] .chat-chamfer-tab-btn.active, html[data-theme="gokturk"] .ranking-tab-btn.active, html[data-theme="gokturk"] .profile-tab-btn.active, html[data-theme="gokturk"] .medrese-cat-btn.active, html[data-theme="gokturk"] .support-tab-btn.active, html[data-theme="gokturk"] .clan-noclan-tab-btn.active, html[data-theme="gokturk"] .clan-tab-btn.active, html[data-theme="gokturk"] .landing-auth-tab-btn.active { background: linear-gradient(180deg, #d97706 0%, #78350f 100%) !important; border: 1.5px solid #d4af37 !important; color: #fff9db !important; box-shadow: 0 0 12px rgba(245, 197, 66, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; font-weight: 800 !important; } html[data-theme="gokturk"] .ranking-tab-capsule-bar { display: flex !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; } html[data-theme="gokturk"] .ranking-tab-btn { flex: 0 0 auto !important; min-width: max-content !important; white-space: nowrap !important; } html[data-theme="gokturk"] .rankings-table-wrapper { overflow-x: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Quests & Milestones Modal Tab Buttons (Ek-1 & High Contrast Active Indicator) */ html[data-theme="gokturk"] .quests-tab-bar { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 6px !important; padding: 6px 10px !important; background: rgba(10, 12, 16, 0.45) !important; border: none !important; border-bottom: 1.5px solid rgba(212, 175, 55, 0.3) !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; height: auto !important; max-height: none !important; flex-shrink: 0 !important; box-sizing: border-box !important; } html[data-theme="gokturk"] .quests-tab-btn, html[data-theme="gokturk"] #questsTabBtnDaily, html[data-theme="gokturk"] #questsTabBtnWeekly, html[data-theme="gokturk"] #questsTabBtnMilestones { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 36px !important; border-radius: 6px !important; padding: 6px 8px !important; font-size: 12px !important; line-height: 1.2 !important; font-family: inherit !important; font-weight: 700 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 3px 4px !important; cursor: pointer !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; outline: none !important; white-space: normal !important; word-break: break-word !important; overflow: visible !important; box-sizing: border-box !important; transform: none !important; } /* Inactive Tab: Smoky slate subtle frosted glass */ html[data-theme="gokturk"] .quests-tab-btn:not(.active), html[data-theme="gokturk"] #questsTabBtnDaily:not(.active), html[data-theme="gokturk"] #questsTabBtnWeekly:not(.active), html[data-theme="gokturk"] #questsTabBtnMilestones:not(.active) { background: rgba(14, 16, 21, 0.90) !important; color: #94a3b8 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; font-weight: 700 !important; box-shadow: none !important; opacity: 0.85 !important; transform: none !important; } html[data-theme="gokturk"] .quests-tab-btn:not(.active):hover, html[data-theme="gokturk"] #questsTabBtnDaily:not(.active):hover, html[data-theme="gokturk"] #questsTabBtnWeekly:not(.active):hover, html[data-theme="gokturk"] #questsTabBtnMilestones:not(.active):hover { background: rgba(42, 33, 22, 0.92) !important; color: #ffffff !important; border-color: rgba(212, 175, 55, 0.4) !important; opacity: 1 !important; } /* Active Tab: Vivid glowing imperial gold with prominent active styling */ html[data-theme="gokturk"] .quests-tab-btn.active, html[data-theme="gokturk"] #questsTabBtnDaily.active, html[data-theme="gokturk"] #questsTabBtnWeekly.active, html[data-theme="gokturk"] #questsTabBtnMilestones.active { background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important; color: #ffffff !important; border: 1.5px solid #fef08a !important; font-weight: 900 !important; box-shadow: 0 0 12px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; opacity: 1 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important; transform: none !important; } html.mobile-portrait-mode[data-theme="gokturk"] .quests-tab-bar, html.mobile-landscape-mode[data-theme="gokturk"] .quests-tab-bar { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; padding: 5px 6px !important; gap: 5px !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; height: auto !important; max-height: none !important; border: none !important; border-bottom: 1.5px solid rgba(212, 175, 55, 0.3) !important; border-radius: 0 !important; background: rgba(10, 12, 16, 0.45) !important; box-shadow: none !important; box-sizing: border-box !important; } html.mobile-portrait-mode[data-theme="gokturk"] .quests-tab-btn, html.mobile-portrait-mode[data-theme="gokturk"] #questsTabBtnDaily, html.mobile-portrait-mode[data-theme="gokturk"] #questsTabBtnWeekly, html.mobile-portrait-mode[data-theme="gokturk"] #questsTabBtnMilestones, html.mobile-landscape-mode[data-theme="gokturk"] .quests-tab-btn, html.mobile-landscape-mode[data-theme="gokturk"] #questsTabBtnDaily, html.mobile-landscape-mode[data-theme="gokturk"] #questsTabBtnWeekly, html.mobile-landscape-mode[data-theme="gokturk"] #questsTabBtnMilestones { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 34px !important; padding: 4px 4px !important; font-size: 10px !important; line-height: 1.18 !important; border-radius: 6px !important; gap: 2px 3px !important; letter-spacing: -0.1px !important; white-space: normal !important; word-break: break-word !important; overflow: visible !important; text-overflow: clip !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; text-align: center !important; transform: none !important; } html.mobile-portrait-mode[data-theme="gokturk"] .quests-tab-btn span:not(.event-badge), html.mobile-portrait-mode[data-theme="gokturk"] #questsTabBtnDaily span:not(.event-badge), html.mobile-portrait-mode[data-theme="gokturk"] #questsTabBtnWeekly span:not(.event-badge), html.mobile-portrait-mode[data-theme="gokturk"] #questsTabBtnMilestones span:not(.event-badge), html.mobile-landscape-mode[data-theme="gokturk"] .quests-tab-btn span:not(.event-badge), html.mobile-landscape-mode[data-theme="gokturk"] #questsTabBtnDaily span:not(.event-badge), html.mobile-landscape-mode[data-theme="gokturk"] #questsTabBtnWeekly span:not(.event-badge), html.mobile-landscape-mode[data-theme="gokturk"] #questsTabBtnMilestones span:not(.event-badge) { font-size: 10px !important; line-height: 1.18 !important; white-space: normal !important; } @media (max-width: 768px) { html[data-theme="gokturk"] .quests-tab-btn, html[data-theme="gokturk"] #questsTabBtnDaily, html[data-theme="gokturk"] #questsTabBtnWeekly, html[data-theme="gokturk"] #questsTabBtnMilestones, html[data-theme="gokturk"] .quests-tab-btn span:not(.event-badge), html[data-theme="gokturk"] #questsTabBtnDaily span:not(.event-badge), html[data-theme="gokturk"] #questsTabBtnWeekly span:not(.event-badge), html[data-theme="gokturk"] #questsTabBtnMilestones span:not(.event-badge) { font-size: 10px !important; line-height: 1.18 !important; white-space: normal !important; } } /* -------------------------------------------------------------------------- 8. NAVIGATION & PANELS (SIDEBAR, HEADER, DOCKS) -------------------------------------------------------------------------- */ /* Left Navigation Sidebar - Lighter soft slate-gray frosted glass with gentle subtle gradient */ html[data-theme="gokturk"] .left-sidebar { background: linear-gradient(180deg, rgba(92, 106, 128, 0.58) 0%, rgba(76, 90, 110, 0.52) 100%) !important; backdrop-filter: blur(18px) saturate(115%) !important; -webkit-backdrop-filter: blur(18px) saturate(115%) !important; border-right: 1.5px solid rgba(212, 175, 55, 0.45) !important; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35), inset -1px 0 0 rgba(255, 255, 255, 0.12) !important; } html[data-theme="gokturk"] .left-sidebar.collapsed { border-right: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="gokturk"] .left-sidebar-toggle-btn { position: fixed !important; left: 92px !important; top: calc(50% + 20px) !important; transform: translateY(-50%) !important; background: linear-gradient(90deg, rgba(76, 90, 110, 0.92) 0%, rgba(92, 106, 128, 0.90) 100%) !important; border: 1.5px solid rgba(212, 175, 55, 0.45) !important; border-left: none !important; color: #f5c542 !important; z-index: 95 !important; } html[data-theme="gokturk"] body.left-sidebar-is-collapsed .left-sidebar-toggle-btn, html[data-theme="gokturk"] .app-layout.left-sidebar-is-collapsed .left-sidebar-toggle-btn { left: 0px !important; } html[data-theme="gokturk"] .left-sidebar-toggle-btn:hover { background: linear-gradient(90deg, rgba(44, 60, 84, 1) 0%, rgba(60, 82, 114, 0.98) 100%) !important; border-color: #ffd700 !important; color: #ffffff !important; box-shadow: 0 0 12px rgba(245, 197, 66, 0.4) !important; } html[data-theme="gokturk"] .avatar-xp-badge { background: rgba(0, 0, 0, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; padding: 6px 8px !important; margin: 6px 0 8px 0 !important; transition: all 0.15s ease !important; } html[data-theme="gokturk"] .avatar-xp-badge:hover { background: rgba(229, 184, 92, 0.08) !important; border-color: rgba(229, 184, 92, 0.35) !important; } html[data-theme="gokturk"] .avatar-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 6px !important; border: 1.5px solid rgba(229, 184, 92, 0.45) !important; background: rgba(0, 0, 0, 0.4) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.0rem !important; margin-bottom: 0 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important; flex-shrink: 0 !important; } html[data-theme="gokturk"] .menu-item-btn { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 10px !important; color: #e2e8f0 !important; } html[data-theme="gokturk"] .menu-item-btn:hover { background: transparent !important; border: none !important; box-shadow: none !important; color: #ffffff !important; transform: translateY(-2px) !important; } html[data-theme="gokturk"] .menu-item-btn .item-icon-3d { width: 40px !important; height: 40px !important; object-fit: contain !important; margin-bottom: 2px !important; border-radius: 0 !important; } html[data-theme="gokturk"] .mobile-drawer-item .m-item-icon-3d { width: 36px !important; height: 36px !important; object-fit: contain !important; margin-bottom: 4px !important; border-radius: 6px !important; } /* Top Resource Bar - Smoky slate frosted glass */ html[data-theme="gokturk"] .top-mobile-resource-bar { background: linear-gradient(180deg, rgba(36, 48, 66, 0.75) 0%, rgba(20, 28, 42, 0.70) 100%) !important; backdrop-filter: blur(14px) saturate(120%) !important; -webkit-backdrop-filter: blur(14px) saturate(120%) !important; border-bottom: 1.5px solid rgba(212, 175, 55, 0.45) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important; } html[data-theme="gokturk"] .top-village-badge { background: linear-gradient(135deg, rgba(42, 33, 22, 0.92) 0%, rgba(16, 26, 42, 0.9) 100%) !important; border: 1px solid rgba(212, 175, 55, 0.5) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } html[data-theme="gokturk"] .village-name-badge { background: rgba(24, 34, 50, 0.75) !important; backdrop-filter: blur(12px) !important; border: 1.5px solid rgba(212, 175, 55, 0.45) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } html[data-theme="gokturk"] .inline-res-item.res-diamond { background: rgba(8, 40, 60, 0.45) !important; border: 1px solid rgba(56, 189, 248, 0.4) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.4) !important; } html[data-theme="gokturk"] .inline-res-item.res-diamond:hover { background: rgba(14, 55, 85, 0.65) !important; border-color: rgba(56, 189, 248, 0.75) !important; box-shadow: 0 0 10px rgba(56, 189, 248, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } html[data-theme="gokturk"] .village-queue-item { background: rgba(20, 28, 42, 0.82) !important; border: 1px solid rgba(212, 175, 55, 0.5) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } /* Bottom Troop Bar & Cards - Lighter soft slate-gray frosted glass with gentle gradient */ html[data-theme="gokturk"] .bottom-troop-bar-toggle-btn { background: linear-gradient(180deg, rgba(92, 106, 128, 0.72) 0%, rgba(74, 88, 108, 0.65) 100%) !important; backdrop-filter: blur(14px) saturate(118%) !important; -webkit-backdrop-filter: blur(14px) saturate(118%) !important; border: 1.5px solid rgba(212, 175, 55, 0.50) !important; border-bottom: none !important; color: #f5c542 !important; box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; } html[data-theme="gokturk"] .bottom-troop-bar-toggle-btn:hover { background: linear-gradient(180deg, rgba(108, 124, 148, 0.85) 0%, rgba(88, 104, 128, 0.78) 100%) !important; border-color: #f5c542 !important; color: #ffffff !important; } html[data-theme="gokturk"] .bottom-troop-bar { background: linear-gradient(0deg, rgba(74, 88, 108, 0.58) 0%, rgba(88, 102, 124, 0.52) 100%) !important; backdrop-filter: blur(18px) saturate(115%) !important; -webkit-backdrop-filter: blur(18px) saturate(115%) !important; border: 1.5px solid rgba(212, 175, 55, 0.45) !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; justify-content: safe center !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x !important; overscroll-behavior-x: contain !important; } html[data-theme="gokturk"] .bottom-troop-bar.collapsed { border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } @media (max-width: 900px) { html[data-theme="gokturk"] .bottom-troop-bar { justify-content: flex-start !important; padding-left: 10px !important; padding-right: 10px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x !important; overscroll-behavior-x: contain !important; } } html[data-theme="gokturk"] .troop-card-item { background: linear-gradient(180deg, rgba(70, 84, 104, 0.65) 0%, rgba(54, 66, 84, 0.70) 100%) !important; border: 1px solid rgba(212, 175, 55, 0.35) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } html[data-theme="gokturk"] .troop-card-item:hover { border-color: #f5c542 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(245, 197, 66, 0.4) !important; transform: translateY(-2px) !important; } /* Locked troops: 100% black & white */ html[data-theme="gokturk"] .troop-card-item.locked, .troop-card-item.locked { filter: grayscale(100%) contrast(85%) !important; opacity: 0.50 !important; border-color: rgba(148, 163, 184, 0.25) !important; background: rgba(45, 54, 68, 0.55) !important; } html[data-theme="gokturk"] .troop-card-item.locked img, .troop-card-item.locked img { filter: grayscale(100%) contrast(80%) brightness(0.9) !important; } html[data-theme="gokturk"] .troop-card-item.locked .troop-card-name, .troop-card-item.locked .troop-card-name { color: #94a3b8 !important; } html[data-theme="gokturk"] .troop-card-item.locked .troop-card-portrait, .troop-card-item.locked .troop-card-portrait { border-color: rgba(148, 163, 184, 0.30) !important; filter: grayscale(100%) !important; } /* Section 4 Floating Unit Card (Mini-Modal: #troopHoverTooltip / #quickTroopCard - Imperial Glass Translucent) */ html[data-theme="gokturk"] #troopHoverTooltip, html[data-theme="gokturk"] #quickTroopCard, html[data-theme="gokturk"] .troop-mini-modal { width: 330px !important; min-width: 280px !important; max-width: min(94vw, 360px) !important; box-sizing: border-box !important; background: linear-gradient(145deg, rgba(38, 52, 74, 0.62), rgba(20, 30, 46, 0.55)) !important; backdrop-filter: blur(14px) saturate(125%) !important; -webkit-backdrop-filter: blur(14px) saturate(125%) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 12px !important; padding: 10px 12px !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; overflow: visible !important; } html[data-theme="gokturk"] .troop-hover-stat-pill { background: rgba(16, 24, 38, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 6px !important; padding: 4px 7px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } html[data-theme="gokturk"] .troop-hover-stat-pill strong { color: #f1f5f9 !important; font-size: 0.78rem !important; font-weight: 800 !important; font-family: monospace !important; } html[data-theme="gokturk"] .troop-hover-cost-well { background: rgba(12, 18, 30, 0.45) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } /* Eliminate duplicate inner borders/backgrounds if nested inside #troopHoverTooltip */ html[data-theme="gokturk"] #troopHoverTooltip .troop-mini-modal, html[data-theme="gokturk"] #troopHoverTooltip .troop-hover-card-inner { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } /* Mobile & Small Screen Responsiveness for Troop Cards */ @media (max-width: 480px) { html[data-theme="gokturk"] #troopHoverTooltip, html[data-theme="gokturk"] #quickTroopCard, html[data-theme="gokturk"] .troop-mini-modal { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; min-width: 270px !important; padding: 9px !important; border-radius: 12px !important; } #troopHoverTooltip .troop-hover-portrait { width: 84px !important; min-width: 84px !important; } #troopHoverTooltip .troop-hover-name { font-size: 1.02rem !important; } #troopHoverTooltip .troop-hover-stat-pill { padding: 3px 5px !important; } #troopHoverTooltip .troop-hover-cost-well { gap: 8px !important; padding: 5px 8px !important; font-size: 0.72rem !important; } } /* Chat & Right Sidebar - Lighter soft slate-gray frosted glass with gentle subtle gradient */ html[data-theme="gokturk"] .chat-window, html[data-theme="gokturk"] .right-sidebar { background: linear-gradient(180deg, rgba(92, 106, 128, 0.58) 0%, rgba(76, 90, 110, 0.52) 100%) !important; backdrop-filter: blur(18px) saturate(115%) !important; -webkit-backdrop-filter: blur(18px) saturate(115%) !important; border-left: 1.5px solid rgba(212, 175, 55, 0.45) !important; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35), inset 1px 0 0 rgba(255, 255, 255, 0.12) !important; } html[data-theme="gokturk"] .right-sidebar.collapsed { border-left: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Gelen, Giden ve Destek Sefer İkonları - İmparatorluk Camı Sidebar Tonunda Yarı Saydam & Çerçeveli */ html[data-theme="gokturk"] .action-circle-btn { background: linear-gradient(180deg, rgba(92, 106, 128, 0.60) 0%, rgba(76, 90, 110, 0.52) 100%) !important; backdrop-filter: blur(16px) saturate(118%) !important; -webkit-backdrop-filter: blur(16px) saturate(118%) !important; border: 1.5px solid rgba(212, 175, 55, 0.48) !important; color: #f1f5f9 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; } html[data-theme="gokturk"] .action-circle-btn span { color: #f8fafc !important; font-weight: 700 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75) !important; } html[data-theme="gokturk"] .action-circle-btn.action-btn-danger:not(.movement-active), html[data-theme="gokturk"] .action-circle-btn.action-btn-warning:not(.movement-active), html[data-theme="gokturk"] .action-circle-btn.action-btn-info:not(.movement-active) { border-color: rgba(148, 163, 184, 0.48) !important; color: #cbd5e1 !important; opacity: 0.62; } html[data-theme="gokturk"] .action-circle-btn.action-btn-danger:not(.movement-active) span, html[data-theme="gokturk"] .action-circle-btn.action-btn-warning:not(.movement-active) span, html[data-theme="gokturk"] .action-circle-btn.action-btn-info:not(.movement-active) span { color: #cbd5e1 !important; } html[data-theme="gokturk"] .action-circle-btn.action-btn-danger.movement-active { border-color: rgba(248, 113, 113, 0.85) !important; color: #fecaca !important; opacity: 1; } html[data-theme="gokturk"] .action-circle-btn.action-btn-danger.movement-active span { color: #fecaca !important; } html[data-theme="gokturk"] .action-circle-btn.action-btn-warning.movement-active { border-color: rgba(251, 191, 36, 0.85) !important; color: #fde68a !important; opacity: 1; } html[data-theme="gokturk"] .action-circle-btn.action-btn-warning.movement-active span { color: #fde68a !important; } html[data-theme="gokturk"] .action-circle-btn.action-btn-info.movement-active { border-color: rgba(56, 189, 248, 0.85) !important; color: #bae6fd !important; opacity: 1; } html[data-theme="gokturk"] .action-circle-btn.action-btn-info.movement-active span { color: #bae6fd !important; } html[data-theme="gokturk"] .action-circle-btn:hover { background: linear-gradient(180deg, rgba(108, 124, 148, 0.76) 0%, rgba(88, 104, 128, 0.68) 100%) !important; border-color: #f5c542 !important; color: #ffffff !important; opacity: 1 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 12px rgba(245, 197, 66, 0.35) !important; } html[data-theme="gokturk"] .right-sidebar-toggle-btn { position: fixed !important; right: 194px !important; top: calc(max(50%, 380px) + 20px) !important; transform: translateY(-50%) !important; background: linear-gradient(270deg, rgba(76, 90, 110, 0.92) 0%, rgba(92, 106, 128, 0.90) 100%) !important; border: 1.5px solid rgba(212, 175, 55, 0.45) !important; border-right: none !important; color: #f5c542 !important; z-index: 95 !important; } html[data-theme="gokturk"] #chatInput { background: rgba(14, 22, 34, 0.85) !important; border: 1.5px solid rgba(212, 175, 55, 0.35) !important; color: #ffffff !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important; } /* Radial Village Action Menu */ html[data-theme="gokturk"] .radial-village-menu .radial-menu-center { background: radial-gradient(circle at 35% 35%, #3a2a18 0%, #12141a 100%) !important; border: 2px solid #f5c542 !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.85), 0 0 16px rgba(245, 197, 66, 0.5) !important; } html[data-theme="gokturk"] .radial-item-btn { background: linear-gradient(135deg, #22262f 0%, #101217 100%) !important; border: 1.5px solid rgba(212, 175, 55, 0.45) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7) !important; } html[data-theme="gokturk"] .radial-item-btn:hover { border-color: #ffd700 !important; box-shadow: 0 0 16px rgba(245, 197, 66, 0.6) !important; transform: scale(1.1) !important; } /* Radial Target Nameplate (Dark Imperial Glass) */ html[data-theme="gokturk"] .radial-target-nameplate { background: linear-gradient(135deg, #1c2028 0%, #0e1015 100%) !important; backdrop-filter: blur(12px) saturate(140%) !important; -webkit-backdrop-filter: blur(12px) saturate(140%) !important; border: 1px solid rgba(229, 184, 92, 0.45) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; border-radius: 8px !important; bottom: -50px !important; padding: 4px 12px !important; } html[data-theme="gokturk"] .radial-target-nameplate:hover { border-color: #ffd700 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 14px rgba(245, 197, 66, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } html[data-theme="gokturk"] .radial-target-title { color: #f8fafc !important; font-size: 11px !important; font-weight: 700 !important; font-family: 'Marcellus', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; letter-spacing: 0.35px !important; text-transform: none !important; font-variant: normal !important; } html[data-theme="gokturk"] .radial-target-sub { color: #e5b85c !important; font-size: 11px !important; font-weight: 600 !important; font-family: 'Marcellus', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; letter-spacing: 0.25px !important; text-transform: none !important; font-variant: normal !important; } html[data-theme="gokturk"] #radialBtnEnterVillage { display: none !important; } html[data-theme="gokturk"] .village-header-right-actions { margin-left: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; } html[data-theme="gokturk"] .village-back-to-map-btn { margin-left: auto !important; align-self: flex-end !important; } /* Notification Badges - 50% Softened Neon & Glow */ html[data-theme="gokturk"] .event-badge { font-size: 11px !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important; } html[data-theme="gokturk"] .event-badge.report-badge { border-color: rgba(254, 240, 138, 0.55) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(245, 158, 11, 0.28) !important; } html[data-theme="gokturk"] .event-badge.badge-danger { border-color: rgba(252, 165, 165, 0.55) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(239, 68, 68, 0.3) !important; } html[data-theme="gokturk"] .event-badge.badge-warning { border-color: rgba(253, 230, 138, 0.55) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(245, 158, 11, 0.3) !important; } html[data-theme="gokturk"] .event-badge.badge-info { border-color: rgba(147, 197, 253, 0.55) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(59, 130, 246, 0.3) !important; } /* Scrollbars in Glassmorphism */ html[data-theme="gokturk"] * { scrollbar-width: thin !important; scrollbar-color: rgba(229, 184, 92, 0.45) rgba(10, 16, 28, 0.35) !important; } html[data-theme="gokturk"] ::-webkit-scrollbar { width: 6px !important; height: 6px !important; } html[data-theme="gokturk"] ::-webkit-scrollbar-thumb { background: rgba(229, 184, 92, 0.45) !important; border-radius: 4px !important; } html[data-theme="gokturk"] ::-webkit-scrollbar-thumb:hover { background: rgba(229, 184, 92, 0.75) !important; } html[data-theme="gokturk"] ::-webkit-scrollbar-track { background: rgba(10, 16, 28, 0.35) !important; } /* Specific styling for Player Profile Modal in Glassmorphism */ html[data-theme="gokturk"] #playerProfileModal .modal-dark-card { padding: 14px 18px !important; gap: 8px !important; max-height: 84vh !important; } html[data-theme="gokturk"] #playerProfileModal #profileUsername { display: inline-block !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; font-size: 1.05rem !important; color: #fff !important; text-transform: none !important; letter-spacing: normal !important; } html[data-theme="gokturk"] #playerProfileModal #profileUsername::before, html[data-theme="gokturk"] #playerProfileModal #profileUsername::after { display: none !important; } html[data-theme="gokturk"] #playerProfileModal .profile-star-box { padding: 2px 8px !important; font-size: 0.68rem !important; } html[data-theme="gokturk"] #playerProfileModal thead { background: rgba(18, 26, 38, 0.95) !important; } /* -------------------------------------------------------------------------- 9. TYPOGRAPHY & FONT REFINEMENT (SLEEK HIGH-CONTRAST MODAL TYPOGRAPHY) Main Titles: 14px | Subtitles: 12px | Normal Text: 11px -------------------------------------------------------------------------- */ html[data-theme="gokturk"] .modal-overlay h1, html[data-theme="gokturk"] .modal-overlay h2, html[data-theme="gokturk"] .modal-overlay h3, html[data-theme="gokturk"] .modal-backdrop h1, html[data-theme="gokturk"] .modal-backdrop h2, html[data-theme="gokturk"] .modal-backdrop h3, html[data-theme="gokturk"] .modal-dark-card h1, html[data-theme="gokturk"] .modal-dark-card h2, html[data-theme="gokturk"] .modal-dark-card h3, html[data-theme="gokturk"] .modal-window h1, html[data-theme="gokturk"] .modal-window h2, html[data-theme="gokturk"] .modal-window h3, html[data-theme="gokturk"] .ranking-modal-card h1, html[data-theme="gokturk"] .ranking-modal-card h2, html[data-theme="gokturk"] .ranking-modal-card h3, html[data-theme="gokturk"] .modal-dark-card > div:first-child h2, html[data-theme="gokturk"] .modal-dark-card > div:first-child h3, html[data-theme="gokturk"] .ranking-modal-card > div:first-child h3, html[data-theme="gokturk"] .modal-header h3, html[data-theme="gokturk"] #sendMovementModalTitle, html[data-theme="gokturk"] #clanModalHeaderTitle, html[data-theme="gokturk"] #clanProfileClanName, html[data-theme="gokturk"] #profileUsername, html[data-theme="gokturk"] .chat-chamfer-tab-btn, html[data-theme="gokturk"] .ranking-tab-btn, html[data-theme="gokturk"] .clan-tab-btn, html[data-theme="gokturk"] .clan-noclan-tab-btn, html[data-theme="gokturk"] .profile-tab-btn, html[data-theme="gokturk"] .support-tab-btn, html[data-theme="gokturk"] .medrese-cat-btn, html[data-theme="gokturk"] .diamond-shop-tabs-bar .chat-chamfer-tab-btn, html[data-theme="gokturk"] #diamondShopModal .chat-chamfer-tab-btn, html[data-theme="gokturk"] .admin-tabs-nav button, html[data-theme="gokturk"] .tab-btn { font-size: 14px !important; font-family: inherit !important; font-weight: 700 !important; letter-spacing: 0.3px !important; line-height: 1.25 !important; color: #fff9db !important; } html[data-theme="gokturk"] .modal-overlay h4, html[data-theme="gokturk"] .modal-backdrop h4, html[data-theme="gokturk"] .modal-dark-card h4, html[data-theme="gokturk"] .modal-window h4, html[data-theme="gokturk"] .ranking-modal-card h4, html[data-theme="gokturk"] .modal-overlay h5, html[data-theme="gokturk"] .modal-backdrop h5, html[data-theme="gokturk"] .modal-dark-card h5, html[data-theme="gokturk"] .modal-window h5, html[data-theme="gokturk"] .modal-header-subtitle, html[data-theme="gokturk"] #empireProdSubtitle, html[data-theme="gokturk"] #clanModalHeaderSubtitle, html[data-theme="gokturk"] #rankingsSubtitle, html[data-theme="gokturk"] #newsSubtitle, html[data-theme="gokturk"] #reportsSubtitle, html[data-theme="gokturk"] #farmListSubHeader, html[data-theme="gokturk"] #farmSettingsTitle, html[data-theme="gokturk"] #farmStaminaText, html[data-theme="gokturk"] #farmListCountDisplay, html[data-theme="gokturk"] .ranking-player-name, html[data-theme="gokturk"] .ranking-clan-name, html[data-theme="gokturk"] .ranking-clan-tag, html[data-theme="gokturk"] .alliance-pill-tag, html[data-theme="gokturk"] .movement-link-village, html[data-theme="gokturk"] .movement-link-player, html[data-theme="gokturk"] .quest-category-title, html[data-theme="gokturk"] .milestone-stage-title, html[data-theme="gokturk"] .troop-preview-name, html[data-theme="gokturk"] .shop-status-banner-val, html[data-theme="gokturk"] #shopSubTierText, html[data-theme="gokturk"] #shopShieldText, html[data-theme="gokturk"] #shopBuffsSummaryText, html[data-theme="gokturk"] #overviewTotalVillages, html[data-theme="gokturk"] #overviewTotalGrain, html[data-theme="gokturk"] #overviewNetGrainProd, html[data-theme="gokturk"] #overviewStarvationTimer, html[data-theme="gokturk"] #clanStatTag, html[data-theme="gokturk"] #clanStatPoints, html[data-theme="gokturk"] #clanStatAvgPoints, html[data-theme="gokturk"] #clanStatLeader, html[data-theme="gokturk"] #clanStatMyRole, html[data-theme="gokturk"] #shieldTimerDays, html[data-theme="gokturk"] #shieldTimerHours, html[data-theme="gokturk"] #shieldTimerMinutes, html[data-theme="gokturk"] #shieldTimerSeconds, html[data-theme="gokturk"] .modal-dark-card > div:first-child span, html[data-theme="gokturk"] .modal-dark-card > div:first-child div[style*="font-size"], html[data-theme="gokturk"] .ranking-modal-card > div:first-child div[style*="font-size"], html[data-theme="gokturk"] .confirm-modal-card > div:first-child > div { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.4px !important; line-height: 1.35 !important; } html[data-theme="gokturk"] .modal-dark-card, html[data-theme="gokturk"] .modal-window, html[data-theme="gokturk"] .modal-body, html[data-theme="gokturk"] .ranking-modal-card, html[data-theme="gokturk"] .confirm-modal-card, html[data-theme="gokturk"] .modal-overlay p, html[data-theme="gokturk"] .modal-backdrop p, html[data-theme="gokturk"] .modal-dark-card p, html[data-theme="gokturk"] .modal-window p, html[data-theme="gokturk"] .modal-overlay li, html[data-theme="gokturk"] .modal-backdrop li, html[data-theme="gokturk"] .modal-dark-card li, html[data-theme="gokturk"] .modal-window li, html[data-theme="gokturk"] .modal-overlay ul, html[data-theme="gokturk"] .modal-backdrop ul, html[data-theme="gokturk"] .modal-dark-card ul, html[data-theme="gokturk"] .modal-window ul, html[data-theme="gokturk"] .modal-dark-card label, html[data-theme="gokturk"] .modal-window label, html[data-theme="gokturk"] .modal-dark-card input, html[data-theme="gokturk"] .modal-window input, html[data-theme="gokturk"] .modal-dark-card select, html[data-theme="gokturk"] .modal-window select, html[data-theme="gokturk"] .modal-dark-card textarea, html[data-theme="gokturk"] .modal-window textarea, html[data-theme="gokturk"] .modal-dark-card .btn, html[data-theme="gokturk"] .modal-window .btn, html[data-theme="gokturk"] .modal-dark-card button:not(.chat-chamfer-tab-btn):not(.quests-tab-btn):not(.ranking-tab-btn):not(.clan-tab-btn):not(.profile-tab-btn):not(.support-tab-btn):not(.medrese-cat-btn):not(.tab-btn), html[data-theme="gokturk"] .modal-window button:not(.chat-chamfer-tab-btn):not(.quests-tab-btn):not(.ranking-tab-btn):not(.clan-tab-btn):not(.profile-tab-btn):not(.support-tab-btn):not(.medrese-cat-btn):not(.tab-btn), html[data-theme="gokturk"] .modal-overlay button:not(.chat-chamfer-tab-btn):not(.quests-tab-btn):not(.ranking-tab-btn):not(.clan-tab-btn):not(.profile-tab-btn):not(.support-tab-btn):not(.medrese-cat-btn):not(.tab-btn), html[data-theme="gokturk"] .modal-backdrop button:not(.chat-chamfer-tab-btn):not(.quests-tab-btn):not(.ranking-tab-btn):not(.clan-tab-btn):not(.profile-tab-btn):not(.support-tab-btn):not(.medrese-cat-btn):not(.tab-btn), html[data-theme="gokturk"] .ranking-modal-card .btn, html[data-theme="gokturk"] .farm-table-btn, html[data-theme="gokturk"] .farm-raid-btn, html[data-theme="gokturk"] .shop-status-banner-label { font-size: 11px !important; } html[data-theme="gokturk"] #farmListModal .farm-raid-btn { padding: 5px 9px !important; min-height: 26px !important; line-height: 1.25 !important; } html[data-theme="gokturk"] #farmListModal .farm-target-row td { white-space: nowrap !important; } html[data-theme="gokturk"] .medrese-status-badge, html[data-theme="gokturk"] .medrese-card .completed-badge, html[data-theme="gokturk"] .tech-card .completed-badge { font-size: 10px !important; font-weight: 800 !important; padding: 2px 7px !important; border-radius: 4px !important; white-space: nowrap !important; flex-shrink: 0 !important; max-width: 100% !important; box-sizing: border-box !important; line-height: 1.2 !important; } /* ============================================================================== SIDEBARS TYPOGRAPHY STANDARD - GLASSMORPHISM (11-12px STRICT LIMIT) ============================================================================== */ /* Left Sidebar Standards (11-12px) */ html[data-theme="gokturk"] .left-sidebar .menu-item-btn, html[data-theme="gokturk"] .left-sidebar .menu-item-btn span:not(.item-icon):not(.event-badge) { font-size: 11.5px !important; line-height: 1.2 !important; } html[data-theme="gokturk"] .left-sidebar .menu-item-btn .item-icon { font-size: 1rem !important; } html[data-theme="gokturk"] .left-sidebar .quick-village-btn, html[data-theme="gokturk"] .left-sidebar .quick-village-btn #quickToggleLabel { font-size: 12px !important; line-height: 1.2 !important; } html[data-theme="gokturk"] .left-sidebar .quick-village-btn #quickToggleIcon { font-size: 1.25rem !important; } html[data-theme="gokturk"] .avatar-xp-badge .xp-title, html[data-theme="gokturk"] .right-sidebar .avatar-xp-badge .xp-title, html[data-theme="gokturk"] .left-sidebar .avatar-xp-badge .xp-title { font-size: 11px !important; } html[data-theme="gokturk"] .avatar-xp-badge .xp-val, html[data-theme="gokturk"] .right-sidebar .avatar-xp-badge .xp-val, html[data-theme="gokturk"] .left-sidebar .avatar-xp-badge .xp-val { font-size: 12px !important; } html[data-theme="gokturk"] .avatar-xp-badge #sidebarVillageTpLabel, html[data-theme="gokturk"] .avatar-xp-badge #sidebarVillageTpName, html[data-theme="gokturk"] .avatar-xp-badge #sidebarVillageTpRatio, html[data-theme="gokturk"] .right-sidebar .avatar-xp-badge #sidebarVillageTpLabel, html[data-theme="gokturk"] .right-sidebar .avatar-xp-badge #sidebarVillageTpName, html[data-theme="gokturk"] .right-sidebar .avatar-xp-badge #sidebarVillageTpRatio, html[data-theme="gokturk"] .left-sidebar .avatar-xp-badge #sidebarVillageTpLabel, html[data-theme="gokturk"] .left-sidebar .avatar-xp-badge #sidebarVillageTpName, html[data-theme="gokturk"] .left-sidebar .avatar-xp-badge #sidebarVillageTpRatio { font-size: 11px !important; } html[data-theme="gokturk"] .left-sidebar .btn-sidebar-logout { font-size: 11.5px !important; } /* Right Sidebar Standards (11-12px) */ html[data-theme="gokturk"] .right-sidebar .panel-section-title { font-size: 11.5px !important; } html[data-theme="gokturk"] .right-sidebar .shield-table-pill, html[data-theme="gokturk"] .right-sidebar .shield-table-pill span { font-size: 11px !important; } html[data-theme="gokturk"] .right-sidebar .resource-row, html[data-theme="gokturk"] .right-sidebar .resource-row .resource-label, html[data-theme="gokturk"] .right-sidebar .resource-row .resource-label span:not(.res-buff-indicator), html[data-theme="gokturk"] .right-sidebar .resource-row .resource-val { font-size: 11.5px !important; } html[data-theme="gokturk"] .right-sidebar .cities-grid .city-btn { background: rgba(0, 0, 0, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; } html[data-theme="gokturk"] .right-sidebar .cities-grid .city-btn:hover { background: rgba(229, 184, 92, 0.1) !important; border-color: rgba(229, 184, 92, 0.35) !important; } html[data-theme="gokturk"] .right-sidebar .cities-grid .city-btn.active { border: 1.5px solid #22c55e !important; background: linear-gradient(145deg, rgba(21, 128, 61, 0.35), rgba(6, 78, 59, 0.45)) !important; box-shadow: 0 0 8px rgba(34, 197, 94, 0.25) !important; } html[data-theme="gokturk"] .right-sidebar .cities-grid .city-btn, html[data-theme="gokturk"] .right-sidebar .cities-grid .city-btn div, html[data-theme="gokturk"] .right-sidebar .cities-grid .city-btn span { font-size: 11.5px !important; } html[data-theme="gokturk"] .right-sidebar .cities-grid .city-btn .city-name { color: #f1f5f9 !important; } html[data-theme="gokturk"] .right-sidebar .cities-grid .city-btn.active .city-name { color: #ffffff !important; } html[data-theme="gokturk"] .right-sidebar .event-circle-btn { background: transparent !important; border: none !important; box-shadow: none !important; } html[data-theme="gokturk"] .right-sidebar .event-circle-btn span:not(.event-badge) { font-size: 11.5px !important; font-weight: 700 !important; } html[data-theme="gokturk"] .right-sidebar .player-subtitle, html[data-theme="gokturk"] .right-sidebar .player-subtitle span { font-size: 11.5px !important; } /* Modal spans and inline badges clamp to 14px */ html[data-theme="gokturk"] .modal-dark-card span[style*="font-size:1.6rem"], html[data-theme="gokturk"] .modal-dark-card span[style*="font-size: 1.6rem"], html[data-theme="gokturk"] .modal-dark-card span[style*="font-size:1.5rem"], html[data-theme="gokturk"] .modal-dark-card span[style*="font-size: 1.5rem"], html[data-theme="gokturk"] .modal-dark-card span[style*="font-size:1.4rem"], html[data-theme="gokturk"] .modal-dark-card span[style*="font-size: 1.4rem"], html[data-theme="gokturk"] .modal-window span[style*="font-size:1.6rem"], html[data-theme="gokturk"] .modal-window span[style*="font-size: 1.6rem"], html[data-theme="gokturk"] .modal-window span[style*="font-size:1.5rem"], html[data-theme="gokturk"] .modal-window span[style*="font-size: 1.5rem"], html[data-theme="gokturk"] .modal-window span[style*="font-size:1.4rem"], html[data-theme="gokturk"] .modal-window span[style*="font-size: 1.4rem"], html[data-theme="gokturk"] .modal-overlay span[style*="font-size:1.6rem"], html[data-theme="gokturk"] .modal-backdrop span[style*="font-size:1.6rem"] { font-size: 14px !important; } /* ========================================================================== TOAST NOTIFICATIONS & CONFIRMATION MODAL (IMPERIAL GLASS THEME) ========================================================================== */ html[data-theme="gokturk"] .game-toast-box, html[data-theme="gokturk"] #gameToastNotification { background: rgba(28, 38, 54, 0.88) !important; backdrop-filter: blur(16px) saturate(120%) !important; -webkit-backdrop-filter: blur(16px) saturate(120%) !important; border: 1.5px solid rgba(212, 175, 55, 0.5) !important; color: #f8fafc !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 16px rgba(212, 175, 55, 0.25) !important; border-radius: 14px !important; font-size: 11px !important; padding: 7px 16px !important; } html[data-theme="gokturk"] #gameConfirmModal { background: rgba(10, 16, 26, 0.45) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } html[data-theme="gokturk"] .confirm-modal-card { width: 390px !important; max-width: 92vw !important; height: auto !important; max-height: 85vh !important; margin: auto !important; background: linear-gradient(180deg, rgba(35, 48, 68, 0.94) 0%, rgba(20, 28, 42, 0.92) 100%) !important; backdrop-filter: blur(18px) saturate(120%) !important; -webkit-backdrop-filter: blur(18px) saturate(120%) !important; border: 1.5px solid rgba(212, 175, 55, 0.55) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; font-size: 11px !important; } html[data-theme="gokturk"] #gameConfirmTitle, html[data-theme="gokturk"] .confirm-modal-card h3 { font-size: 13px !important; } html[data-theme="gokturk"] #gameConfirmMessage, html[data-theme="gokturk"] .confirm-modal-card p, html[data-theme="gokturk"] .confirm-ok-btn, html[data-theme="gokturk"] .confirm-cancel-btn { font-size: 11px !important; } html[data-theme="gokturk"] .confirm-modal-card > div:first-child { padding: 10px 16px !important; min-height: 38px !important; background: linear-gradient(180deg, rgba(42, 58, 82, 0.95) 0%, rgba(28, 38, 56, 0.92) 100%) !important; border-bottom: 1.5px solid rgba(212, 175, 55, 0.4) !important; } html[data-theme="gokturk"] .confirm-modal-card > div:nth-child(2) { background: rgba(15, 22, 34, 0.55) !important; margin: 10px 14px !important; padding: 12px 14px !important; border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important; } html[data-theme="gokturk"] .confirm-modal-card > div:last-child { padding: 10px 16px !important; background: rgba(16, 24, 38, 0.75) !important; border-top: 1.5px solid rgba(212, 175, 55, 0.25) !important; } html[data-theme="gokturk"] .confirm-ok-btn { background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important; border: 1.5px solid #fbbf24 !important; color: #120b04 !important; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45) !important; } html[data-theme="gokturk"] .confirm-cancel-btn { background: linear-gradient(180deg, rgba(45, 62, 88, 0.9) 0%, rgba(28, 40, 60, 0.95) 100%) !important; border: 1.5px solid rgba(148, 163, 184, 0.4) !important; color: #e2e8f0 !important; } /* Glassmorphism theme overrides for Production Matrix Modal (Authentic Semi-Transparent Glass & Ornate Filigree Frame) */ html[data-theme="gokturk"] #resourceProductionModal .modal-dark-card, html[data-theme="gokturk"] #resourceProductionModal .res-prod-card { position: relative !important; background-origin: border-box !important; background-clip: border-box !important; background-color: transparent !important; background-image: url('../../assets/ui/theme-glassmorphism/filigree-corner-tl.svg'), url('../../assets/ui/theme-glassmorphism/filigree-corner-tr.svg'), url('../../assets/ui/theme-glassmorphism/filigree-corner-bl.svg'), url('../../assets/ui/theme-glassmorphism/filigree-corner-br.svg'), url('../../assets/ui/theme-glassmorphism/filigree-crest-bottom.svg'), url('../../assets/ui/theme-glassmorphism/filigree-crest-top.svg'), linear-gradient(175deg, rgba(58, 76, 102, 0.44) 0%, rgba(36, 50, 72, 0.38) 100%) !important; background-position: top 0 left 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0, bottom -1px center, top -1px center, 0 0 !important; background-size: 44px 44px, 44px 44px, 44px 44px, 44px 44px, 80px 24px, 120px 28px, auto !important; background-repeat: no-repeat !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; border: 1.5px solid #d4af37 !important; border-radius: 16px !important; box-shadow: 0 0 0 1px rgba(245, 215, 130, 0.32), 0 25px 65px rgba(0, 0, 0, 0.50), inset 0 1px 1px rgba(255, 255, 255, 0.32), inset 0 0 20px rgba(100, 130, 175, 0.12) !important; } /* Semi-transparent sunken glass well for data grid */ html[data-theme="gokturk"] .res-prod-table-container { background: rgba(10, 12, 16, 0.94) !important; border: 1px solid rgba(212, 175, 55, 0.35) !important; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06) !important; border-radius: 12px !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } /* Sticky Header Row in Glassmorphism */ html[data-theme="gokturk"] .res-prod-table thead th { background: linear-gradient(180deg, #241d15 0%, #14110d 100%) !important; border-bottom: 1.5px solid rgba(212, 175, 55, 0.5) !important; color: #f5c542 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; } /* Sticky First Column Header (Top-Left Cell) in Glassmorphism */ html[data-theme="gokturk"] .res-prod-table thead th.res-prod-th-city { background: linear-gradient(180deg, #2c2218 0%, #17130e 100%) !important; border-right: 1.5px solid rgba(212, 175, 55, 0.45) !important; border-bottom: 1.5px solid rgba(212, 175, 55, 0.5) !important; } /* Body data cells: Semi-transparent glass rows */ html[data-theme="gokturk"] .res-prod-table tbody td { background: rgba(14, 16, 21, 0.88) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; } /* Sticky First Column Body Cell (Village Name) in Glassmorphism */ html[data-theme="gokturk"] .res-prod-table tbody td.res-prod-col-city { background: rgba(18, 21, 27, 0.97) !important; border-right: 1.5px solid rgba(212, 175, 55, 0.35) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; } html[data-theme="gokturk"] .res-prod-table tbody tr:hover td { background: rgba(42, 32, 20, 0.85) !important; } html[data-theme="gokturk"] .res-prod-table tbody tr:hover td.res-prod-col-city { background: rgba(46, 35, 22, 0.98) !important; } html[data-theme="gokturk"] .res-prod-table tbody tr.res-prod-current-row td { background: rgba(180, 83, 9, 0.24) !important; } html[data-theme="gokturk"] .res-prod-table tbody tr.res-prod-current-row td.res-prod-col-city { background: rgba(48, 31, 14, 0.98) !important; border-left: 3px solid #f59e0b !important; } /* Sticky Total Footer in Glassmorphism */ html[data-theme="gokturk"] .res-prod-table tfoot td { background: linear-gradient(180deg, #261e15 0%, #14100c 100%) !important; border-top: 1.5px solid rgba(212, 175, 55, 0.55) !important; border-bottom: 1.5px solid rgba(212, 175, 55, 0.55) !important; color: #fff9db !important; } html[data-theme="gokturk"] .res-prod-table tfoot td.res-prod-total-city { background: linear-gradient(180deg, #2e2419 0%, #18130e 100%) !important; border-right: 1.5px solid rgba(212, 175, 55, 0.45) !important; border-top: 1.5px solid rgba(212, 175, 55, 0.55) !important; border-bottom: 1.5px solid rgba(212, 175, 55, 0.55) !important; color: #f5c542 !important; } /* Village TP Modal & Mobile Village TP Badge - Smoky slate frosted glass */ html[data-theme="gokturk"] .village-tp-modal-card { background: linear-gradient(135deg, rgba(28, 38, 54, 0.90) 0%, rgba(16, 24, 38, 0.88) 100%) !important; backdrop-filter: blur(16px) saturate(125%) !important; -webkit-backdrop-filter: blur(16px) saturate(125%) !important; border: 1.5px solid rgba(212, 175, 55, 0.55) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } html[data-theme="gokturk"] .mobile-village-tp-badge { background: rgba(24, 34, 50, 0.85) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1.5px solid rgba(212, 175, 55, 0.45) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } html[data-theme="gokturk"] .village-tp-summary-banner { background: rgba(20, 30, 46, 0.75) !important; border: 1px solid rgba(212, 175, 55, 0.4) !important; } html[data-theme="gokturk"] .tp-matrix-card { background: rgba(22, 32, 48, 0.75) !important; border-color: rgba(212, 175, 55, 0.2) !important; } html[data-theme="gokturk"] .tp-card-next { background: linear-gradient(135deg, rgba(38, 50, 72, 0.95), rgba(48, 34, 18, 0.9)) !important; border-color: #f59e0b !important; } /* Modal Info Button (Gold Badge with Yellow Glow, Top-Left Placement) */ html[data-theme="gokturk"] .modal-info-btn, html[data-theme="gokturk"] button.modal-info-btn, html[data-theme="gokturk"] .modal-dark-card button.modal-info-btn, html[data-theme="gokturk"] .modal-window button.modal-info-btn, html[data-theme="gokturk"] .ranking-modal-card button.modal-info-btn, .modal-info-btn { position: absolute !important; left: 14px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; max-width: 28px !important; max-height: 28px !important; border-radius: 50% !important; background: transparent !important; border: 1.5px solid #facc15 !important; color: #facc15 !important; font-size: 14px !important; font-weight: 800 !important; cursor: pointer !important; user-select: none !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; padding: 0 !important; line-height: 1 !important; box-shadow: 0 0 10px rgba(250, 204, 21, 0.65), inset 0 0 5px rgba(250, 204, 21, 0.25) !important; z-index: 25 !important; flex-shrink: 0 !important; } html[data-theme="gokturk"] .modal-info-btn:hover, html[data-theme="gokturk"] button.modal-info-btn:hover, button.modal-info-btn:hover { background: rgba(250, 204, 21, 0.15) !important; border-color: #fde047 !important; color: #ffffff !important; transform: translateY(-50%) scale(1.1) !important; box-shadow: 0 0 16px rgba(250, 204, 21, 0.95), inset 0 0 8px rgba(250, 204, 21, 0.4) !important; } html[data-theme="gokturk"] .modal-info-btn.is-active, html[data-theme="gokturk"] .modal-info-btn.is-open, html[data-theme="gokturk"] button.modal-info-btn.is-active, html[data-theme="gokturk"] button.modal-info-btn.is-open, button.modal-info-btn.is-active, button.modal-info-btn.is-open { background: rgba(250, 204, 21, 0.25) !important; border-color: #fde047 !important; color: #ffffff !important; box-shadow: 0 0 20px rgba(250, 204, 21, 1), inset 0 0 10px rgba(250, 204, 21, 0.5) !important; transform: translateY(-50%) scale(1.05) !important; } /* Hide Redundant Inline Tip Texts (Now Housed Inside Modal Info Drawers) */ #movementMissionHint, html[data-theme="gokturk"] #movementMissionHint { display: none !important; } html[data-theme="gokturk"] .modal-info-drawer { position: absolute !important; top: 54px !important; left: 14px !important; max-width: 520px !important; width: calc(100% - 28px) !important; max-height: calc(100% - 68px) !important; overflow-y: auto !important; background: linear-gradient(135deg, #161920 0%, #0d0f14 100%) !important; border: 1.5px solid #eab308 !important; border-left: 4px solid #facc15 !important; border-radius: 12px !important; padding: 14px 18px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(234, 179, 8, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; animation: modalInfoSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 999999 !important; flex-shrink: 0 !important; } /* Tooltip Popover Top-Right Close Button */ .modal-info-drawer-close, html[data-theme="gokturk"] .modal-info-drawer-close, html[data-theme="gokturk"] .modal-info-drawer button.modal-info-drawer-close, html[data-theme="gokturk"] .modal-info-drawer button[onclick*="closeModalInfo"] { position: absolute !important; top: 12px !important; right: 12px !important; transform: none !important; width: 24px !important; height: 24px !important; min-width: 24px !important; max-width: 24px !important; max-height: 24px !important; border-radius: 50% !important; background: radial-gradient(circle at 35% 35%, #521818 0%, #220808 100%) !important; border: 1.5px solid #d4af37 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 230, 160, 0.5) !important; color: #ffe6a3 !important; font-size: 0.75rem !important; font-weight: 900 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 !important; line-height: 1 !important; z-index: 30 !important; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important; } .modal-info-drawer-close:hover, html[data-theme="gokturk"] .modal-info-drawer-close:hover, html[data-theme="gokturk"] .modal-info-drawer button.modal-info-drawer-close:hover, html[data-theme="gokturk"] .modal-info-drawer button[onclick*="closeModalInfo"]:hover { background: radial-gradient(circle at 35% 35%, #7f1d1d 0%, #3a0d0d 100%) !important; border-color: #ef4444 !important; color: #ffffff !important; box-shadow: 0 0 12px rgba(239, 68, 68, 0.85), inset 0 1px 2px #fff !important; transform: scale(1.1) !important; } .modal-info-drawer-close:active, html[data-theme="gokturk"] .modal-info-drawer-close:active, html[data-theme="gokturk"] .modal-info-drawer button.modal-info-drawer-close:active, html[data-theme="gokturk"] .modal-info-drawer button[onclick*="closeModalInfo"]:active { transform: scale(0.95) !important; } /* Pinned Battle Report Detail Navigation Footer */ html[data-theme="gokturk"] .report-detail-panel { flex-direction: column !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; overflow: hidden !important; padding: 0 !important; } html.mobile-portrait-mode[data-theme="gokturk"] .battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel, html[data-device-orientation="portrait"][data-theme="gokturk"] .battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel { display: none !important; } html.mobile-portrait-mode[data-theme="gokturk"] .battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel, html[data-device-orientation="portrait"][data-theme="gokturk"] .battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel { display: none !important; } html.mobile-portrait-mode[data-theme="gokturk"] .battle-reports-layout-grid.mobile-show-detail .report-detail-panel, html[data-device-orientation="portrait"][data-theme="gokturk"] .battle-reports-layout-grid.mobile-show-detail .report-detail-panel { display: flex !important; flex: 1 1 0% !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; overflow: hidden !important; } html[data-theme="gokturk"] .report-detail-scroll-area { flex: 1 1 0% !important; min-height: 0 !important; max-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; overscroll-behavior-y: contain !important; padding: 10px 14px !important; } html[data-theme="gokturk"] .report-detail-pinned-footer { flex-shrink: 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; background: linear-gradient(180deg, #181b22 0%, #0e1015 100%) !important; border-top: 1.5px solid rgba(212, 175, 55, 0.35) !important; padding: 8px 14px !important; border-bottom-left-radius: 7px !important; border-bottom-right-radius: 7px !important; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6) !important; z-index: 10 !important; } /* Send Movement Action Bar Alignment */ html[data-theme="gokturk"] .send-movement-footer-actions { margin-left: auto !important; justify-content: flex-end !important; } /* ========================================================================== SEND MOVEMENT MODAL: HIGH-PRIORITY HEADER BUTTON PINNING (TOP CARTOUCHE ROW) ========================================================================== */ html[data-theme="gokturk"] #sendMovementModal .modal-close-btn, html[data-theme="gokturk"] #sendMovementModal .modal-dark-card button[onclick*="sendMovementModal"], #sendMovementModal .modal-close-btn { top: 6px !important; right: 12px !important; left: auto !important; transform: none !important; z-index: 30 !important; } html[data-theme="gokturk"] #sendMovementModal .modal-close-btn:hover, #sendMovementModal .modal-close-btn:hover { transform: none !important; } html[data-theme="gokturk"] #sendMovementModal .modal-info-btn, html[data-theme="gokturk"] #sendMovementModal button.modal-info-btn, #sendMovementModal .modal-info-btn { top: 8px !important; left: 12px !important; right: auto !important; transform: none !important; z-index: 30 !important; } html[data-theme="gokturk"] #sendMovementModal .modal-info-btn:hover, #sendMovementModal .modal-info-btn:hover { transform: none !important; } @media (max-width: 768px) { html[data-theme="gokturk"] #sendMovementModal .modal-close-btn, #sendMovementModal .modal-close-btn { top: 5px !important; right: 8px !important; transform: none !important; } html[data-theme="gokturk"] #sendMovementModal .modal-info-btn, #sendMovementModal .modal-info-btn { top: 7px !important; left: 8px !important; transform: none !important; } } /* ========================================================================== GÖKTÜRK DEMİR & KEHRİBAR - 3D RUNIC BRASS & FORGED GUNMETAL MASTER OVERRIDES ========================================================================== */ html[data-theme="gokturk"] { --targun-bg-dark: #0e1014; --targun-panel-bg: rgba(20, 23, 29, 0.96); --targun-panel-border: #c59b5f; --targun-gold-accent: #f59e0b; --targun-gold-glow: rgba(245, 158, 11, 0.45); --targun-text-bright: #f8fafc; --targun-text-muted: #9ca3af; --targun-wood-gradient: linear-gradient(180deg, #1a1d24 0%, #101217 100%); --targun-gold-button: linear-gradient(180deg, #d97706 0%, #9a3412 55%, #5c1d08 100%); --targun-blue-button: linear-gradient(180deg, #252932 0%, #161920 55%, #0c0e13 100%); --targun-glass-gradient-top: rgba(24, 27, 34, 0.96); --targun-glass-gradient-bottom: rgba(14, 16, 20, 0.98); --targun-glass-well-bg: rgba(10, 11, 14, 0.92); --targun-glass-overlay-bg: rgba(6, 8, 12, 0.68); --targun-smoky-top: rgba(24, 27, 34, 0.96); --targun-smoky-bottom: rgba(14, 16, 20, 0.98); } /* 1. MODAL WINDOWS: 11-Layer 3D Orkhon Runic Antique Brass Corners, Riveted Rails & Brushed Gunmetal Plate */ html[data-theme="gokturk"] body .modal-dark-card, html[data-theme="gokturk"] body .modal-window, html[data-theme="gokturk"] body .modal-content, html[data-theme="gokturk"] body .custom-modal, html[data-theme="gokturk"] body .ranking-modal-card, html[data-theme="gokturk"] body .send-movement-modal-card, html[data-theme="gokturk"] body .mobile-menu-drawer-card, html[data-theme="gokturk"] body #medreseResearchModal .modal-dark-card, html[data-theme="gokturk"] body #cephaneArmoryModal .modal-dark-card, html[data-theme="gokturk"] body #questsAndMilestonesModal .modal-window, html[data-theme="gokturk"] body #farmListModal .modal-window, html[data-theme="gokturk"] body #empireOverviewModal .modal-window, html[data-theme="gokturk"] body #combatSimulatorModal .modal-window, html[data-theme="gokturk"] body #gameWikiModal .modal-dark-card, html[data-theme="gokturk"] body #diamondShopModal .modal-window, html[data-theme="gokturk"] body #resourceProductionModal .res-prod-card, html[data-theme="gokturk"] body div[id*="Modal"] > .modal-dark-card, html[data-theme="gokturk"] body div[id*="Modal"] > .modal-window, html[data-theme="gokturk"] body div[id$="Modal"] .modal-dark-card, html[data-theme="gokturk"] body div[id$="Modal"] .modal-window, html[data-theme="gokturk"] body div[id$="Modal"] > div:first-child:not(.modal-close-btn), html[data-theme="gokturk"] body .modal-overlay > div:first-child, html[data-theme="gokturk"] body .modal-backdrop > div:first-child { position: relative !important; background-color: #14171d !important; background-image: url('../../assets/ui/theme-gokturk/corner-tl.png'), url('../../assets/ui/theme-gokturk/corner-tr.png'), url('../../assets/ui/theme-gokturk/corner-bl.png'), url('../../assets/ui/theme-gokturk/corner-br.png'), url('../../assets/ui/theme-gokturk/rail-top.png'), url('../../assets/ui/theme-gokturk/rail-bottom.png'), url('../../assets/ui/theme-gokturk/rail-left.png'), url('../../assets/ui/theme-gokturk/rail-right.png'), radial-gradient(circle at 50% 25%, rgba(38, 43, 52, 0.45) 0%, rgba(12, 14, 18, 0.88) 100%), url('../../assets/ui/theme-gokturk/gunmetal-bg.jpg') !important; background-position: top 0 left 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0, top 0 center, bottom 0 center, center left 0, center right 0, 0 0, center center !important; background-size: 68px 68px, 68px 68px, 68px 68px, 68px 68px, calc(100% - 108px) 15px, calc(100% - 108px) 15px, 15px calc(100% - 108px), 15px calc(100% - 108px), 100% 100%, cover !important; background-repeat: no-repeat !important; background-origin: border-box !important; background-clip: border-box !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-radius: 4px !important; padding: 30px 30px 30px 30px !important; box-shadow: 0 30px 75px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(197, 155, 95, 0.35), inset 0 0 28px rgba(0, 0, 0, 0.85) !important; } /* Top-Layer Frame Overlay (::after) on Modals so inner elements never overlap the brass corners/rails */ html[data-theme="gokturk"] body .modal-window::after, html[data-theme="gokturk"] body .ranking-modal-card::after, html[data-theme="gokturk"] body .send-movement-modal-card::after, html[data-theme="gokturk"] body #medreseResearchModal .modal-dark-card::after, html[data-theme="gokturk"] body #cephaneArmoryModal .modal-dark-card::after, html[data-theme="gokturk"] body #gameWikiModal .modal-dark-card::after, html[data-theme="gokturk"] body #resourceProductionModal .res-prod-card::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 30 !important; border-radius: inherit !important; background-image: url('../../assets/ui/theme-gokturk/corner-tl.png'), url('../../assets/ui/theme-gokturk/corner-tr.png'), url('../../assets/ui/theme-gokturk/corner-bl.png'), url('../../assets/ui/theme-gokturk/corner-br.png'), url('../../assets/ui/theme-gokturk/rail-top.png'), url('../../assets/ui/theme-gokturk/rail-bottom.png'), url('../../assets/ui/theme-gokturk/rail-left.png'), url('../../assets/ui/theme-gokturk/rail-right.png') !important; background-position: top 0 left 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0, top 0 center, bottom 0 center, center left 0, center right 0 !important; background-size: 68px 68px, 68px 68px, 68px 68px, 68px 68px, calc(100% - 108px) 15px, calc(100% - 108px) 15px, 15px calc(100% - 108px), 15px calc(100% - 108px) !important; background-repeat: no-repeat !important; } /* 2. 3D SCALLOPED BRASS & IRON HEADER CARTOUCHE PLAQUE (Zero Rectangular Box Shadow) */ html[data-theme="gokturk"] body .modal-dark-card #modalTitle, html[data-theme="gokturk"] body .modal-dark-card > div:first-child h3, html[data-theme="gokturk"] body .modal-dark-card > div:first-child h2, html[data-theme="gokturk"] body .modal-window .modal-header h3, html[data-theme="gokturk"] body .ranking-modal-card > div:first-child h3, html[data-theme="gokturk"] body #medreseResearchModal .modal-dark-card > div:first-child h3, html[data-theme="gokturk"] body #cephaneArmoryModal .modal-dark-card > div:first-child h3, html[data-theme="gokturk"] body #clanModal #clanModalHeaderTitle, html[data-theme="gokturk"] body #sendMovementModal #sendMovementModalTitle, html[data-theme="gokturk"] body #buildingDetailConstructModal #constructDetailName, html[data-theme="gokturk"] body .modal-dark-card .modal-header-plaque, html[data-theme="gokturk"] body .modal-window .modal-header-plaque { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 9px 36px !important; min-height: 40px !important; background-color: transparent !important; background-image: url('../../assets/ui/theme-gokturk/header-cartouche.png') !important; background-position: center center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.85)) !important; color: #fde68a !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(245, 158, 11, 0.35) !important; font-weight: 900 !important; font-size: 14.5px !important; letter-spacing: 1px !important; text-transform: uppercase !important; margin: 0 auto !important; } html[data-theme="gokturk"] body .modal-dark-card #modalTitle::before, html[data-theme="gokturk"] body .modal-dark-card > div:first-child h3::before, html[data-theme="gokturk"] body .ranking-modal-card > div:first-child h3::before, html[data-theme="gokturk"] body .modal-window .modal-header h3::before, html[data-theme="gokturk"] body .modal-dark-card #modalTitle::after, html[data-theme="gokturk"] body .modal-dark-card > div:first-child h3::after, html[data-theme="gokturk"] body .ranking-modal-card > div:first-child h3::after, html[data-theme="gokturk"] body .modal-window .modal-header h3::after { content: "♦" !important; color: #f59e0b !important; font-size: 10px !important; text-shadow: 0 0 8px rgba(245, 158, 11, 0.75) !important; } /* 3. 3D BLOOD-GARNET & BRASS CLOSE MEDALLION BUTTON */ html[data-theme="gokturk"] body .modal-close-btn, html[data-theme="gokturk"] body .modal-dark-card > div:first-child > button:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] body .modal-window .modal-close-btn, html[data-theme="gokturk"] body .modal-dark-card button[style*="font-size:1.4rem"]:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] body .modal-dark-card button[style*="font-size: 1.4rem"]:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] body .modal-dark-card button[style*="font-size:1.6rem"]:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] body .modal-dark-card button[style*="font-size: 1.6rem"]:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] body #troopUpgradeModal button[onclick*="closeModal"]:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] body .modal-overlay button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn), html[data-theme="gokturk"] body .modal-backdrop button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn), html[data-theme="gokturk"] body .modal-dark-card button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn), html[data-theme="gokturk"] body .modal-window button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn), html[data-theme="gokturk"] body .ranking-modal-card button[onclick*="closeModal"]:not(.btn):not(.modal-info-btn), html[data-theme="gokturk"] body .ranking-modal-card > div:first-child > button:not(.btn):not(.modal-info-btn) { position: absolute !important; right: 14px !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; max-height: 36px !important; border-radius: 50% !important; background: url('../../assets/ui/theme-gokturk/medallion-close.png') center center / 100% 100% no-repeat !important; border: none !important; color: transparent !important; text-shadow: none !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.85) !important; transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important; } html[data-theme="gokturk"] body .modal-close-btn:hover, html[data-theme="gokturk"] body .modal-dark-card > div:first-child > button:not(.btn):not(.modal-info-btn):hover, html[data-theme="gokturk"] body .modal-window .modal-close-btn:hover, html[data-theme="gokturk"] body .modal-overlay button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn):hover { filter: brightness(1.22) saturate(1.2) !important; box-shadow: 0 0 14px rgba(239, 68, 68, 0.75) !important; transform: translateY(-50%) scale(1.05) !important; } /* 4. 3D FORGED STEEL INFO MEDALLION BUTTON */ html[data-theme="gokturk"] body .modal-info-btn { position: absolute !important; left: 14px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; max-height: 36px !important; border-radius: 50% !important; background: url('../../assets/ui/theme-gokturk/medallion-info.png') center center / 100% 100% no-repeat !important; border: none !important; color: transparent !important; text-shadow: none !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.85) !important; transition: filter 0.15s ease, transform 0.15s ease !important; } html[data-theme="gokturk"] body .modal-info-btn:hover { filter: brightness(1.25) !important; transform: translateY(-50%) scale(1.05) !important; } /* ========================================================================== 5. COMPREHENSIVE BUTTON & TAB TRANSFORMATION (ZERO SAPPHIRE BLUE) ========================================================================== */ /* 5A. HERO NAVIGATION BUTTONS (Köyüme Git / Haritaya Dön / Sol Sidebar Köyüm) Uses a razor-sharp 3D Forged Molten Amber & Brass Bevel (zero stretched PNG) */ html[data-theme="gokturk"] body .left-sidebar .quick-village-btn { background: linear-gradient(180deg, #d97706 0%, #9a3412 54%, #5c1d08 100%) !important; background-image: linear-gradient(180deg, #d97706 0%, #9a3412 54%, #5c1d08 100%) !important; border: 1.5px solid #fbbf24 !important; border-bottom: 2.5px solid #92400e !important; border-radius: 8px !important; color: #fff8ea !important; font-weight: 800 !important; letter-spacing: 0.4px !important; padding: 8px 6px !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 240, 185, 0.45), inset 0 -2px 4px rgba(0, 0, 0, 0.65) !important; filter: none !important; transition: all 0.16s ease !important; } html[data-theme="gokturk"] body #btnCenterOwnVillage, html[data-theme="gokturk"] body .btn-center-own-village { background: linear-gradient(180deg, #d97706 0%, #9a3412 54%, #5c1d08 100%) !important; background-image: linear-gradient(180deg, #d97706 0%, #9a3412 54%, #5c1d08 100%) !important; border: 1px solid #fbbf24 !important; border-bottom: 2px solid #92400e !important; border-radius: 5px !important; color: #fff8ea !important; font-weight: 800 !important; font-size: 10px !important; letter-spacing: 0.3px !important; padding: 2px 7px !important; height: 22px !important; min-height: 22px !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 240, 185, 0.45), inset 0 -1px 2px rgba(0, 0, 0, 0.65) !important; filter: none !important; transition: all 0.16s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html[data-theme="gokturk"] body #btnVillageBackToMap, html[data-theme="gokturk"] body .village-back-to-map-btn { background: linear-gradient(180deg, #d97706 0%, #9a3412 54%, #5c1d08 100%) !important; background-image: linear-gradient(180deg, #d97706 0%, #9a3412 54%, #5c1d08 100%) !important; border: 1px solid #fbbf24 !important; border-bottom: 2px solid #92400e !important; border-radius: 7px !important; color: #fff8ea !important; font-weight: 800 !important; font-size: 11px !important; letter-spacing: 0.3px !important; padding: 4px 8px !important; width: 121px !important; min-width: 121px !important; max-width: 121px !important; height: 30px !important; min-height: 30px !important; box-sizing: border-box !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 240, 185, 0.45), inset 0 -1px 2px rgba(0, 0, 0, 0.65) !important; filter: none !important; transition: all 0.16s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html.mobile-portrait-mode[data-theme="gokturk"] body #btnVillageBackToMap, html.mobile-portrait-mode[data-theme="gokturk"] body .village-back-to-map-btn { width: 95px !important; min-width: 95px !important; max-width: 95px !important; height: 28px !important; min-height: 28px !important; font-size: 10.5px !important; padding: 4px 6px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body #btnVillageBackToMap, html.mobile-landscape-mode[data-theme="gokturk"] body .village-back-to-map-btn { width: 72px !important; min-width: 72px !important; max-width: 72px !important; height: 22px !important; min-height: 22px !important; font-size: 9px !important; padding: 3px 4px !important; } html[data-theme="gokturk"] body .left-sidebar .quick-village-btn:hover, html[data-theme="gokturk"] body #btnVillageBackToMap:hover, html[data-theme="gokturk"] body .village-back-to-map-btn:hover, html[data-theme="gokturk"] body #btnCenterOwnVillage:hover, html[data-theme="gokturk"] body .btn-center-own-village:hover { background: linear-gradient(180deg, #f59e0b 0%, #b45309 54%, #78350f 100%) !important; background-image: linear-gradient(180deg, #f59e0b 0%, #b45309 54%, #78350f 100%) !important; border-color: #fde68a !important; color: #ffffff !important; box-shadow: 0 5px 16px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 248, 210, 0.6) !important; filter: none !important; transform: translateY(-1px) !important; } /* 5B. ALL MODAL & GENERAL PRIMARY BUTTONS (.btn-primary, #confirmSendMovementBtn, #modalUpgradeConfirmBtn, #constructDetailConfirmBtn, Farm List Yağmala, Toggle Buttons, Filter Active Pills) Uses a razor-sharp 3D Forged Molten Amber & Brass Bevel across all modals */ html[data-theme="gokturk"] body #confirmSendMovementBtn:not(:disabled), html[data-theme="gokturk"] body #modalUpgradeConfirmBtn:not(:disabled), html[data-theme="gokturk"] body #constructDetailConfirmBtn:not(:disabled), html[data-theme="gokturk"] body .btn-primary:not(#foundVillageTopBtn):not(:disabled), html[data-theme="gokturk"] body .btn-construct-small:not(:disabled), html[data-theme="gokturk"] body .btn-gold-3d:not(:disabled), html[data-theme="gokturk"] body .modal-overlay .btn-primary:not(:disabled), html[data-theme="gokturk"] body .modal-backdrop .btn-primary:not(:disabled), html[data-theme="gokturk"] body .modal-dark-card .btn-primary:not(:disabled), html[data-theme="gokturk"] body .modal-window .btn-primary:not(:disabled), html[data-theme="gokturk"] body .ranking-modal-card .btn-primary:not(:disabled) { background: linear-gradient(180deg, #d97706 0%, #9a3412 54%, #5c1d08 100%) !important; background-image: linear-gradient(180deg, #d97706 0%, #9a3412 54%, #5c1d08 100%) !important; border: 1.5px solid #fbbf24 !important; border-bottom: 2px solid #92400e !important; border-radius: 6px !important; color: #fff8ea !important; font-weight: 800 !important; letter-spacing: 0.4px !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 240, 185, 0.45), inset 0 -2px 4px rgba(0, 0, 0, 0.65) !important; filter: none !important; transition: all 0.16s ease !important; } html[data-theme="gokturk"] body #confirmSendMovementBtn:not(:disabled):hover, html[data-theme="gokturk"] body #modalUpgradeConfirmBtn:not(:disabled):hover, html[data-theme="gokturk"] body #constructDetailConfirmBtn:not(:disabled):hover, html[data-theme="gokturk"] body .btn-primary:not(.quick-village-btn):not(#btnVillageBackToMap):not(#btnCenterOwnVillage):not(#foundVillageTopBtn):not(:disabled):hover, html[data-theme="gokturk"] body .modal-overlay .btn-primary:not(:disabled):hover, html[data-theme="gokturk"] body .modal-dark-card .btn-primary:not(:disabled):hover, html[data-theme="gokturk"] body .modal-window .btn-primary:not(:disabled):hover { background: linear-gradient(180deg, #f59e0b 0%, #b45309 54%, #78350f 100%) !important; background-image: linear-gradient(180deg, #f59e0b 0%, #b45309 54%, #78350f 100%) !important; border-color: #fde68a !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 248, 210, 0.6) !important; transform: translateY(-1px) !important; } /* 5C. ALL SECONDARY / STANDARD MODAL BUTTONS (.btn:not(.btn-primary), Vazgeç, Kapat, Filter Pills, Pagination) Replaces every Sapphire-Blue button with 3D Chiseled Dark Gunmetal & Antique Brass */ html[data-theme="gokturk"] body .btn-secondary, html[data-theme="gokturk"] body .btn-sapphire, html[data-theme="gokturk"] body #modalUpgradeCancelBtn, html[data-theme="gokturk"] body .upgrade-modal-footer button:not(#modalUpgradeConfirmBtn):not(#modalUpgradeFastBtn), html[data-theme="gokturk"] body .construct-detail-footer button:not(#constructDetailConfirmBtn):not(#constructDetailFastBtn), html[data-theme="gokturk"] body .modal-overlay .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones), html[data-theme="gokturk"] body .modal-backdrop .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones), html[data-theme="gokturk"] body .modal-dark-card .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones), html[data-theme="gokturk"] body .modal-window .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones), html[data-theme="gokturk"] body .ranking-modal-card .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones), html[data-theme="gokturk"] body .modal-overlay button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(.btn-primary):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn), html[data-theme="gokturk"] body .modal-backdrop button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(.btn-primary):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn), html[data-theme="gokturk"] body .modal-dark-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(.btn-primary):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn), html[data-theme="gokturk"] body .modal-window button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(.btn-primary):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn), html[data-theme="gokturk"] body .ranking-modal-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(.btn-primary):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn) { background: linear-gradient(180deg, #252932 0%, #161920 55%, #0c0e13 100%) !important; color: #e7dec8 !important; border: 1.5px solid rgba(197, 155, 95, 0.55) !important; border-bottom: 2px solid rgba(146, 107, 56, 0.85) !important; border-radius: 6px !important; font-weight: 700 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 230, 170, 0.16), inset 0 -2px 4px rgba(0, 0, 0, 0.85) !important; transition: all 0.16s ease !important; } html[data-theme="gokturk"] body .btn-secondary:hover, html[data-theme="gokturk"] body .btn-sapphire:hover, html[data-theme="gokturk"] body #modalUpgradeCancelBtn:hover, html[data-theme="gokturk"] body .modal-overlay .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover, html[data-theme="gokturk"] body .modal-backdrop .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover, html[data-theme="gokturk"] body .modal-dark-card .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover, html[data-theme="gokturk"] body .modal-window .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover, html[data-theme="gokturk"] body .ranking-modal-card .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover { background: linear-gradient(180deg, #3a2b1c 0%, #241a10 55%, #140e08 100%) !important; border-color: #f59e0b !important; color: #fde68a !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 235, 175, 0.3) !important; transform: translateY(-1px) !important; } /* 5D. SEND MOVEMENT MODAL: TROOP STEPPER (- / + / Min / Max) & SPEED BOOST BUTTONS */ html[data-theme="gokturk"] body #movementTroopCardsContainer .send-movement-troop-card button[onclick*="changeTroopQty"] { background: linear-gradient(180deg, #d97706 0%, #92400e 100%) !important; border: 1px solid #fbbf24 !important; color: #fff8ea !important; font-weight: 900 !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 240, 185, 0.4) !important; } html[data-theme="gokturk"] body #movementTroopCardsContainer .send-movement-troop-card button[onclick*="changeTroopQty"]:hover { background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important; border-color: #fde68a !important; color: #ffffff !important; } html[data-theme="gokturk"] body #movementTroopCardsContainer .send-movement-troop-card button[onclick*=", 0)"] { background: linear-gradient(180deg, #22262f 0%, #111318 100%) !important; border: 1px solid rgba(197, 155, 95, 0.45) !important; color: #d6c7b2 !important; font-weight: 700 !important; } html[data-theme="gokturk"] body #movementTroopCardsContainer .send-movement-troop-card button[onclick*="setTroopQty"]:not([onclick*=", 0)"]) { background: linear-gradient(180deg, #422912 0%, #241507 100%) !important; border: 1px solid #f59e0b !important; color: #fde68a !important; font-weight: 800 !important; } html[data-theme="gokturk"] body #btnMovementSpeedBoost { background: linear-gradient(180deg, #3b2310 0%, #1c1006 100%) !important; border: 1.5px solid #f59e0b !important; color: #fde68a !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 230, 160, 0.3) !important; } html[data-theme="gokturk"] body #btnMovementSpeedBoost:hover { background: linear-gradient(180deg, #523015 0%, #291708 100%) !important; border-color: #fde047 !important; color: #ffffff !important; } /* 5E. SETTINGS MODAL: ACTIVE & INACTIVE STEPPERS, TRANSPARENCY PRESETS, THEME BUTTONS */ html[data-theme="gokturk"] body .settings-troop-step-btn:not(.active), html[data-theme="gokturk"] body .settings-trans-preset-btn:not(.active), html[data-theme="gokturk"] body #settingsThemeButtonGroup button:not(.active), html[data-theme="gokturk"] body #settingsPanelColorResetBtn:not(.active), html[data-theme="gokturk"] body #settingsPanelWellColorResetBtn:not(.active) { background: linear-gradient(180deg, #22262f 0%, #12151b 100%) !important; border: 1px solid rgba(197, 155, 95, 0.48) !important; color: #d6c7b2 !important; box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.12), 0 2px 5px rgba(0, 0, 0, 0.7) !important; } html[data-theme="gokturk"] body .settings-troop-step-btn.active, html[data-theme="gokturk"] body .settings-trans-preset-btn.active, html[data-theme="gokturk"] body #settingsThemeButtonGroup button.active, html[data-theme="gokturk"] body #settingsPanelColorResetBtn.active, html[data-theme="gokturk"] body #settingsPanelWellColorResetBtn.active { background: linear-gradient(180deg, #d97706 0%, #92400e 100%) !important; border: 1.5px solid #fbbf24 !important; color: #fff8ea !important; font-weight: 900 !important; box-shadow: 0 0 12px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 240, 185, 0.45) !important; } /* 5F. BATTLE REPORTS MODAL: SHARE, SIMULATOR, LOCK CALC & DEFENDER STYLING */ html[data-theme="gokturk"] body button[onclick*="shareReport"] { background: linear-gradient(180deg, #282c36 0%, #151820 100%) !important; border: 1px solid #c59b5f !important; color: #fde68a !important; } html[data-theme="gokturk"] body button[onclick*="addReportToSimulator"] { background: linear-gradient(180deg, #422912 0%, #211306 100%) !important; border: 1px solid #f59e0b !important; color: #fde68a !important; } html[data-theme="gokturk"] body button[onclick*="openLockWithReport"] { background: linear-gradient(180deg, #b45309 0%, #652506 100%) !important; border: 1px solid #fbbf24 !important; color: #fff8ea !important; } html[data-theme="gokturk"] body .report-tp-badge-defender, html[data-theme="gokturk"] body #battleReportsModal span[title*="Savunan"] { background: rgba(197, 155, 95, 0.18) !important; border: 1px solid #c59b5f !important; color: #fde68a !important; } html[data-theme="gokturk"] body .report-box-defender div[style*="color:#60a5fa"], html[data-theme="gokturk"] body .report-power-defender { color: #e2b878 !important; } /* 5G. ALL SUB-TABS & CATEGORY TABS ACROSS MODALS (Rankings, Medrese, Clan, Shop, Quests, Wiki) */ html[data-theme="gokturk"] body .chat-chamfer-tab-btn:not(.active), html[data-theme="gokturk"] body .ranking-tab-btn:not(.active), html[data-theme="gokturk"] body .profile-tab-btn:not(.active), html[data-theme="gokturk"] body .medrese-cat-btn:not(.active), html[data-theme="gokturk"] body .support-tab-btn:not(.active), html[data-theme="gokturk"] body .clan-noclan-tab-btn:not(.active), html[data-theme="gokturk"] body .clan-tab-btn:not(.active), html[data-theme="gokturk"] body .quests-tab-btn:not(.active), html[data-theme="gokturk"] body .wiki-tab-btn:not(.active), html[data-theme="gokturk"] body .tab-btn:not(.active) { background: linear-gradient(180deg, #1e222b 0%, #101218 100%) !important; border: 1px solid rgba(197, 155, 95, 0.42) !important; color: #c7baa5 !important; box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.1), 0 2px 5px rgba(0, 0, 0, 0.7) !important; } html[data-theme="gokturk"] body .chat-chamfer-tab-btn:not(.active):hover, html[data-theme="gokturk"] body .ranking-tab-btn:not(.active):hover, html[data-theme="gokturk"] body .profile-tab-btn:not(.active):hover, html[data-theme="gokturk"] body .medrese-cat-btn:not(.active):hover, html[data-theme="gokturk"] body .support-tab-btn:not(.active):hover, html[data-theme="gokturk"] body .clan-noclan-tab-btn:not(.active):hover, html[data-theme="gokturk"] body .clan-tab-btn:not(.active):hover, html[data-theme="gokturk"] body .quests-tab-btn:not(.active):hover, html[data-theme="gokturk"] body .wiki-tab-btn:not(.active):hover, html[data-theme="gokturk"] body .tab-btn:not(.active):hover { background: linear-gradient(180deg, #332619 0%, #1b140d 100%) !important; border-color: #f59e0b !important; color: #fde68a !important; } html[data-theme="gokturk"] body .chat-chamfer-tab-btn.active, html[data-theme="gokturk"] body .ranking-tab-btn.active, html[data-theme="gokturk"] body .profile-tab-btn.active, html[data-theme="gokturk"] body .medrese-cat-btn.active, html[data-theme="gokturk"] body .support-tab-btn.active, html[data-theme="gokturk"] body .clan-noclan-tab-btn.active, html[data-theme="gokturk"] body .clan-tab-btn.active, html[data-theme="gokturk"] body .quests-tab-btn.active, html[data-theme="gokturk"] body .wiki-tab-btn.active, html[data-theme="gokturk"] body .tab-btn.active { background: linear-gradient(180deg, #d97706 0%, #92400e 55%, #5c2408 100%) !important; border: 1.5px solid #fbbf24 !important; color: #fff8ea !important; font-weight: 800 !important; box-shadow: 0 0 12px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 240, 185, 0.45) !important; } /* 5H. PRODUCTION MATRIX TABLE & ALL MODAL DATA TABLES (Zero Navy-Blue Rows/Headers) */ html[data-theme="gokturk"] body table th, html[data-theme="gokturk"] body .res-prod-table thead th { background: linear-gradient(180deg, #241d15 0%, #14110d 100%) !important; border-top: 1px solid rgba(197, 155, 95, 0.4) !important; border-bottom: 1.5px solid #c59b5f !important; color: #fde68a !important; } html[data-theme="gokturk"] body .res-prod-table thead th.res-prod-th-city { background: linear-gradient(180deg, #2c2218 0%, #17130e 100%) !important; border-right: 1.5px solid #c59b5f !important; border-bottom: 1.5px solid #c59b5f !important; } html[data-theme="gokturk"] body table td, html[data-theme="gokturk"] body .res-prod-table tbody td { background: rgba(14, 16, 21, 0.88) !important; border-bottom: 1px solid rgba(197, 155, 95, 0.14) !important; color: #e7dec8 !important; } html[data-theme="gokturk"] body .res-prod-table tbody td.res-prod-col-city { background: #14171e !important; border-right: 1.5px solid rgba(197, 155, 95, 0.42) !important; } html[data-theme="gokturk"] body table tr:hover td, html[data-theme="gokturk"] body .res-prod-table tbody tr:hover td { background: rgba(44, 33, 20, 0.85) !important; } html[data-theme="gokturk"] body .res-prod-table tbody tr:hover td.res-prod-col-city { background: #281e13 !important; } html[data-theme="gokturk"] body .res-prod-table tbody tr.res-prod-current-row td { background: rgba(180, 83, 9, 0.22) !important; } html[data-theme="gokturk"] body .res-prod-table tbody tr.res-prod-current-row td.res-prod-col-city { background: #2b1d0f !important; border-left: 3px solid #f59e0b !important; } html[data-theme="gokturk"] body .res-prod-table tfoot td { background: linear-gradient(180deg, #261e15 0%, #14100c 100%) !important; border-top: 1.5px solid #c59b5f !important; border-bottom: 1.5px solid #c59b5f !important; color: #fde68a !important; } html[data-theme="gokturk"] body .res-prod-table tfoot td.res-prod-total-city { background: linear-gradient(180deg, #2e2419 0%, #18130e 100%) !important; border-right: 1.5px solid #c59b5f !important; color: #fbbf24 !important; } /* 6. RECESSED CARBON-OBSIDIAN SUNKEN WELLS & INNER PANELS */ html[data-theme="gokturk"] body .glass-sunken-well, html[data-theme="gokturk"] body .cost-res-well, html[data-theme="gokturk"] body .send-movement-troops-box, html[data-theme="gokturk"] body .well-card, html[data-theme="gokturk"] body .inner-panel, html[data-theme="gokturk"] body .modal-well, html[data-theme="gokturk"] body #medreseResearchModal #medreseResearchesGrid > div, html[data-theme="gokturk"] body #cephaneArmoryModal .modal-body > div > div, html[data-theme="gokturk"] body .quest-item-card:not(.is-ready), html[data-theme="gokturk"] body .rankings-table-wrapper, html[data-theme="gokturk"] body .wiki-card, html[data-theme="gokturk"] body .shop-shields-grid .shop-item-card, html[data-theme="gokturk"] body .report-box, html[data-theme="gokturk"] body .res-prod-table-container { background: linear-gradient(180deg, rgba(10, 11, 14, 0.92) 0%, rgba(14, 16, 21, 0.96) 100%) !important; border: 1.5px solid rgba(197, 155, 95, 0.38) !important; border-radius: 8px !important; box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.95), 0 1px 0 rgba(255, 255, 255, 0.06) !important; } /* ========================================================================== 7. LEFT SIDEBAR (SOL PANEL): 3D ORKHON CORNERS, RIVETED BRASS RAIL & IRON SLOTS ========================================================================== */ @media (min-width: 769px) { html[data-theme="gokturk"] body:not(.left-sidebar-is-collapsed) { --left-sidebar-offset: 92px; } html[data-theme="gokturk"] body:not(.sidebar-is-collapsed) { --right-sidebar-offset: 194px; } } html[data-theme="gokturk"] body .left-sidebar, html[data-theme="gokturk"] body .left-sidebar:not(.collapsed) { width: 92px !important; min-width: 92px !important; max-width: 92px !important; overflow: hidden !important; background-color: #12141a !important; background-image: linear-gradient(90deg, rgba(10, 12, 16, 0.92) 0%, rgba(22, 26, 34, 0.78) 85%, rgba(12, 14, 18, 0.95) 100%), url('../../assets/ui/theme-gokturk/gunmetal-bg.jpg') !important; background-position: 0 0, center center !important; background-size: 100% 100%, cover !important; background-repeat: no-repeat !important; border-right: 1px solid rgba(197, 155, 95, 0.55) !important; padding: 20px 16px 20px 6px !important; box-shadow: 8px 0 32px rgba(0, 0, 0, 0.92), inset -6px 0 16px rgba(0, 0, 0, 0.85) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="gokturk"] body .left-sidebar.collapsed { transform: translateX(-100%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html[data-theme="gokturk"] body .left-sidebar.collapsed::after { display: none !important; content: none !important; } /* Top-Layer Frame & Corner Brackets (::after) on Left Sidebar */ html[data-theme="gokturk"] body .left-sidebar:not(.collapsed)::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 30 !important; background-image: url('../../assets/ui/theme-gokturk/corner-tr.png'), url('../../assets/ui/theme-gokturk/corner-br.png'), url('../../assets/ui/theme-gokturk/rail-right.png'), url('../../assets/ui/theme-gokturk/rail-top.png'), url('../../assets/ui/theme-gokturk/rail-bottom.png') !important; background-position: top 0 right 0, bottom 0 right 0, center right 0, top 0 left 0, bottom 0 left 0 !important; background-size: 46px 46px, 46px 46px, 12px calc(100% - 72px), calc(100% - 36px) 11px, calc(100% - 36px) 11px !important; background-repeat: no-repeat !important; } /* Confine Left Sidebar scrolling strictly inside .menu-group so items never scroll into the top/bottom frame */ html[data-theme="gokturk"] body .left-sidebar .menu-group { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: none !important; padding: 1px 0 3px 0 !important; margin-bottom: 4px !important; gap: 2px !important; } html[data-theme="gokturk"] body .left-sidebar .menu-group::-webkit-scrollbar { display: none !important; width: 0 !important; } /* Forged Iron & Chiseled Brass Menu Plaques inside Left Sidebar CRITICAL: flex-shrink: 0 prevents Flexbox from crushing buttons on lower vertical resolutions! */ html[data-theme="gokturk"] body .left-sidebar .menu-item-btn { flex: 0 0 auto !important; flex-shrink: 0 !important; height: auto !important; min-height: 46px !important; box-sizing: border-box !important; overflow: visible !important; background: linear-gradient(180deg, rgba(24, 27, 35, 0.95) 0%, rgba(11, 13, 18, 0.98) 100%) !important; border: 1px solid rgba(197, 155, 95, 0.36) !important; border-bottom: 2px solid rgba(197, 155, 95, 0.65) !important; border-radius: 7px !important; padding: 3px 3px !important; margin-bottom: 2px !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 230, 165, 0.18), inset 0 -2px 6px rgba(0, 0, 0, 0.9) !important; transition: all 0.16s ease !important; } html[data-theme="gokturk"] body .left-sidebar .menu-item-btn .item-icon-3d { width: 28px !important; height: 28px !important; object-fit: contain !important; margin-bottom: 1px !important; flex-shrink: 0 !important; } html[data-theme="gokturk"] body .left-sidebar .menu-item-btn span:not(.item-icon):not(.event-badge) { color: #f3ebd8 !important; font-size: 10px !important; line-height: 1.15 !important; font-weight: 500 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important; } html[data-theme="gokturk"] body .left-sidebar .menu-item-btn:hover { background: linear-gradient(180deg, rgba(44, 34, 22, 0.96) 0%, rgba(22, 16, 10, 0.98) 100%) !important; border-color: #f59e0b !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 0 12px rgba(245, 158, 11, 0.38), inset 0 1px 0 rgba(255, 235, 175, 0.35) !important; } html[data-theme="gokturk"] body .left-sidebar .menu-item-btn:hover span:not(.item-icon):not(.event-badge) { color: #fde68a !important; } /* Left Sidebar Bottom "Köyüm / Harita" 3D Button */ html[data-theme="gokturk"] body .left-sidebar .quick-village-btn { padding: 6px 5px !important; min-height: 44px !important; color: #fff6d6 !important; flex-shrink: 0 !important; } /* Compact Left Sidebar Scaling for Lower Vertical Resolutions (<= 860px height) */ @media (max-height: 860px) { html[data-theme="gokturk"] body .left-sidebar:not(.collapsed) { padding: 16px 15px 16px 5px !important; } html[data-theme="gokturk"] body .left-sidebar .menu-item-btn { min-height: 40px !important; padding: 2px 2px !important; margin-bottom: 1.5px !important; } html[data-theme="gokturk"] body .left-sidebar .menu-item-btn .item-icon-3d { width: 24px !important; height: 24px !important; margin-bottom: 1px !important; } html[data-theme="gokturk"] body .left-sidebar .menu-item-btn span:not(.item-icon):not(.event-badge) { font-size: 10px !important; line-height: 1.1 !important; } html[data-theme="gokturk"] body .left-sidebar .quick-village-btn { min-height: 38px !important; padding: 4px 4px !important; } } /* Left Sidebar Toggle Hinge Button */ html[data-theme="gokturk"] body .left-sidebar-toggle-btn { top: calc(50% + 20px) !important; background: linear-gradient(90deg, #161820 0%, #3a2a18 65%, #c59b5f 100%) !important; border: 1.5px solid #e2b878 !important; border-left: none !important; color: #fde68a !important; box-shadow: 4px 0 14px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 235, 175, 0.4) !important; } html[data-theme="gokturk"] body:not(.left-sidebar-is-collapsed) .left-sidebar-toggle-btn { left: 92px !important; top: calc(50% + 20px) !important; } /* ========================================================================== 8. RIGHT SIDEBAR (SAĞ PANEL): 3D ORKHON CORNERS, RIVETED RAIL & CARTOUCHE HEADER Compact Non-Scrolling Sidebar Layout with Scrollable Villages Panel (.cities-grid) so Bottom Buttons (Raporlar, Ayarlar, Panel, Çıkış) are ALWAYS visible! ========================================================================== */ html[data-theme="gokturk"] body .right-sidebar, html[data-theme="gokturk"] body .right-sidebar:not(.collapsed) { width: 194px !important; min-width: 194px !important; max-width: 194px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; background-color: #12141a !important; background-image: linear-gradient(270deg, rgba(10, 12, 16, 0.92) 0%, rgba(22, 26, 34, 0.78) 85%, rgba(12, 14, 18, 0.95) 100%), url('../../assets/ui/theme-gokturk/gunmetal-bg.jpg') !important; background-position: 0 0, center center !important; background-size: 100% 100%, cover !important; background-repeat: no-repeat !important; border-left: 1px solid rgba(197, 155, 95, 0.55) !important; padding: 18px 11px 16px 19px !important; box-shadow: -10px 0 36px rgba(0, 0, 0, 0.92), inset 6px 0 16px rgba(0, 0, 0, 0.85) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="gokturk"] body .right-sidebar.collapsed { transform: translateX(100%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html[data-theme="gokturk"] body .right-sidebar.collapsed::after { display: none !important; content: none !important; } /* Top-Layer Frame & Corner Brackets (::after) on Right Sidebar */ html[data-theme="gokturk"] body .right-sidebar:not(.collapsed)::after { content: "" !important; position: fixed !important; top: 0 !important; bottom: 0 !important; right: 0 !important; width: 194px !important; pointer-events: none !important; z-index: 30 !important; background-image: url('../../assets/ui/theme-gokturk/corner-tl.png'), url('../../assets/ui/theme-gokturk/corner-bl.png'), url('../../assets/ui/theme-gokturk/rail-left.png'), url('../../assets/ui/theme-gokturk/rail-top.png'), url('../../assets/ui/theme-gokturk/rail-bottom.png') !important; background-position: top 0 left 0, bottom 0 left 0, center left 0, top 0 right 0, bottom 0 right 0 !important; background-size: 50px 50px, 50px 50px, 13px calc(100% - 78px), calc(100% - 38px) 11px, calc(100% - 38px) 11px !important; background-repeat: no-repeat !important; } /* Right Sidebar Top Logo Header - Text and Cartouche removed per user request */ html[data-theme="gokturk"] body .right-sidebar .logo-header { flex-shrink: 0 !important; background: none !important; padding: 3px 4px 1px 4px !important; margin-bottom: 2px !important; border: none !important; border-bottom: none !important; text-align: center !important; } html[data-theme="gokturk"] body .right-sidebar .logo-header .targun-logo-text { font-family: 'Cinzel', serif !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: 1px !important; color: #fde68a !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 12px rgba(245, 158, 11, 0.45) !important; } html[data-theme="gokturk"] body .right-sidebar .player-subtitle, html[data-theme="gokturk"] body .right-sidebar .player-subtitle span, html[data-theme="gokturk"] body .right-sidebar #sidebarPlayerName, html[data-theme="gokturk"] body .right-sidebar #sidebarTribeName { margin-top: 3px !important; color: #d6c7b2 !important; font-weight: 700 !important; font-size: 10px !important; } /* Right Sidebar Player XP & TP Card */ html[data-theme="gokturk"] body .right-sidebar .avatar-xp-badge { flex-shrink: 0 !important; background: linear-gradient(180deg, rgba(16, 19, 25, 0.96) 0%, rgba(9, 11, 15, 0.99) 100%) !important; border: 1.5px solid #c59b5f !important; border-radius: 7px !important; padding: 5px 8px !important; margin-bottom: 4px !important; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.95), 0 3px 8px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 224, 150, 0.22) !important; } html[data-theme="gokturk"] body .right-sidebar .avatar-xp-badge .xp-title, html[data-theme="gokturk"] body .right-sidebar .avatar-xp-badge .xp-val, html[data-theme="gokturk"] body .right-sidebar .avatar-xp-badge #sidebarVillageTpLabel, html[data-theme="gokturk"] body .right-sidebar .avatar-xp-badge #sidebarVillageTpName, html[data-theme="gokturk"] body .right-sidebar .avatar-xp-badge #sidebarVillageTpRatio { font-size: 10px !important; } html[data-theme="gokturk"] body .right-sidebar .avatar-icon { background: radial-gradient(circle at 35% 35%, #3a2a18 0%, #14100a 100%) !important; border: 1.5px solid #e2b878 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 235, 175, 0.4) !important; } html[data-theme="gokturk"] body .right-sidebar #sidebarVillageTpBar { background: linear-gradient(90deg, #b45309 0%, #f59e0b 60%, #fde047 100%) !important; box-shadow: 0 0 8px rgba(245, 158, 11, 0.65) !important; } /* Right Sidebar Section Titles ("KAYNAKLAR", "ŞEHİRLER") */ html[data-theme="gokturk"] body .right-sidebar .panel-section-title { flex-shrink: 0 !important; background: linear-gradient(90deg, rgba(197, 155, 95, 0.26) 0%, rgba(24, 20, 15, 0.96) 50%, rgba(197, 155, 95, 0.22) 100%) !important; border-top: 1.5px solid #c59b5f !important; border-bottom: 1.5px solid rgba(197, 155, 95, 0.65) !important; border-left: 3px solid #f59e0b !important; border-right: 3px solid #f59e0b !important; border-radius: 5px !important; padding: 2.5px 7px !important; margin: 3px 0 3px 0 !important; color: #fde68a !important; font-family: 'Cinzel', serif !important; font-weight: 900 !important; font-size: 10px !important; letter-spacing: 0.8px !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 230, 160, 0.25) !important; } html[data-theme="gokturk"] body .right-sidebar .panel-section-title span { font-size: 10px !important; } html[data-theme="gokturk"] body .right-sidebar .shield-table-pill, html[data-theme="gokturk"] body .right-sidebar .shield-table-pill span { background: linear-gradient(180deg, #422912 0%, #1f1206 100%) !important; border: 1px solid #f59e0b !important; color: #fde68a !important; font-size: 10px !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 230, 160, 0.3) !important; } /* Right Sidebar Resource Rows */ html[data-theme="gokturk"] body .right-sidebar .resources-list { flex-shrink: 0 !important; gap: 2px !important; margin-bottom: 4px !important; } html[data-theme="gokturk"] body .right-sidebar .resource-row { background: linear-gradient(90deg, rgba(28, 22, 15, 0.92) 0%, rgba(10, 12, 16, 0.96) 38%, rgba(14, 16, 22, 0.98) 100%) !important; border: 1px solid rgba(197, 155, 95, 0.36) !important; border-left: 3px solid #c59b5f !important; border-radius: 5px !important; padding: 2px 7px !important; min-height: 22px !important; font-size: 10px !important; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.92), 0 1px 3px rgba(0, 0, 0, 0.65) !important; } html[data-theme="gokturk"] body .right-sidebar .resource-row .resource-label, html[data-theme="gokturk"] body .right-sidebar .resource-row .resource-label span:not(.res-buff-indicator), html[data-theme="gokturk"] body .right-sidebar .resource-row .resource-val, html[data-theme="gokturk"] body .right-sidebar .resource-row .resource-val span:not(.res-buff-indicator) { font-size: 10px !important; } html[data-theme="gokturk"] body .right-sidebar .resource-row:hover { border-color: #f59e0b !important; border-left-color: #fbbf24 !important; background: linear-gradient(90deg, rgba(52, 34, 16, 0.92) 0%, rgba(16, 19, 25, 0.96) 50%, rgba(20, 23, 30, 0.98) 100%) !important; } /* Right Sidebar Compact & Scrollable Cities List (.cities-grid) Shrunk and internally scrollable so it never pushes bottom buttons off screen! */ html[data-theme="gokturk"] body .right-sidebar .cities-grid { flex: 1 1 auto !important; min-height: 56px !important; overflow-y: auto !important; overflow-x: hidden !important; display: flex !important; flex-direction: column !important; gap: 2.5px !important; padding: 3px 3px !important; margin-bottom: 5px !important; background: rgba(8, 10, 14, 0.55) !important; border: 1px solid rgba(197, 155, 95, 0.25) !important; border-radius: 6px !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85) !important; scrollbar-width: thin !important; scrollbar-color: rgba(197, 155, 95, 0.45) transparent !important; } html[data-theme="gokturk"] body .right-sidebar .cities-grid::-webkit-scrollbar { width: 4px !important; } html[data-theme="gokturk"] body .right-sidebar .cities-grid::-webkit-scrollbar-thumb { background: rgba(197, 155, 95, 0.45) !important; border-radius: 4px !important; } html[data-theme="gokturk"] body .right-sidebar .cities-grid .city-btn { flex-shrink: 0 !important; padding: 2.5px 7px !important; min-height: 23px !important; border-radius: 5px !important; } html[data-theme="gokturk"] body .right-sidebar .cities-grid .city-btn, html[data-theme="gokturk"] body .right-sidebar .cities-grid .city-btn div, html[data-theme="gokturk"] body .right-sidebar .cities-grid .city-btn span, html[data-theme="gokturk"] body .right-sidebar .cities-grid .city-btn .city-name { font-size: 10px !important; line-height: 1.15 !important; } html[data-theme="gokturk"] body .right-sidebar .cities-grid .city-btn:not(.active) { background: linear-gradient(180deg, rgba(20, 23, 30, 0.95) 0%, rgba(10, 12, 16, 0.98) 100%) !important; border: 1px solid rgba(197, 155, 95, 0.38) !important; border-left: 3px solid rgba(197, 155, 95, 0.75) !important; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.65) !important; } html[data-theme="gokturk"] body .right-sidebar .cities-grid .city-btn.active { background: linear-gradient(135deg, rgba(180, 83, 9, 0.50) 0%, rgba(44, 25, 10, 0.94) 55%, rgba(18, 13, 8, 0.98) 100%) !important; border: 1.5px solid #f59e0b !important; border-left: 3.5px solid #fde047 !important; box-shadow: 0 0 10px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 235, 165, 0.35), 0 2px 6px rgba(0, 0, 0, 0.8) !important; } html[data-theme="gokturk"] body .right-sidebar .cities-grid .city-btn.active .city-name { color: #fde68a !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important; } /* Right Sidebar Bottom Action Bar (Raporlar, Ayarlar, Panel, Çıkış) - Pinned at bottom */ html[data-theme="gokturk"] body .right-sidebar .events-bar { flex-shrink: 0 !important; margin-top: auto !important; background: linear-gradient(180deg, rgba(16, 18, 24, 0.96) 0%, rgba(8, 10, 14, 0.99) 100%) !important; border: 1.5px solid rgba(197, 155, 95, 0.48) !important; border-top: 2px solid #c59b5f !important; border-radius: 8px !important; padding: 4px 3px !important; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.92), 0 4px 12px rgba(0, 0, 0, 0.8) !important; display: flex !important; flex-direction: column !important; gap: 3px !important; width: 100% !important; box-sizing: border-box !important; } html[data-theme="gokturk"] body .right-sidebar .events-bar .events-bar-row { display: flex !important; gap: 4px !important; justify-content: space-around !important; align-items: center !important; width: 100% !important; } html[data-theme="gokturk"] body .right-sidebar .events-bar .event-circle-btn { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: 48px !important; background: linear-gradient(180deg, rgba(28, 32, 40, 0.92) 0%, rgba(12, 14, 19, 0.96) 100%) !important; border: 1px solid rgba(197, 155, 95, 0.38) !important; border-bottom: 2px solid rgba(197, 155, 95, 0.65) !important; border-radius: 7px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 224, 150, 0.16) !important; transition: all 0.15s ease !important; } html[data-theme="gokturk"] body .right-sidebar .event-circle-btn .event-icon-3d { width: 28px !important; height: 28px !important; } html[data-theme="gokturk"] body .right-sidebar .event-circle-btn span:not(.event-badge) { font-size: 10px !important; font-weight: 500 !important; line-height: 1.1 !important; } html[data-theme="gokturk"] body .right-sidebar .event-circle-btn.has-notification, html[data-theme="gokturk"] body #sidebarReportsBtn.has-notification, html[data-theme="gokturk"] body #sidebarMessagesBtn.has-notification { background: linear-gradient(180deg, #f97316 0%, #ea580c 100%) !important; border: 1.5px solid #fdba74 !important; border-radius: 8px !important; box-shadow: 0 0 14px rgba(249, 115, 22, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; } html[data-theme="gokturk"] body .right-sidebar .event-circle-btn:hover { border-color: #f59e0b !important; background: linear-gradient(180deg, rgba(46, 34, 20, 0.95) 0%, rgba(20, 15, 10, 0.98) 100%) !important; box-shadow: 0 0 10px rgba(245, 158, 11, 0.35) !important; transform: translateY(-1px) !important; } /* Right Sidebar Toggle Hinge Button */ html[data-theme="gokturk"] body .right-sidebar-toggle-btn { top: calc(max(50%, 380px) + 20px) !important; background: linear-gradient(270deg, #161820 0%, #3a2a18 65%, #c59b5f 100%) !important; border: 1.5px solid #e2b878 !important; border-right: none !important; color: #fde68a !important; box-shadow: -4px 0 14px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 235, 175, 0.4) !important; } html[data-theme="gokturk"] body:not(.sidebar-is-collapsed) .right-sidebar-toggle-btn, html[data-theme="gokturk"] body:not(.sidebar-is-collapsed) .right-chat-tabs { right: 194px !important; } /* ========================================================================== 9. BOTTOM TROOP BAR (ALT ASKER BARI): SINGLE STATIONARY 3D ORKHON FRAME Frame lives on non-scrolling .bottom-troop-bar-dock (slides smoothly up/down) while troop cards scroll smoothly inside .bottom-troop-bar! ========================================================================== */ html[data-theme="gokturk"] body .bottom-troop-bar-dock { position: absolute !important; bottom: 6px !important; left: calc(50% + (var(--left-sidebar-offset, 116px) - var(--right-sidebar-offset, 242px)) / 2) !important; right: auto !important; transform: translate3d(-50%, 0, 0) !important; width: fit-content !important; max-width: calc(100vw - var(--left-sidebar-offset, 116px) - var(--right-sidebar-offset, 242px) - 24px) !important; background-color: #13161d !important; background-image: linear-gradient(180deg, rgba(24, 28, 36, 0.88) 0%, rgba(11, 13, 18, 0.96) 100%), url('../../assets/ui/theme-gokturk/gunmetal-bg.jpg') !important; background-position: 0 0, center center !important; background-size: 100% 100%, cover !important; background-repeat: no-repeat !important; border: 1px solid rgba(197, 155, 95, 0.45) !important; border-radius: 6px !important; padding: 14px 18px 14px 18px !important; box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.92), inset 0 0 22px rgba(0, 0, 0, 0.9) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: auto !important; box-sizing: border-box !important; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), left 0.28s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important; will-change: transform !important; } /* Single Stationary Top-Layer Frame & Corner Brackets (::after) on .bottom-troop-bar-dock */ html[data-theme="gokturk"] body .bottom-troop-bar-dock::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 30 !important; border-radius: inherit !important; background-image: url('../../assets/ui/theme-gokturk/corner-tl.png'), url('../../assets/ui/theme-gokturk/corner-tr.png'), url('../../assets/ui/theme-gokturk/corner-bl.png'), url('../../assets/ui/theme-gokturk/corner-br.png'), url('../../assets/ui/theme-gokturk/rail-top.png'), url('../../assets/ui/theme-gokturk/rail-bottom.png'), url('../../assets/ui/theme-gokturk/rail-left.png'), url('../../assets/ui/theme-gokturk/rail-right.png') !important; background-position: top 0 left 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0, top 0 center, bottom 0 center, center left 0, center right 0 !important; background-size: 46px 46px, 46px 46px, 46px 46px, 46px 46px, calc(100% - 72px) 12px, calc(100% - 72px) 12px, 12px calc(100% - 72px), 12px calc(100% - 72px) !important; background-repeat: no-repeat !important; } html[data-theme="gokturk"] body .bottom-troop-bar-dock.collapsed { bottom: 0px !important; transform: translate3d(-50%, 100%, 0) !important; box-shadow: none !important; } /* Inner Scroll Container (.bottom-troop-bar): Purely transparent viewport inside the dock frame */ html[data-theme="gokturk"] body .bottom-troop-bar { position: relative !important; width: 100% !important; max-width: 100% !important; height: 118px !important; min-height: 118px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 4px !important; padding: 2px 4px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow-x: auto !important; overflow-y: hidden !important; } html[data-theme="gokturk"] body .bottom-troop-bar::after, html[data-theme="gokturk"] body .bottom-troop-bar:not(.collapsed)::after { display: none !important; content: none !important; } html[data-theme="gokturk"] body .bottom-troop-bar.collapsed { pointer-events: none !important; } /* Unlocked Troop Cards inside Bottom Troop Bar */ html[data-theme="gokturk"] body .bottom-troop-bar .troop-card-item { height: 118px !important; padding: 5px 4px 4px 4px !important; overflow: visible !important; } html[data-theme="gokturk"] body .bottom-troop-bar .troop-card-portrait { width: 54px !important; height: 54px !important; margin-bottom: 2px !important; } html[data-theme="gokturk"] body .bottom-troop-bar .troop-card-count-badge { font-size: 11px !important; line-height: 1.2 !important; min-height: 16px !important; padding: 1px 6px !important; margin-top: 1px !important; margin-bottom: 1px !important; } html[data-theme="gokturk"] body .bottom-troop-bar .troop-card-item:not(.locked), html[data-theme="gokturk"] body .troop-card-item:not(.locked) { background: linear-gradient(180deg, #1c2029 0%, #0a0c10 100%) !important; border: 1.5px solid #c59b5f !important; border-bottom: 2.5px solid #9a723c !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 230, 165, 0.28), inset 0 -3px 8px rgba(0, 0, 0, 0.95) !important; } html[data-theme="gokturk"] body .bottom-troop-bar .troop-card-item:not(.locked):hover { border-color: #f59e0b !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.95), 0 0 14px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 240, 185, 0.45) !important; transform: translateY(-2px) !important; } html[data-theme="gokturk"] body .bottom-troop-bar .troop-card-item:not(.locked) .troop-card-name { color: #fde68a !important; font-weight: 800 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important; font-size: 11px !important; line-height: 1.35 !important; margin-top: 1px !important; margin-bottom: 1px !important; padding-bottom: 2px !important; overflow: visible !important; } /* Locked Troop Cards inside Bottom Troop Bar */ html[data-theme="gokturk"] body .bottom-troop-bar .troop-card-item.locked, html[data-theme="gokturk"] body .troop-card-item.locked { background: linear-gradient(180deg, #111319 0%, #08090d 100%) !important; border: 1px solid rgba(197, 155, 95, 0.28) !important; border-radius: 8px !important; opacity: 0.62 !important; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.95) !important; } /* Bottom Troop Bar Collapse Shield Button */ html[data-theme="gokturk"] body .bottom-troop-bar-toggle-btn { background: linear-gradient(180deg, #c59b5f 0%, #5c3d18 45%, #161820 100%) !important; border: 1.5px solid #fde68a !important; border-bottom: none !important; color: #fff8ea !important; box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 240, 190, 0.5) !important; } /* ========================================================================== 10. TOP RESOURCE BAR, NEW VILLAGE FOUNDING BANNER & QUICK ACTIONS ========================================================================== */ html[data-theme="gokturk"] body .top-mobile-resource-bar { background-color: #111319 !important; background-image: linear-gradient(180deg, rgba(26, 30, 38, 0.95) 0%, rgba(11, 13, 18, 0.99) 100%), url('../../assets/ui/theme-gokturk/gunmetal-bg.jpg') !important; background-position: 0 0, center center !important; background-size: 100% 100%, cover !important; background-repeat: no-repeat !important; border: 1.5px solid #c59b5f !important; border-radius: 8px !important; padding: 4px 12px !important; min-height: 34px !important; max-height: 40px !important; height: auto !important; max-width: calc(100vw - var(--left-sidebar-offset, 92px) - var(--right-sidebar-offset, 194px) - 16px) !important; overflow-y: hidden !important; overflow-x: auto !important; scrollbar-width: none !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.88), inset 0 -1px 0 rgba(245, 158, 11, 0.25) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="gokturk"] body .top-mobile-resource-bar::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* Compact Individual Resource Pills inside Top Resource Bar */ html[data-theme="gokturk"] body .top-mobile-resource-bar .inline-res-item { font-size: 12px !important; } html[data-theme="gokturk"] body .top-mobile-resource-bar .inline-res-item span:not(.res-buff-indicator):not(.res-diamond-plus):not(.res-icon) { font-size: 12px !important; } html[data-theme="gokturk"] body .top-mobile-resource-bar .inline-res-item:not(.res-diamond) { background: transparent !important; border: none !important; border-radius: 5px !important; padding: 1px 4px !important; height: 24px !important; min-height: 24px !important; box-shadow: none !important; } min-height: 24px !important; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.95) !important; } html[data-theme="gokturk"] body .top-mobile-resource-bar .inline-res-item.res-diamond { background: linear-gradient(180deg, #1b1610 0%, #0d0a07 100%) !important; border: 1px solid #f59e0b !important; border-radius: 5px !important; padding: 2px 7px !important; height: 24px !important; min-height: 24px !important; box-shadow: 0 0 8px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(254, 240, 138, 0.25) !important; } html[data-theme="gokturk"] body .top-mobile-resource-bar .top-village-badge { background: linear-gradient(180deg, #241b12 0%, #120d08 100%) !important; border: 1px solid #c59b5f !important; border-radius: 5px !important; padding: 2px 8px !important; height: 24px !important; min-height: 24px !important; } /* NEW VILLAGE FOUNDING BUTTON (#foundVillageTopBtn - "🏰 3. Köyü Kur") Bespoke Chiseled Göktürk Brass & Molten Amber Sovereign Banner (No muddy rectangular box!) */ html[data-theme="gokturk"] body #foundVillageTopBar { top: max(46px, calc(env(safe-area-inset-top, 0px) + 46px)) !important; } html[data-theme="gokturk"] body #foundVillageTopBtn:not(.is-placing-village) { background: linear-gradient(180deg, #3b240e 0%, #1f1206 55%, #110903 100%) !important; border: 1.5px solid #f59e0b !important; border-bottom: 2.5px solid #b45309 !important; outline: 1px solid rgba(197, 155, 95, 0.35) !important; border-radius: 7px !important; color: #fde68a !important; font-family: 'Cinzel', serif !important; font-weight: 900 !important; font-size: 11.5px !important; letter-spacing: 0.6px !important; padding: 5px 16px !important; min-height: 32px !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(245, 158, 11, 0.45) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.92), 0 0 14px rgba(245, 158, 11, 0.32), inset 0 1px 0 rgba(255, 240, 185, 0.45), inset 0 -2px 6px rgba(0, 0, 0, 0.85) !important; filter: none !important; transition: all 0.18s ease !important; } html[data-theme="gokturk"] body #foundVillageTopBtn:not(.is-placing-village):hover { background: linear-gradient(180deg, #523212 0%, #2e1b09 55%, #180d04 100%) !important; border-color: #fde047 !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.95), 0 0 18px rgba(245, 158, 11, 0.55), inset 0 1px 0 rgba(255, 248, 210, 0.6) !important; } html[data-theme="gokturk"] body #foundVillageTopBtn.is-placing-village { background: linear-gradient(180deg, #5c1616 0%, #300a0a 55%, #190404 100%) !important; border: 1.5px solid #ef4444 !important; border-bottom: 2.5px solid #991b1b !important; border-radius: 7px !important; color: #fecaca !important; font-weight: 900 !important; font-size: 11.5px !important; padding: 5px 16px !important; min-height: 32px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.92), 0 0 14px rgba(239, 68, 68, 0.45) !important; filter: none !important; } /* Floating Quick Action Buttons (Araştır, Geliştir, Üretim, Pazar, Destek, Gelen, Giden) Sized and padded so both the 3D icon and text fit 100% cleanly inside the Orkhon frame! */ html[data-theme="gokturk"] body .action-circle-btn { width: 64px !important; height: 64px !important; padding: 5px 3px !important; box-sizing: border-box !important; overflow: visible !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1px !important; background-color: #14171e !important; background-image: url('../../assets/ui/theme-gokturk/corner-tl.png'), url('../../assets/ui/theme-gokturk/corner-tr.png'), url('../../assets/ui/theme-gokturk/corner-bl.png'), url('../../assets/ui/theme-gokturk/corner-br.png'), linear-gradient(180deg, rgba(28, 32, 42, 0.92) 0%, rgba(11, 13, 18, 0.97) 100%), url('../../assets/ui/theme-gokturk/gunmetal-bg.jpg') !important; background-position: top 0 left 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0, 0 0, center center !important; background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px, 100% 100%, cover !important; background-repeat: no-repeat !important; border: 1.5px solid #c59b5f !important; border-radius: 8px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 230, 165, 0.25), inset 0 -3px 8px rgba(0, 0, 0, 0.9) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="gokturk"] body .action-circle-btn .action-icon-3d { width: 26px !important; height: 26px !important; object-fit: contain !important; margin: 0 !important; flex-shrink: 0 !important; } html[data-theme="gokturk"] body .action-circle-btn span:not(.event-badge) { color: #fde68a !important; font-size: 9.5px !important; line-height: 1.1 !important; font-weight: 800 !important; margin-top: 1px !important; max-width: 56px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important; } html[data-theme="gokturk"] body .action-circle-btn:hover { border-color: #f59e0b !important; filter: brightness(1.15) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.95), 0 0 14px rgba(245, 158, 11, 0.45) !important; } /* Center HUD Server Time & Coordinates Bar */ html[data-theme="gokturk"] body #centerHudBar, html[data-theme="gokturk"] body .center-hud-bar, html[data-theme="gokturk"] body .village-name-badge { background-color: #13161d !important; background-image: linear-gradient(180deg, rgba(24, 28, 36, 0.94) 0%, rgba(11, 13, 18, 0.98) 100%), url('../../assets/ui/theme-gokturk/gunmetal-bg.jpg') !important; background-size: 100% 100%, cover !important; border: 1.5px solid #c59b5f !important; border-left: 3px solid #f59e0b !important; border-right: 3px solid #f59e0b !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.88), inset 0 1px 0 rgba(255, 230, 165, 0.25) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ========================================================================== 11. CHAT WINDOWS & VERTICAL CHAT TABS (SOHBET PENCERESİ VE DİKEY SEKMELER) ========================================================================== */ html[data-theme="gokturk"] body .right-chat-tabs .chat-tab-vertical, html[data-theme="gokturk"] body .right-chat-tabs .chat-tab-vertical span { border: none !important; border-radius: 7px 0 0 7px !important; box-shadow: -5px 3px 14px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 230, 165, 0.3) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.6px !important; } html[data-theme="gokturk"] body .right-chat-tabs .chat-tab-vertical.tab-alliance { background: linear-gradient(180deg, #52280b 0%, #241104 100%) !important; border: none !important; color: #fde68a !important; } html[data-theme="gokturk"] body .right-chat-tabs .chat-tab-vertical.tab-general { background: linear-gradient(180deg, #232732 0%, #101319 100%) !important; border: none !important; color: #f3ebd8 !important; } html[data-theme="gokturk"] body .right-chat-tabs .chat-tab-vertical.tab-assistant { background: linear-gradient(180deg, #332414 0%, #171008 100%) !important; border: none !important; color: #fef08a !important; } html[data-theme="gokturk"] body .right-chat-tabs .chat-tab-vertical:hover { filter: brightness(1.2) !important; border: none !important; box-shadow: -6px 3px 16px rgba(245, 158, 11, 0.35), -4px 2px 10px rgba(0, 0, 0, 0.9) !important; } /* Slide-Out Floating Chat Window (#chatSlideWindow) - Frame thinned 50% & 10px fonts per user request */ html[data-theme="gokturk"] body #chatSlideWindow { background-color: #14171d !important; background-image: linear-gradient(180deg, rgba(24, 28, 36, 0.90) 0%, rgba(12, 14, 18, 0.96) 100%), url('../../assets/ui/theme-gokturk/gunmetal-bg.jpg') !important; background-position: 0 0, center center !important; background-size: 100% 100%, cover !important; background-repeat: no-repeat !important; border: 1px solid rgba(197, 155, 95, 0.35) !important; border-radius: 6px !important; padding: 14px 12px 12px 12px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), inset 0 0 14px rgba(0, 0, 0, 0.85) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Top-Layer Frame & Corner Brackets (::after) on Chat Slide Window - 50% Thinner Rails & Corners */ html[data-theme="gokturk"] body #chatSlideWindow::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 30 !important; border-radius: inherit !important; background-image: url('../../assets/ui/theme-gokturk/corner-tl.png'), url('../../assets/ui/theme-gokturk/corner-tr.png'), url('../../assets/ui/theme-gokturk/corner-bl.png'), url('../../assets/ui/theme-gokturk/corner-br.png'), url('../../assets/ui/theme-gokturk/rail-top.png'), url('../../assets/ui/theme-gokturk/rail-bottom.png'), url('../../assets/ui/theme-gokturk/rail-left.png'), url('../../assets/ui/theme-gokturk/rail-right.png') !important; background-position: top 0 left 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0, top 0 center, bottom 0 center, center left 0, center right 0 !important; background-size: 27px 27px, 27px 27px, 27px 27px, 27px 27px, calc(100% - 44px) 7px, calc(100% - 44px) 7px, 7px calc(100% - 44px), 7px calc(100% - 44px) !important; background-repeat: no-repeat !important; } /* Chat Window Header Cartouche & Medallion Close Button */ html[data-theme="gokturk"] body #chatSlideWindow > div:first-child { position: relative !important; display: flex !important; justify-content: center !important; align-items: center !important; padding-bottom: 5px !important; margin-bottom: 6px !important; border-bottom: 1px solid rgba(197, 155, 95, 0.3) !important; } html[data-theme="gokturk"] body #chatSlideWindow #chatTitle { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 4px 18px !important; background: url('../../assets/ui/theme-gokturk/header-cartouche.png') center center / 100% 100% no-repeat !important; color: #fde68a !important; font-family: 'Cinzel', serif !important; font-weight: 900 !important; font-size: 11px !important; letter-spacing: 0.6px !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important; margin: 0 auto !important; } html[data-theme="gokturk"] body #chatSlideWindow > div:first-child > button { position: absolute !important; right: 2px !important; top: 45% !important; transform: translateY(-50%) !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: url('../../assets/ui/theme-gokturk/medallion-close.png') center center / 100% 100% no-repeat !important; border: none !important; color: transparent !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.85) !important; } /* Chat Sub-Tab Buttons inside #chatSlideWindow */ html[data-theme="gokturk"] body #chatSlideWindow .chat-chamfer-tab-btn { background: linear-gradient(180deg, #1b1f28 0%, #0d0f14 100%) !important; border: 1px solid rgba(197, 155, 95, 0.3) !important; color: #9ca3af !important; font-size: 10px !important; font-weight: 700 !important; padding: 3px 6px !important; } html[data-theme="gokturk"] body #chatSlideWindow .chat-chamfer-tab-btn.active { background: linear-gradient(180deg, #d97706 0%, #78350f 100%) !important; border: 1.5px solid #fde047 !important; color: #fff8ea !important; box-shadow: 0 0 10px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 235, 175, 0.4) !important; } /* Chat Messages Sunken Well (#chatWindow) */ html[data-theme="gokturk"] body #chatSlideWindow .chat-window, html[data-theme="gokturk"] body #chatWindow { background: linear-gradient(180deg, rgba(8, 10, 14, 0.95) 0%, rgba(12, 14, 19, 0.98) 100%) !important; border: 1px solid rgba(197, 155, 95, 0.30) !important; border-radius: 7px !important; padding: 6px 8px !important; margin-bottom: 6px !important; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.95) !important; font-size: 10px !important; } html[data-theme="gokturk"] body #chatSlideWindow .chat-bubble { background: linear-gradient(180deg, rgba(24, 28, 36, 0.92) 0%, rgba(15, 18, 24, 0.96) 100%) !important; border: 1px solid rgba(197, 155, 95, 0.20) !important; border-left: 1.5px solid #c59b5f !important; color: #f3ebd8 !important; font-size: 10px !important; padding: 3px 6px !important; margin-bottom: 4px !important; } html[data-theme="gokturk"] body #chatSlideWindow .chat-bubble * { font-size: 10px !important; } html[data-theme="gokturk"] body #chatSlideWindow .ai-chip-btn { font-size: 10px !important; padding: 2px 6px !important; } html[data-theme="gokturk"] body #chatInput { background: #090b0f !important; border: 1px solid rgba(197, 155, 95, 0.35) !important; color: #fde68a !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.95) !important; font-size: 10px !important; padding: 4px 8px !important; height: 30px !important; } html[data-theme="gokturk"] body #chatSlideWindow button[onclick*="sendChatMessage"] { font-size: 11px !important; font-weight: 700 !important; padding: 4px 12px !important; height: 30px !important; } /* ========================================================================== 12. MOBILE & TABLET RESPONSIVE OVERRIDES (<= 768px) ========================================================================== */ html[data-theme="gokturk"] body .mobile-bottom-nav { background-color: #12141a !important; background-image: url('../../assets/ui/theme-gokturk/rail-top.png'), linear-gradient(180deg, rgba(22, 26, 34, 0.95) 0%, rgba(10, 12, 16, 0.99) 100%), url('../../assets/ui/theme-gokturk/gunmetal-bg.jpg') !important; background-position: top 0 center, 0 0, center center !important; background-size: 100% 10px, 100% 100%, cover !important; background-repeat: no-repeat !important; border-top: 1.5px solid #c59b5f !important; } /* 12.0 Strictly Hide Desktop Sidebars, Toggle Hinges & Vertical Chat Tabs on Mobile Portrait */ html.mobile-portrait-mode[data-theme="gokturk"] body, html.mobile-portrait-mode[data-theme="gokturk"] body .app-layout { --left-sidebar-offset: 0px !important; --right-sidebar-offset: 0px !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .left-sidebar, html.mobile-portrait-mode[data-theme="gokturk"] body .left-sidebar:not(.collapsed), html.mobile-portrait-mode[data-theme="gokturk"] body .right-sidebar, html.mobile-portrait-mode[data-theme="gokturk"] body .right-sidebar:not(.collapsed), html.mobile-portrait-mode[data-theme="gokturk"] body .left-sidebar-toggle-btn, html.mobile-portrait-mode[data-theme="gokturk"] body .right-sidebar-toggle-btn, html.mobile-portrait-mode[data-theme="gokturk"] body .right-chat-tabs { display: none !important; } /* 12A. Mobile Top Resource Bar: Expand to fit 2-row 4x2 resource grid cleanly without clipping! */ html.mobile-portrait-mode[data-theme="gokturk"] body .top-mobile-resource-bar { top: env(safe-area-inset-top, 4px) !important; left: 4px !important; right: 4px !important; transform: none !important; width: auto !important; min-width: 0 !important; max-width: calc(var(--logical-vw, 100vw) - 8px) !important; box-sizing: border-box !important; height: auto !important; min-height: 48px !important; max-height: none !important; padding: 3px 5px !important; border: 1.5px solid #c59b5f !important; border-radius: 8px !important; overflow: visible !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .top-mobile-resource-bar .top-inline-resources-list { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; grid-template-rows: auto auto !important; gap: 2px 3px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .top-mobile-resource-bar .inline-res-item:not(.res-diamond), html.mobile-portrait-mode[data-theme="gokturk"] body .top-mobile-resource-bar .inline-res-item.res-diamond { height: 20px !important; min-height: 20px !important; padding: 1px 2px !important; font-size: 12px !important; gap: 2px !important; border-radius: 4px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; justify-content: center !important; overflow: hidden !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .top-mobile-resource-bar .inline-res-item span:not(.res-buff-indicator):not(.res-diamond-plus):not(.res-icon) { font-size: 12px !important; } html.mobile-portrait-mode[data-theme="gokturk"] body #foundVillageTopBar { top: calc(env(safe-area-inset-top, 4px) + 60px) !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .village-top-header { padding-top: calc(60px + env(safe-area-inset-top, 4px)) !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .village-construction-queue-bar { top: calc(114px + env(safe-area-inset-top, 4px)) !important; } html.mobile-portrait-mode[data-theme="gokturk"] body #incomingAttackAlertTooltip { top: calc(106px + env(safe-area-inset-top, 4px)) !important; } /* 12B. Mobile Village Quick Action Buttons (.action-circle-btn): 48x48px frame with 20px icon & 8px label so icon + text never spill outside the frame! */ html.mobile-portrait-mode[data-theme="gokturk"] body .action-circle-btn { width: 48px !important; height: 48px !important; padding: 3px 2px !important; border-radius: 7px !important; gap: 1px !important; background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% 100%, cover !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .action-circle-btn .action-icon-3d { width: 20px !important; height: 20px !important; margin: 0 !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .action-circle-btn span:not(.event-badge) { font-size: 8px !important; line-height: 1.05 !important; letter-spacing: -0.2px !important; margin-top: 0 !important; max-width: 44px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* 12C. Mobile Bottom Troop Bar Dock: Full-width stationary frame on dock, smooth scrolling inside bar */ html.mobile-portrait-mode[data-theme="gokturk"] body .bottom-troop-bar-dock { bottom: 0 !important; left: 0 !important; right: 0 !important; transform: translate3d(0, 0, 0) !important; width: 100% !important; max-width: 100% !important; border-radius: 6px 6px 0 0 !important; padding: 12px 12px 10px 12px !important; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .bottom-troop-bar-dock.collapsed { bottom: 0 !important; transform: translate3d(0, 100%, 0) !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .bottom-troop-bar-dock::after { background-size: 36px 36px, 36px 36px, 36px 36px, 36px 36px, calc(100% - 56px) 10px, calc(100% - 56px) 10px, 10px calc(100% - 56px), 10px calc(100% - 56px) !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .bottom-troop-bar { height: 114px !important; min-height: 114px !important; padding: 2px 4px !important; background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .bottom-troop-bar .troop-card-item { height: 108px !important; } /* 12D. Mobile Modals Bottom-Sheet Frame */ html.mobile-portrait-mode[data-theme="gokturk"] body .modal-dark-card, html.mobile-portrait-mode[data-theme="gokturk"] body .modal-window, html.mobile-portrait-mode[data-theme="gokturk"] body .ranking-modal-card, html.mobile-portrait-mode[data-theme="gokturk"] body .send-movement-modal-card { background-image: url('../../assets/ui/theme-gokturk/corner-tl.png'), url('../../assets/ui/theme-gokturk/corner-tr.png'), url('../../assets/ui/theme-gokturk/rail-top.png'), linear-gradient(180deg, rgba(22, 25, 31, 0.94) 0%, rgba(13, 15, 19, 0.98) 100%), url('../../assets/ui/theme-gokturk/gunmetal-bg.jpg') !important; background-position: top 0 left 0, top 0 right 0, top 0 center, 0 0, center center !important; background-size: 54px 54px, 54px 54px, calc(100% - 86px) 13px, 100% 100%, cover !important; border-radius: 6px 6px 0 0 !important; padding: 20px 14px 18px 14px !important; } /* ========================================================================== 13. UNIFIED PORTRAIT & MOBILE HYBRID LANDSCAPE FOR GÖKTÜRK THEME ========================================================================== */ /* 13A. Class-Based Portrait Mode (Mobile Portrait & Narrowed Desktop Portrait Window) */ html.mobile-portrait-mode[data-theme="gokturk"] body, html.mobile-portrait-mode[data-theme="gokturk"] body .app-layout { --left-sidebar-offset: 0px !important; --right-sidebar-offset: 0px !important; } html.mobile-portrait-mode[data-theme="gokturk"] body .left-sidebar, html.mobile-portrait-mode[data-theme="gokturk"] body .left-sidebar:not(.collapsed), html.mobile-portrait-mode[data-theme="gokturk"] body .right-sidebar, html.mobile-portrait-mode[data-theme="gokturk"] body .right-sidebar:not(.collapsed), html.mobile-portrait-mode[data-theme="gokturk"] body .left-sidebar-toggle-btn, html.mobile-portrait-mode[data-theme="gokturk"] body .right-sidebar-toggle-btn, html.mobile-portrait-mode[data-theme="gokturk"] body .right-chat-tabs { display: none !important; } /* 13B. Mobile Hybrid Landscape Mode (Mobile Browser & Android APK Landscape) */ html.mobile-landscape-mode[data-theme="gokturk"] body, html.mobile-landscape-mode[data-theme="gokturk"] body .app-layout { --left-sidebar-offset: 62px !important; --right-sidebar-offset: 132px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body.left-sidebar-is-collapsed, html.mobile-landscape-mode[data-theme="gokturk"] body .app-layout.left-sidebar-is-collapsed { --left-sidebar-offset: 0px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body.sidebar-is-collapsed, html.mobile-landscape-mode[data-theme="gokturk"] body .app-layout.sidebar-is-collapsed { --right-sidebar-offset: 0px !important; } /* Center Game Area is ALWAYS 100% Full Viewport (Never shrunk by sidebars or troop bar) */ html.mobile-landscape-mode[data-theme="gokturk"] body .center-game-area { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Left Sidebar in Mobile Landscape (62px when open, collapsible via .collapsed) */ html.mobile-landscape-mode[data-theme="gokturk"] body .left-sidebar { display: flex !important; width: 62px !important; min-width: 62px !important; max-width: 62px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .left-sidebar:not(.collapsed) { display: flex !important; visibility: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; width: 62px !important; min-width: 62px !important; max-width: 62px !important; padding: 6px 4px 10px 2px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .left-sidebar.collapsed { transform: translateX(-100%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .left-sidebar:not(.collapsed)::after { background-size: 28px 28px, 28px 28px, 8px calc(100% - 48px), calc(100% - 24px) 8px, calc(100% - 24px) 8px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .left-sidebar .menu-item-btn { min-height: 30px !important; padding: 2px 1px !important; margin-bottom: 1.5px !important; border-radius: 5px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .left-sidebar .menu-item-btn .item-icon-3d { width: 20px !important; height: 20px !important; margin-bottom: 0 !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .left-sidebar .menu-item-btn span:not(.item-icon):not(.event-badge) { font-size: 10px !important; line-height: 1.05 !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .left-sidebar .quick-village-btn { min-height: 30px !important; padding: 2px 2px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .left-sidebar-toggle-btn { display: flex !important; left: 62px !important; top: calc(50% + 20px) !important; transform: translateY(-50%) !important; width: 18px !important; height: 34px !important; z-index: 95 !important; } html.mobile-landscape-mode[data-theme="gokturk"] body.left-sidebar-is-collapsed .left-sidebar-toggle-btn, html.mobile-landscape-mode[data-theme="gokturk"] body .app-layout.left-sidebar-is-collapsed .left-sidebar-toggle-btn { left: 0px !important; } /* Right Sidebar in Mobile Landscape (132px when open, smooth touch scroll, collapsible via .collapsed) */ html.mobile-landscape-mode[data-theme="gokturk"] body .right-sidebar { display: flex !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .right-sidebar:not(.collapsed) { display: flex !important; visibility: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; padding: 8px 5px 24px 9px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; overscroll-behavior-y: contain !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .right-sidebar.collapsed { transform: translateX(100%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .right-sidebar:not(.collapsed)::after { width: 132px !important; background-size: 32px 32px, 32px 32px, 8px calc(100% - 52px), calc(100% - 26px) 8px, calc(100% - 26px) 8px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .right-sidebar .cities-grid { flex: 0 0 auto !important; max-height: none !important; overflow-y: visible !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .right-sidebar .events-bar { margin-top: 4px !important; padding: 2px 2px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .right-sidebar .event-circle-btn { width: 34px !important; min-width: 32px !important; max-width: 36px !important; height: 34px !important; padding: 1px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .right-sidebar .event-circle-btn .event-icon-3d { width: 18px !important; height: 18px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .right-sidebar .event-circle-btn span:not(.event-badge) { font-size: 10px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .right-sidebar-toggle-btn { display: flex !important; right: 132px !important; top: calc(50% + 20px) !important; transform: translateY(-50%) !important; width: 18px !important; height: 34px !important; z-index: 95 !important; } html.mobile-landscape-mode[data-theme="gokturk"] body.sidebar-is-collapsed .right-sidebar-toggle-btn, html.mobile-landscape-mode[data-theme="gokturk"] body .app-layout.sidebar-is-collapsed .right-sidebar-toggle-btn { right: 0px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .right-chat-tabs { display: flex !important; right: 132px !important; z-index: 95 !important; } html.mobile-landscape-mode[data-theme="gokturk"] body.sidebar-is-collapsed .right-chat-tabs, html.mobile-landscape-mode[data-theme="gokturk"] body .app-layout.sidebar-is-collapsed .right-chat-tabs { right: 0px !important; } /* Top Mobile Resource Bar in Mobile Landscape: Single Row (24px), Centered between Open/Collapsed Sidebars, +%20 Hidden */ html.mobile-landscape-mode[data-theme="gokturk"] body .top-mobile-resource-bar { top: env(safe-area-inset-top, 2px) !important; left: calc(50% + (var(--left-sidebar-offset, 62px) - var(--right-sidebar-offset, 132px)) / 2) !important; right: auto !important; transform: translateX(-50%) !important; width: auto !important; max-width: calc(100vw - var(--left-sidebar-offset, 62px) - var(--right-sidebar-offset, 132px) - 8px) !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; padding: 1px 5px !important; border-radius: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .top-mobile-resource-bar .top-inline-resources-list { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; grid-template-columns: none !important; grid-template-rows: none !important; gap: 2.5px !important; align-items: center !important; justify-content: center !important; width: auto !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .top-mobile-resource-bar .inline-res-item:not(.res-diamond), html.mobile-landscape-mode[data-theme="gokturk"] body .top-mobile-resource-bar .inline-res-item.res-diamond { height: 18px !important; min-height: 18px !important; max-height: 18px !important; padding: 0 3.5px !important; font-size: 9.5px !important; gap: 2px !important; width: auto !important; flex-shrink: 0 !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .top-mobile-resource-bar .inline-res-item span:not(.res-buff-indicator):not(.res-diamond-plus):not(.res-icon) { font-size: 9.5px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .top-mobile-resource-bar .res-buff-indicator, html.mobile-landscape-mode[data-theme="gokturk"] body .top-mobile-resource-bar .top-bar-buff { display: none !important; } /* Bottom Troop Bar Dock in Mobile Landscape: Compact 52px Overlay, Centered between Open/Collapsed Sidebars */ html.mobile-landscape-mode[data-theme="gokturk"] body .bottom-troop-bar-dock { bottom: 2px !important; left: calc(50% + (var(--left-sidebar-offset, 62px) - var(--right-sidebar-offset, 132px)) / 2) !important; right: auto !important; transform: translate3d(-50%, 0, 0) !important; width: fit-content !important; max-width: calc(100vw - var(--left-sidebar-offset, 62px) - var(--right-sidebar-offset, 132px) - 42px) !important; padding: 4px 8px 4px 8px !important; border-radius: 6px !important; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), left 0.28s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .bottom-troop-bar-dock.collapsed { bottom: 0px !important; transform: translate3d(-50%, 100%, 0) !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .bottom-troop-bar-dock::after { background-size: 22px 22px, 22px 22px, 22px 22px, 22px 22px, calc(100% - 36px) 6px, calc(100% - 36px) 6px, 6px calc(100% - 36px), 6px calc(100% - 36px) !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .bottom-troop-bar { height: 58px !important; min-height: 58px !important; max-height: 58px !important; padding: 1px 2px !important; gap: 2.5px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .bottom-troop-bar .troop-card-item { min-width: 58px !important; max-width: 72px !important; height: 52px !important; padding: 1px 2px !important; border-radius: 5px !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .bottom-troop-bar .troop-card-portrait { width: 22px !important; height: 22px !important; margin-bottom: 0 !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .bottom-troop-bar .troop-card-item:not(.locked) .troop-card-name, html.mobile-landscape-mode[data-theme="gokturk"] body .bottom-troop-bar .troop-card-name { font-size: 11px !important; line-height: 1.05 !important; margin: 0 !important; padding: 0 !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .bottom-troop-bar .troop-card-count-badge { font-size: 11px !important; line-height: 1.05 !important; min-height: 13px !important; padding: 0 3px !important; margin: 0 !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .bottom-troop-bar-toggle-btn { width: 32px !important; height: 13px !important; top: -12px !important; font-size: 0.60rem !important; } /* Quick Action Buttons in Mobile Landscape: Scaled Down 50% (31px x 31px) */ html.mobile-landscape-mode[data-theme="gokturk"] body .action-circle-btn { width: 31px !important; height: 31px !important; min-width: 31px !important; min-height: 31px !important; max-width: 31px !important; max-height: 31px !important; padding: 1px !important; border-radius: 6px !important; background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%, cover !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .action-circle-btn .action-icon-3d { width: 17px !important; height: 17px !important; min-width: 17px !important; min-height: 17px !important; margin: 0 !important; } html.mobile-landscape-mode[data-theme="gokturk"] body .action-circle-btn span:not(.event-badge) { font-size: 5.5px !important; line-height: 1 !important; max-width: 29px !important; margin-top: 0 !important; } /* ========================================================= MODEL 1: GÖKTÜRK BAKIR LEVHA (GÜNLÜK GİRİŞ ÖDÜLLERİ PENCERESİ) Yatayda Yatay Kompakt Pencere / Mobilde Dikey Kompakt Pencere Tüm font büyüklükleri: 11px, Alındı yazıları: Yeşil (#4ade80) ========================================================= */ .daily-checkin-outer-wrap { display: flex; justify-content: center; width: 100%; margin: 8px 0 14px; } .gokturk-checkin-window { position: relative; width: 590px; max-width: 100%; background: radial-gradient(120% 90% at 50% 0%, rgba(217, 119, 6, 0.15) 0%, transparent 65%), linear-gradient(180deg, #1b1e26 0%, #12151b 55%, #0c0e13 100%); border: 2px solid #c59b5f; border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 226, 133, 0.22), inset 0 0 16px rgba(180, 83, 9, 0.18); padding: 18px 12px 10px; font-size: 11px; color: #f3e5ab; } /* Günlük Giriş Ödülleri & Açılış Duyuru Popup'ları hem yatayda hem mobil dikeyde ekranda tam ortada dursun (alta yaslanmasın) */ #dailyCheckinPopupModal, html.mobile-portrait-mode #dailyCheckinPopupModal, html.mobile-landscape-mode #dailyCheckinPopupModal, html[data-theme="gokturk"] #dailyCheckinPopupModal, html.mobile-portrait-mode[data-theme="gokturk"] #dailyCheckinPopupModal, #startupInfoPopupModal, html.mobile-portrait-mode #startupInfoPopupModal, html.mobile-landscape-mode #startupInfoPopupModal, html[data-theme="gokturk"] #startupInfoPopupModal, html.mobile-portrait-mode[data-theme="gokturk"] #startupInfoPopupModal { align-items: center !important; justify-content: center !important; padding: 16px !important; } #dailyCheckinPopupModal > #dailyCheckinWindow.gokturk-checkin-window, html[data-theme="gokturk"] body #dailyCheckinPopupModal > #dailyCheckinWindow.gokturk-checkin-window, html.mobile-portrait-mode[data-theme="gokturk"] body #dailyCheckinPopupModal > #dailyCheckinWindow.gokturk-checkin-window { margin: auto !important; padding: 20px 14px 12px !important; border: 2px solid #c59b5f !important; border-radius: 10px !important; } #startupInfoPopupModal > .modal-dark-card, html.mobile-portrait-mode #startupInfoPopupModal > .modal-dark-card, html[data-theme="gokturk"] body #startupInfoPopupModal > .modal-dark-card, html.mobile-portrait-mode[data-theme="gokturk"] body #startupInfoPopupModal > .modal-dark-card { margin: auto !important; width: 94% !important; max-width: 560px !important; max-height: 88vh !important; border-radius: 14px !important; animation: fadeInModal 0.22s ease-out !important; } .gokturk-checkin-window::before, .gokturk-checkin-window::after { content: "❖"; position: absolute; top: 4px; font-size: 11px; color: #d4af37; text-shadow: 0 1px 2px #000; pointer-events: none; } .gokturk-checkin-window::before { left: 7px; } .gokturk-checkin-window::after { right: 42px; } .gokturk-checkin-popup-close { position: absolute; top: 5px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #991b1b 0%, #450a0a 100%); border: 1.5px solid #d4af37; color: #fff3c4; font-size: 11px !important; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); transition: transform 0.12s ease, filter 0.12s ease; } .gokturk-checkin-popup-close:hover { filter: brightness(1.18); transform: scale(1.06); } /* ========================================================= MODEL 3: GÖKTÜRK FERMAN ŞERİDİ (GÜNLÜK GÖREVLER ÜSTÜ ULTRA-KOMPAKT BAR) ========================================================= */ .gokturk-checkin-compact-strip { background: radial-gradient(120% 90% at 50% 0%, rgba(217, 119, 6, 0.12) 0%, transparent 65%), linear-gradient(180deg, #1b1e26 0%, #12151b 55%, #0c0e13 100%); border: 1.5px solid #c59b5f; border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 226, 133, 0.16); display: flex; flex-direction: column; gap: 5px; font-size: 11px !important; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; } .gokturk-checkin-compact-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .gokturk-checkin-compact-title-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .gokturk-checkin-compact-title { font-family: 'Cinzel', serif; font-size: 11px !important; font-weight: 800; color: #ffe285; letter-spacing: 0.5px; } .gokturk-checkin-compact-sub { font-size: 11px !important; color: #e5cfa3; } .gokturk-checkin-compact-sub .claimed-green { color: #4ade80 !important; font-weight: 700; } .gokturk-checkin-compact-actions { display: flex; align-items: center; gap: 6px; } .btn-gokturk-checkin-open-popup { background: linear-gradient(180deg, #252932 0%, #161920 52%, #0c0e13 100%) !important; border: 1px solid #a88149 !important; border-radius: 5px !important; color: #ffe285 !important; font-size: 11px !important; font-weight: 700 !important; padding: 4px 8px !important; cursor: pointer; white-space: nowrap; } .btn-gokturk-checkin-open-popup:hover { border-color: #ffe285 !important; filter: brightness(1.1); } .gokturk-checkin-compact-pills { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; min-width: 0; } .gokturk-checkin-compact-pill { background: rgba(11, 13, 18, 0.94); border: 1px solid rgba(168, 129, 73, 0.38); border-radius: 5px; padding: 3px 5px; display: flex; align-items: center; justify-content: space-between; gap: 3px; font-size: 11px !important; min-width: 0; box-sizing: border-box; } .gokturk-checkin-compact-pill.claimed { background: linear-gradient(180deg, rgba(20, 32, 24, 0.88), rgba(11, 16, 13, 0.94)); border-color: rgba(74, 222, 128, 0.45); } .gokturk-checkin-compact-pill.today { background: linear-gradient(180deg, #431a08 0%, #230f06 60%, #140904 100%); border: 1.5px solid #ffe285; box-shadow: 0 0 8px rgba(217, 119, 6, 0.4); } .gokturk-checkin-compact-pill.missed { background: rgba(24, 12, 14, 0.85); border-color: rgba(153, 27, 27, 0.45); opacity: 0.65; } .gokturk-checkin-compact-pill-day { font-size: 11px !important; font-weight: 700; color: #c59b5f; white-space: nowrap; } .gokturk-checkin-compact-pill.today .gokturk-checkin-compact-pill-day { color: #ffe285; } .gokturk-checkin-compact-pill.claimed .gokturk-checkin-compact-pill-day { color: #4ade80 !important; } .gokturk-checkin-compact-pill-val { display: inline-flex; align-items: center; gap: 2px; font-size: 11px !important; font-weight: 800; color: #fff3c4; white-space: nowrap; } .gokturk-checkin-compact-pill-worker { width: 14px; height: 14px; object-fit: contain; } html.mobile-portrait-mode .gokturk-checkin-compact-pills, html.mobile-portrait-mode[data-theme="gokturk"] .gokturk-checkin-compact-pills { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html.mobile-portrait-mode .gokturk-checkin-compact-pill.day-7, html.mobile-portrait-mode[data-theme="gokturk"] .gokturk-checkin-compact-pill.day-7 { grid-column: span 2 !important; justify-content: center !important; gap: 10px !important; background: linear-gradient(90deg, rgba(67, 26, 8, 0.88) 0%, rgba(28, 16, 8, 0.95) 100%); border-color: #d4af37; } @media (max-width: 720px) { .gokturk-checkin-compact-pills { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .gokturk-checkin-compact-pill.day-7 { grid-column: span 2 !important; justify-content: center !important; gap: 10px !important; background: linear-gradient(90deg, rgba(67, 26, 8, 0.88) 0%, rgba(28, 16, 8, 0.95) 100%); border-color: #d4af37; } } .gokturk-checkin-cartouche { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, #3b2313 0%, #1f1209 55%, #120a05 100%); border: 1.5px solid #d4af37; border-radius: 6px; padding: 2px 12px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 235, 160, 0.45); display: flex; align-items: center; gap: 5px; z-index: 3; } .gokturk-checkin-cartouche-title { font-family: 'Cinzel', serif; font-size: 11px !important; font-weight: 800; color: #fff3c4; letter-spacing: 0.7px; text-shadow: 0 1px 3px #000; } .gokturk-checkin-diamond { color: #f59e0b; font-size: 11px !important; } .gokturk-checkin-top-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; padding: 0 2px; font-size: 11px !important; color: #d4b886; } .gokturk-checkin-timer-pill { background: rgba(10, 12, 16, 0.92); border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 5px; padding: 2px 7px; font-size: 11px !important; color: #fbbf24; font-weight: 600; } .gokturk-checkin-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 8px; } .gokturk-checkin-cell { background: rgba(12, 14, 19, 0.94); border: 1px solid rgba(168, 129, 73, 0.42); border-radius: 6px; padding: 5px 4px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; position: relative; min-height: 74px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.75); } .gokturk-checkin-cell.claimed { background: linear-gradient(180deg, rgba(20, 32, 24, 0.88), rgba(11, 16, 13, 0.94)); border-color: rgba(74, 222, 128, 0.45); } .gokturk-checkin-cell.today { background: linear-gradient(180deg, #431a08 0%, #230f06 60%, #140904 100%); border: 1.5px solid #ffe285; box-shadow: 0 0 11px rgba(217, 119, 6, 0.45), inset 0 0 8px rgba(251, 191, 36, 0.22); } .gokturk-checkin-cell.missed { background: rgba(24, 12, 14, 0.85); border-color: rgba(153, 27, 27, 0.45); opacity: 0.68; } .gokturk-checkin-day-name { font-size: 11px !important; font-weight: 700; color: #c59b5f; } .gokturk-checkin-cell.today .gokturk-checkin-day-name { color: #ffe285; } .gokturk-checkin-icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; margin: 2px 0; } .gokturk-checkin-worker-img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9)); } .gokturk-checkin-reward-val { font-size: 11px !important; font-weight: 800; color: #fff3c4; line-height: 1.15; } .gokturk-checkin-gem-tag { font-size: 11px !important; font-weight: 700; color: #7dd3fc; line-height: 1.15; } .gokturk-checkin-status-stamp { font-size: 11px !important; font-weight: 800; color: #9ca3af; } .gokturk-checkin-status-stamp.status-claimed { color: #4ade80 !important; text-shadow: 0 0 6px rgba(74, 222, 128, 0.35); } .gokturk-checkin-status-stamp.status-today { color: #fbbf24 !important; } .gokturk-checkin-status-stamp.status-missed { color: #f87171 !important; } .gokturk-checkin-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(10, 12, 16, 0.9); border: 1px solid rgba(197, 155, 95, 0.35); border-radius: 6px; padding: 6px 9px; } .gokturk-checkin-footer-info { font-size: 11px !important; color: #e5cfa3; } .gokturk-checkin-footer-info .claimed-green { color: #4ade80 !important; font-weight: 700; } .btn-gokturk-checkin-copper { background: linear-gradient(180deg, #d97706 0%, #9a3412 52%, #5c1d08 100%) !important; border: 1.5px solid #ffe285 !important; border-radius: 6px !important; color: #ffffff !important; font-family: 'Cinzel', serif !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.4px; padding: 5px 12px !important; cursor: pointer; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; transition: transform 0.12s ease, filter 0.12s ease; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; } .btn-gokturk-checkin-copper:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); } .btn-gokturk-checkin-copper:disabled { background: linear-gradient(180deg, #16261c 0%, #0f1a13 52%, #09100c 100%) !important; border-color: rgba(74, 222, 128, 0.55) !important; color: #4ade80 !important; cursor: default !important; box-shadow: none !important; } /* Mobil Dikey Pencere Görünümü (Portrait) */ html.mobile-portrait-mode .gokturk-checkin-window { width: 326px !important; max-width: 100% !important; } html.mobile-portrait-mode .gokturk-checkin-grid { grid-template-columns: repeat(2, 1fr) !important; } html.mobile-portrait-mode .gokturk-checkin-cell.day-7 { grid-column: span 2 !important; flex-direction: row !important; justify-content: space-between !important; padding: 7px 12px !important; min-height: 50px !important; background: linear-gradient(90deg, rgba(67, 26, 8, 0.88) 0%, rgba(28, 16, 8, 0.95) 100%); border-color: #d4af37; } html.mobile-portrait-mode .gokturk-checkin-cell.day-7 .gokturk-checkin-reward-group { display: flex !important; align-items: center !important; gap: 8px !important; } html.mobile-portrait-mode .gokturk-checkin-footer { flex-direction: column !important; align-items: stretch !important; text-align: center !important; } @media (max-width: 600px) and (orientation: portrait) { .gokturk-checkin-window { width: 326px !important; max-width: 100% !important; } .gokturk-checkin-grid { grid-template-columns: repeat(2, 1fr) !important; } .gokturk-checkin-cell.day-7 { grid-column: span 2 !important; flex-direction: row !important; justify-content: space-between !important; padding: 7px 12px !important; min-height: 50px !important; background: linear-gradient(90deg, rgba(67, 26, 8, 0.88) 0%, rgba(28, 16, 8, 0.95) 100%); border-color: #d4af37; } .gokturk-checkin-cell.day-7 .gokturk-checkin-reward-group { display: flex !important; align-items: center !important; gap: 8px !important; } .gokturk-checkin-footer { flex-direction: column !important; align-items: stretch !important; text-align: center !important; } }