/* ============================================================
   GeoRehber Geodata — Arayüz
   PDF bölüm 13.1 + georehber.com canlı CSS doğrulaması:
   lacivert birincil (#003286) + yeşil vurgu (#11ad00) + açık zemin,
   sade, bol boşluk, marka rengi yalnızca aksiyon noktalarında.
   ============================================================ */

:root {
  /* Renkler georehber.com'un canlı CSS'inden (oklch) örneklenip hex'e çevrildi. */
  --lacivert: #003286;        /* oklch(0.35 0.15 260) — site birincil rengi */
  --lacivert-koyu: #002362;   /* oklch(0.28 0.12 260) — hover */
  --yesil: #11ad00;           /* oklch(0.65 0.22 142) — site vurgu rengi */
  --yesil-koyu: #067900;      /* buton zemini (beyaz metinle 5.6:1 kontrast) */
  --yesil-acik: #e4f4e2;      /* rozet zemini */
  --zemin: #f8f8f8;
  --kart: #ffffff;
  --kenarlik: #e4e4e7;
  --metin: #12080b;
  --metin-soluk: #686163;
  --uyari: #a15c12;
  --uyari-zemin: #fdf4e7;
  --lacivert-zemin: #eef2f9;
  --yaricap: 10px;
  --golge: 0 1px 2px rgba(0, 35, 98, .06);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--zemin);
  color: var(--metin);
  font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

.uygulama {
  display: grid;
  grid-template-columns: 268px 1fr;
  height: 100%;
}

/* ---------------- Kenar çubuğu ---------------- */

.kenar {
  display: flex;
  flex-direction: column;
  background: var(--kart);
  border-right: 1px solid var(--kenarlik);
  min-height: 0;
}

.kenar-ust { padding: 18px 16px 12px; }

.marka {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 20px;
}

