/* ChatJGT ekran katmani 3 - Comm100 birebir ekran olculeri (app.css belirteclerini kullanir)
   faz3.js ekranlari: sesli/goruntulu + ekran paylasimi, abonelik/fatura,
   profil (beyaz etiket), saklama, temsilci SSO, otomatik ceviri, webhook'lar,
   temsilci kapanisi, ozel pano, hedefler. Olculer: log/ekran/birebir/*-ref.png */

/* baslik + ACIK/KAPALI ana anahtari + 12px aciklama (Comm100 Departments,
   Audio & Video Chat): anahtar 50x24, ACIK #209f1a, KAPALI #bdc1c3 */
h1.e3-aciklamali {
  margin-bottom: 8px;
}
.e3-aciklama {
  margin: 0 0 var(--b6);
  font-size: var(--yz-12);
  line-height: 18px;
  color: var(--ink2);
}
.e3-onoff {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}
.e3-onoff input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.e3-onoff .e3-yol {
  position: relative;
  width: 56px;
  height: 24px;
  border-radius: 12px;
  background: #bdc1c3;
  transition: background-color 200ms var(--ez);
  font-size: 7.5px;
  font-weight: 700;
  line-height: 24px;
  color: #fff;
  letter-spacing: 0.2px;
}
.e3-onoff .e3-yol::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 200ms var(--ez);
}
.e3-onoff .e3-on,
.e3-onoff .e3-off {
  position: absolute;
  top: 0;
}
.e3-onoff .e3-on {
  left: 6px;
  display: none;
}
.e3-onoff .e3-off {
  right: 5px;
}
.e3-onoff input:checked + .e3-yol {
  background: #209f1a;
}
.e3-onoff input:checked + .e3-yol::after {
  transform: translateX(32px);
}
.e3-onoff input:checked + .e3-yol .e3-on {
  display: block;
}
.e3-onoff input:checked + .e3-yol .e3-off {
  display: none;
}
.e3-onoff input:focus-visible + .e3-yol {
  outline: 2px solid var(--ana);
  outline-offset: 2px;
}

/* form ici "Gorunur [anahtar]" satiri (Comm100 Add a field: 16px/500, 40px) */
.e3-satiranahtar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  height: 40px;
  font-size: var(--yz-16);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.e3-satiranahtar input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.e3-mui {
  position: relative;
  width: 34px;
  height: 14px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.38);
  transition: background-color 150ms var(--ez);
}
.e3-mui::after {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fafafa;
  box-shadow:
    0 2px 1px -1px rgba(0, 0, 0, 0.2),
    0 1px 1px 0 rgba(0, 0, 0, 0.14),
    0 1px 3px 0 rgba(0, 0, 0, 0.12);
  transition: transform 150ms var(--ez);
}
.e3-satiranahtar input:checked + .e3-mui {
  background: rgba(0, 119, 204, 0.5);
}
.e3-satiranahtar input:checked + .e3-mui::after {
  transform: translateX(14px);
  background: var(--ana);
}
.e3-satiranahtar input:focus-visible + .e3-mui {
  outline: 2px solid var(--ana);
  outline-offset: 4px;
}

/* iki sutunlu alan izgarasi (Site Profile: 2 x 538px, 16px aralik) */
.e3-izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}
.e3-izgara .malansarmal {
  width: auto;
}
.kart > .malansarmal.genis,
.e3-izgara + .malansarmal.genis {
  width: 100%;
}

/* tek satir form (tablo karti ustunde filtre/ekle satiri) */
.e3-satirform {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}
.e3-satirform .malansarmal {
  width: 200px;
  margin-bottom: 0;
}
.e3-satirform > button {
  height: 44px;
}
.e3-satirform > label.onay {
  height: 44px;
  display: inline-flex;
  align-items: center;
}
.e3-kartfiltre {
  padding: 16px;
}
.kart > .e3-satirform {
  margin-bottom: 16px;
}
h2.e3-bolum {
  margin: var(--b6) 0 var(--b4);
}
.kart.tablokart.e3-faturakart {
  min-height: 476px;
}
.kart.tablokart.e3-kisa {
  min-height: 0;
}
.kart.tablokart.e3-kisa .sayfalama {
  display: none;
}
.e3-sabit {
  color: var(--ink2);
  font-size: var(--yz-13);
}

/* Bos tabloda sayfalama gizli: [hidden] app.css display:flex ile ezilmesin */
.sayfalama[hidden] {
  display: none;
}

