/* ============================================================
   Kategori seçici — çoklu seçim açılır listesi (en fazla 5)
   ============================================================ */
.kat-secici { position: relative; }
.ks-baslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--metin-2); margin-bottom: 6px; }
.ks-sayac { font-size: 12px; font-weight: 600; color: var(--metin-3); background: var(--zemin); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.kat-secici.dolu .ks-sayac { background: var(--turuncu); color: #fff; }
.ks-ipucu { margin-top: 6px; }

/* --- Kapalı hâli: select görünümlü alan --- */
.ks-kap { position: relative; }
.ks-alan {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 46px; padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: var(--r-sm); background: #fff;
  font-family: inherit; text-align: left; transition: border-color .15s, box-shadow .15s;
}
.ks-alan:hover { border-color: #94a3b8; }
.kat-secici.acik .ks-alan { border-color: var(--mavi); box-shadow: 0 0 0 3px rgba(37,99,235,.13); }
.ks-alan .ks-ok { margin-left: auto; color: var(--metin-3); font-size: 13px; transition: transform .18s; flex-shrink: 0; }
.kat-secici.acik .ks-alan .ks-ok { transform: rotate(180deg); }

.ks-cipler { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.ks-bos { font-size: 14px; color: var(--metin-3); }
.ks-cip {
  display: inline-flex; align-items: center; gap: 4px; background: var(--mavi-acik); color: var(--mavi-koyu);
  font-size: 12.5px; font-weight: 600; padding: 4px 5px 4px 10px; border-radius: 999px; max-width: 100%;
}
.ks-cip-sil {
  border: none; background: rgba(37,99,235,.16); color: inherit; cursor: pointer;
  width: 17px; height: 17px; border-radius: 50%; line-height: 1; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: inherit; padding: 0;
}
.ks-cip-sil:hover { background: var(--kirmizi); color: #fff; }

/* --- Açılan panel --- */
.ks-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 120;
  background: #fff; border: 1px solid var(--cizgi); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15,23,42,.18); overflow: hidden;
  display: flex; flex-direction: column; max-height: 340px;
}
/* DİKKAT: .ks-panel'e display verildiği için tarayıcının [hidden] kuralı
   (display:none) eziliyordu — panel hiç gizlenmiyordu. Açıkça geri alınır. */
.ks-panel[hidden] { display: none; }
.kat-secici.yukari .ks-panel { top: auto; bottom: calc(100% + 6px); }
.ks-panel .ks-ara { margin: 10px 10px 8px; width: calc(100% - 20px); }
.ks-liste { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--cizgi); }
.ks-sonucyok { padding: 22px 14px; text-align: center; color: var(--metin-3); font-size: 13.5px; }
.ks-grup + .ks-grup { border-top: 1px solid var(--cizgi); }
.ks-grup-bas {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 12px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; text-align: left; color: var(--metin);
}
.ks-grup-bas:hover { background: var(--zemin); }
.ks-grup-bas .ks-ad { font-weight: 700; flex: 1; }
.ks-grup-bas .ks-alt-adet { font-size: 11.5px; color: var(--metin-3); font-weight: 600; flex-shrink: 0; }
.ks-grup-bas .ks-ok-alt { color: var(--metin-3); font-size: 12px; flex-shrink: 0; }
.ks-kutu { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; flex: 1; min-width: 0; font-size: 14px; }
.ks-kutu:hover { background: var(--zemin); }
.ks-kutu input { width: 16px; height: 16px; accent-color: var(--mavi); flex-shrink: 0; cursor: pointer; }
.ks-kutu input:disabled { cursor: not-allowed; }
.ks-kutu input:disabled + .ks-ad { color: var(--metin-3); }
.ks-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-grup-bas .ks-ad { font-weight: 600; }
.ks-altlar { background: var(--zemin); padding: 2px 0 6px; }
.ks-kutu.ks-alt { padding-left: 34px; font-size: 13.5px; }
.ks-kutu.ks-alt:hover { background: #e9eef6; }
.ks-panel-alt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-top: 1px solid var(--cizgi); background: var(--zemin);
}
.ks-panel-bilgi { font-size: 12px; color: var(--metin-3); font-weight: 600; }

/* ---------- Aç/Kapat anahtarı (toggle) ---------- */
.anahtar { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.anahtar input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.anahtar .kaydirak {
  width: 46px; height: 27px; border-radius: 999px; background: #cbd5e1;
  transition: background .2s; position: relative; display: block;
}
.anahtar .kaydirak::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.3); transition: transform .2s;
}
.anahtar input:checked + .kaydirak { background: var(--yesil); }
.anahtar input:checked + .kaydirak::after { transform: translateX(19px); }
.anahtar input:focus-visible + .kaydirak { outline: 2px solid var(--mavi); outline-offset: 2px; }

/* ============================================================
   Fatura & kimlik bilgileri (hizmet veren)
   ============================================================ */
.fatura-bilgi { border: 1px solid var(--cizgi); border-radius: 12px; padding: 13px; background: #fff; }
.fb-baslik { display: block; font-size: 13px; font-weight: 700; color: var(--metin-2); margin-bottom: 4px; }
.fb-ipucu { margin-bottom: 11px; }

.fb-tip { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 13px; }
.fb-tip-kart {
  border: 2px solid var(--cizgi); border-radius: 10px; padding: 11px 8px; cursor: pointer;
  text-align: center; transition: .15s; display: block; position: relative;
}
.fb-tip-kart:hover { border-color: var(--mavi); }
.fb-tip-kart.secili { border-color: var(--mavi); background: var(--mavi-acik); }
.fb-tip-kart input { position: absolute; opacity: 0; pointer-events: none; }
.fb-tip-kart .fb-ik { font-size: 21px; display: block; line-height: 1.2; color: var(--mavi); }
.fb-tip-kart .fb-ik svg { width: 24px; height: 24px; margin: 0 auto; }
.fb-tip-kart .fb-ad { font-weight: 700; font-size: 13.5px; display: block; margin-top: 2px; }
.fb-tip-kart .fb-alt { font-size: 11.5px; color: var(--metin-3); display: block; }

.fb-uyari { color: var(--kirmizi); font-size: 12.5px; font-weight: 600; margin-top: 5px; }
.fatura-bilgi .input.hatali { border-color: var(--kirmizi); background: #fef2f2; }

.fb-levha { display: flex; align-items: center; gap: 11px; margin-top: 5px; flex-wrap: wrap; }
.fb-levha-onizle {
  width: 84px; height: 60px; border: 1px dashed var(--cizgi); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--zemin); flex-shrink: 0;
}
.fb-levha-onizle.dolu { border-style: solid; cursor: zoom-in; }
.fb-levha-onizle img { width: 100%; height: 100%; object-fit: cover; }
.fb-levha-bos { font-size: 11.5px; color: var(--metin-3); }
.fb-levha-btnler { display: flex; gap: 7px; flex-wrap: wrap; }

/* Google ile giriş */
.g-ayrac { margin: 14px 0 12px; }
.g-buton { display: flex; justify-content: center; }
.g-profil { display: flex; align-items: center; gap: 11px; }
.g-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* Dar ekranda liste, kapsayıcıdan taşmasın diye alt sayfa olarak açılır */
/* Dar ekran / mobil uygulama (WebView):
   Fixed konumlu "bottom-sheet" WebView'de dokunmatik kaydırmada sıçrıyor ve
   alt kategori onay kutularını seçtirmiyordu. Bunun yerine panel SAYFA
   AKIŞINDA açılır (position:static): form uzar, liste normal kaydırılır,
   onay kutuları doğrudan seçilir. Overlay ve "yukarı açma" kapatılır. */
@media (max-width: 620px) {
  .kat-secici .ks-panel,
  .kat-secici.acik .ks-panel,
  .kat-secici.acik.yukari .ks-panel {
    position: static; left: auto; right: auto; top: auto; bottom: auto;
    margin-top: 8px; max-height: 340px; z-index: auto; border-radius: 12px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .12);
  }
  .kat-secici.acik::after { display: none; }         /* karartma katmanı yok */
  .kat-secici .ks-liste {
    -webkit-overflow-scrolling: touch;               /* akıcı dokunmatik kaydırma */
    overscroll-behavior: contain;                    /* kaydırma sayfaya taşmasın */
    touch-action: pan-y;
  }
  .kat-secici .ks-kutu, .kat-secici .ks-grup-bas {
    -webkit-tap-highlight-color: rgba(37,99,235,.15); /* dokunuşta geri bildirim */
  }
}

/* Mobil uygulamadaki Google butonu (sistem tarayıcısına yönlendirir) */
.g-native { display: flex; align-items: center; justify-content: center; gap: 9px; }
.g-native .g-logo {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 1px solid var(--cizgi); color: #4285f4; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ============================================================
   İş Takvimi (aylık görünüm)
   ============================================================ */
.tk-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tk-hafta { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.tk-hafta div { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--metin-3); padding: 4px 0; }
.tk-izgara { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tk-hucre {
  aspect-ratio: 1; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 4px 2px; cursor: pointer; font-family: inherit; position: relative; transition: .12s;
}
.tk-hucre:hover:not(.tk-bos) { border-color: var(--mavi); }
.tk-hucre.tk-bos { border: none; background: transparent; cursor: default; }
.tk-no { font-size: 13px; font-weight: 600; color: var(--metin); }
.tk-hucre.tk-dolu { background: var(--mavi-acik); border-color: var(--mavi); }
.tk-hucre.tk-bugun { box-shadow: inset 0 0 0 2px var(--turuncu); }
.tk-hucre.tk-secili { background: var(--mavi); }
.tk-hucre.tk-secili .tk-no { color: #fff; }
.tk-rozet {
  font-size: 9.5px; font-weight: 700; color: var(--mavi-koyu); background: rgba(255,255,255,.7);
  border-radius: 999px; padding: 1px 5px; margin-top: auto; white-space: nowrap;
}
.tk-hucre.tk-secili .tk-rozet { color: var(--mavi); background: #fff; }
.tk-ozet { margin-top: 12px; font-size: 13px; color: var(--metin-2); text-align: center; }
.tk-is { border: 1px solid var(--cizgi); border-radius: 10px; padding: 11px 12px; margin-bottom: 8px; cursor: pointer; transition: .12s; }
.tk-is:hover { border-color: var(--mavi); box-shadow: 0 2px 10px rgba(37,99,235,.1); }
.tk-is-bas { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.tk-is-alt { font-size: 12.5px; color: var(--metin-3); }

/* Mobil takvim */
.m-tk-izgara { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.m-tk-hafta { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.m-tk-hafta div { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--metin-3); }
.m-tk-izgara, .m-tk-hafta { width: 100%; }
.m-tk-hucre {
  aspect-ratio: 1; min-height: 40px; border-radius: 7px; background: var(--zemin); border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit; position: relative; padding: 0;
}
.m-tk-hucre.dolu { background: var(--mavi-acik); }
.m-tk-hucre.bugun { box-shadow: inset 0 0 0 2px var(--turuncu); }
.m-tk-hucre.secili { background: var(--mavi); }
.m-tk-hucre.secili .n { color: #fff; }
.m-tk-hucre .n { font-size: 13px; font-weight: 600; }
.m-tk-hucre .p { position: absolute; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--mavi); }
.m-tk-hucre.secili .p { background: #fff; }
.m-tk-hucre.bos { background: transparent; cursor: default; }

/* Yönetici tarafından yüklenen özel ikon görselleri (emoji yerine) */
.ozel-ikon {
  width: 1.15em; height: 1.15em; object-fit: contain;
  vertical-align: -0.18em; display: inline-block;
}
.yan-menu nav a .ik .ozel-ikon, .tab-bar .ozel-ikon { width: 20px; height: 20px; vertical-align: middle; }

/* ============================================================
   Sohbet / Mesajlaşma
   ============================================================ */
.sohbet { display: flex; flex-direction: column; height: 60vh; max-height: 460px; }
.sohbet-akis {
  flex: 1; overflow-y: auto; padding: 10px 4px; display: flex; flex-direction: column; gap: 6px;
  background: var(--zemin); border-radius: 10px; -webkit-overflow-scrolling: touch;
}
.sohbet-bos { margin: auto; text-align: center; color: var(--metin-3); font-size: 14px; padding: 20px; }
.sohbet-gun { text-align: center; font-size: 11.5px; color: var(--metin-3); margin: 8px 0 2px; }
.sohbet-satir { display: flex; }
.sohbet-satir.ben { justify-content: flex-end; }
.sohbet-satir.karsi { justify-content: flex-start; }
.sohbet-balon {
  max-width: 78%; padding: 8px 11px 6px; border-radius: 14px; font-size: 14px; line-height: 1.4;
  word-break: break-word; white-space: pre-wrap; position: relative;
}
.sohbet-satir.ben .sohbet-balon { background: var(--mavi); color: #fff; border-bottom-right-radius: 4px; }
.sohbet-satir.karsi .sohbet-balon { background: #fff; border: 1px solid var(--cizgi); border-bottom-left-radius: 4px; }
.sohbet-saat { display: block; font-size: 10px; opacity: .75; margin-top: 3px; text-align: right; }
.sohbet-tik { margin-left: 3px; }
.sohbet-tik.okundu { color: #7dd3fc; }
.sohbet-satir.karsi .sohbet-saat { color: var(--metin-3); }
.sohbet-giris { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.sohbet-giris .input { margin: 0; flex: 1; }
.sohbet-gonder { padding: 10px 16px; font-size: 17px; line-height: 1; }

/* Mobil tam-ekran sheet (sohbet) */
.m-sheet.m-sheet-tam { height: 92vh; max-height: 92vh; display: flex; flex-direction: column; }
/* DİKKAT: Burada `flex-direction` verilmemişti; varsayılan `row` olduğu için
   tam-ekran sheet'e birden çok çocuk koyan ekranlarda (destek yazışması)
   içerik YAN YANA diziliyor ve mesaj yazma alanı sağ üste kayıyordu.
   Sohbet ekranı tek çocuk olduğu için sorun görünmüyordu. */
.m-sheet.m-sheet-tam .s-govde {
  flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0;
}
.m-sheet.m-sheet-tam .sohbet { height: 100%; max-height: none; flex: 1; }
.m-sheet.m-sheet-tam .alt-ekran-kap { flex: 1; min-height: 0; overflow-y: auto; }

/* Konuşma listesi (Mesajlar ekranı) */
.sohbet-liste { display: flex; flex-direction: column; }
.sohbet-konusma {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 12px 10px; border: none; background: none; border-bottom: 1px solid var(--cizgi);
  cursor: pointer; font-family: inherit;
}
.sohbet-konusma:hover { background: var(--zemin); }
.sk-avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--mavi); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.sk-icerik { flex: 1; min-width: 0; }
.sk-ust { display: flex; justify-content: space-between; gap: 8px; }
.sk-ust b { font-size: 14.5px; }
.sk-tarih { font-size: 11.5px; color: var(--metin-3); flex-shrink: 0; }
.sk-alt { font-size: 13px; color: var(--metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-rozet {
  background: var(--kirmizi); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 999px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Menü mesaj rozeti (yan menü) */
.menu-rozet {
  background: var(--kirmizi); color: #fff; font-size: 10.5px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Yazar stil sayfasındaki `display` tarayıcının `[hidden]{display:none}` kuralını
   EZER — bu satır olmadan `el.hidden = true` rozeti gizlemez ve menüde sürekli
   "0" görünür. (Aynı tuzak .ks-panel'de de yaşanmıştı.) */
.menu-rozet[hidden] { display: none; }

/* Tıklanır bildirim satırı */
.bildirim-satir.tiklanir, .m-bildirim-satir.tiklanir { cursor: pointer; }
.bildirim-satir.tiklanir:hover, .m-bildirim-satir.tiklanir:hover { background: var(--zemin); }

/* Profilden açılan alt ekran kabı */
.alt-ekran-kap { width: 100%; }

/* İş Takvimi düzeni: geniş ekranda takvim solda / işler sağda,
   dar (mobil) ekranda işler takvimin ALTINA iner. */
.tk-duzen { display: grid; grid-template-columns: 1fr 340px; gap: 14px; align-items: start; }
@media (max-width: 860px) { .tk-duzen { grid-template-columns: 1fr; } }

/* ============ OTP / Doğrulama ============ */
.otp-kanallar { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:640px){ .otp-kanallar { grid-template-columns:1fr; } }
.otp-kart {
  position:relative; display:block; padding:14px 12px; border:2px solid var(--cizgi,#e2e8f0);
  border-radius:12px; cursor:pointer; text-align:center; background:#fff; transition:.15s;
}
.otp-kart:hover { border-color:var(--birincil,#2563eb); }
.otp-kart.secili { border-color:var(--birincil,#2563eb); background:#eff6ff; }
.otp-kart input { position:absolute; opacity:0; pointer-events:none; }
.otp-kart .ok-ik { display:block; font-size:26px; line-height:1; margin-bottom:6px; }
.otp-kart .ok-ad { display:block; font-weight:700; font-size:14px; }
.otp-kart .ok-ac { display:block; font-size:12px; color:var(--metin-2,#64748b); margin-top:3px; }

/* CAPTCHA görseli */
.dg-captcha {
  display:flex; align-items:center; justify-content:center; padding:10px;
  background:#f8fafc; border:1px solid var(--cizgi,#e2e8f0); border-radius:10px; margin-bottom:10px;
}
.dg-captcha svg { max-width:100%; height:auto; display:block; }
.dg-satir { display:flex; gap:8px; align-items:center; }
.dg-satir .input { flex:1; }
.dg-yenile {
  border:1px solid var(--cizgi,#e2e8f0); background:#fff; border-radius:8px;
  padding:8px 12px; cursor:pointer; font-size:16px; line-height:1;
}
/* Kod girişi — büyük ve aralıklı */
.dg-kod {
  font-size:24px; letter-spacing:6px; text-align:center; font-weight:700;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
}
.dg-hata { color:var(--tehlike,#dc2626); font-size:13px; margin-top:6px; min-height:18px; }
.dg-bilgi { color:var(--metin-2,#64748b); font-size:13px; margin:0 0 10px; }

/* ============ Sır kasası (API şifre/jeton girişi) ============ */
.ayirac { height:1px; background:var(--cizgi,#e2e8f0); margin:18px 0 14px; }
.sir-alan label { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sir-alan input[type="password"], .sir-alan input[type="text"] { font-family:ui-monospace,Menlo,monospace; }
.sir-alan [data-goster] { padding:0 12px; }
@media (max-width:560px){
  .sir-alan > div { flex-wrap:wrap; }
  .sir-alan > div .input { flex:1 1 100%; }
}

/* ============ Sayfalı liste ============ */
.liste-alt {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 0 6px; flex-wrap: wrap;
}
.ilan-kart-iskelet {
  height: 190px; border-radius: 12px;
  background: linear-gradient(100deg, #f1f5f9 30%, #e2e8f0 50%, #f1f5f9 70%);
  background-size: 220% 100%;
  animation: iskelet-kay 1.1s ease-in-out infinite;
}
@keyframes iskelet-kay { from { background-position: 180% 0; } to { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .ilan-kart-iskelet { animation: none; } }

/* ============ Destek talepleri ============ */
.d-liste { display: flex; flex-direction: column; gap: 10px; }
.d-satir {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--cizgi, #e2e8f0); border-radius: 12px;
  background: #fff; cursor: pointer; transition: .15s;
}
.d-satir:hover { border-color: var(--birincil, #2563eb); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.d-konu { font-weight: 650; display: flex; align-items: center; gap: 7px; }
.d-nokta {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kirmizi, #dc2626); flex: none;
}

.dk-ust {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--cizgi, #e2e8f0);
}
.dk-akis {
  max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 4px 2px 12px;
}
.dk-mesaj { max-width: 86%; padding: 10px 13px; border-radius: 14px; }
.dk-mesaj.ben { align-self: flex-end; background: var(--birincil, #2563eb); color: #fff; border-bottom-right-radius: 4px; }
.dk-mesaj.destek { align-self: flex-start; background: #f1f5f9; color: #1e293b; border-bottom-left-radius: 4px; }
.dk-bas { font-size: 11.5px; font-weight: 700; opacity: .8; margin-bottom: 3px; display: flex; gap: 6px; align-items: center; }
.dk-tarih { font-weight: 400; font-size: 10.5px; opacity: .75; }
.dk-metin { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ============ Görsel seçim alanı (admin) ============ */
.ga-satir { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ga-onizleme {
  width: 148px; height: 84px; border-radius: 10px; flex: none;
  border: 1px solid var(--cizgi, #e2e8f0); background: #f8fafc;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.ga-onizleme span { font-size: 12px; color: var(--metin-3, #94a3b8); }
.ga-butonlar { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============ Sıralanabilir liste düzenleyici (admin) ============ */
.liste-duzen { display: flex; flex-direction: column; gap: 8px; }
.ld-satir {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--cizgi, #e2e8f0); border-radius: 10px; background: #fff;
}
.ld-tut { color: var(--metin-3, #94a3b8); cursor: default; font-size: 18px; }
.ld-icerik { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.ld-gorsel {
  width: 56px; height: 40px; border-radius: 7px; flex: none; background: #f1f5f9;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.ld-icerik b { display: block; font-size: 14.5px; }
.ld-islem { display: flex; gap: 5px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .ld-satir { flex-wrap: wrap; }
  .ld-islem { width: 100%; justify-content: flex-end; }
}

/* ============ Sürükle-bırak sıralama (admin tabloları) ============ */
.sur-tut {
  display: inline-block; cursor: grab; color: var(--metin-3, #94a3b8);
  font-size: 15px; line-height: 1; margin-right: 6px; user-select: none;
  vertical-align: middle;
}
.sur-tut:active { cursor: grabbing; }
tr[draggable="true"] { transition: background .12s, opacity .12s; }
tr.sur-aktif { opacity: .45; }
tr.sur-hedef td { box-shadow: inset 0 3px 0 var(--mavi, #2563eb); }

/* ============ Profil görseli (logo) + onay ============ */
.pl-avatar {
  border-radius: 50%; flex: none; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.pl-avatar.pl-bos { background: var(--turuncu, #f97316); color: #fff; font-weight: 700; }
.pl-satir { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pl-onizle {
  width: 84px; height: 84px; border-radius: 12px; flex: none;
  border: 1px solid var(--cizgi, #e2e8f0); background: #fff;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.pl-onizle.pl-yok span { font-size: 11.5px; color: var(--metin-3, #94a3b8); }
.pl-butonlar { display: flex; gap: 8px; flex-wrap: wrap; }

/* Admin onay ekranı */
.logo-onay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.lo-gorseller { display: flex; gap: 12px; }
.lo-etiket { font-size: 11.5px; color: var(--metin-3, #94a3b8); margin-bottom: 5px; font-weight: 600; }
.lo-gorsel {
  width: 110px; height: 110px; border-radius: 10px; background-size: cover;
  background-position: center; border: 1px solid var(--cizgi, #e2e8f0); background-color: #f8fafc;
}
.lo-gorsel.yeni { border: 2px solid var(--mavi, #2563eb); }

/* --- Profil görselinin satır içi / özel yerleşimleri --- */
/* Mesaj başlığı, sohbet listesi, modal başlığı gibi yerlerde satır içi durmalı */
.dk-bas .pl-avatar,
.modal-baslik .pl-avatar,
.sohbet-konusma .pl-avatar {
  display: inline-flex; vertical-align: middle; flex: none;
}
.dk-bas .pl-avatar { margin-right: 4px; }
.modal-baslik .pl-avatar { margin-right: 9px; }
.modal-baslik { display: flex; align-items: center; }
.sohbet-konusma .pl-avatar { margin-right: 11px; }

/* Mobil ana sayfa selamlaması: görsel + metin yan yana.
   DOLGU BURADA olmalı: eskiden .m-selam'in içindeydi, avatarı sarmalayınca
   görsel dolgunun dışında kalıp ekranın en soluna yapışıyordu. */
.m-selam-sar { display: flex; align-items: center; gap: 12px; padding: 18px 16px 6px; }
.m-selam-sar .m-selam { padding: 0; min-width: 0; }

/* Panel başlığındaki kullanıcı avatarı (web, sağ üst) */
.kullanici .pl-avatar { font-size: 14px; }

/* Admin kullanıcı detay — işlem listeleri */
.hesap-no-rozet { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:var(--mavi-acik); border-radius:12px; }
.detay-baslik { margin:14px 0 8px; font-size:14px; font-weight:700; color:var(--mavi-koyu); }
.detay-liste { display:flex; flex-direction:column; gap:2px; max-height:240px; overflow-y:auto; }
.detay-satir { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 2px; border-bottom:1px solid var(--cizgi); font-size:13.5px; }
.detay-satir:last-child { border-bottom:none; }
.detay-satir .mini-ik { display:inline-flex; vertical-align:-2px; }
.detay-satir .mini-ik svg { width:13px; height:13px; }

/* Ana sayfa düzeni — arama altı kategori çip seçici */
.chip-sec-liste { display:flex; flex-wrap:wrap; gap:8px; }
.chip-sec { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1.5px solid var(--cizgi); border-radius:999px; cursor:pointer; font-size:13.5px; user-select:none; transition:.15s; }
.chip-sec input { display:none; }
.chip-sec.secili, .chip-sec:has(input:checked) { border-color:var(--mavi); background:var(--mavi-acik); color:var(--mavi-koyu); font-weight:600; }
/* Profil hesap no satırı (mobil) */
.hesap-no-sat { font-size:12.5px; color:var(--metin-3); margin-top:3px; }
.hesap-no-sat b { font-family:ui-monospace,monospace; letter-spacing:.5px; color:var(--metin-2); }
/* Sohbet gönder butonu (çizim ikon) */
.sohbet-gonder { min-width:46px; display:inline-flex; align-items:center; justify-content:center; }
.sohbet-gonder .btn-ik { display:inline-flex; }
.sohbet-gonder .btn-ik svg { width:20px; height:20px; }

/* Modal içinde nested scroll KALDIR — iç liste kendi 240px scroll'uyla fare
   tekerleğini/dokunuşu yakalayıp modalın kaymasını engelliyordu (uzun kullanıcı
   detay modalı vs.). Modalda tek scroll (modalın kendisi) olsun. */
.modal .detay-liste { max-height: none; overflow: visible; }