/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@300;400;700&display=swap');

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Respect users who request reduced motion (vestibular disorders, battery). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --bg:              #1a1a2e;
  --panel-bg:        #16213e;
  --surface:         #0f3460;
  --accent:          #e94560;
  --highlight:       #f5a623;
  --province-fill:   #4a7c9e;
  --province-stroke: #0d2137;
  --text-primary:    #f0f0f0;
  --text-secondary:  #a8b2c1;
  --tooltip-bg:      #ffffff;
  --tooltip-text:    #1a1a2e;
  --shadow:          0 8px 32px rgba(0,0,0,0.5);
  --radius:          10px;
  --transition:      0.22s cubic-bezier(.4,0,.2,1);
  --tier1: #2e6b96;
  --tier2: #1f7aaa;
  --tier3: #0f87b8;
  --tier4: #0090b8;
  --tier5: #009ab0;
  --map-bg-inner:    #0d2137;
  --map-bg-outer:    #060d18;
  --card-bg:         rgba(15,52,96,0.35);
  --card-border:     rgba(15,52,96,0.8);
  --card-border-hover: rgba(245,166,35,0.4);
  --lyrics-bg:       rgba(0,0,0,0.2);
  --track-off:       rgba(255,255,255,0.15);
  --toggle-pill-bg:  rgba(15,52,96,0.6);
  --filter-panel-bg: rgba(6,13,24,0.3);
  --filter-border:   rgba(15,52,96,0.6);
  --label-fill:      #ffffff;
  --label-stroke:    #0d2137;
  --tt-border-color: #eee;
  --tt-bg:           #ffffff;
  --tt-city-color:   #1a1a2e;
  --tt-list-color:   #333;
  --tt-more-color:   #999;
  --tt-nodata-color: #888;
  --tt-empty-bg:     #ccc;
  --tt-empty-text:   #555;
}

/* ===== LIGHT MODE — clean, modern, editorial ===== */
body.light-mode {
  --bg:              #f0f2f5;
  --panel-bg:        #ffffff;
  --surface:         #dde2ea;
  --accent:          #d63049;
  --highlight:       #1a6fc4;
  --province-fill:   #93b4d4;
  --province-stroke: #5a82a8;
  --text-primary:    #111827;
  --text-secondary:  #4b5563;
  --shadow:          0 8px 32px rgba(0,0,0,0.10);
  --tier1:           #b8d0e8;
  --tier2:           #84afd4;
  --tier3:           #508dbe;
  --tier4:           #2b6ca8;
  --tier5:           #174e88;
  --map-bg-inner:    #dde6f0;
  --map-bg-outer:    #ccd6e8;
  --card-bg:         rgba(240,242,245,0.7);
  --card-border:     rgba(180,192,210,0.7);
  --card-border-hover: rgba(26,111,196,0.35);
  --lyrics-bg:       rgba(210,220,235,0.4);
  --track-off:       rgba(0,0,0,0.12);
  --toggle-pill-bg:  rgba(220,226,234,0.8);
  --filter-panel-bg: rgba(230,234,240,0.6);
  --filter-border:   rgba(180,192,210,0.5);
  --label-fill:      #111827;
  --label-stroke:    #dde6f0;
  --tt-border-color: #e5e9ef;
  --tt-bg:           #ffffff;
  --tt-city-color:   #111827;
  --tt-list-color:   #1f2937;
  --tt-more-color:   #6b7280;
  --tt-nodata-color: #6b7280;
  --tt-empty-bg:     #d1d9e4;
  --tt-empty-text:   #374151;
}

body {
  font-family: 'Lato', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background 0.35s ease, color 0.35s ease;
}

/* ===== THEME TOGGLE BUTTON ===== */
#theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--toggle-pill-bg);
  border: 1px solid var(--surface);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: 'Lato', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  user-select: none;
}

#theme-toggle:hover {
  background: var(--surface);
  border-color: var(--highlight);
  color: var(--text-primary);
}

.theme-toggle-icon {
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}

body.light-mode #theme-toggle .theme-toggle-icon {
  transform: rotate(180deg);
}

/* ===== HEADER ===== */
header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 14px 24px;
  background: var(--panel-bg);
  border-bottom: 2px solid var(--surface);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.header-brand {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--surface);
  background: var(--toggle-pill-bg);
  transition: background var(--transition), border-color var(--transition);
}

.brand-link:hover {
  background: var(--surface);
  border-color: var(--highlight);
}

.brand-name {
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--highlight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-title {
  text-align: center;
}

header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1.2;
}

header h1 span {
  color: var(--highlight);
}

header p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 3px;
  font-weight: 300;
  letter-spacing: 0.06em;
}

@media (max-width: 600px) {
  .header-brand { display: none; }
}

