/* Deprem haritası sayfası */
.sayfa { max-width: 1240px; margin: 0 auto; padding: 14px 16px 18px; }

.ust { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ust h1 { margin: 0; }
.tam-sayfa { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.tam-sayfa[hidden] { display: none; }

/* araç çubuğu */
.arac {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px;
  margin: 10px 0 12px;
}
.alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.alan-il { flex: 1 1 220px; }
.alan-deprem { flex: 1 1 260px; }
.alan input, .alan select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid var(--murekkep);
  border-radius: 2px;
  background: var(--kart);
  font-size: 16px; /* iOS'ta odakta sayfa büyümesin */
}
.alan select { appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23171717' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; }
.katman { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.katman legend { padding: 0; margin-bottom: 4px; width: 100%; }
.katman label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; cursor: pointer; }
.katman input { width: 18px; height: 18px; accent-color: var(--murekkep); margin: 0; }

/* gövde: harita + kart */
.govde { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.sekil { margin: 0; min-width: 0; }

.cerceve {
  position: relative;
  aspect-ratio: 2 / 1;
  background: var(--deniz);
  border: 1.5px solid var(--murekkep);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cerceve.yakin { touch-action: none; cursor: grab; }
.cerceve.suruk { cursor: grabbing; }
.cerceve.uzerinde { cursor: pointer; }
.cerceve:focus-visible { outline-offset: 3px; }
#svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#deniz { fill: var(--deniz); }
#komsular { fill: var(--komsu); stroke: var(--cizgi); stroke-width: .7px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
#turkiye { fill: var(--kagit); stroke: none; pointer-events: none; }
#turkiye-kiyi { fill: none; stroke: var(--murekkep); stroke-width: 1.1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
#goller { fill: var(--deniz); stroke: #818F92; stroke-width: .5px; vector-effect: non-scaling-stroke; pointer-events: none; }
#k-su path { fill: none; stroke: #818F92; stroke-width: .7px; vector-effect: non-scaling-stroke; pointer-events: none; }
#iller path { fill: transparent; stroke: var(--cizgi); stroke-width: .6px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: fill; }
#iller path:hover { fill: rgba(224, 165, 21, .10); }
#il-secili { fill: rgba(224, 165, 21, .16); stroke: var(--murekkep); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
#izgara { fill: none; stroke: var(--murekkep); stroke-opacity: .10; stroke-width: .6px; vector-effect: non-scaling-stroke; pointer-events: none; }
#faylar path { fill: none; stroke: var(--fay); stroke-width: 1.3px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
#faylar path.vurgu { stroke-width: 2.6px; }
#fay-isabet path { fill: none; stroke: transparent; stroke-width: 9px; vector-effect: non-scaling-stroke; pointer-events: stroke; }
#yazilar text { pointer-events: none; font-family: var(--font); }
#depremler circle { fill: var(--deprem); fill-opacity: .72; stroke: var(--murekkep); vector-effect: non-scaling-stroke; pointer-events: none; }
#depremler circle.ust { fill-opacity: 1; }
#secim { pointer-events: none; }
.gizle-fay #faylar, .gizle-fay #fay-isabet, .gizle-fay .fay-yazi { display: none; }
.gizle-deprem #depremler, .gizle-deprem #secim .deprem-secim { display: none; }
.gizle-il #iller path { stroke: none; }

.zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; }
.zoom button {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--kart); border: 1.5px solid var(--murekkep); border-radius: 2px;
  cursor: pointer; font-size: 16px; padding: 0;
}
.zoom button:hover { background: var(--murekkep); color: var(--kagit); }
.zoom button:disabled { cursor: default; background: var(--kart); color: var(--cizgi); border-color: var(--cizgi); }

.olcek { position: absolute; left: 10px; bottom: 24px; display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; pointer-events: none; }
.olcek-cubuk { display: block; height: 5px; border: 1.2px solid var(--murekkep);
  background: linear-gradient(90deg, var(--murekkep) 50%, var(--kart) 50%); }

.ipucu {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(23, 23, 23, .86); color: var(--kagit);
  padding: 8px 14px; border-radius: 2px; font-size: 14px; pointer-events: none; text-align: center; max-width: 80%;
}

.lejant { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 8px 0 0; font-size: 13px; color: var(--meta); }
.l-oge { display: inline-flex; align-items: center; gap: 7px; }
.l-oge svg { height: 16px; width: auto; flex: none; }

/* kart */
.kart {
  background: var(--kart);
  border: 1.5px solid var(--murekkep);
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 160px;
}
.kart h2 { margin: 0; font-weight: 800; font-size: 21px; line-height: 1.2; }
.kart p { margin: 0; font-size: 15px; line-height: 1.5; }
.kart dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 15px; }
.kart dt { color: var(--meta); }
.kart dd { margin: 0; font-variant-numeric: tabular-nums; }
.kart ul { margin: 0; padding-left: 18px; font-size: 15px; }
.kart li + li { margin-top: 4px; }
.kart .kaynak {
  margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--cizgi);
  font-size: 12px; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase; color: var(--meta);
}
.kart .uyari { color: var(--pas); }
.kart .kapat { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--pas); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: 14px; min-height: 32px; }

.atif {
  margin: 12px 0 0; padding: 10px 14px;
  background: var(--murekkep); color: var(--kagit);
  font-size: 12px; line-height: 1.6; letter-spacing: .03em;
}
.atif a { color: var(--kagit); }
.atif a:hover { color: var(--deprem); }

@media (max-width: 860px) {
  .govde { grid-template-columns: 1fr; gap: 12px; }
  .kart { min-height: 0; }
}
@media (max-width: 520px) {
  .sayfa { padding: 10px 12px 14px; }
  .arac { gap: 8px 12px; margin: 8px 0 10px; }
  .alan-il, .alan-deprem { flex-basis: 100%; }
  .katman legend { display: none; }
  .katman label { font-size: 14px; min-height: 40px; }
  .zoom { top: 6px; right: 6px; gap: 4px; flex-direction: row; }
  .zoom button { width: 34px; height: 34px; }
  .olcek { bottom: 18px; left: 8px; font-size: 10px; }
  .lejant { font-size: 12px; gap: 2px 14px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }