:root { --ink:#07111f; --navy:#0b1728; --paper:#f4f2ed; --white:#fff; --red:#f20d25; --line:#d9dde2; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }

.site-header { position:absolute; z-index:20; inset:0 0 auto; height:78px; display:flex; align-items:center; gap:42px; padding:0 clamp(20px,5vw,82px); color:white; border-bottom:1px solid rgba(255,255,255,.1); }
.brand { display:inline-flex; align-items:center; gap:12px; font-weight:950; letter-spacing:-.03em; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:white; background:var(--red); font-size:12px; transform:rotate(-4deg); }
.site-header nav { display:flex; gap:30px; margin-left:auto; color:#aab7c9; font-size:12px; }
.site-header nav a:hover { color:white; }
.header-cta { padding:11px 18px; border:1px solid rgba(255,255,255,.3); border-radius:999px; color:white; background:rgba(255,255,255,.07); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }

.map-hero { min-height:100vh; padding:118px clamp(14px,4vw,58px) 60px; color:white; background:radial-gradient(circle at 50% 28%,rgba(242,13,37,.18),transparent 30%),linear-gradient(145deg,#050b13 0%,#0a1728 56%,#111e31 100%); }
.map-hero-title { max-width:1100px; margin:0 auto 28px; text-align:center; }
.map-hero-title>span { display:inline-flex; align-items:center; gap:9px; color:#aebccc; font-size:9px; font-weight:950; letter-spacing:.17em; }
.map-hero-title i { width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 6px rgba(242,13,37,.14); }
.map-hero-title h1 { margin:13px 0 10px; font-size:clamp(43px,6.4vw,88px); line-height:.94; letter-spacing:-.07em; text-transform:uppercase; }
.map-hero-title h1 em { color:var(--red); font-style:normal; }
.map-hero-title>p { margin:0; color:#a4b1c2; font-size:clamp(12px,1.3vw,16px); }
.auction-totals { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:18px; }
.auction-totals strong { padding:8px 13px; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(255,255,255,.05); font-size:14px; }
.auction-totals small { color:#8493a7; font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }

.hero-map-card { width:min(1320px,100%); margin:0 auto; padding:20px; border:1px solid rgba(255,255,255,.13); border-radius:30px; background:rgba(12,27,46,.88); box-shadow:0 35px 90px rgba(0,0,0,.34); backdrop-filter:blur(12px); }
.hero-map-head { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:3px 5px 17px; }
.hero-map-head>div { display:grid; gap:6px; }
.hero-map-head small { color:var(--red); font-size:8px; font-weight:950; letter-spacing:.15em; }
.hero-map-head strong { font-size:16px; text-transform:uppercase; }
.hero-city-select { display:flex; align-items:center; gap:10px; color:#8797ab; font-size:8px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.hero-city-select select { min-width:162px; padding:10px 13px; border:1px solid rgba(255,255,255,.14); border-radius:999px; outline:none; color:white; background:#172b47; font-size:11px; font-weight:800; }
.hero-city-select option { color:var(--ink); background:white; }
.hero-map-shell { position:relative; overflow:hidden; padding:46px 18px 18px; border:1px solid rgba(255,255,255,.07); border-radius:24px; background:#07131f; }
.hero-map-shell::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size:18px 18px; mask-image:linear-gradient(to bottom,black,transparent 90%); }
.hero-map-shell #svg-turkiye-haritasi-container { position:relative; z-index:1; width:100%; }
.hero-map-shell svg { display:block; width:100%; height:auto; }
.hero-map-shell path { stroke:#4d617d; stroke-width:1; cursor:pointer; transition:.18s ease; }
.hero-map-shell path:hover { filter:drop-shadow(0 0 9px rgba(242,13,37,.75)); }
.city-favicon-marker { cursor:pointer; filter:drop-shadow(0 5px 8px rgba(0,0,0,.6)); }
.city-favicon-marker circle { fill:white; stroke:var(--red); stroke-width:3; transition:.18s ease; }
.city-favicon-marker:hover circle,.city-favicon-marker:focus circle { stroke-width:5; transform:scale(1.12); transform-box:fill-box; transform-origin:center; }
#svg-turkiye-haritasi-container-tooltip { padding:8px 11px!important; border-radius:999px!important; color:var(--ink)!important; background:white!important; font-size:11px!important; font-weight:850!important; }
.map-tip { position:absolute; z-index:2; top:18px; left:22px; color:#76879d; font-size:8px; font-weight:950; letter-spacing:.12em; }
.map-tip span { margin-right:5px; color:var(--red); }
.selected-city-bar { width:100%; display:flex; align-items:center; gap:12px; margin-top:14px; padding:11px 14px 11px 11px; border:1px solid rgba(255,255,255,.1); border-radius:19px; color:white; background:#162840; text-align:left; }
.selected-city-bar>span { width:42px; height:42px; display:grid; place-items:center; flex:none; border-radius:13px; color:white; background:var(--red); font-size:12px; font-weight:950; }
.selected-city-bar>div { display:grid; gap:2px; }
.selected-city-bar small { color:#7f90a5; font-size:7px; font-weight:900; letter-spacing:.12em; }
.selected-city-bar strong { font-size:15px; }
.selected-city-bar b { margin-left:auto; color:#d5deea; font-size:10px; text-transform:uppercase; }

.crest { width:47px; height:52px; display:grid; place-items:center; flex:none; padding:5px; clip-path:polygon(50% 0,94% 14%,87% 75%,50% 100%,13% 75%,6% 14%); filter:drop-shadow(0 5px 10px rgba(0,0,0,.18)); }
.crest>span { width:100%; height:100%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); color:white; font-size:10px; font-weight:950; text-shadow:0 1px 4px rgba(0,0,0,.8); clip-path:inherit; }
.crest-small { width:35px; height:39px; }

.boards-section,.ranking-section { padding:88px clamp(20px,7vw,110px); }
.boards-section { background:#ece9e1; }
.section-heading { max-width:1280px; display:grid; grid-template-columns:54px 1fr auto; align-items:end; gap:18px; margin:0 auto 34px; }
.step-number { padding-bottom:7px; border-bottom:2px solid var(--red); color:var(--red); font-size:12px; font-weight:900; }
.section-heading p { margin:0 0 7px; color:var(--red); font-size:9px; font-weight:900; letter-spacing:.15em; }
.section-heading h2 { margin:0; font-size:clamp(29px,3.4vw,48px); line-height:1; letter-spacing:-.05em; text-transform:uppercase; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:22px; padding:14px 20px; border:0; border-radius:999px; color:white; background:var(--red); font-size:10px; font-weight:900; text-transform:uppercase; }
.board-wall { max-width:1280px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 auto; }
.fan-board { --board-a:#fff; --board-b:#000; min-height:145px; display:flex; align-items:center; gap:13px; padding:20px; border:0; border-radius:22px; color:white; background:linear-gradient(135deg,color-mix(in srgb,var(--board-a) 78%,#07101d),color-mix(in srgb,var(--board-b) 80%,#07101d)); box-shadow:0 13px 32px rgba(0,0,0,.13); text-align:left; }
.fan-board>div { min-width:0; display:grid; flex:1; gap:5px; }
.fan-board small { font-size:7px; font-weight:900; letter-spacing:.09em; opacity:.75; }
.fan-board strong { overflow:hidden; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }
.fan-board p { margin:0; overflow:hidden; font-size:10px; opacity:.82; text-overflow:ellipsis; white-space:nowrap; }
.fan-board>b { flex:none; font-size:9px; text-transform:uppercase; }
.empty-boards { max-width:1280px; margin:0 auto; padding:60px 25px; text-align:center; border:1px dashed #b9c0c8; border-radius:26px; }
.empty-boards>span { color:var(--red); font-size:26px; }
.empty-boards h3 { margin:12px 0 7px; font-size:23px; text-transform:uppercase; }
.empty-boards p { color:#748092; }
.empty-boards button { padding:12px 18px; border:0; border-radius:999px; color:white; background:var(--ink); font-size:10px; font-weight:900; text-transform:uppercase; }

.ranking-section { color:white; background:var(--ink); }
.ranking-table { max-width:1280px; overflow:hidden; margin:0 auto; border:1px solid #29384d; border-radius:24px; }
.ranking-head,.ranking-row { display:grid; grid-template-columns:65px 2fr 1fr 1fr 1fr; align-items:center; gap:16px; padding:13px 16px; }
.ranking-head { color:#66778e; font-size:8px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.ranking-row { min-height:70px; border-top:1px solid #233249; }
.ranking-row:hover { background:rgba(255,255,255,.025); }
.ranking-no { color:#5f7189; font-weight:900; }
.ranking-team { display:flex; align-items:center; gap:12px; }
.ranking-team>span { display:grid; gap:3px; }
.ranking-team strong { font-size:12px; }
.ranking-team small { color:#65758a; font-size:8px; text-transform:uppercase; }
.ranking-row>span:not(.ranking-team):not(.ranking-no),.ranking-row>strong { font-size:12px; font-variant-numeric:tabular-nums; }
.ranking-row>strong { font-size:15px; }
.method-note { max-width:1280px; margin:18px auto 0; color:#67788f; font-size:9px; text-align:right; }

.city-modal-backdrop { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:18px; background:rgba(2,5,10,.76); backdrop-filter:blur(9px); animation:modal-fade .18s ease-out; }
.city-modal { position:relative; width:min(480px,100%); max-height:92vh; overflow:auto; padding:23px; border:1px solid rgba(242,13,37,.55); border-radius:28px; color:white; background:#111116; box-shadow:0 30px 90px rgba(0,0,0,.65); animation:modal-rise .2s ease-out; }
.city-modal-close { position:absolute; z-index:2; top:15px; right:15px; width:35px; height:35px; display:grid; place-items:center; border:0; border-radius:50%; color:#9095a0; background:#202127; font-size:22px; }
.city-modal-head { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; padding-right:42px; }
.city-modal-head>span { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; color:var(--red); background:rgba(242,13,37,.09); border:1px solid rgba(242,13,37,.3); font-size:11px; font-weight:950; }
.city-modal-head>div { display:grid; gap:2px; }
.city-modal-head small { color:#767b86; font-size:7px; font-weight:900; letter-spacing:.12em; }
.city-modal-head h2 { margin:0; font-size:20px; }
.city-modal-head>b { color:#9ca2ad; font-size:9px; letter-spacing:.08em; }
.city-vote-count { display:flex; align-items:baseline; gap:7px; margin:17px 0 14px; padding:13px 2px; border-block:1px solid #292a30; }
.city-vote-count>span { color:var(--red); }
.city-vote-count strong { font-size:16px; }
.city-vote-count small { color:#7f838e; font-size:9px; }
.modal-team-select,.modal-bid-form label { display:grid; gap:7px; color:#a8aab1; font-size:8px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.modal-team-select select,.modal-bid-form input,.modal-bid-form textarea { width:100%; min-height:44px; padding:10px 13px; border:1px solid #313239; border-radius:14px; outline:none; color:white; background:#1b1c21; font-size:11px; font-weight:700; letter-spacing:0; text-transform:none; }
.modal-team-select option { color:var(--ink); background:white; }
.modal-free-vote { width:100%; margin-top:10px; padding:13px 15px; border:0; border-radius:999px; color:white; background:var(--red); font-size:11px; font-weight:950; }
.modal-free-vote:disabled,.takeover-button:disabled { cursor:not-allowed; opacity:.5; }
.vote-status-inline { margin:9px 2px 0; color:#7bd698; font-size:9px; }
.current-throne,.empty-throne { margin:14px 0; padding:13px; border:1px solid #3b252a; border-radius:18px; background:#19171a; }
.current-throne { --team-a:#181818; --team-b:#333; background:linear-gradient(135deg,color-mix(in srgb,var(--team-a) 28%,#19171a),color-mix(in srgb,var(--team-b) 22%,#19171a)); }
.throne-label { display:flex; align-items:center; gap:7px; color:#ff8b98; font-size:8px; }
.throne-label>b { margin-left:auto; padding:6px 9px; border-radius:9px; color:white; background:#2a2b31; font-size:10px; }
.throne-owner { display:flex; align-items:center; gap:10px; margin-top:10px; }
.throne-owner>span { min-width:0; display:grid; flex:1; gap:3px; }
.throne-owner strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.throne-owner small { overflow:hidden; color:#8e929d; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.throne-owner p { margin:0; color:#b9bec8; font-size:9px; }
.throne-link { display:inline-flex; align-items:center; gap:7px; width:max-content; margin-top:7px; padding:7px 10px; border:1px solid rgba(255,255,255,.15); border-radius:999px; color:white; background:rgba(0,0,0,.2); font-size:8px; font-weight:900; }
.throne-link img { width:16px; height:16px; border-radius:50%; background:white; }
.empty-throne { display:flex; align-items:center; gap:11px; color:#858a96; }
.empty-throne>span { width:40px; height:40px; display:grid; place-items:center; flex:none; border-radius:13px; color:var(--red); background:rgba(242,13,37,.08); font-size:19px; }
.empty-throne>div { display:grid; gap:3px; }
.empty-throne strong { color:white; font-size:12px; }
.empty-throne small { font-size:8px; }
.modal-bid-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modal-bid-form label.wide { grid-column:1/-1; }
.modal-bid-form textarea { min-height:66px; resize:vertical; }
.money-input { display:flex; align-items:center; overflow:hidden; border:1px solid #313239; border-radius:14px; background:#1b1c21; }
.money-input b { padding-left:13px; color:var(--red); font-size:15px; }
.money-input input { border:0; }
.checkout-error { margin:10px 0 0; padding:10px 12px; border:1px solid #712933; border-radius:13px; color:#ff9ba6; background:#35161b; font-size:9px; }
.takeover-button { width:100%; display:flex; justify-content:space-between; margin-top:12px; padding:14px 17px; border:0; border-radius:999px; color:white; background:var(--red); font-size:11px; font-weight:950; text-transform:uppercase; }
.auction-rule { margin:9px 4px 0; color:#777c87; font-size:8px; line-height:1.5; }

footer { min-height:105px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:28px clamp(20px,7vw,110px); color:#8090a3; background:#040a12; font-size:9px; }
footer .brand { color:white; }
.fatal-banner { position:fixed; z-index:100; inset:10px 10px auto; padding:14px 18px; border-radius:16px; color:white; background:#8e1323; box-shadow:0 12px 32px rgba(0,0,0,.28); font-size:12px; text-align:center; }
.success-page { min-height:100vh; display:grid; place-items:center; padding:20px; color:white; background:radial-gradient(circle at 50% 20%,rgba(242,13,37,.2),transparent 32%),#08111e; }
.success-card { width:min(580px,100%); padding:60px 35px; text-align:center; border:1px solid rgba(255,255,255,.12); border-radius:28px; background:rgba(18,34,57,.78); box-shadow:0 35px 80px rgba(0,0,0,.35); }
.success-icon { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 22px; border-radius:50%; color:white; background:var(--red); font-size:28px; font-weight:900; }
.success-card>p:first-of-type { color:var(--red); font-size:9px; font-weight:900; letter-spacing:.15em; }
.success-card h1 { margin:10px 0 15px; font-size:clamp(36px,6vw,58px); line-height:.95; letter-spacing:-.055em; text-transform:uppercase; }
.success-copy { color:#9cabbc; line-height:1.65; font-size:13px; }
.success-card a { width:max-content; display:flex; gap:24px; margin:25px auto 0; padding:14px 18px; border-radius:999px; color:white; background:var(--red); font-size:10px; font-weight:900; text-transform:uppercase; }

.setup-page { min-height:100vh; padding:38px 16px; color:white; background:radial-gradient(circle at 50% 0,rgba(242,13,37,.18),transparent 34%),#07111f; }
.setup-wrap { width:min(760px,100%); margin:0 auto; }
.setup-brand { display:flex; justify-content:center; margin-bottom:24px; }
.setup-card { padding:clamp(24px,5vw,48px); border:1px solid rgba(255,255,255,.12); border-radius:30px; background:#101d30; box-shadow:0 30px 80px rgba(0,0,0,.32); }
.setup-card>small { color:var(--red); font-weight:900; letter-spacing:.14em; }
.setup-card h1 { margin:10px 0 9px; font-size:clamp(31px,6vw,52px); line-height:.95; letter-spacing:-.05em; text-transform:uppercase; }
.setup-card>p,.setup-note { color:#9dacbf; font-size:12px; line-height:1.65; }
.setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:25px; }
.setup-grid label { display:grid; gap:7px; color:#aeb9c8; font-size:10px; font-weight:800; }
.setup-grid label.wide { grid-column:1/-1; }
.setup-grid input { width:100%; min-height:47px; padding:11px 14px; border:1px solid #34445a; border-radius:14px; outline:none; color:white; background:#0a1422; }
.setup-grid input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(242,13,37,.12); }
.setup-button { width:100%; margin-top:20px; padding:15px 20px; border:0; border-radius:999px; color:white; background:var(--red); font-size:11px; font-weight:950; text-transform:uppercase; }
.setup-alert { margin:18px 0 0; padding:14px 16px; border:1px solid #7b2a36; border-radius:15px; color:#ffbbc3; background:#33141b; font-size:11px; line-height:1.55; }
.setup-alert.ok { border-color:#286744; color:#9ee7ba; background:#112b20; }
.setup-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.setup-actions a,.setup-link { display:inline-flex; padding:12px 16px; border-radius:999px; color:white; background:var(--red); font-size:10px; font-weight:900; text-transform:uppercase; }
.setup-actions a.secondary { border:1px solid #405069; background:transparent; }
.setup-code { display:block; overflow-wrap:anywhere; margin:12px 0; padding:13px; border-radius:13px; color:#dce7f5; background:#08111d; font:11px/1.6 monospace; }
.setup-list { padding-left:19px; color:#aab6c6; font-size:12px; line-height:1.8; }
.settings-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.settings-head form { margin:0; }
.logout-button { padding:9px 13px; border:1px solid #44536a; border-radius:999px; color:#c4cfdd; background:transparent; font-size:9px; font-weight:900; }

@keyframes modal-fade { from { opacity:0; } }
@keyframes modal-rise { from { opacity:0; transform:translateY(14px) scale(.98); } }
@media (max-width:900px) { .site-header nav { display:none; } .header-cta { margin-left:auto; } .board-wall { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px) {
  .site-header { height:66px; padding:0 16px; }
  .brand>span:last-child { font-size:12px; }
  .header-cta { display:none; }
  .map-hero { min-height:auto; padding:94px 10px 36px; }
  .map-hero-title { margin-bottom:21px; }
  .map-hero-title h1 { font-size:43px; }
  .map-hero-title>p { padding:0 14px; line-height:1.45; }
  .hero-map-card { padding:10px; border-radius:23px; }
  .hero-map-head { align-items:stretch; flex-direction:column; padding:5px 5px 12px; }
  .hero-city-select { justify-content:space-between; }
  .hero-city-select select { min-width:0; width:58%; }
  .hero-map-shell { padding:36px 0 8px; border-radius:18px; }
  .map-tip { top:13px; left:14px; }
  .selected-city-bar { border-radius:16px; }
  .boards-section,.ranking-section { padding:62px 15px; }
  .section-heading { grid-template-columns:40px 1fr; }
  .section-heading>:last-child { grid-column:1/-1; }
  .board-wall { grid-template-columns:1fr; }
  .ranking-table { overflow-x:auto; }
  .ranking-head,.ranking-row { min-width:680px; }
  .city-modal-backdrop { align-items:end; padding:10px; }
  .city-modal { max-height:94vh; padding:19px; border-radius:25px; }
  .city-modal-head { grid-template-columns:42px 1fr; }
  .city-modal-head>b { grid-column:2; }
  .modal-bid-form { grid-template-columns:1fr; }
  .modal-bid-form label.wide { grid-column:1; }
  footer { align-items:flex-start; flex-direction:column; }
  .setup-page { padding:18px 10px; }
  .setup-card { border-radius:23px; }
  .setup-grid { grid-template-columns:1fr; }
  .setup-grid label.wide { grid-column:1; }
}