/* ===== LAYOUT ===== */
.app-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* ===== MAP WRAPPER ===== */
#map-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, var(--map-bg-inner) 0%, var(--map-bg-outer) 100%);
}

/* ===== MAP CONTAINER (zoom/pan target) ===== */
#map-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  transform-origin: 0 0;
  transition: none; /* transitions are controlled by JS */
}

#map-container.dragging {
  cursor: grabbing;
}

/* ===== SVG PROVINCE PATHS ===== */
#map-container svg {
  width: 92%;
  max-width: 960px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.6));
  shape-rendering: geometricPrecision;
}

#map-container svg path {
  fill: var(--province-fill);
  stroke: var(--province-stroke);
  stroke-width: 0.5;
  stroke-linejoin: round;
  transition:
    fill var(--transition),
    filter var(--transition);
  cursor: pointer;
  outline: none;
}

#map-container svg path:hover,
#map-container svg path.hovered,
#map-container svg path:focus {
  fill: var(--highlight);
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(245,166,35,0.55));
}

/* ── CHOROPLETH TIERS — only active when body.choropleth-on ── */
body.choropleth-on #map-container svg path[data-tier="1"]:not(.active-province):not(.kb-focus) { fill: var(--tier1); }
body.choropleth-on #map-container svg path[data-tier="2"]:not(.active-province):not(.kb-focus) { fill: var(--tier2); }
body.choropleth-on #map-container svg path[data-tier="3"]:not(.active-province):not(.kb-focus) { fill: var(--tier3); }
body.choropleth-on #map-container svg path[data-tier="4"]:not(.active-province):not(.kb-focus) { fill: var(--tier4); }
body.choropleth-on #map-container svg path[data-tier="5"]:not(.active-province):not(.kb-focus) { fill: var(--tier5); }

/* Flat fill when choropleth is off */
#map-container svg path.has-data { fill: var(--tier1); }

/* Hover / focus on any data province */
#map-container svg path[data-tier]:not(.active-province):hover,
#map-container svg path[data-tier]:not(.active-province).hovered,
#map-container svg path[data-tier]:not(.active-province):focus {
  fill: var(--accent);
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(233,69,96,0.65));
}

/* ===== ZOOM CONTROLS ===== */
#zoom-controls {
  position: absolute;
  bottom: 28px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 20;
}

.zoom-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 1.2rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--transition), transform var(--transition);
  line-height: 1;
}

.zoom-btn:hover {
  background: var(--accent);
  transform: scale(1.12);
}

.zoom-btn.reset-btn {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 8px;
  width: 40px;
  height: 28px;
}

/* ===== SCALE INDICATOR ===== */
#scale-badge {
  position: absolute;
  bottom: 28px;
  left: 24px;
  background: var(--toggle-pill-bg);
  color: var(--text-secondary);
  font-size: 0.72rem;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--surface);
  z-index: 20;
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
}

/* ===== HINT BAR ===== */
#hint {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--toggle-pill-bg);
  color: var(--text-secondary);
  font-size: 0.72rem;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--surface);
  z-index: 20;
  pointer-events: none;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

/* ===== SIDE PANEL ===== */
#side-panel {
  width: 300px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border-left: 2px solid var(--surface);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  z-index: 5;
}

.panel-top {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--surface);
  flex-shrink: 0;
}

#side-panel h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--highlight);
  margin-bottom: 10px;
}

.panel-stats {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.panel-stats strong { color: var(--text-primary); }

#side-panel .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.legend-item--sm {
  margin-bottom: 5px;
}

.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

.swatch-empty  { background: var(--province-fill); }
.swatch-active { background: var(--accent); }

/* ── CHOROPLETH GRADIENT LEGEND ── */
.legend-choropleth {
  margin-bottom: 10px;
}

#legend-choropleth-wrap {
  transition: opacity var(--transition);
}

body:not(.choropleth-on) #legend-choropleth-wrap {
  display: none;
}

.legend-gradient {
  margin-bottom: 4px;
}

.legend-gradient-bar {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    var(--tier1),
    var(--tier2),
    var(--tier3),
    var(--tier4),
    var(--tier5)
  );
  margin-bottom: 3px;
}

.legend-gradient-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  color: var(--text-secondary);
  opacity: 0.8;
}

.legend-gradient-title {
  font-size: 0.68rem;
  color: var(--text-secondary);
  opacity: 0.7;
  text-align: right;
  letter-spacing: 0.04em;
}

.panel-action-btns {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}

#btn-random {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--toggle-pill-bg);
  border: 1px solid var(--surface);
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

#btn-random:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--text-primary);
}

/* btn-diger styles merged into .btn-region,#btn-diger above */

.diger-badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

