:root {
  --zemin: #f5f1f9;
  --kart: #ffffff;
  --kart-2: #faf8fc;
  --cizgi: #e6deef;
  --metin: #2a2140;
  --soluk: #7a6f8e;
  --mor: #4b2c73;
  --mor-yazi: #4b2c73;
  --mor-acik: #ede6f5;
  --mercan: #e2604f;
  --mercan-acik: #fdebe7;
  --yesil: #1d7f55;
  --yesil-acik: #e2f3ea;
  --sari: #9a6408;
  --sari-acik: #fdf2d8;
  --mavi: #2f6fd6;
  --golge: 0 1px 2px rgba(42, 33, 64, .06), 0 4px 16px rgba(42, 33, 64, .06);
  --yaricap: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #15111b;
    --kart: #1e1928;
    --kart-2: #241e30;
    --cizgi: #322a43;
    --metin: #eee8f6;
    --soluk: #a49bb6;
    --mor: #8f6ccc;
    --mor-yazi: #c8b2ef;
    --mor-acik: #2d2442;
    --mercan: #f07a69;
    --mercan-acik: #3a2226;
    --yesil: #4cc38a;
    --yesil-acik: #183026;
    --sari: #e0b155;
    --sari-acik: #352b16;
    --mavi: #7eaaf5;
    --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--mavi); }
.soluk { color: var(--soluk); }
.hata-yazi { color: var(--mercan); min-height: 1.2em; margin: 0; font-size: 14px; }