/* bilgi kutusu (Comm100 "If you want to manage all fields ...") */
.e3-bilgi {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 544px;
  max-width: 100%;
  min-height: 44px;
  margin: 0 0 16px;
  padding: 8px 16px;
  border-radius: var(--r);
  background: #f2f4f7;
  color: var(--ink);
  font-size: var(--yz-14);
}
.e3-bilgi svg.ikon {
  color: var(--ink2);
}

/* Abonelikler: 4 ozet karti (Comm100 Subscriptions: 278x233, 11px aralik,
   baslik altinda 36px) + Aboneliklerim karti (2 sutun abonelik kutusu) */
h1.e3-hosgeldin {
  margin-bottom: 36px;
}
.e3-ozetler {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-bottom: 12px;
}
.kart.e3-ozet {
  margin: 0;
  height: 233px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.e3-ozetbas {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  margin-top: 1px;
  font-size: var(--yz-16);
  font-weight: 500;
  color: var(--ink);
}
.e3-ozetbas svg.ikon {
  color: var(--ink2);
}
.e3-buyuk {
  font-size: 56px;
  line-height: 56px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 30px;
}
.e3-alt {
  font-size: var(--yz-14);
  color: var(--ink);
  margin-top: 6px;
}
.e3-kucuk {
  font-size: var(--yz-12);
  color: var(--ink2);
  margin-top: 4px;
}
.e3-ozet .dugme {
  margin-top: 16px;
}
.e3-bag {
  margin-top: auto;
  margin-bottom: 0;
  font-weight: 500;
}
.e3-halka {
  width: 108px;
  height: 108px;
  margin-top: 32px;
  border-radius: 50%;
  background: conic-gradient(#f44336 var(--oran), #e0e0e0 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.e3-halka > div {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--yz-12);
}
.e3-halka b {
  font-size: var(--yz-24);
  font-weight: 500;
}
.kart.e3-aboneler {
  padding: 24px;
}
.e3-aboneler > h2 {
  margin-bottom: 20px;
}
.e3-abonegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 22px;
  align-items: stretch;
}
.e3-abone {
  border-radius: var(--r);
  box-shadow: var(--golge);
  overflow: hidden;
  background: #fff;
}
.e3-abone.e3-genis {
  grid-column: 1 / -1;
}
.e3-abonebas {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 90px;
  padding: 0 24px 0 32px;
  background: #f5f5f5;
}
.e3-abonebas svg.ikon {
  width: 34px;
  height: 34px;
  color: var(--ana);
}
.e3-abonebas b {
  font-size: var(--yz-18);
  font-weight: 500;
}
.e3-abonegovde {
  padding: 20px 24px 8px;
}
.e3-fiyatsatir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--yz-16);
  font-weight: 500;
  margin-bottom: 20px;
}
.e3-fiyat {
  font-size: var(--yz-12);
  font-weight: 400;
}
.e3-abonegovde table th,
.e3-abonegovde table td {
  padding: 8px;
}
.e3-abonegovde .e3-satirform .malansarmal {
  width: 180px;
}

/* Fatura profili: tek buyuk kart, ortali icerik (Comm100 Billing Profile) */
.kart.e3-profil {
  min-height: 710px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.e3-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin: 0;
}
.e3-dl dt {
  color: var(--ink2);
}
.e3-dl dd {
  margin: 0;
}

/* Faturalar: tarih cipi (Comm100 dolu tarih cipi #ebebeb, 44px) */
.e3-faturaform {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.e3-faturaform .malansarmal {
  width: 120px;
  margin: 0;
}
.e3-faturaform > button {
  height: 44px;
}
.e3-tarihcip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r);
  background: #ebebeb;
  color: var(--ink);
  font-weight: 500;
}
.e3-tarihcip svg.ikon {
  color: var(--ink2);
}
.e3-tarihcip input {
  height: 30px;
  border: 0;
  background: transparent;
  padding: 0 2px;
  width: 128px;
  box-shadow: none;
  font-weight: 500;
}
select.e3-durumsec {
  height: 30px;
  font-size: var(--yz-12);
  padding: 0 6px;
}

/* webhook olaylari, SSO esleme satirlari */
.e3-olaylar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 16px;
}
.e3-eslemesatir {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.e3-eslemesatir .malansarmal {
  width: 260px;
}
.e3-eslemesatir .ipucusarmal {
  margin-top: 6px;
}
.e3-madde {
  margin: 0 0 16px;
  padding-left: 20px;
  line-height: 28px;
}
.e3-madde li::marker {
  color: var(--ana);
}