/* ------------------------------------------------------------------
   v53.1 — MOBİL UYGULAMA SAYFALARI

   Yeni kullanılan sınıflar: .legal-list, .veri-tablo, .silme-form,
   .gorunmez. Hiçbiri mevcut biçimlerde tanımlı değildi; tanımsız
   sınıfla yayına çıkılsaydı liste işaretsiz, tablo çerçevesiz ve
   bal küpü alanı GÖRÜNÜR kalırdı.

   RENKLER LİTERAL DEĞİL, BELİRTEÇ.
   İlk yazışımda renkleri doğrudan yazmıştım ve kontrast taraması
   14 kusur buldu: tanıtım sitesinin koyu teması zemini
   karartıyor, benim yazdığım koyu metin ise olduğu yerde kalıyordu
   (1.44:1 — okunamaz). public-premium.css'in --pb-* belirteçleri
   iki temada da doğru değere çözülüyor. Yedek değerler, o dosya
   bir şekilde yüklenmezse diye duruyor.
   ------------------------------------------------------------------ */

.legal-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.legal-list > li {
  position: relative;
  padding-left: 22px;
  color: var(--pb-text-2, #40595d);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.legal-list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--pb-accent, #07998c);
}
.legal-list > li b { color: var(--pb-text, #123b41); }

/* Veri envanteri tablosu ------------------------------------------- */
.veri-tablo-sar {
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--pb-border, #d4e5e6);
  border-radius: 14px;
  background: var(--pb-surface, #fff);
}
.veri-tablo {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 13px;
}
.veri-tablo th,
.veri-tablo td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--pb-border, #e6eff0);
  line-height: 1.6;
  color: var(--pb-text-2, #40595d);
}
.veri-tablo thead th {
  background: var(--pb-surface-2, #f1f8f7);
  color: var(--pb-text, #0b5a55);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.veri-tablo tbody tr:last-child td { border-bottom: 0; }
.veri-tablo td b { display: block; color: var(--pb-text, #123b41); }
.veri-tablo td small {
  display: block;
  margin-top: 3px;
  color: var(--pb-text-3, #789093);
  font-size: 11.5px;
  line-height: 1.5;
}

/* Silme talebi formu ----------------------------------------------- */
.silme-form {
  display: grid;
  gap: 15px;
  margin-top: 14px;
  max-width: 560px;
}
.silme-form label {
  display: grid;
  gap: 7px;
  color: var(--pb-text, #284e54);
  font-size: 12px;
  font-weight: 850;
}
.silme-form label > small {
  display: inline;
  color: var(--pb-text-3, #7b9295);
  font-weight: 600;
}
.silme-form input[type="text"],
.silme-form input[type="email"],
.silme-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 13px;
  border: 1px solid var(--pb-border-2, #bdd7d9);
  border-radius: 11px;
  background: var(--pb-surface, #fff);
  color: var(--pb-text, #12383f);
  font: inherit;
  outline: 0;
}
.silme-form textarea { min-height: 120px; resize: vertical; }
.silme-form input:focus,
.silme-form textarea:focus {
  border-color: var(--pb-accent, #07998c);
  box-shadow: 0 0 0 3px var(--pb-ring, rgba(7, 153, 140, .13));
}
.silme-form .onay {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 11px;
  background: var(--pb-accent-soft, #eff8f7);
  color: var(--pb-on-soft, var(--pb-text, #284e54));
  font-weight: 650;
  line-height: 1.55;
}
.silme-form .onay input {
  /* WCAG 2.5.8: dokunma hedefi en az 24x24. 18px ile parmak
     ıskalıyordu ve onay kutusu formun gönderilmesini engelleyen
     tek zorunlu alan. */
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 0;
  accent-color: var(--pb-accent, #07998c);
}
.silme-form button {
  justify-self: start;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 11px;
  background: var(--pb-accent, #07998c);
  color: var(--pb-text-on-accent, #fff);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.silme-form button:hover { background: var(--pb-accent-hover, #068073); }
.silme-form button:focus-visible {
  outline: 3px solid var(--pb-border-strong, #0b5a55);
  outline-offset: 2px;
}

/* Bal küpü alanı: ekrandan kalkar, odak sırasına girmez. */
.gorunmez {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mobil oturum paneli — uygulama tarafı, biçimi premium.css'ten
   gelen .panel ve tablo kurallarına yaslanıyor. */
.mobil-oturumlar table { width: 100%; }
.mobil-oturumlar td small {
  display: block;
  margin-top: 2px;
  opacity: .72;
}

@media (max-width: 620px) {
  .veri-tablo { min-width: 520px; }
  .silme-form { max-width: none; }
}

/* Zorunlu alan işareti --------------------------------------------
   Tanıtım formlarında zorunlu alanların hiçbir görünür işareti
   yoktu: kullanıcı neyi doldurmak zorunda olduğunu ancak formu
   gönderip hata alınca öğreniyordu. <abbr title> hem gören
   kullanıcıya yıldızı hem ekran okuyucuya "zorunlu alan"ı verir. */
.zor {
  margin-left: 3px;
  color: var(--pb-bad-fg, #b3261e);
  font-weight: 900;
  text-decoration: none;
  border: 0;
  cursor: help;
}

/* Tanıtım formlarındaki onay kutusu ve açılır başlıklar da
   24px eşiğinin altındaydı (20x20 ve 284x22). Aynı kural. */
.contact-consent input[type="checkbox"] {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}
.public-page summary { min-height: 24px; }

/* ------------------------------------------------------------------
   KLAVYE ODAĞI — TANITIM SAYFALARI
   Tarama, üç bağlantıda odak halkasının hiç görünmediğini buldu
   (eski biçimde outline kapatılmış). Yönetim ekranları sistem.css
   ile korunuyor; herkese açık sayfalarda yüklü olan tek yeni dosya
   burası olduğu için kural buraya konuldu.
   ------------------------------------------------------------------ */
.public-page a:focus-visible,
.public-page button:focus-visible,
.premium-footer a:focus-visible,
.page-hero a:focus-visible,
header a:focus-visible,
nav a:focus-visible,
a.primary:focus-visible,
a.ghost:focus-visible {
  outline: 2px solid #07998c !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}