/* ───── Düğmeler ───── */
.dugme {
  border: 1px solid var(--cizgi);
  background: var(--kart);
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .05s;
}
.dugme:hover { background: var(--kart-2); }
.dugme:active { transform: translateY(1px); }
.dugme.ana { background: var(--mor); border-color: var(--mor); color: #fff; }
.dugme.ana:hover { filter: brightness(1.08); }
.dugme.yesil { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.dugme.tehlike { color: var(--mercan); }
.dugme.genis { width: 100%; padding: 11px; }
.dugme:disabled { opacity: .5; cursor: default; }
.ikon-dugme {
  border: 0; background: transparent; cursor: pointer;
  width: 38px; height: 38px; border-radius: 10px; font-size: 18px;
  display: inline-grid; place-items: center; flex: none;
}
.ikon-dugme:hover { background: var(--mor-acik); }
.hap {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--cizgi); background: var(--kart); cursor: default; white-space: nowrap;
}
button.hap { cursor: pointer; }
.hap.acik { background: var(--yesil-acik); color: var(--yesil); border-color: transparent; }
.hap.kapali { background: var(--mercan-acik); color: var(--mercan); border-color: transparent; }
.hap.uyari-hap { background: var(--sari-acik); color: var(--sari); border-color: transparent; }
.hap.sade { font-weight: 500; color: var(--soluk); }

/* ───── Giriş ───── */
.giris { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.giris-kart {
  width: min(380px, 100%); background: var(--kart); border-radius: 18px; padding: 28px 24px;
  box-shadow: var(--golge); display: grid; gap: 14px;
}
.giris-kart label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
input[type=text], input[type=password], input[type=search], input[type=number], textarea, select {
  width: 100%; border: 1px solid var(--cizgi); background: var(--kart-2); border-radius: 10px; padding: 10px 12px; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--mor); box-shadow: 0 0 0 3px var(--mor-acik); }
.marka { font-size: 18px; font-weight: 500; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.marka b { font-weight: 800; color: var(--mor-yazi); }
.marka-nokta { width: 12px; height: 12px; border-radius: 50%; background: var(--mercan); box-shadow: 6px 0 0 var(--mor); margin-right: 8px; }

/* ───── Uygulama iskeleti ───── */
.uygulama { height: 100%; display: flex; flex-direction: column; }
.ust {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: var(--kart); border-bottom: 1px solid var(--cizgi);
}
.ust-durum { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ust-durum::-webkit-scrollbar { display: none; }
.ust-dugmeler { display: flex; gap: 2px; }
.govde { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 380px) 1fr; }

/* ───── Konuşma listesi ───── */
.liste-alani { border-right: 1px solid var(--cizgi); background: var(--kart); display: flex; flex-direction: column; min-height: 0; }
.liste-ust { padding: 10px 12px 8px; display: grid; gap: 8px; border-bottom: 1px solid var(--cizgi); }
.filtreler { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filtreler::-webkit-scrollbar { display: none; }
.filtreler button {
  border: 1px solid var(--cizgi); background: var(--kart); border-radius: 999px; padding: 5px 11px;
  font-size: 13px; cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center;
}
.filtreler button.secili { background: var(--mor); border-color: var(--mor); color: #fff; }
.sayi:empty { display: none; }
.sayi { background: var(--mercan); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; font-weight: 700; line-height: 17px; }
.liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.liste li {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--cizgi); cursor: pointer;
}
.liste li:hover { background: var(--kart-2); }
.liste li.aktif { background: var(--mor-acik); }
.liste li.yardim { box-shadow: inset 3px 0 0 var(--mercan); }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 16px;
  position: relative; background: var(--mor);
}
.avatar .kanal { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--kart); font-size: 9px; display: grid; place-items: center; color: #fff; }
.kanal.wa { background: #25a35a; }
.kanal.ig { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }
.oge-orta { min-width: 0; }
.oge-ad { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 6px; align-items: center; }
.oge-ozet { color: var(--soluk); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oge-sag { display: grid; justify-items: end; gap: 4px; font-size: 12px; color: var(--soluk); }
.kip { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.kip.bot { background: var(--mor-acik); color: var(--mor-yazi); }
.kip.insan { background: var(--yesil-acik); color: var(--yesil); }
.kip.bekliyor { background: var(--mercan-acik); color: var(--mercan); }
.okunmamis { background: var(--mercan); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; font-weight: 700; font-size: 11px; }
.bos { color: var(--soluk); text-align: center; padding: 24px; }

/* ───── Sohbet ───── */
.sohbet-alani { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sohbet-bos { margin: auto; }
.bos-ikon { font-size: 42px; opacity: .5; }
.sohbet { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sohbet-ust { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--kart); border-bottom: 1px solid var(--cizgi); }
.geri { display: none; font-size: 28px; }
.kisi-bilgi { flex: 1; min-width: 0; }
.kisi-ad { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.kisi-alt { color: var(--soluk); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kisi-eylemler { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.menu { position: relative; }
.menu-liste {
  position: absolute; right: 0; top: 42px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px;
  box-shadow: var(--golge); padding: 6px; z-index: 20; display: grid; min-width: 230px;
}
.menu-liste button { text-align: left; border: 0; background: transparent; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.menu-liste button:hover { background: var(--mor-acik); }
.devir-bandi { background: var(--mercan-acik); color: var(--metin); padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--cizgi); }
.devir-bandi b { color: var(--mercan); }
.mesajlar { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 6px; }
.gun-ayrac { align-self: center; font-size: 12px; color: var(--soluk); background: var(--kart); border: 1px solid var(--cizgi); border-radius: 999px; padding: 2px 10px; margin: 8px 0; }
.balon {
  max-width: min(78%, 620px); border-radius: 16px; padding: 8px 12px 6px; position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04); word-wrap: break-word; overflow-wrap: anywhere;
}
.balon.gelen { align-self: flex-start; background: var(--kart); border: 1px solid var(--cizgi); border-bottom-left-radius: 6px; }
.balon.bot { align-self: flex-end; background: var(--mor-acik); border-bottom-right-radius: 6px; }
.balon.insan { align-self: flex-end; background: var(--yesil-acik); border-bottom-right-radius: 6px; }
.balon .yazi { white-space: pre-wrap; }
.balon .alt { display: flex; gap: 8px; justify-content: flex-end; align-items: center; font-size: 11.5px; color: var(--soluk); margin-top: 3px; }
.balon .kim { font-weight: 700; font-size: 11.5px; margin-bottom: 2px; }
.balon.bot .kim { color: var(--mor-yazi); }
.balon.insan .kim { color: var(--yesil); }
.balon .not { font-size: 13px; color: var(--soluk); border-left: 3px solid var(--cizgi); padding: 2px 0 2px 8px; margin-top: 6px; font-style: italic; white-space: pre-wrap; }
.balon .hata { font-size: 12.5px; color: var(--mercan); margin-top: 4px; }
.balon img.medya { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; margin: 2px 0 4px; cursor: zoom-in; }
.balon img.cikartma { max-width: 120px; }
.balon audio { width: min(300px, 100%); margin: 4px 0; }
.balon video { display: block; max-width: 100%; max-height: 340px; border-radius: 10px; margin: 2px 0 4px; }
.belge-bag { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid var(--cizgi); border-radius: 10px; text-decoration: none; color: var(--metin); background: var(--kart-2); margin: 2px 0 4px; }
.tik.okundu { color: var(--mavi); }
.tik.hata { color: var(--mercan); }
.sistem-not { align-self: center; max-width: 90%; text-align: center; font-size: 12.5px; color: var(--soluk); background: var(--kart-2); border: 1px dashed var(--cizgi); border-radius: 10px; padding: 4px 10px; margin: 4px 0; }
.yazma { border-top: 1px solid var(--cizgi); background: var(--kart); padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
.yazma-satir { display: flex; gap: 8px; align-items: flex-end; }
.yazma textarea { resize: none; max-height: 160px; min-height: 42px; line-height: 1.4; }
.yazma .ek { cursor: pointer; }
.yazma-ipucu { margin: 0 0 6px; font-size: 13px; color: var(--soluk); }
.yazma-ipucu.uyari { color: var(--sari); }

/* ───── Pencereler ───── */
.pencere { border: 0; padding: 0; border-radius: 18px; background: var(--kart); color: var(--metin); width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: var(--golge); }
.pencere.kucuk { width: min(460px, calc(100vw - 24px)); }
.pencere::backdrop { background: rgba(20, 12, 32, .45); }
.pencere-ic { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.pencere-baslik { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--cizgi); }
.pencere-baslik h2 { margin: 0; font-size: 18px; }
.pencere-alt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--cizgi); }
.pencere-ic > textarea, .pencere-ic > p { margin: 12px 18px 0; width: auto; }
.ayarlar-icerik { padding: 6px 18px 16px; overflow-y: auto; display: grid; gap: 18px; }
.ayar-grup h3 { margin: 10px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); }
.ayar-satir { display: grid; grid-template-columns: 1fr minmax(160px, 260px); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--cizgi); }
.ayar-satir:last-child { border-bottom: 0; }
.ayar-satir .aciklama { font-size: 13px; color: var(--soluk); }
.ayar-satir.tam { grid-template-columns: 1fr; }
.anahtar { position: relative; width: 46px; height: 28px; justify-self: end; }
.anahtar input { opacity: 0; width: 0; height: 0; }
.anahtar span { position: absolute; inset: 0; border-radius: 999px; background: var(--cizgi); cursor: pointer; transition: .2s; }
.anahtar span::after { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.anahtar input:checked + span { background: var(--yesil); }
.anahtar input:checked + span::after { transform: translateX(18px); }
.baglanti-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.baglanti { border: 1px solid var(--cizgi); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; display: flex; gap: 8px; align-items: center; }
.istatistik { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.istatistik div { background: var(--kart-2); border-radius: 10px; padding: 10px; }
.istatistik b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.istatistik span { font-size: 12.5px; color: var(--soluk); }
.kod { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: var(--kart-2); border: 1px solid var(--cizgi); border-radius: 8px; padding: 6px 8px; overflow-wrap: anywhere; }
.uyari-listesi { list-style: none; margin: 0; padding: 6px 12px 16px; overflow-y: auto; }
.uyari-listesi li { padding: 10px 8px; border-bottom: 1px solid var(--cizgi); display: grid; gap: 4px; cursor: pointer; border-radius: 8px; }
.uyari-listesi li:hover { background: var(--kart-2); }
.uyari-ust { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--soluk); }
.uyari-ust b { color: var(--metin); }
.bildirim {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--metin); color: var(--zemin); padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 50; max-width: calc(100vw - 32px);
  box-shadow: var(--golge);
}

/* ───── Telefon ───── */
@media (max-width: 860px) {
  .govde { grid-template-columns: 1fr; }
  .sohbet-alani { display: none; }
  .uygulama.sohbette .liste-alani { display: none; }
  .uygulama.sohbette .sohbet-alani { display: flex; }
  .geri { display: inline-grid; }
  .ust { gap: 8px; padding-left: 10px; padding-right: 6px; }
  .ust .marka { font-size: 16px; }
  .ust .marka b { display: none; }
  .balon { max-width: 88%; }
  .kisi-eylemler .dugme { padding: 7px 10px; font-size: 14px; }
  .ayar-satir { grid-template-columns: 1fr; }
  .anahtar { justify-self: start; }
}
.kucuk-dugme { padding: 5px 10px; font-size: 13px; margin-left: 4px; }
.balon .yazi strong { font-weight: 700; }