/* ===== EXTRA REGION BUTTONS (Rumeli, Kerkük, Azerbaycan, Diğer) ===== */
#extra-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.btn-region,
#btn-diger {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--toggle-pill-bg);
  border: 1px solid var(--surface);
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: 'Lato', sans-serif;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.btn-region:hover,
#btn-diger:hover {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--highlight);
}

.btn-region.active,
#btn-diger.active {
  background: var(--surface);
  border-color: var(--highlight);
  color: var(--highlight);
}

/* ===== SEARCH BAR ===== */
#search-bar {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--surface);
  flex-shrink: 0;
  background: var(--panel-bg);
}

#search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 8px;
}

#search-input {
  flex: 1;
  background: var(--toggle-pill-bg);
  border: 1px solid var(--surface);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--text-primary);
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}

#search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

#search-input:focus {
  border-color: var(--highlight);
  background: var(--panel-bg);
}

#search-clear {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), color var(--transition);
}

#search-clear.visible {
  opacity: 1;
  pointer-events: auto;
}

#search-clear:hover { color: var(--accent); }

/* Filter toggle button */
#filter-toggle {
  position: relative;
  background: var(--toggle-pill-bg);
  border: 1px solid var(--surface);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.85rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

#filter-toggle:hover,
#filter-toggle.active {
  background: var(--surface);
  border-color: var(--highlight);
  color: var(--highlight);
}

.filter-active-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  border: 1px solid var(--panel-bg);
}

.filter-active-dot.hidden { display: none; }

/* Search scope chips */
#search-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 0 12px 8px;
}

.scope-label {
  font-size: 0.67rem;
  color: var(--text-secondary);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  margin-right: 2px;
}

.scope-chip {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  user-select: none;
}

.scope-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.scope-chip span {
  font-size: 0.68rem;
  font-family: 'Lato', sans-serif;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid var(--surface);
  background: var(--toggle-pill-bg);
  color: var(--text-secondary);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.scope-chip input:checked + span {
  background: var(--card-border-hover);
  border-color: var(--highlight);
  color: var(--highlight);
}

.scope-chip:hover span {
  border-color: var(--highlight);
  color: var(--text-primary);
}

/* Results sort row */
#results-sort-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 8px;
}

.sort-label {
  font-size: 0.67rem;
  color: var(--text-secondary);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sort-select {
  flex: 1;
  min-width: 0;
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--surface);
  background: var(--toggle-pill-bg);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--transition);
}

.sort-select:hover,
.sort-select:focus-visible {
  border-color: var(--highlight);
  outline: none;
}

/* Filter panel */
.filter-panel {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--filter-border);
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--filter-panel-bg);
}

.filter-panel.hidden { display: none; }

.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 0.68rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  width: 80px;
  text-align: right;
  letter-spacing: 0.02em;
}

.filter-select {
  flex: 1;
  background: var(--toggle-pill-bg);
  border: 1px solid var(--surface);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text-primary);
  font-family: 'Lato', sans-serif;
  font-size: 0.73rem;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a8b2c1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

.filter-select:focus {
  border-color: var(--highlight);
  background-color: var(--panel-bg);
}

.filter-select option {
  background: var(--panel-bg);
  color: var(--text-primary);
}

.filter-reset-btn {
  align-self: flex-end;
  background: none;
  border: 1px solid var(--surface);
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: 'Lato', sans-serif;
  font-size: 0.68rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.filter-reset-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}

/* Filter active highlight on results header */
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(245,166,35,0.15);
  border: 1px solid rgba(245,166,35,0.35);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.66rem;
  color: var(--highlight);
  white-space: nowrap;
}

/* Mobile adjustments for search scope row */
@media (max-width: 700px) {
  #search-scope {
    padding: 0 10px 8px;
    gap: 4px;
  }
  .scope-label { display: none; }
  .filter-label { width: 68px; font-size: 0.65rem; }
  .filter-select { font-size: 0.7rem; }
}

/* Search results header */
.search-results-header {
  font-size: 0.72rem;
  color: var(--text-secondary);
  padding: 10px 4px 6px;
  border-bottom: 1px solid var(--surface);
  margin-bottom: 8px;
}

.search-results-header strong {
  color: var(--highlight);
}

.search-truncated-note {
  color: var(--text-secondary);
  opacity: 0.75;
  font-style: italic;
  margin-left: 4px;
}

/* Highlight matched text */
.search-highlight {
  background: var(--card-border-hover);
  color: var(--text-primary);
  border-radius: 2px;
  padding: 0 1px;
}

/* Random türkü banner */
.random-banner {
  font-size: 0.72rem;
  color: var(--text-secondary);
  padding: 10px 4px 6px;
  border-bottom: 1px solid var(--surface);
  margin-bottom: 8px;
}

.random-banner strong {
  color: var(--accent);
}

#selected-info {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 12px 16px;
}

