/* memurcv.com · DESTEK WIDGET stilleri (2026-07-28)
 *
 * Kapsam: sadece .mcv-dst- onekli siniflar. Sayfanin kendi stiline
 * HICBIR sey eklemez, hicbir etiket seciciyi (button, input...) global
 * olarak ezmez. Boylece landing, panel ve dilekce sayfalarina ayni dosya
 * girse de sayfa tasarimi bozulmaz.
 *
 * RENKLER: index.html ve panel.php'nin ortak degiskenlerinden okunur
 * (--primary, --surface, --border...). Her var() cagrisinda YEDEK deger
 * var: degiskenleri tanimlamayan bir sayfaya (ornegin ileride dilekce
 * sablonu) eklenirse widget yine okunur gorunur, renksiz kutu olmaz.
 *
 * KARANLIK TEMA: ayri kural yazilmadi. Iki sayfa da [data-theme="dark"]
 * altinda AYNI degiskenleri yeniden tanimliyor, widget otomatik uyar.
 * Tek istisna golgeler: karanlikta biraz daha koyu.
 *
 * CDN YOK, @import YOK, web fonti YOK.
 */

.mcv-dst-kok {
  --dst-bg: var(--surface, #FFFCF7);
  --dst-bg-2: var(--surface-raised, #FFFFFF);
  --dst-metin: var(--text, #251F25);
  --dst-soluk: var(--text-muted, #655C64);
  --dst-cizgi: var(--border, #D8CEC8);
  --dst-ana: var(--primary, #4A234B);
  --dst-ana-koyu: var(--primary-hover, #351836);
  --dst-ana-soft: var(--primary-soft, #EEE1EC);
  --dst-ana-uzeri: var(--on-primary, #FFFFFF);
  --dst-vurgu: var(--accent, #B94724);
  --dst-basari: var(--success, #247254);
  --dst-basari-soft: var(--success-soft, #DDF1E8);
  --dst-uyari: var(--warning, #965500);
  --dst-uyari-soft: var(--warning-soft, #F8E8C7);
  --dst-hata: var(--danger, #A7373F);
  --dst-hata-soft: var(--danger-soft, #F8DEE0);
  --dst-r: var(--radius-md, 10px);
  --dst-r-l: var(--radius-lg, 14px);
  --dst-golge: var(--shadow-lg, 0 28px 70px rgb(37 31 37 / .18));
  --dst-halka: var(--focus-ring, 0 0 0 3px rgb(185 71 36 / .28));
  --dst-yazi: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);

  position: fixed;
  right: 20px;
  bottom: 20px;
  /* Sayfa icerigi ustunde ama tam ekran kilit katmanlarinin altinda.
   * panel.php'de .lock-overlay 60'larda; 2147483647 gibi bir sayi
   * secmek widget'i her seyin onune koyar ve modal akislari bozardi. */
  z-index: 900;
  font-family: var(--dst-yazi);
  color: var(--dst-metin);
  line-height: 1.5;
}

/* ---------------- SAYFA STILINE KARSI SAVUNMA ----------------
 *
 * CANLI OLCUMLE YAKALANAN HATA: widget PANEL sayfasinda acilinca baslik
 * yazisi okunamiyordu · olculen kontrast 1,25 (acik tema) ve 1,54
 * (karanlik tema). Landing'de sorun YOKTU, yani tek sayfaya bakarak
 * gorulemezdi.
 *
 * Sebep: panel.php'nin kendi global "h2 { color: ... }" kurali widget'in
 * icindeki h2'ye DOGRUDAN uyuyor. CSS'te dogrudan uyan bir bildirim,
 * MIRAS ALINAN degeri her zaman yener (ozgulluk karsilastirmasi bile
 * yapilmaz). Yani .mcv-dst-baslik uzerindeki renk h2'ye hic ulasmiyordu.
 *
 * Cozum: renge GUVENME, YAZ. Asagida mirasa bel baglayan her metin
 * ogesi kendi rengini acikca aliyor.
 *
 * Genel bir ".mcv-dst-kok h2, ... { color: inherit }" blogu BILEREK
 * kullanilmadi: o secici (0,1,1) kendi .mcv-dst-rozet / .mcv-dst-bos /
 * .mcv-dst-kvkk (0,1,0) kurallarimi da ezerdi, bir hatayi duzeltirken
 * bes yenisini acardi. */

/* ---------------- acma dugmesi ---------------- */

.mcv-dst-dugme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 18px 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--dst-ana);
  color: var(--dst-ana-uzeri);
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  box-shadow: 0 10px 26px rgb(37 31 37 / .22);
  transition: transform 140ms cubic-bezier(.2,.8,.2,1), background-color 140ms;
}

.mcv-dst-dugme:hover { background: var(--dst-ana-koyu); transform: translateY(-2px); }
.mcv-dst-dugme:active { transform: translateY(0); }
.mcv-dst-dugme svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Pencere acikken dugme gizlenmez, "kapat" gorevini de gorur:
 * kucuk ekranda tek dokunusla cikis yolu kalsin. */
.mcv-dst-kok[data-acik="1"] .mcv-dst-dugme-yazi { display: none; }
.mcv-dst-kok[data-acik="1"] .mcv-dst-dugme { padding: 0; width: 52px; justify-content: center; }

/* ---------------- pencere ---------------- */

.mcv-dst-pencere {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--dst-bg);
  border: 1px solid var(--dst-cizgi);
  border-radius: var(--dst-r-l);
  box-shadow: var(--dst-golge);
}

.mcv-dst-kok[data-acik="1"] .mcv-dst-pencere { display: flex; }

.mcv-dst-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 12px;
  background: var(--dst-ana);
  color: var(--dst-ana-uzeri);
}

.mcv-dst-baslik h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -.01em;
  /* Renk ACIKCA veriliyor · sayfanin global h2 kurali mirasi yeniyor. */
  color: var(--dst-ana-uzeri);
}

.mcv-dst-baslik p { margin: 2px 0 0; font-size: .8rem; opacity: .84; color: var(--dst-ana-uzeri); }

.mcv-dst-kapat {
  flex: none;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.mcv-dst-kapat:hover { background: rgb(255 255 255 / .16); }
.mcv-dst-kapat svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------------- sekmeler ---------------- */

.mcv-dst-sekmeler {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
  background: var(--dst-ana);
}

.mcv-dst-sekme {
  flex: 1 1 auto;
  padding: 9px 6px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: rgb(255 255 255 / .12);
  color: var(--dst-ana-uzeri);
  font: inherit;
  font-size: .82rem;
  font-weight: 650;
  cursor: pointer;
  opacity: .78;
}

.mcv-dst-sekme[aria-selected="true"] {
  background: var(--dst-bg);
  color: var(--dst-ana);
  opacity: 1;
}

/* ---------------- govde ---------------- */

.mcv-dst-govde {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
}

.mcv-dst-panel[hidden] { display: none; }

/* SSS akordiyonu · <details> kullanildi: klavye ve ekran okuyucu
 * davranisi tarayicidan hazir gelir, elle aria yonetmeye gerek kalmaz. */
.mcv-dst-sss { display: grid; gap: 8px; margin: 0; }

.mcv-dst-sss details {
  border: 1px solid var(--dst-cizgi);
  border-radius: var(--dst-r);
  background: var(--dst-bg-2);
}

.mcv-dst-sss summary {
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 640;
  font-size: .88rem;
  list-style: none;
  color: var(--dst-metin);
}
.mcv-dst-sss summary::-webkit-details-marker { display: none; }
.mcv-dst-sss summary::after {
  content: "+";
  float: right;
  color: var(--dst-soluk);
  font-weight: 700;
}
.mcv-dst-sss details[open] summary::after { content: "−"; }
.mcv-dst-sss p {
  margin: 0;
  padding: 0 12px 12px;
  font-size: .86rem;
  color: var(--dst-soluk);
}

.mcv-dst-ipucu {
  margin: 12px 0 0;
  font-size: .82rem;
  color: var(--dst-soluk);
}

/* ---------------- form ---------------- */

.mcv-dst-alan { display: block; margin: 0 0 11px; }

.mcv-dst-alan > span {
  display: block;
  margin-bottom: 5px;
  font-size: .82rem;
  font-weight: 640;
  color: var(--dst-metin);
}

.mcv-dst-alan input,
.mcv-dst-alan textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--dst-cizgi);
  border-radius: var(--dst-r);
  background: var(--dst-bg-2);
  color: var(--dst-metin);
  font: inherit;
  font-size: .88rem;
}

.mcv-dst-alan textarea { min-height: 108px; resize: vertical; }

.mcv-dst-alan input:focus-visible,
.mcv-dst-alan textarea:focus-visible,
.mcv-dst-sekme:focus-visible,
.mcv-dst-dugme:focus-visible,
.mcv-dst-kapat:focus-visible,
.mcv-dst-gonder:focus-visible,
.mcv-dst-sss summary:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--dst-halka);
}

.mcv-dst-alan[data-hata="1"] input,
.mcv-dst-alan[data-hata="1"] textarea { border-color: var(--dst-hata); }

/* Honeypot: gorunmez ama ekran okuyucuya da okutulmaz (aria-hidden JS'te).
 * display:none KULLANILMADI, bazi botlar display:none alanlari atlar. */
.mcv-dst-tuzak {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
}

.mcv-dst-sayac { font-size: .74rem; color: var(--dst-soluk); font-weight: 500; }

.mcv-dst-gonder {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  border: 0;
  border-radius: var(--dst-r);
  background: var(--dst-ana);
  color: var(--dst-ana-uzeri);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.mcv-dst-gonder:hover:not(:disabled) { background: var(--dst-ana-koyu); }
.mcv-dst-gonder:disabled { opacity: .6; cursor: default; }

.mcv-dst-kvkk { margin: 9px 0 0; font-size: .74rem; color: var(--dst-soluk); }

/* ---------------- durum satiri ---------------- */

.mcv-dst-durum {
  margin: 0 0 11px;
  padding: 9px 11px;
  border-radius: var(--dst-r);
  font-size: .84rem;
  font-weight: 600;
}
.mcv-dst-durum[hidden] { display: none; }
.mcv-dst-durum[data-tur="bilgi"]  { background: var(--dst-ana-soft);   color: var(--dst-ana); }
.mcv-dst-durum[data-tur="basari"] { background: var(--dst-basari-soft); color: var(--dst-basari); }
.mcv-dst-durum[data-tur="uyari"]  { background: var(--dst-uyari-soft);  color: var(--dst-uyari); }
.mcv-dst-durum[data-tur="hata"]   { background: var(--dst-hata-soft);   color: var(--dst-hata); }

/* ---------------- taleplerim ---------------- */

.mcv-dst-liste { display: grid; gap: 9px; }

.mcv-dst-kart {
  border: 1px solid var(--dst-cizgi);
  border-radius: var(--dst-r);
  background: var(--dst-bg-2);
  padding: 11px 12px;
}

.mcv-dst-kart-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.mcv-dst-kart h3 { margin: 0; font-size: .88rem; font-weight: 680; color: var(--dst-metin); }

.mcv-dst-rozet {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}
.mcv-dst-rozet[data-durum="acik"]       { background: var(--dst-uyari-soft);  color: var(--dst-uyari); }
.mcv-dst-rozet[data-durum="cevaplandi"] { background: var(--dst-basari-soft); color: var(--dst-basari); }
.mcv-dst-rozet[data-durum="kapali"]     { background: var(--dst-ana-soft);    color: var(--dst-ana); }

.mcv-dst-kart p {
  margin: 0;
  font-size: .82rem;
  color: var(--dst-soluk);
  /* Kullanicinin yazdigi satir sonlari korunur ama uzun kelime kutuyu
   * tasirmaz (yapistirilan URL'ler). */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mcv-dst-cevap {
  margin-top: 9px;
  padding: 9px 10px;
  border-left: 3px solid var(--dst-basari);
  border-radius: 0 var(--dst-r) var(--dst-r) 0;
  background: var(--dst-basari-soft);
}
.mcv-dst-cevap strong { display: block; font-size: .76rem; margin-bottom: 3px; color: var(--dst-basari); }
.mcv-dst-cevap p { color: var(--dst-metin); }

.mcv-dst-tarih { font-size: .72rem; color: var(--dst-soluk); margin-top: 6px; display: block; }

.mcv-dst-bos { margin: 0; font-size: .86rem; color: var(--dst-soluk); text-align: center; padding: 18px 6px; }

/* ---------------- kucuk ekran ---------------- */

@media (max-width: 520px) {
  .mcv-dst-kok { right: 12px; bottom: 12px; left: 12px; }
  .mcv-dst-dugme { float: right; }
  .mcv-dst-pencere {
    width: auto;
    left: 0;
    right: 0;
    bottom: 64px;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
  }
}

/* ---------------- hareket duyarliligi ---------------- */

@media (prefers-reduced-motion: reduce) {
  .mcv-dst-dugme { transition: none; }
  .mcv-dst-dugme:hover { transform: none; }
}

/* Yazdirmada widget kagida basilmaz. */
@media print { .mcv-dst-kok { display: none !important; } }