.marka-ikon {
  width: 36px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.marka-ad {
  color: var(--lacivert);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.4px;
}
.marka-ad strong { font-weight: 700; }

.btn-yeni {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--kenarlik);
  border-radius: var(--yaricap);
  background: var(--zemin);
  color: var(--lacivert);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-yeni:hover { background: var(--lacivert-zemin); border-color: #d5dced; }

.sohbet-listesi {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 12px;
  min-height: 0;
}

.sohbet-satir {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
}
.sohbet-satir:hover { background: var(--zemin); }
.sohbet-satir.aktif { background: var(--lacivert-zemin); }

.sohbet-satir button.ad {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  background: none;
  color: var(--metin);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sohbet-satir.aktif button.ad { color: var(--lacivert); font-weight: 600; }

.sohbet-satir button.sil {
  border: 0;
  background: none;
  color: var(--metin-soluk);
  cursor: pointer;
  padding: 6px 9px;
  opacity: 0;
  border-radius: 6px;
}
.sohbet-satir:hover button.sil { opacity: 1; }
.sohbet-satir button.sil:hover { color: #b3261e; }

.kenar-alt {
  border-top: 1px solid var(--kenarlik);
  padding: 12px 12px 14px;
}

.arac-menu { display: flex; flex-direction: column; gap: 2px; }

.arac {
  text-align: left;
  border: 0;
  background: none;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--metin-soluk);
  cursor: pointer;
}
.arac.aktif { color: var(--lacivert); font-weight: 600; background: var(--lacivert-zemin); }
.arac.pasif { cursor: default; }

.rozet {
  font-size: 11px;
  color: var(--yesil-koyu);
  background: var(--yesil-acik);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
}

.gizlilik {
  margin: 12px 4px 0;
  font-size: 12px;
  color: var(--metin-soluk);
  line-height: 1.45;
}
.gizlilik a { color: var(--lacivert); }

.sayac {
  margin: 6px 4px 0;
  font-size: 12px;
  color: var(--metin-soluk);
  font-variant-numeric: tabular-nums;
}

.gizlilik-kutu {
  max-width: 520px;
  border: 1px solid var(--kenarlik);
  border-radius: var(--yaricap);
  padding: 22px 24px;
  color: var(--metin);
  background: var(--kart);
}
.gizlilik-kutu::backdrop { background: rgba(0, 35, 98, .25); }
.gizlilik-kutu h2 { margin: 0 0 12px; font-size: 17px; color: var(--lacivert); }
.gizlilik-kutu ul { margin: 0 0 12px; padding-left: 20px; }
.gizlilik-kutu li { margin-bottom: 9px; font-size: 13.5px; }
.gizlilik-kutu .not { font-size: 12.5px; color: var(--metin-soluk); margin: 0 0 16px; }
.gizlilik-kutu button {
  border: 0;
  background: var(--lacivert);
  color: #fff;
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------------- Ana sütun ---------------- */

.ana {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.baslik-cubugu {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--kenarlik);
  background: var(--kart);
}

/* Başlık ve açıklama aynı satırda: çubuk ince kalsın */
.baslik-metin {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.baslik-cubugu h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--lacivert);
  line-height: 1.2;
  flex-shrink: 0;
}

.baslik-cubugu .baslik-metin p {
  margin: 0;
  font-size: 12.5px;
  color: var(--metin-soluk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.durum {
  margin-left: auto;
  font-size: 12px;
  color: var(--metin-soluk);
}
.durum.hata { color: #b3261e; }

.kenar-ac {
  display: none;
  border: 1px solid var(--kenarlik);
  background: var(--kart);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--lacivert);
}

.akis {
  flex: 1;
  overflow-y: auto;
  padding: 26px 22px 8px;
  min-height: 0;
}

.akis > * {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------- Mesajlar ---------------- */

.mesaj { margin-bottom: 22px; }

.mesaj.kullanici {
  display: flex;
  justify-content: flex-end;
}

.mesaj.kullanici .balon {
  background: var(--lacivert);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  max-width: 78%;
}

.mesaj.sistem .bilgi {
  margin: 0 0 12px;
  color: var(--metin);
}

.mesaj.sistem .ai-metin {
  white-space: pre-wrap;
  background: var(--kart);
  border: 1px solid var(--kenarlik);
  border-radius: var(--yaricap);
  padding: 14px 16px;
  box-shadow: var(--golge);
}

.dusunuyor { color: var(--metin-soluk); font-style: italic; }

/* ---------------- Sonuç kartı (13.2) ---------------- */

.kart {
  background: var(--kart);
  border: 1px solid var(--kenarlik);
  border-radius: var(--yaricap);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--golge);
}

.kart-ust {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.kart h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.2px;
  color: var(--lacivert);
  flex: 1;
}

.etiket {
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
  background: var(--yesil-acik);
  color: var(--yesil-koyu);
}
.etiket.alternatif { background: var(--lacivert-zemin); color: var(--lacivert); }
.etiket.yakin { background: #f4f1ea; color: #7a6a45; }
.etiket.canli { background: var(--yesil-acik); color: var(--yesil-koyu); }

.kart .ustveri {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--metin-soluk);
  margin: 0 0 14px;
}

.indir {
  display: inline-block;
  background: var(--yesil-koyu);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  transition: background .15s;
}
.indir:hover { background: #0a6802; }

.kaynak-link {
  display: inline-block;
  margin-left: 14px;
  color: var(--lacivert);
  font-size: 13px;
}

/* ---------------- Kesme rehberi / OSM blokları ---------------- */

.rehber {
  background: var(--kart);
  border: 1px solid var(--kenarlik);
  border-left: 3px solid var(--lacivert);
  border-radius: var(--yaricap);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.rehber h4 {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: var(--lacivert);
}

.rehber ul { margin: 0 0 10px; padding-left: 18px; }
.rehber li { margin-bottom: 4px; }
.rehber .not { font-size: 12.5px; color: var(--metin-soluk); }

.rehber a { color: var(--lacivert); }

.kod {
  position: relative;
  background: #0f1b2d;
  color: #dbe6f5;
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin: 8px 0 4px;
}

.kod-kopyala {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #dbe6f5;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  cursor: pointer;
}

.uyari-kutu {
  background: var(--uyari-zemin);
  border: 1px solid #f0dfc4;
  color: var(--uyari);
  border-radius: var(--yaricap);
  padding: 13px 15px;
  margin-bottom: 12px;
}

.cozum-yolu {
  font-size: 11.5px;
  color: var(--metin-soluk);
  margin-top: 4px;
}

/* ---------------- Karşılama ---------------- */

.karsilama {
  padding: 48px 4px;
  text-align: center;
}
.karsilama h2 {
  margin: 0 0 10px;
  font-size: 25px;
  color: var(--lacivert);
  font-weight: 700;
  letter-spacing: -.6px;
}
.karsilama p {
  margin: 0 auto 28px;
  max-width: 470px;
  font-size: 15.5px;
  color: var(--metin-soluk);
}

.ornekler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.ornekler button {
  border: 1px solid var(--kenarlik);
  background: var(--kart);
  border-radius: 999px;
  padding: 8px 15px;
  color: var(--lacivert);
  cursor: pointer;
}
.ornekler button:hover { border-color: var(--yesil-koyu); color: var(--yesil-koyu); }

/* ---------------- Besteci (giriş alanı) ---------------- */

.besteci {
  display: flex;
  gap: 10px;
  padding: 14px 22px 20px;
  max-width: 824px;
  width: 100%;
  margin: 0 auto;
}

.besteci input {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid var(--kenarlik);
  border-radius: var(--yaricap);
  background: var(--kart);
  outline: none;
}
.besteci input:focus { border-color: var(--lacivert); box-shadow: 0 0 0 3px rgba(0, 50, 134, .10); }

.besteci button {
  padding: 12px 22px;
  border: 0;
  border-radius: var(--yaricap);
  background: var(--lacivert);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.besteci button:hover { background: var(--lacivert-koyu); }
.besteci button:disabled { opacity: .55; cursor: default; }

/* ---------------- Mobil ---------------- */

@media (max-width: 820px) {
  .uygulama { grid-template-columns: 1fr; }
  .kenar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 274px;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 0 30px rgba(0, 0, 0, .12);
  }
  .kenar.acik { transform: none; }
  .kenar-ac { display: block; }
  .baslik-cubugu { padding: 10px 14px; align-items: center; }
  .baslik-cubugu h1 { font-size: 18px; }
  .baslik-cubugu .baslik-metin p { display: none; }
  .akis { padding: 20px 16px 4px; }
  .besteci { padding: 12px 16px 16px; }
  .mesaj.kullanici .balon { max-width: 88%; }
}