.panel-province-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 4px 10px;
  border-bottom: 1px solid var(--surface);
  margin-bottom: 10px;
  position: sticky;
  top: 0;
  background: var(--panel-bg);
  z-index: 2;
  flex-wrap: wrap;
}

.panel-province-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.panel-count {
  font-size: 0.72rem;
  color: var(--highlight);
  font-weight: 700;
  white-space: nowrap;
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--surface);
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  padding: 3px 8px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.btn-back:hover {
  color: var(--text-primary);
  border-color: var(--highlight);
}

.diger-note {
  font-size: 0.74rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 10px;
  padding: 0 4px;
}

.empty-msg {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.7;
  padding: 8px 4px;
}

/* Visually hidden but still announced by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== LOADING STATE (shown while songs.jsonl streams in) ===== */
.loading-state {
  padding: 16px 4px;
}

.loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--card-border);
  border-top-color: var(--highlight);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: spin 0.9s linear infinite;
}

.loading-text {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin: 0 0 14px;
}

.loading-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-card {
  height: 78px;
  border-radius: 8px;
  background: linear-gradient(90deg,
    var(--card-bg) 0%,
    var(--card-border) 50%,
    var(--card-bg) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border: 1px solid var(--card-border);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== SONG CARD ===== */
.song-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  outline: none;
}

.song-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.song-card:focus-visible {
  border-color: var(--highlight);
  box-shadow: 0 0 0 2px var(--highlight);
}

.song-card:active {
  transform: translateY(0);
  box-shadow: none;
}

.song-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 9px;
  line-height: 1.35;
}

.song-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.song-meta-row {
  display: flex;
  gap: 6px;
  font-size: 0.72rem;
  line-height: 1.4;
}

.meta-label {
  color: var(--text-secondary);
  flex-shrink: 0;
  min-width: 90px;
}

.meta-val {
  color: var(--text-primary);
  opacity: 0.9;
}

.song-lyrics-toggle {
  display: block;
  margin-top: 7px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  padding: 0;
  user-select: none;
  transition: color var(--transition);
}

.song-lyrics-toggle::before {
  content: '\25B8';
  font-size: 0.65rem;
  transition: transform var(--transition);
}

.song-lyrics-toggle.open::before {
  transform: rotate(90deg);
}

.song-lyrics-toggle:hover { color: var(--highlight); }

.song-lyrics {
  display: none;
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  line-height: 1.7;
  padding: 8px 10px;
  background: var(--lyrics-bg);
  border-radius: 6px;
  border-left: 2px solid var(--highlight);
}

.song-lyrics.open {
  display: block;
}

.song-source-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--highlight);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity var(--transition);
}
.song-source-link:hover { opacity: 1; text-decoration: underline; }

/* ===== TOOLTIP ===== */
#tooltip {
  position: fixed;
  z-index: 50;
  background: var(--tt-bg);
  color: var(--tt-text);
  border-radius: var(--radius);
  padding: 12px 16px;
  max-width: 240px;
  min-width: 150px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.12);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.15s ease, transform 0.15s ease;
  border-top: 4px solid var(--highlight);
}

#tooltip.visible { opacity: 1; transform: translateY(0) scale(1); }
#tooltip.has-data-tt { border-top-color: var(--accent); }

.tt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--tt-border-color);
}

.tt-city {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--tt-city-color);
  font-weight: 700;
}

.tt-count {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

.tt-count-empty { background: var(--tt-empty-bg); color: var(--tt-empty-text); }

.tt-list { list-style: none; padding: 0; margin: 0; }

.tt-list li {
  font-size: 0.78rem;
  color: var(--tt-list-color);
  padding: 2px 0;
  line-height: 1.4;
}

.tt-list li::before { content: '\266A  '; color: var(--accent); font-size: 0.7rem; }
.tt-more { font-size: 0.72rem !important; color: var(--tt-more-color) !important; font-style: italic; }
.tt-more::before { content: '' !important; }

#tooltip .no-data { font-size: 0.78rem; color: var(--tt-nodata-color); font-style: italic; margin: 0; }

/* ===== KEYBOARD FOCUSED PROVINCE (navigating but not yet selected) ===== */
#map-container svg path.kb-focus {
  fill: var(--highlight);
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(245,166,35,0.55));
}

#map-container svg path[data-tier].kb-focus {
  fill: var(--highlight);
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(245,166,35,0.55));
}

/* ===== ACTIVE PROVINCE ===== */
#map-container svg path.active-province {
  fill: var(--accent);
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(233,69,96,0.7));
}


/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 3px; }

/* ===== DRAWER TOGGLE BUTTON (mobile only, hidden on desktop) ===== */
#drawer-toggle {
  display: none;
}

#drawer-backdrop {
  display: none;
}

/* ===== RESPONSIVE — MOBILE DRAWER ===== */
@media (max-width: 700px) {

  /* Show header controls on mobile, but keep it compact */
  .header-controls {
    display: flex !important;
  }

  /* Hide the text, only show the ☀️/🌙 icon */
  .theme-toggle-text {
    display: none;
  }

  /* Keep the other two toggles (City Names & Density) hidden on mobile */
  #label-toggle-wrap, 
  #choropleth-toggle-wrap {
    display: none !important;
  }

  /* Never show tooltip on touch screens */
  #tooltip { display: none !important; }


  /* Header: smaller */
  header { padding: 10px 14px; }
  header h1 { font-size: 1.1rem; }
  .header-brand { display: none; }

  /* Zoom controls: reposition above the drawer button */
  #zoom-controls { bottom: 72px; right: 12px; gap: 5px; }
  #zoom-controls .zoom-btn { width: 36px; height: 36px; font-size: 1rem; }
  #zoom-controls .reset-btn { height: 24px; font-size: 0.58rem; }
  #scale-badge { bottom: 72px; left: 12px; }

  /* Hint: hide on mobile to save space */
  #hint { display: none; }

  /* Side panel becomes a bottom drawer */
  #side-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 85vh;
    max-height: 85vh;
    border-left: none;
    border-top: 2px solid var(--surface);
    border-radius: 16px 16px 0 0;
    z-index: 100;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
  }

  /* Reduce padding to save space */
  .panel-top { padding: 12px 14px 8px; }
  #search-row { padding: 8px 12px 6px; }

  /* Hide legends on mobile */
  #legend-choropleth-wrap,
  #side-panel .legend-item { display: none; }

  /* Make extra region buttons scroll horizontally */
  #extra-regions {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  #extra-regions::-webkit-scrollbar { display: none; }

  /* Make search scope chips scroll horizontally */
  #search-scope {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  #search-scope::-webkit-scrollbar { display: none; }

  #side-panel.drawer-open {
    transform: translateY(0);
  }

  /* Drag handle at top of drawer */
  #side-panel::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  /* Backdrop */
  #drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    backdrop-filter: blur(2px);
  }

  #drawer-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Floating toggle button */
  #drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 11px 22px;
    font-family: 'Lato', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(233,69,96,0.5);
    white-space: nowrap;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    letter-spacing: 0.02em;
  }

  #drawer-toggle:active {
    transform: translateX(-50%) scale(0.96);
  }

  /* Hide toggle when drawer is open */
  #drawer-toggle.hidden {
    opacity: 0;
    pointer-events: none;
  }
}
/* ===== HEADER CONTROLS (label toggle) ===== */
.header-controls {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.label-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--surface);
  background: var(--toggle-pill-bg);
  transition: background var(--transition), border-color var(--transition);
}

.label-toggle:hover {
  background: var(--surface);
  border-color: var(--highlight);
}

.label-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.label-toggle-track {
  position: relative;
  width: 30px;
  height: 16px;
  background: var(--track-off);
  border-radius: 8px;
  flex-shrink: 0;
  transition: background var(--transition);
}

.label-toggle input:checked ~ .label-toggle-track {
  background: var(--highlight);
}

.label-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.label-toggle input:checked ~ .label-toggle-track .label-toggle-thumb {
  transform: translateX(14px);
}

.label-toggle-text {
  font-family: 'Lato', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color var(--transition);
  white-space: nowrap;
}

.label-toggle:hover .label-toggle-text,
.label-toggle input:checked ~ * + .label-toggle-text {
  color: var(--text-primary);
}

@media (max-width: 700px) {
  .header-controls { display: none; }
}

/* ===== PROVINCE LABELS (SVG text, inside map) ===== */
#province-labels text {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  fill: var(--label-fill);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: var(--label-stroke);
  stroke-linejoin: round;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#province-labels.visible text {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SONG DETAIL MODAL
   ═══════════════════════════════════════════════════════════════ */

/* Make the song card title just a visual label — clicking is on the whole card */
.song-card-title {
  cursor: pointer;
  transition: color var(--transition);
}
.song-card:hover .song-card-title {
  color: var(--highlight);
}

/* "Detayları gör" CTA shown at card bottom */
.song-card-cta {
  margin-top: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity var(--transition), color var(--transition);
}
.song-card:hover .song-card-cta,
.song-card:focus-visible .song-card-cta {
  opacity: 1;
  color: var(--highlight);
}

/* ── MODAL OVERLAY ── */
.song-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.song-modal[hidden] { display: none; }

.song-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modal-backdrop-in 0.22s ease forwards;
}

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── SHEET ── */
.song-modal-sheet {
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-sheet-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modal-sheet-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.song-modal.closing .song-modal-sheet {
  animation: modal-sheet-out 0.18s ease forwards;
}
.song-modal.closing .song-modal-backdrop {
  animation: modal-backdrop-out 0.18s ease forwards;
}

@keyframes modal-sheet-out {
  to { opacity: 0; transform: translateY(16px) scale(0.98); }
}
@keyframes modal-backdrop-out {
  to { opacity: 0; }
}

/* ── CLOSE BUTTON ── */
.song-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: var(--toggle-pill-bg);
  border: 1px solid var(--surface);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.8rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  line-height: 1;
}

.song-modal-close:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── HEADER ── */
.song-modal-header {
  padding: 32px 32px 24px;
  border-bottom: 1px solid var(--surface);
  flex-shrink: 0;
  background: var(--panel-bg);
}

.song-modal-note {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 10px;
  opacity: 0.25;
  color: var(--highlight);
  user-select: none;
}

.song-modal-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 10px;
  padding-right: 40px;
}

.song-modal-region {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--highlight);
  background: var(--card-bg);
  border: 1px solid var(--surface);
  border-radius: 20px;
  padding: 4px 12px;
}

/* ── SCROLLABLE BODY ── */
.song-modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 32px 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.song-modal-body::-webkit-scrollbar { width: 5px; }
.song-modal-body::-webkit-scrollbar-track { background: transparent; }
.song-modal-body::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 3px; }

/* ── SECTIONS ── */
.modal-section {
  padding: 20px 0 4px;
  border-bottom: 1px solid var(--surface);
}

.modal-section:last-child {
  border-bottom: none;
}

.modal-section-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.7;
  margin-bottom: 14px;
}

/* ── METADATA GRID ── */
.modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 20px;
}

.modal-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.modal-cell-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.75;
}

.modal-cell-value {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.4;
}

/* ── RANGE VISUALISER ── */
.modal-range-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 16px;
  flex-wrap: wrap;
}

.modal-range-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 44px;
}

.modal-range-note-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--text-primary);
  line-height: 1;
}

.modal-range-note-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.7;
}

.modal-range-bar-wrap {
  flex: 1;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-range-bar-track {
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: visible;
  position: relative;
}

.modal-range-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--highlight), var(--accent));
  border-radius: 3px;
}

.modal-range-width {
  font-size: 0.7rem;
  color: var(--highlight);
  font-weight: 700;
  text-align: center;
}

.modal-range-karar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 44px;
}

.modal-range-karar-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--accent);
  line-height: 1;
}

.modal-range-karar-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* ── LYRICS ── */
.modal-lyrics {
  font-size: 0.84rem;
  line-height: 1.9;
  color: var(--text-secondary);
  background: var(--lyrics-bg);
  border-left: 3px solid var(--highlight);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin-bottom: 20px;
  white-space: pre-line;
}

/* ── FOOTER ── */
.song-modal-footer {
  padding: 14px 32px;
  border-top: 1px solid var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  background: var(--panel-bg);
  flex-wrap: wrap;
}

.modal-footer-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.modal-rep-no {
  font-size: 0.7rem;
  color: var(--text-secondary);
  opacity: 0.6;
  letter-spacing: 0.04em;
}

.modal-source-link {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--highlight);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity var(--transition);
  opacity: 0.85;
}

.modal-source-link:hover { opacity: 1; text-decoration: underline; }
.modal-source-link.hidden { display: none; }

/* Share button */
.modal-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--accent);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  white-space: nowrap;
}
.modal-share-btn:hover  { opacity: 0.88; transform: scale(1.04); }
.modal-share-btn:active { opacity: 1;    transform: scale(0.97); }

.share-btn-icon {
  font-size: 0.9rem;
  line-height: 1;
}

/* ── SHARE PREVIEW OVERLAY ── */
.share-preview-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--panel-bg);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 28px 24px 24px;
  animation: share-overlay-in 0.22s ease forwards;
}

.share-preview-overlay[hidden] { display: none; }

@keyframes share-overlay-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.share-preview-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 400px;
}

.share-preview-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.7;
  text-align: center;
}

/* Canvas preview — scaled down to fit the overlay */
#share-canvas {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  display: block;
}

.share-preview-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.share-download-btn,
.share-native-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 20px;
  border: none;
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  white-space: nowrap;
}

.share-download-btn {
  background: var(--highlight);
  color: #fff;
}

.share-native-btn {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--surface);
}

.share-download-btn:hover,
.share-native-btn:hover { opacity: 0.85; transform: scale(1.03); }

/* Hide native share button if Web Share API not available */
.share-native-btn.hidden { display: none; }

.share-close-btn {
  background: none;
  border: 1px solid var(--surface);
  border-radius: 20px;
  color: var(--text-secondary);
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  padding: 8px 16px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.share-close-btn:hover { color: var(--text-primary); border-color: var(--highlight); }

.share-preview-hint {
  font-size: 0.7rem;
  color: var(--text-secondary);
  opacity: 0.55;
  text-align: center;
  max-width: 300px;
  line-height: 1.5;
}

/* ── MOBILE ── */
@media (max-width: 700px) {
  .song-modal { padding: 0; align-items: flex-end; }
  .song-modal-sheet {
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    animation: modal-mobile-in 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
  }
  @keyframes modal-mobile-in {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .song-modal-header { padding: 24px 20px 18px; }
  .song-modal-body   { padding: 0 20px 8px; }
  .song-modal-footer { padding: 12px 20px; }
  .modal-grid { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .share-preview-overlay { padding: 20px 16px 20px; border-radius: 20px 20px 0 0; }
  #share-canvas { max-width: 280px; }
}
/* ═══════════════════════════════════════════════════════════════
   ONBOARDING TOUR
   ═══════════════════════════════════════════════════════════════ */

#onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none; /* let spotlight punch through by default */
}

#onboarding-overlay[hidden] { display: none; }

/* Dark backdrop rendered via a clip-path hole around the spotlight */
#onboarding-spotlight {
  position: absolute;
  inset: 0;
  /* filled by JS with a radial/rect cutout using clip-path + background */
  pointer-events: auto;
  transition: clip-path 0.35s cubic-bezier(.4,0,.2,1);
}

/* ── CARD ── */
#onboarding-card {
  position: absolute;
  width: 260px;
  background: var(--panel-bg);
  border: 1px solid var(--surface);
  border-radius: 14px;
  padding: 20px 20px 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55);
  pointer-events: auto;
  transition: top 0.35s cubic-bezier(.4,0,.2,1),
              left 0.35s cubic-bezier(.4,0,.2,1),
              opacity 0.2s ease,
              transform 0.2s ease;
  border-top: 3px solid var(--highlight);
}

/* ── STEP DOTS ── */
#onboarding-step-indicator {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
}

.ob-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface);
  transition: background 0.2s ease, transform 0.2s ease;
}

.ob-dot.active {
  background: var(--highlight);
  transform: scale(1.3);
}

/* ── ICON ── */
#onboarding-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 8px;
}

/* ── TITLE ── */
#onboarding-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 7px;
  line-height: 1.3;
}

/* ── BODY ── */
#onboarding-body {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* ── ACTIONS ── */
#onboarding-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

#onboarding-skip {
  background: none;
  border: none;
  font-family: 'Lato', sans-serif;
  font-size: 0.72rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 0;
  opacity: 0.7;
  transition: opacity var(--transition), color var(--transition);
}

#onboarding-skip:hover {
  opacity: 1;
  color: var(--accent);
}

#onboarding-next {
  background: var(--highlight);
  border: none;
  border-radius: 20px;
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  padding: 8px 18px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: opacity var(--transition), transform var(--transition);
}

#onboarding-next:hover {
  opacity: 0.88;
  transform: scale(1.04);
}

/* Arrow pointer on card */
#onboarding-card::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--panel-bg);
  border-left: 1px solid var(--surface);
  border-top: 1px solid var(--surface);
  transform: rotate(45deg);
  transition: top 0.35s cubic-bezier(.4,0,.2,1),
              left 0.35s cubic-bezier(.4,0,.2,1),
              bottom 0.35s cubic-bezier(.4,0,.2,1),
              right 0.35s cubic-bezier(.4,0,.2,1);
}

/* Arrow placement classes, set by JS */
#onboarding-card.arrow-top::before    { top: -6px; left: 24px; }
#onboarding-card.arrow-bottom::before { bottom: -6px; top: auto; left: 24px; transform: rotate(225deg); border-color: var(--surface); }
#onboarding-card.arrow-left::before   { left: -6px; top: 24px; transform: rotate(-45deg); }
#onboarding-card.arrow-right::before  { right: -6px; left: auto; top: 24px; transform: rotate(135deg); }
#onboarding-card.arrow-none::before   { display: none; }

/* Fade-in animation */
@keyframes ob-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#onboarding-card.animating {
  animation: ob-card-in 0.25s ease forwards;
}

/* ── MOBILE adjustments ── */
@media (max-width: 700px) {
  #onboarding-card {
    width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px;
  }
  #onboarding-card::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE: MODAL PREV / NEXT NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

/* Arrow nav buttons — positioned on the modal overlay (full-screen flex container)
   so they are never clipped by the sheet's overflow:hidden */
.modal-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 210;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--surface);
  background: var(--panel-bg);
  color: var(--text-primary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition), opacity var(--transition),
              box-shadow var(--transition);
  opacity: 0.9;
  box-shadow: var(--shadow);
}

.modal-nav-btn:hover {
  background: var(--surface);
  border-color: var(--highlight);
  color: var(--highlight);
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.modal-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

/* The modal overlay is a flex container centred around the sheet (max-width 680px).
   We position the buttons relative to the overlay using calc so they sit just
   outside the sheet on each side. The sheet has 20px padding on the overlay,
   so we need to land beyond (50vw - 340px - 20px) from each side edge. */
.modal-nav-prev {
  /* Place at the left edge of the sheet minus a gap */
  left: calc(50% - min(340px, 50vw - 20px) - 56px);
}
.modal-nav-next {
  right: calc(50% - min(340px, 50vw - 20px) - 56px);
}

/* On viewports where there's no room outside the sheet, hide them —
   keyboard (←/→) and swipe still work */
@media (max-width: 820px) {
  .modal-nav-prev,
  .modal-nav-next {
    display: none;
  }
}

.modal-nav-btn.hidden { display: none !important; }

/* Navigation counter below the region line */
.modal-nav-counter {
  width: 100%;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  opacity: 0.55;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE: COPY LINK BUTTON
   ═══════════════════════════════════════════════════════════════ */

.modal-copy-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  background: transparent;
  border: 1px solid var(--surface);
  border-radius: 20px;
  color: var(--text-secondary);
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
  white-space: nowrap;
}

.modal-copy-link-btn:hover {
  border-color: var(--highlight);
  color: var(--highlight);
  background: rgba(245,166,35,0.08);
}

.modal-copy-link-btn:active {
  transform: scale(0.96);
}

.copy-link-icon { font-size: 0.85rem; }

/* ═══════════════════════════════════════════════════════════════
   FEATURE: RANDOM FROM PROVINCE BUTTON
   ═══════════════════════════════════════════════════════════════ */

/* The panel header now has a sub-row for count + random button */
.panel-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-random-province {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--surface);
  border-radius: 12px;
  color: var(--text-secondary);
  font-family: 'Lato', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
  white-space: nowrap;
}

.btn-random-province:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(233,69,96,0.08);
}

.btn-random-province:active {
  transform: scale(0.95);
}

/* ═══════════════════════════════════════════════════════════════
   DATA SOURCE CREDIT
   ═══════════════════════════════════════════════════════════════ */

#data-credit {
  padding: 8px 16px 12px;
  border-top: 1px solid var(--surface);
  font-size: 0.65rem;
  color: var(--text-secondary);
  opacity: 0.6;
  flex-shrink: 0;
  text-align: center;
  letter-spacing: 0.02em;
}

#data-credit a {
  color: var(--highlight);
  text-decoration: none;
  font-weight: 700;
}

#data-credit a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   GÜNÜN TÜRKÜSÜ CARD — floating overlay bottom-left of map
   ═══════════════════════════════════════════════════════════════ */

#totd-container {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 15;
  max-width: 220px;
  pointer-events: auto;
}

/* Hide on mobile — drawer takes the whole bottom */
@media (max-width: 700px) {
  #totd-container { display: none; }
}

.totd-card {
  padding: 11px 14px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Subtle left accent stripe */
.totd-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--highlight), var(--accent));
  border-radius: 3px 0 0 3px;
}

.totd-card:hover {
  border-color: var(--card-border-hover);
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

.totd-card:active { transform: scale(0.99); }

.totd-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--highlight);
  margin-bottom: 6px;
  opacity: 0.85;
}

.totd-star {
  font-size: 0.7rem;
  line-height: 1;
  animation: totd-spin 12s linear infinite;
}

@keyframes totd-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.totd-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 5px;
  padding-right: 2px;
}

.totd-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  font-size: 0.65rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.totd-sep {
  opacity: 0.4;
  font-size: 0.55rem;
}

.totd-cta {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--highlight);
  opacity: 0;
  transition: opacity var(--transition);
  text-transform: uppercase;
}

.totd-card:hover .totd-cta,
.totd-card:focus-visible .totd-cta {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SUGGEST A SONG LINK — floating overlay bottom-right of map
   ═══════════════════════════════════════════════════════════════ */

#suggest-link {
  position: absolute;
  bottom: 175px;
  right: 14px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--surface);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color var(--transition), border-color var(--transition),
              background var(--transition), transform var(--transition);
  white-space: nowrap;
}

#suggest-link:hover {
  color: var(--highlight);
  border-color: var(--highlight);
  background: var(--panel-bg);
  transform: translateY(-1px);
}

/* On mobile push it above the drawer toggle button */
@media (max-width: 700px) {
  #suggest-link {
    bottom: 68px;
    right: 12px;
    font-size: 0.62rem;
    padding: 5px 10px;
  }
}

.suggest-icon {
  font-size: 0.8rem;
  line-height: 1;
}