/* ============================================================================
   psikoajanda — bilesen sinifllari
   Dosya: panel/public/css/components.css
   Faz 1 / 2026-08-11

   Yuklenme sirasi:  tokens.css  ->  components.css  ->  custom.css
   Tailwind Play CDN kendi <style> etiketini calisma aninda document.head'in
   SONUNA ekler; dolayisiyla ayni ozgullukteki Tailwind yardimci siniflari
   (mb-3, mt-0, text-center, w-full ...) bu dosyayi ezebilir. Bu kasitlidir:
   sayfalarda mevcut yardimci siniflar calismaya devam etsin diye.

   KURAL 1: bu dosyada CSS oncelik zorlamasi (bang + important) KULLANILMAZ.
            TEST.sh bunu sayarak dogrular; beklenen sonuc sifirdir.
   KURAL 2: her etkilesimli bilesende  :focus-visible  vardir.
   KURAL 3: tum olculer rem.
   ============================================================================ */


/* ==========================================================================
   1) BUTON  —  .pa-btn
   Varyant: --primary | --secondary | --danger | --ghost
   Boyut:   --sm | --block
   ========================================================================== */

.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pa-bosluk-2);
  padding: 0.625rem 1.25rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--pa-yuvarlak-tam);
  font-family: var(--pa-yazi-ailesi);
  font-size: var(--pa-metin-md);
  font-weight: var(--pa-agirlik-yari);
  line-height: var(--pa-satir-siki);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--pa-gecis), border-color var(--pa-gecis),
              color var(--pa-gecis), box-shadow var(--pa-gecis);
}

/* Odak halkasi butonun DISINA duser (buton zemini ile 1.41:1 olurdu). */
.pa-btn:focus-visible {
  outline: var(--pa-odak-kalinlik) solid var(--pa-odak-renk);
  outline-offset: var(--pa-odak-bosluk);
}

.pa-btn:disabled,
.pa-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

/* --- birincil: #446BC5 zemin + beyaz metin = 5.05:1 ✔ AA --------------- */
.pa-btn--primary {
  background-color: var(--pa-brand-aksiyon);
  border-color: var(--pa-brand-aksiyon);
  color: var(--pa-dolgu-ustu);
}
/* hover #3154A5 + beyaz = 7.14:1 ✔ */
.pa-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.pa-btn--primary:focus:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--pa-brand-hover);
  border-color: var(--pa-brand-hover);
  color: var(--pa-dolgu-ustu);          /* #FFFFFF / #3154A5 = 7.14:1 ✔ */
}
.pa-btn--primary:active:not(:disabled) {
  background-color: var(--pa-brand-800); /* beyazla 9.52:1 ✔ */
  border-color: var(--pa-brand-800);
}

/* --- ikincil: #E3EAF8 zemin + #284380 metin = 7.89:1 ✔ AA -------------- */
.pa-btn--secondary {
  background-color: var(--pa-brand-100);
  border-color: var(--pa-brand-200);
  color: var(--pa-brand-metin);
}
.pa-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.pa-btn--secondary:focus:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--pa-brand-200); /* #284380 ile 6.39:1 ✔ */
  border-color: var(--pa-brand-300);
  color: var(--pa-brand-metin);
}

/* --- tehlike: #B3261E zemin + beyaz = 6.54:1 ✔ AA ---------------------- */
.pa-btn--danger {
  background-color: var(--pa-hata-zemin);
  border-color: var(--pa-hata-zemin);
  color: var(--pa-dolgu-ustu);
}
/* hover #8C1D18 + beyaz = 9.11:1 ✔ */
.pa-btn--danger:hover:not(:disabled):not([aria-disabled="true"]),
.pa-btn--danger:focus:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--pa-hata-hover);
  border-color: var(--pa-hata-hover);
  color: var(--pa-dolgu-ustu);          /* #FFFFFF / #8C1D18 = 9.11:1 ✔ */
}

/* --- hayalet: beyaz zemin + #3154A5 metin = 7.14:1 ✔ AA ---------------- */
.pa-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--pa-brand-hover);
}
.pa-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]),
.pa-btn--ghost:focus:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--pa-brand-50);
  border-color: var(--pa-brand-200);
  color: var(--pa-brand-hover);         /* #3154A5 / #F2F5FC = 6.87:1 ✔ */
}

/* ⚠ PEEPSO CAKISMASI — YUKARIDAKI :hover/:focus KURALLARINDAKI `color`
   SATIRLARI BUNUN ICIN VAR, SILME.
   PeepSo eklentisi YONETICI stil dosyasini (peepso/assets/css/backend.css)
   on yuze de yukluyor (peepso.php:3352) ve iginde AYNI ADI tasiyan kendi
   .pa-btn bileseni var:
       .pa-btn:hover,.pa-btn:focus{ color:#494954; background:#eeeeee }
   Ozgullugu 0-2-0. Bizim eski hover kurallarimiz yalnizca background/border
   yaziyordu; metin rengi ise 0-1-0'lik .pa-btn--primary uzerindeydi, bu
   yuzden PeepSo hover'da metni EZIYORDU:
       Takip Et butonu  hover  #494954 / #3154A5 = 1.24:1  (okunmuyor)
       danger butonu    hover  #494954 / #8C1D18 = 1.03:1  (gorunmuyor)
   Artik hover/focus kurallari 0-4-0 ozgullukte ve `color` de yaziyorlar. */
.pa-btn i, .pa-btn svg { opacity: 1; margin-right: 0; }

/* --- boyutlar ---------------------------------------------------------- */
.pa-btn--sm {
  padding: 0.375rem 0.875rem;
  font-size: var(--pa-metin-sm);
}

.pa-btn--block {
  display: flex;
  width: 100%;
}


/* ==========================================================================
   2) KART  —  .pa-card
   Sayfa zemini #EDEDF4 ile beyaz kart 1.17:1; sinir renkle degil
   golge + kenarlikla belirtilir (WCAG 1.4.11 metin disi kontrast).
   ========================================================================== */

.pa-card {
  background-color: var(--pa-notr-0);
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: var(--pa-yuvarlak-lg);
  padding: var(--pa-bosluk-4);
  box-shadow: var(--pa-golge-1);
  color: var(--pa-notr-900); /* beyazla 15.11:1 ✔ AAA */
}

.pa-card__title {
  margin: 0 0 var(--pa-bosluk-2);
  font-size: var(--pa-metin-lg);
  font-weight: var(--pa-agirlik-yari);
  line-height: var(--pa-satir-siki);
  color: var(--pa-notr-900);
}

.pa-card__meta {
  margin: 0;
  font-size: var(--pa-metin-sm);
  color: var(--pa-notr-600); /* beyazla 5.96:1 ✔ AA */
}


/* ==========================================================================
   3) TABLO  —  .pa-table
   ========================================================================== */

.pa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pa-metin-sm);
  color: var(--pa-notr-900);
}

.pa-table caption {
  caption-side: top;
  padding-bottom: var(--pa-bosluk-2);
  font-size: var(--pa-metin-sm);
  font-weight: var(--pa-agirlik-yari);
  color: var(--pa-notr-600);
  text-align: left;
}

.pa-table thead th {
  padding: var(--pa-bosluk-3);
  background-color: var(--pa-notr-100);
  border-bottom: 0.0625rem solid var(--pa-notr-300);
  font-size: var(--pa-metin-xs);
  font-weight: var(--pa-agirlik-yari);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: left;
  color: var(--pa-notr-700); /* #F1F2F6 uzerinde 7.87:1 ✔ AAA */
  white-space: nowrap;
}

.pa-table tbody td,
.pa-table tbody th {
  padding: var(--pa-bosluk-3);
  border-bottom: 0.0625rem solid var(--pa-notr-200);
  vertical-align: top;
  text-align: left;
}

.pa-table tbody tr:hover td {
  background-color: var(--pa-notr-50);
}

.pa-table--yapisik thead th {
  position: sticky;
  top: 0;
  z-index: var(--pa-z-yapisik);
}

/* Dar ekranda tasmasin */
.pa-table-sar {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Kaydirilabilir bolge klavyeyle odaklanabilir olmali (WCAG 2.1.1) */
.pa-table-sar:focus-visible {
  outline: var(--pa-odak-kalinlik) solid var(--pa-odak-renk);
  outline-offset: var(--pa-odak-bosluk);
}


/* ==========================================================================
   4) ROZET  —  .pa-badge  (5 varyant)
   Renk tek basina anlam tasimaz (WCAG 1.4.1): her rozet METIN icerir.
   ========================================================================== */

.pa-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-bosluk-1);
  padding: 0.125rem 0.5rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--pa-yuvarlak-sm);
  font-size: var(--pa-metin-xs);
  font-weight: var(--pa-agirlik-yari);
  line-height: 1.4;
  white-space: nowrap;
}

/* #0B5C3B / #E6F5EE = 7.15:1 ✔ AA */
.pa-badge--success { background-color: var(--pa-basari-yumusak); color: var(--pa-basari-metin); border-color: var(--pa-basari-kenar); }
/* #7A4700 / #FDF1DC = 6.89:1 ✔ AA */
.pa-badge--warning { background-color: var(--pa-uyari-yumusak);  color: var(--pa-uyari-metin);  border-color: var(--pa-uyari-kenar); }
/* #8C1D18 / #FBE9E7 = 7.77:1 ✔ AA */
.pa-badge--danger  { background-color: var(--pa-hata-yumusak);   color: var(--pa-hata-metin);   border-color: var(--pa-hata-kenar); }
/* #284380 / #E3EAF8 = 7.89:1 ✔ AA */
.pa-badge--info    { background-color: var(--pa-bilgi-yumusak);  color: var(--pa-bilgi-metin);  border-color: var(--pa-bilgi-kenar); }
/* #374151 / #F1F2F6 = 9.21:1 ✔ AAA */
.pa-badge--neutral { background-color: var(--pa-notr-yumusak);   color: var(--pa-notr-metin);   border-color: var(--pa-notr-kenar); }


/* ==========================================================================
   5) FORM ALANLARI
   .pa-label .pa-input .pa-select .pa-textarea .pa-check .pa-hint
   Kenarlik --pa-notr-500 (#767F8F): beyazla 4.04:1, sayfa zemini ile 3.46:1
   — ikisi de metin disi esigi 3.00'i gecer ✔
   ========================================================================== */

.pa-label {
  display: block;
  margin-bottom: var(--pa-bosluk-1);
  font-size: var(--pa-metin-sm);
  font-weight: var(--pa-agirlik-yari);
  line-height: var(--pa-satir-siki);
  color: var(--pa-notr-700); /* beyazla 8.81:1 ✔ AAA */
}

.pa-label--zorunlu::after {
  content: " *";
  color: var(--pa-hata-metin); /* beyazla 9.11:1 ✔ AAA */
}

.pa-input,
.pa-select,
.pa-textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: var(--pa-notr-0);
  border: 0.0625rem solid var(--pa-notr-500);
  border-radius: var(--pa-yuvarlak-sm);
  font-family: var(--pa-yazi-ailesi);
  font-size: var(--pa-metin-md);
  line-height: var(--pa-satir-normal);
  color: var(--pa-notr-900);
  transition: border-color var(--pa-gecis), box-shadow var(--pa-gecis);
}

.pa-input::placeholder,
.pa-textarea::placeholder {
  color: #6B7280; /* beyazla 4.83:1 ✔ AA */
  opacity: 1;     /* Firefox varsayilan solmasini kapat */
}

.pa-input:hover:not(:disabled),
.pa-select:hover:not(:disabled),
.pa-textarea:hover:not(:disabled) {
  border-color: var(--pa-notr-600);
}

.pa-input:focus-visible,
.pa-select:focus-visible,
.pa-textarea:focus-visible {
  outline: var(--pa-odak-kalinlik) solid var(--pa-odak-renk);
  outline-offset: var(--pa-odak-bosluk);
  border-color: var(--pa-brand-600);
}
/* Klavye disi odakta da kenarlik belli olsun (fare ile tiklama) */
.pa-input:focus,
.pa-select:focus,
.pa-textarea:focus {
  border-color: var(--pa-brand-600);
}

.pa-input:disabled,
.pa-select:disabled,
.pa-textarea:disabled {
  background-color: var(--pa-notr-100);
  border-color: var(--pa-notr-300);
  color: var(--pa-notr-600);
  cursor: not-allowed;
}

/* Gecersiz alan: renk + kenarlik + (sayfada) metin birlikte kullanilmali */
.pa-input[aria-invalid="true"],
.pa-select[aria-invalid="true"],
.pa-textarea[aria-invalid="true"] {
  border-color: var(--pa-hata-zemin); /* beyazla 6.54:1 ✔ */
}

.pa-textarea {
  min-height: 6rem;
  border-radius: var(--pa-yuvarlak-md);
  resize: vertical;
}

/* <select> ok isareti — Tailwind preflight'i ezmemek icin sinifla verilir */
.pa-select,
select.pa-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235C6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}

/* Onay kutusu / secim dugmesi — dokunma hedefi en az 1.5rem */
.pa-check {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--pa-brand-600);
  cursor: pointer;
  flex: none;
}
.pa-check:focus-visible {
  outline: var(--pa-odak-kalinlik) solid var(--pa-odak-renk);
  outline-offset: var(--pa-odak-bosluk);
}
.pa-check:disabled { cursor: not-allowed; opacity: 0.55; }

/* Etiketiyle birlikte tiklanabilir satir */
.pa-check-satir {
  display: flex;
  align-items: center;
  gap: var(--pa-bosluk-2);
  min-height: 2.25rem;
  font-size: var(--pa-metin-md);
  color: var(--pa-notr-900);
  cursor: pointer;
}

.pa-hint {
  display: block;
  margin-top: var(--pa-bosluk-1);
  font-size: var(--pa-metin-sm);
  line-height: var(--pa-satir-normal);
  color: var(--pa-notr-600); /* beyazla 5.96:1 ✔ AA */
}

.pa-hint--hata {
  color: var(--pa-hata-metin); /* beyazla 9.11:1 ✔ AAA */
  font-weight: var(--pa-agirlik-orta);
}

.pa-alan {              /* etiket + girdi + ipucu sarmalayicisi */
  display: block;
  margin-bottom: var(--pa-bosluk-4);
}


/* ==========================================================================
   6) BOS DURUM  —  .pa-empty
   ========================================================================== */

.pa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pa-bosluk-2);
  padding: var(--pa-bosluk-6) var(--pa-bosluk-4);
  background-color: var(--pa-notr-50);
  border: 0.0625rem dashed var(--pa-notr-300);
  border-radius: var(--pa-yuvarlak-lg);
  text-align: center;
}

.pa-empty__icon {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--pa-brand-400); /* dekoratif — aria-hidden="true" verilmeli */
}

.pa-empty__title {
  margin: 0;
  font-size: var(--pa-metin-lg);
  font-weight: var(--pa-agirlik-yari);
  color: var(--pa-notr-900); /* #F7F8FA uzerinde 14.24:1 ✔ AAA */
}

.pa-empty__text {
  margin: 0;
  max-width: 34rem;
  font-size: var(--pa-metin-sm);
  line-height: var(--pa-satir-genis);
  color: var(--pa-notr-600); /* #F7F8FA uzerinde 5.62:1 ✔ AA */
}


/* ==========================================================================
   7) UYARI KUTUSU  —  .pa-alert  (5 varyant)
   Kullanim:  <div class="pa-alert pa-alert--danger" role="alert"> ... </div>
   Bilgi/basari icin  role="status"  yeterlidir.
   ========================================================================== */

.pa-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--pa-bosluk-3);
  padding: var(--pa-bosluk-3) var(--pa-bosluk-4);
  border: 0.0625rem solid transparent;
  border-left-width: 0.25rem;
  border-radius: var(--pa-yuvarlak-md);
  font-size: var(--pa-metin-sm);
  line-height: var(--pa-satir-normal);
}

.pa-alert__title {
  margin: 0 0 var(--pa-bosluk-1);
  font-size: var(--pa-metin-md);
  font-weight: var(--pa-agirlik-yari);
}

.pa-alert__body { margin: 0; }

.pa-alert--success { background-color: var(--pa-basari-yumusak); color: var(--pa-basari-metin); border-color: var(--pa-basari-kenar); border-left-color: var(--pa-basari-vurgu, var(--pa-basari-zemin)); }
.pa-alert--warning { background-color: var(--pa-uyari-yumusak);  color: var(--pa-uyari-metin);  border-color: var(--pa-uyari-kenar);  border-left-color: var(--pa-uyari-vurgu, var(--pa-uyari-zemin)); }
.pa-alert--danger  { background-color: var(--pa-hata-yumusak);   color: var(--pa-hata-metin);   border-color: var(--pa-hata-kenar);   border-left-color: var(--pa-hata-vurgu, var(--pa-hata-zemin)); }
.pa-alert--info    { background-color: var(--pa-bilgi-yumusak);  color: var(--pa-bilgi-metin);  border-color: var(--pa-bilgi-kenar);  border-left-color: var(--pa-bilgi-vurgu, var(--pa-bilgi-zemin)); }
.pa-alert--neutral { background-color: var(--pa-notr-yumusak);   color: var(--pa-notr-metin);   border-color: var(--pa-notr-kenar);   border-left-color: var(--pa-notr-vurgu, var(--pa-notr-zemin)); }

.pa-alert a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}
.pa-alert a:focus-visible {
  outline: var(--pa-odak-kalinlik) solid currentColor;
  outline-offset: var(--pa-odak-bosluk);
}

/* Uyarı kutusu İÇİNDEKİ pa-btn bağlantıları LİNK değil BUTON görünmeli.
   Üstteki `.pa-alert a { color:inherit; text-decoration:underline }` kuralı
   (özgüllük 0,2,0) pa-btn'i (0,1,0) eziyor; work-times kaydından sonraki
   "Yeniden düzenle / Panele dön" butonları yeşil+altı çizili çıkıyordu.
   Buton stilini geri veriyoruz (aynı özgüllükte, sonra geldiği için kazanır). */
.pa-alert a.pa-btn { text-decoration: none; }
.pa-alert a.pa-btn--primary { color: var(--pa-dolgu-ustu); }
.pa-alert a.pa-btn--secondary { color: var(--pa-brand-metin); }


/* ==========================================================================
   8) KENAR CUBUGU  —  .pa-sidebar / .pa-sidebar__link
   $sidebarBackground ve $sidebarButtons buraya baglanir (49 sayfa).

   ⚠ DUZELTILEN IKI HATA:
     - eski  text-blue-50  : beyaz uzerinde #EFF6FF = 1.09:1, GORUNMEZ metin
     - eski  min-h-auto    : Tailwind'de boyle bir sinif YOK (gecersiz)
   ========================================================================== */

.pa-sidebar {
  background-color: var(--pa-notr-0);
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: var(--pa-yuvarlak-lg);
  padding: var(--pa-bosluk-3);
  height: fit-content;          /* eski h-fit */
  box-shadow: var(--pa-golge-1);
  color: var(--pa-notr-900);    /* 15.11:1 ✔ — eski 1.09:1 yerine */
}

.pa-sidebar ul { list-style: none; margin: 0; padding: 0; }
.pa-sidebar li { display: block; }   /* 98 inline yamanin yerini alir */

.pa-sidebar__link {
  display: block;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 0.0625rem solid transparent;
  border-bottom-color: var(--pa-brand-200);
  border-radius: var(--pa-yuvarlak-sm);
  background-color: var(--pa-notr-50);
  font-size: var(--pa-metin-md);
  font-weight: var(--pa-agirlik-orta);
  line-height: var(--pa-satir-normal);
  text-decoration: none;
  /* #3154A5 / #F7F8FA = 6.72:1 ✔ AA  (eski text-mavi #7491D4 = 2.93:1 ✘) */
  color: var(--pa-brand-hover);
  transition: background-color var(--pa-gecis), color var(--pa-gecis),
              box-shadow var(--pa-gecis), border-color var(--pa-gecis);
}

.pa-sidebar__link:hover {
  background-color: var(--pa-brand-50);
  border-bottom-color: var(--pa-brand-400);
  box-shadow: var(--pa-golge-1);
  color: var(--pa-brand-metin);   /* tema main.css:137  a:hover{color:#000}  yenilsin */
}

.pa-sidebar__link:focus-visible {
  outline: var(--pa-odak-kalinlik) solid var(--pa-odak-renk);
  outline-offset: var(--pa-odak-bosluk);
}

/* AKTIF SAYFA — isaretleme HTML tarafinda:  aria-current="page"
   Renk tek basina birakilmaz: sol kenar cubugu + kalin yazi da vardir. */
.pa-sidebar__link[aria-current="page"] {
  background-color: var(--pa-brand-100);
  border-color: var(--pa-brand-200);
  border-left: 0.1875rem solid var(--pa-brand-600);
  font-weight: var(--pa-agirlik-yari);
  /* #284380 / #E3EAF8 = 7.89:1 ✔ AA */
  color: var(--pa-brand-metin);
}

.pa-sidebar__baslik {
  margin: 0 0 var(--pa-bosluk-2);
  padding: 0 0.625rem;
  font-size: var(--pa-metin-xs);
  font-weight: var(--pa-agirlik-yari);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pa-notr-600);
}


/* ==========================================================================
   9) SAYFA BASLIGI  —  .pa-page-title
   $h1Class buraya baglanir (37 dosya / 69 kullanim).
   ⚠ text-align VERILMEZ: sayfalarda eklenmis  text-center  calismaya devam etsin.
   ⚠ margin-top VERILMEZ:  mt-0  eklemeleri anlamli kalsin.
   ========================================================================== */

.pa-page-title {
  margin-bottom: var(--pa-bosluk-1);
  font-size: var(--pa-metin-xl);      /* 1.5rem — eski text-2xl ile ayni */
  font-weight: var(--pa-agirlik-kalin); /* 700 — eski font-bold ile ayni */
  line-height: var(--pa-satir-siki);
  color: var(--pa-notr-900);          /* beyazla 15.11:1 ✔ AAA */
}

.pa-page-title__alt {
  margin: var(--pa-bosluk-1) 0 0;
  font-size: var(--pa-metin-sm);
  font-weight: var(--pa-agirlik-normal);
  line-height: var(--pa-satir-normal);
  color: var(--pa-notr-600);
}

/* $pClass buraya baglanir (bugun 0 kullanim) */
.pa-text {
  margin: var(--pa-bosluk-1) 0;
  font-size: var(--pa-metin-lg);
  line-height: var(--pa-satir-genis);
  color: var(--pa-notr-900);
}


/* ==========================================================================
   10) YARDIMCILAR
   ========================================================================== */

/* Ekran okuyucuya gorunur, gozle gorunmez */
.pa-sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icerige atla baglantisi — odaklaninca gorunur (WCAG 2.4.1) */
.pa-skip {
  position: absolute;
  left: var(--pa-bosluk-2);
  top: -3rem;
  z-index: var(--pa-z-katman);
  padding: 0.5rem 1rem;
  background-color: var(--pa-notr-0);
  border: 0.125rem solid var(--pa-brand-600);
  border-radius: var(--pa-yuvarlak-sm);
  color: var(--pa-brand-metin);
  font-weight: var(--pa-agirlik-yari);
  text-decoration: none;
  transition: top var(--pa-gecis);
}
.pa-skip:focus-visible {
  top: var(--pa-bosluk-2);
  outline: var(--pa-odak-kalinlik) solid var(--pa-odak-renk);
  outline-offset: var(--pa-odak-bosluk);
}

/* Panel icindeki serbest metin baglantilari */
.pa-link {
  color: var(--pa-brand-aksiyon); /* beyazla 5.05:1 ✔ AA */
  text-decoration: underline;
  text-underline-offset: 0.125rem;
  transition: color var(--pa-gecis);
}
.pa-link:hover { color: var(--pa-brand-hover); }
.pa-link:focus-visible {
  outline: var(--pa-odak-kalinlik) solid var(--pa-odak-renk);
  outline-offset: var(--pa-odak-bosluk);
  border-radius: 0.125rem;
}



/* ==========================================================================
   11) PANO BOS DURUMLARI  —  pa-bosdurum v1 / 2026-08-12
   panel/index.php pano kartlari icin ek varyantlar.
   6) BOS DURUM bolumundeki .pa-empty / __icon / __title / __text
   DEGISTIRILMEDI (notifications.php onlari kullaniyor).
   ========================================================================== */

/* Kart icinde dikeyde ortalanir; pano kartlari dar oldugu icin ic bosluk
   6) bolumundekinden bir kademe kucuk. */
.pa-empty--pano {
  gap: var(--pa-bosluk-3);
  padding: var(--pa-bosluk-5) var(--pa-bosluk-4);
  justify-content: center;
}

/* UX karari: ikon rengi aksiyon tonu (marka kimlik tonu #7491D4 degil).
   #446BC5 / #F7F8FA = 4.76:1 — dekoratif esigi 3.00'i de metin esigi
   4.50'yi de gecer. Ikon her zaman aria-hidden="true" tasir. */
.pa-empty__icon--pano {
  font-size: 2rem;                    /* 32px */
  color: var(--pa-brand-aksiyon);
}

/* Dar kartta 1.125rem yerine 1rem baslik (UX kalip olcusu). */
.pa-empty--pano .pa-empty__title {
  font-size: var(--pa-metin-md);
}

/* 320px genislikte uzun kelime tasmasin. */
.pa-empty--pano .pa-empty__text {
  max-width: 26rem;
  overflow-wrap: break-word;
}

/* Birincil eylem — dokunma hedefi en az 2.75rem x 2.75rem (44x44px).
   .pa-btn tek basina 2.5rem yuksekliginde kaliyordu (0.625rem x2 + 1.25rem). */
.pa-empty__action {
  min-height: 2.75rem;
  min-width: 2.75rem;
  margin-top: var(--pa-bosluk-1);
}

/* Ikincil, dugme OLMAYAN metin baglantisi. .pa-link ile birlikte kullanilir:
   class="pa-link pa-empty__link"  —  .pa-link custom.css'teki
   a{display:unset} kuralinin disinda tutuldugu icin inline-flex korunur. */
.pa-empty__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--pa-bosluk-2);
  font-size: var(--pa-metin-sm);
}

/* Takvim sekmelerinin tek satirlik bos durumu: ikonsuz, dugmesiz, ortalanmis.
   #5C6472 / beyaz = 5.96:1 ✔ AA */
.pa-empty-satir {
  margin: 0;
  padding: var(--pa-bosluk-5) var(--pa-bosluk-2);
  font-size: var(--pa-metin-sm);
  line-height: var(--pa-satir-normal);
  color: var(--pa-notr-600);
  text-align: center;
}

/* Sekme degistiren metin dugmesi: <button> ama baglanti gibi gorunur.
   min-height 1.75rem = 28px, WCAG 2.5.8 (AA) hedef boyutu 24px'i gecer. */
.pa-empty-satir__eylem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  margin-top: var(--pa-bosluk-1);
  padding: 0 var(--pa-bosluk-2);
  background-color: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--pa-metin-sm);
  cursor: pointer;
}

/* Pano karti: bos kart dolu karta gore cokmesin, izgara ziplamasin.
   Yalniz lg ve ustunde uygulanir — mobilde tek sutun oldugu icin yan yana
   kart yok, taban yukseklik gereksiz yere sayfayi uzatmasin.
   20rem = 5 satirlik dolu kartin (~18.4rem) ustu, bos kalibin (~21rem) alti. */
@media (min-width: 64rem) {
  .pa-pano-kart { min-height: 20rem; }
}

/* Mavi seritteki (#7491D4) kart basligi.
   ⚠ Beyaz / #7491D4 = 3.11:1. Bugunku  text-lg (1.125rem, 400)  WCAG'de
   KUCUK metindir; esigi 4.50 ve GECMEZ.
   1.25rem + 700 = 20px kalin -> "buyuk metin" (>=14pt kalin); esigi 3.00,
   3.11 ile GECER. Serit rengi marka kimligi karari geregi #7491D4 kaliyor,
   bu yuzden cozum baslik olcegini buyutmek. */
.pa-kart-baslik {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--pa-agirlik-kalin);
  line-height: var(--pa-satir-siki);
  color: var(--pa-dolgu-ustu);
}
/* ==========================================================================
   12) MOBİL UYUMLULUK YAMALARI
   Panelde tarayıcı testi yapılamadığı için kod taramasıyla bulunan, mobilde
   yatay taşmaya yol açan kalıplar burada topluca çözülüyor.
   ========================================================================== */

/* --- 12a. Kaydırma kabı olmayan tablolar --------------------------------
   7 tablo (client-list, client-user, manual-client-detail, manual-clients,
   my-appointments) `overflow-x-auto` sarmalayıcısı olmadan basılıyor ve
   içlerinde yoğun `whitespace-nowrap` var → sayfanın TAMAMI yana kayıyordu.
   Tablolar PHP dizesi içinde üretildiği için işaretlemeye dokunmak yerine
   tablonun kendisi kaydırılabilir hale getiriliyor.                        */

@media (max-width: 767.98px) {
  table.min-w-full.table-auto {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Kaydırılabilir olduğu görünsün */
  table.min-w-full.table-auto::-webkit-scrollbar { height: 0.375rem; }
  table.min-w-full.table-auto::-webkit-scrollbar-thumb {
    background: var(--pa-notr-300);
    border-radius: 0.25rem;
  }
}

/* --- 12b. Sayfanın kendisi yana kaymasın --------------------------------
   Tek bir taşan öğe tüm sayfayı kaydırır ve mobilde en can sıkıcı hata budur.
   `clip` yerine `hidden` kullanılmıyor: `hidden` yapışkan başlıkları bozar. */

@media (max-width: 991.98px) {
  html, body { overflow-x: clip; }
}

/* --- 12c. Sabit piksel genişlikler --------------------------------------
   Satır içi `style="width:350px"` kalıbı dar ekranda taşıyor.              */

@media (max-width: 480px) {
  [style*="width:350px"],
  [style*="width: 350px"] {
    max-width: 100% !important;
    width: auto !important;
  }
}

/* --- 12d. Öneki olmayan çok sütunlu ızgaralar ---------------------------
   `grid-cols-2/3/4` mobilde de sütun sayısını koruyor; 320px ekranda
   sütun başına ~80px kalıyor. Panelde bu ızgaralar form ve liste düzeni.   */

@media (max-width: 639.98px) {
  .pa-mobil-tek-sutun { grid-template-columns: 1fr !important; }
  .pa-mobil-tek-sutun > [class*="col-span-"] { grid-column: auto !important; }
}

/* --- 12e. Dokunma hedefleri --------------------------------------------- */

@media (max-width: 767.98px) {
  .pa-btn,
  .bg-mavi.rounded-full,
  a.bg-mavi[class*="px-"] {
    min-height: 2.75rem;
  }
}

/* --- 12f. Panel sayfalarındaki tema başlığı ------------------------------
   panel/header.php temanın başlığını dahil ediyor, sonra JS ile `.container`
   sınıfını söküp yerine `px-3` koyuyor. Bootstrap ızgarası genişliğini
   kabından aldığı için logo sütunu YÜKSEKLİK 0'a çöküyor; logo sütunundan
   taşıp "Giriş / Kayıt" düğmesinin üstüne biniyor (390px'de 73px çakışma).
   Ölçüldü: .col-4 → 117x0, logo 93x19 @x=32, düğme @x=52.                */

.theme-header-area .row > [class*="col-"] {
  min-height: 2.75rem;
}

.theme-header-area .logo.theme-logo {
  display: flex;
  align-items: center;
  min-width: 0;
}

.theme-header-area .logo.theme-logo a,
.theme-header-area .logo.theme-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Dar ekranda logo sütunu daralsın, düğmelere yer açsın */
@media (max-width: 575.98px) {
  .theme-header-area .logo.theme-logo img {
    max-width: 7.5rem;
  }
}

/* --- 12g. Panel başlığındaki düğmeler ------------------------------------
   panel/header.php'deki JS `.girisButton` → `.girisButton0`,
   `.kayitButton` → `.kayitButton0` olarak yeniden adlandırıyor. Bu yüzden
   mu-plugin'deki küçültme kuralları (orijinal adları hedefliyor) panelde
   TUTMUYOR ve iki düğme 261px isterken sütunda 233px kalıyor; taşma sola
   doğru oluyor ve logonun üstüne biniyor.                                 */

.theme-header-area .header-right-content,
.theme-header-area [class*="col-"] {
  min-width: 0;
}

.theme-header-area .ozelButton,
.theme-header-area .ozelButton2,
.theme-header-area .girisButton0,
.theme-header-area .kayitButton0 {
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .theme-header-area .ozelButton,
  .theme-header-area .ozelButton2,
  .theme-header-area .girisButton0,
  .theme-header-area .kayitButton0 {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.8125rem !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 479.98px) {
  .theme-header-area .ozelButton,
  .theme-header-area .ozelButton2,
  .theme-header-area .girisButton0,
  .theme-header-area .kayitButton0 {
    padding: 0.5rem 0.625rem !important;
    font-size: 0.75rem !important;
  }
}

/* --- 12h. Mobil alt menü ------------------------------------------------
   Ölçüm (390px, search.php): alt menü sabit, 366x76 @y=712, ama
   `body` alt dolgusu 0. Sonuç: sayfanın son içeriği menünün ALTINDA kalıyor
   ve tıklanamıyor — ölçümde 5 bağlantı menünün arkasındaydı.
   Ayrıca ikonlar 32px genişlikte (44 eşiğinin altında).                   */

@media (max-width: 1023.98px) {
  body {
    padding-bottom: 6.5rem;   /* menü 76px + alt boşluk 12px + pay */
  }
}

/* İkonlar hücrelerini doldursun, dokunma hedefi 44px olsun */
nav[aria-label="Mobil alt menü"] > div > a,
nav[aria-label="Mobil alt menü"] > div > button {
  /* custom.css:64'te `a { display: unset !important }` var; onu ancak
     !important ezebiliyor. Bu yuzden burada da !important zorunlu. */
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  width: 100% !important;
  border-radius: 0.625rem;
  transition: background-color .15s ease;
}

nav[aria-label="Mobil alt menü"] > div > a:hover,
nav[aria-label="Mobil alt menü"] > div > button:hover,
nav[aria-label="Mobil alt menü"] > div > a:focus-visible,
nav[aria-label="Mobil alt menü"] > div > button:focus-visible {
  background-color: rgba(255, 255, 255, 0.18);
  outline: none;
}

/* Olculdu: izgara bosluğu 48px, dort sutuna yalnizca 31.5px kaliyordu
   (270 = 4x31.5 + 3x48). Bosluk kisilinca hucre ~64px'e cikiyor ve
   dokunma hedefi 44px esigini asiyor. */
nav[aria-label="Mobil alt menü"] > div {
  gap: 0.25rem !important;
}

@media (prefers-reduced-motion: reduce) {
  nav[aria-label="Mobil alt menü"] > div > a,
  nav[aria-label="Mobil alt menü"] > div > button { transition: none; }
}

/* --- 12i. Panel başlığındaki düğmeler sağa yaslansın --------------------
   Ölçüm: sütun 137→370, düğmeler 133→310. Sağda 60px boşluk kalıyor ve
   ilk düğme kabının solundan taşıyor.                                     */

.theme-header-area .header-right-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
}

.theme-header-area .header-right-content > a {
  margin: 0 !important;
  flex: 0 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════
   13. KAYIT LİSTESİ (.rv-*) — randevu/talep listeleri
   ----------------------------------------------------------------------
   Masaüstünde gerçek tablo, mobilde karta dönüşür. Eskiden bu listeler
   yatay kaydırma çubuğuyla veriliyordu; telefonda "Durum" sütunu ekranın
   dışında kalıyor, kullanıcı kaydırmadan talebin onaylı mı olduğunu
   göremiyordu.
   Renkler tokens.css'ten gelir — marka kimliği #7491D4, aksiyon #446BC5.
   ════════════════════════════════════════════════════════════════════ */

.rv-sar {
  background: var(--pa-notr-0);
  border-radius: 1rem;
  overflow: hidden;
  border: 0.0625rem solid var(--pa-notr-200);
}

.rv-tablo { width: 100%; border-collapse: collapse; text-align: left; }

.rv-tablo thead th {
  /* Uzerinde beyaz metin tasiyor: kimlik tonu (#7491D4) burada 3,11:1 verir,
     AA esigi 4,5. Kullanici karari 2026-08-20 geregi metin tasiyan dolgular
     aksiyon tonuna baglandi (--pa-brand-600 #446BC5, beyazla 5,05:1). Kimlik
     tonu dekoratif kullanimlarda (ust bant, halka) duruyor. */
  background: var(--pa-brand-600);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

.rv-tablo tbody td {
  padding: 0.875rem 1rem;
  border-top: 0.0625rem solid var(--pa-notr-200);
  color: var(--pa-notr-700);
  font-size: 0.875rem;
  vertical-align: middle;
}

.rv-tablo tbody tr { transition: background-color 0.15s ease; }
.rv-tablo tbody tr:hover { background: var(--pa-brand-50); }

.rv-ad { font-weight: 600; color: var(--pa-notr-900); }
.rv-ad a { color: inherit; text-decoration: none; }
.rv-ad a:hover { color: var(--pa-brand-aksiyon); text-decoration: underline; }
.rv-ikincil { display: block; font-size: 0.75rem; color: var(--pa-notr-600); margin-top: 0.125rem; }

/* Zaman hücresi */
.rv-zaman { display: flex; align-items: center; gap: 0.5rem; }
.rv-zaman__gun {
  width: 2.75rem; flex: 0 0 auto; text-align: center;
  background: var(--pa-brand-50); border: 0.0625rem solid var(--pa-brand-200);
  border-radius: 0.5rem; padding: 0.1875rem 0; line-height: 1.15;
}
.rv-zaman__gun b { display: block; font-size: 1rem; color: var(--pa-brand-metin); }
.rv-zaman__gun span { display: block; font-size: 0.625rem; text-transform: uppercase; color: var(--pa-notr-600); }
.rv-zaman__saat { font-weight: 600; color: var(--pa-notr-800); }

/* Yeni gelen kaydın bir kerelik vurgusu (sonsuz animate-pulse yerine) */
@keyframes rvVurgu {
  0%, 70% { background-color: var(--pa-brand-100); }
  100%    { background-color: transparent; }
}
.rv-vurgu { animation: rvVurgu 3.5s ease-out 1; }

/* Süzgeç sekmeleri */
.rv-sekmeler { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.875rem; }
.rv-sekme {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.4375rem 0.875rem; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; text-decoration: none;
  background: var(--pa-notr-0); color: var(--pa-notr-700);
  border: 0.0625rem solid var(--pa-notr-200);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  min-height: 2.25rem;
}
.rv-sekme:hover { border-color: var(--pa-brand-300); color: var(--pa-brand-metin); }
.rv-sekme[aria-current="page"] {
  background: var(--pa-brand-aksiyon); color: #fff; border-color: var(--pa-brand-aksiyon);
}
.rv-sekme__sayi {
  min-width: 1.375rem; padding: 0 0.3125rem; border-radius: 999px;
  background: var(--pa-notr-100); color: var(--pa-notr-700);
  font-size: 0.6875rem; line-height: 1.375rem; text-align: center;
}
.rv-sekme[aria-current="page"] .rv-sekme__sayi { background: rgba(255,255,255,0.25); color: #fff; }

/* Araç şeridi */
.rv-arac { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 0.875rem; }
.rv-ara { position: relative; flex: 1 1 14rem; max-width: 22rem; }
.rv-ara input { padding-left: 2.25rem; }
.rv-ara i { position: absolute; left: 0.8125rem; top: 50%; transform: translateY(-50%); color: var(--pa-notr-500); pointer-events: none; }

/* ── Mobil: satırlar karta dönüşür ───────────────────────────────────── */
@media (max-width: 1023.98px) {
  .rv-sar { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .rv-tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rv-tablo, .rv-tablo tbody, .rv-tablo tr, .rv-tablo td { display: block; width: 100%; }

  .rv-tablo tbody tr {
    background: var(--pa-notr-0);
    border: 0.0625rem solid var(--pa-notr-200);
    border-radius: 0.875rem;
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
  }
  .rv-tablo tbody tr:hover { background: var(--pa-notr-0); }

  .rv-tablo tbody td {
    border: 0;
    padding: 0.3125rem 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }
  .rv-tablo tbody td::before {
    content: attr(data-etiket);
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pa-notr-600);
    padding-top: 0.125rem;
  }
  /* İlk hücre kart başlığı: etiketsiz ve tam genişlik */
  .rv-tablo tbody td:first-child {
    display: block;
    padding-bottom: 0.625rem;
    margin-bottom: 0.5rem;
    border-bottom: 0.0625rem solid var(--pa-notr-200);
    font-size: 1rem;
  }
  .rv-tablo tbody td:first-child::before { content: none; }
  .rv-tablo tbody td:not(:first-child) > *:last-child { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-tablo tbody tr, .rv-sekme { transition: none; }
  .rv-vurgu { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   14. PENCERE (.pa-modal) — tek, yeniden kullanılabilir kip penceresi
   ----------------------------------------------------------------------
   Eskiden listelerde HER satır için ayrı bir gizli pencere ve ayrı bir
   <script> bloğu basılıyordu. Tek pencere, içerik istendiğinde yüklenir.
   ════════════════════════════════════════════════════════════════════ */

.pa-modal-katman {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(30, 39, 49, 0.55);
  animation: paKatmanGir 0.15s ease both;
}
.pa-modal-katman[hidden] { display: none; }

@keyframes paKatmanGir { from { opacity: 0 } to { opacity: 1 } }

.pa-modal {
  background: var(--pa-notr-0);
  border-radius: 1rem;
  width: 100%;
  max-width: 32rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1.25rem 3rem rgba(30, 39, 49, 0.28);
  animation: paPencereGir 0.18s ease both;
}

@keyframes paPencereGir {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98) }
  to   { opacity: 1; transform: none }
}

.pa-modal__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 0.0625rem solid var(--pa-notr-200);
}

.pa-modal__govde {
  padding: 1.25rem;
  overflow-y: auto;
  color: var(--pa-notr-700);
  font-size: 0.875rem;
}

.pa-modal__not {
  padding: 0.75rem 0;
  border-bottom: 0.0625rem solid var(--pa-notr-200);
  word-break: break-word;
}
.pa-modal__not:last-child { border-bottom: 0; }
.pa-modal__not small { display: block; font-size: 0.6875rem; color: var(--pa-notr-600); margin-bottom: 0.25rem; }

@media (prefers-reduced-motion: reduce) {
  .pa-modal-katman, .pa-modal { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   15. MARKA RENK EŞLEME KATMANI
   ----------------------------------------------------------------------
   Panelde 40'tan fazla sayfada Tailwind'in hazır mavi/indigo/mor/turkuaz
   tonları elle yazılmıştı (text-indigo-600 ×64, bg-blue-50 ×23, bg-black
   ×23 …). Sonuç: her ekran biraz başka bir maviydi ve çoğu marka renginden
   daha koyuydu.

   Bu katman o sınıfları marka ölçeğine bağlar. Sayfalara dokunmadan tüm
   panel tek renk ailesine gelir; yeni yazılan ekranlar zaten doğrudan
   token kullanıyor.

   Semantik renkler (yeşil=başarı, kırmızı=hata, turuncu=uyarı) DOKUNULMADI;
   onlar bilgi taşıyor.
   ════════════════════════════════════════════════════════════════════ */

.bg-blue-50{background-color:var(--pa-brand-50)!important}
.bg-blue-100{background-color:var(--pa-brand-100)!important}
.bg-blue-200{background-color:var(--pa-brand-200)!important}
.bg-blue-300{background-color:var(--pa-brand-300)!important}
.bg-blue-400{background-color:var(--pa-brand-400)!important}
.bg-blue-500{background-color:var(--pa-brand-500)!important}
.bg-blue-600{background-color:var(--pa-brand-600)!important}
.bg-blue-700{background-color:var(--pa-brand-700)!important}
.bg-blue-800{background-color:var(--pa-brand-800)!important}
.bg-blue-900{background-color:var(--pa-brand-900)!important}
.text-blue-50{color:var(--pa-brand-600)!important}
.text-blue-100{color:var(--pa-brand-600)!important}
.text-blue-200{color:var(--pa-brand-600)!important}
.text-blue-300{color:var(--pa-brand-600)!important}
.text-blue-400{color:var(--pa-brand-600)!important}
.text-blue-500{color:var(--pa-brand-600)!important}
.text-blue-600{color:var(--pa-brand-600)!important}
.text-blue-700{color:var(--pa-brand-700)!important}
.text-blue-800{color:var(--pa-brand-800)!important}
.text-blue-900{color:var(--pa-brand-900)!important}
.border-blue-50{border-color:var(--pa-brand-50)!important}
.border-blue-100{border-color:var(--pa-brand-100)!important}
.border-blue-200{border-color:var(--pa-brand-200)!important}
.border-blue-300{border-color:var(--pa-brand-300)!important}
.border-blue-400{border-color:var(--pa-brand-400)!important}
.border-blue-500{border-color:var(--pa-brand-500)!important}
.border-blue-600{border-color:var(--pa-brand-600)!important}
.border-blue-700{border-color:var(--pa-brand-700)!important}
.border-blue-800{border-color:var(--pa-brand-800)!important}
.border-blue-900{border-color:var(--pa-brand-900)!important}
.hover\:bg-blue-400:hover{background-color:var(--pa-brand-400)!important}
.hover\:text-blue-400:hover{color:var(--pa-brand-600)!important}
.hover\:border-blue-400:hover{border-color:var(--pa-brand-400)!important}
.focus\:border-blue-400:focus{border-color:var(--pa-brand-400)!important}
.focus\:ring-blue-400:focus{--tw-ring-color:var(--pa-brand-400)!important}
.hover\:bg-blue-500:hover{background-color:var(--pa-brand-500)!important}
.hover\:text-blue-500:hover{color:var(--pa-brand-600)!important}
.hover\:border-blue-500:hover{border-color:var(--pa-brand-500)!important}
.focus\:border-blue-500:focus{border-color:var(--pa-brand-500)!important}
.focus\:ring-blue-500:focus{--tw-ring-color:var(--pa-brand-500)!important}
.hover\:bg-blue-600:hover{background-color:var(--pa-brand-600)!important}
.hover\:text-blue-600:hover{color:var(--pa-brand-600)!important}
.hover\:border-blue-600:hover{border-color:var(--pa-brand-600)!important}
.focus\:border-blue-600:focus{border-color:var(--pa-brand-600)!important}
.focus\:ring-blue-600:focus{--tw-ring-color:var(--pa-brand-600)!important}
.hover\:bg-blue-700:hover{background-color:var(--pa-brand-700)!important}
.hover\:text-blue-700:hover{color:var(--pa-brand-700)!important}
.hover\:border-blue-700:hover{border-color:var(--pa-brand-700)!important}
.focus\:border-blue-700:focus{border-color:var(--pa-brand-700)!important}
.focus\:ring-blue-700:focus{--tw-ring-color:var(--pa-brand-700)!important}
.bg-indigo-50{background-color:var(--pa-brand-50)!important}
.bg-indigo-100{background-color:var(--pa-brand-100)!important}
.bg-indigo-200{background-color:var(--pa-brand-200)!important}
.bg-indigo-300{background-color:var(--pa-brand-300)!important}
.bg-indigo-400{background-color:var(--pa-brand-400)!important}
.bg-indigo-500{background-color:var(--pa-brand-500)!important}
.bg-indigo-600{background-color:var(--pa-brand-600)!important}
.bg-indigo-700{background-color:var(--pa-brand-700)!important}
.bg-indigo-800{background-color:var(--pa-brand-800)!important}
.bg-indigo-900{background-color:var(--pa-brand-900)!important}
.text-indigo-50{color:var(--pa-brand-600)!important}
.text-indigo-100{color:var(--pa-brand-600)!important}
.text-indigo-200{color:var(--pa-brand-600)!important}
.text-indigo-300{color:var(--pa-brand-600)!important}
.text-indigo-400{color:var(--pa-brand-600)!important}
.text-indigo-500{color:var(--pa-brand-600)!important}
.text-indigo-600{color:var(--pa-brand-600)!important}
.text-indigo-700{color:var(--pa-brand-700)!important}
.text-indigo-800{color:var(--pa-brand-800)!important}
.text-indigo-900{color:var(--pa-brand-900)!important}
.border-indigo-50{border-color:var(--pa-brand-50)!important}
.border-indigo-100{border-color:var(--pa-brand-100)!important}
.border-indigo-200{border-color:var(--pa-brand-200)!important}
.border-indigo-300{border-color:var(--pa-brand-300)!important}
.border-indigo-400{border-color:var(--pa-brand-400)!important}
.border-indigo-500{border-color:var(--pa-brand-500)!important}
.border-indigo-600{border-color:var(--pa-brand-600)!important}
.border-indigo-700{border-color:var(--pa-brand-700)!important}
.border-indigo-800{border-color:var(--pa-brand-800)!important}
.border-indigo-900{border-color:var(--pa-brand-900)!important}
.hover\:bg-indigo-400:hover{background-color:var(--pa-brand-400)!important}
.hover\:text-indigo-400:hover{color:var(--pa-brand-600)!important}
.hover\:border-indigo-400:hover{border-color:var(--pa-brand-400)!important}
.focus\:border-indigo-400:focus{border-color:var(--pa-brand-400)!important}
.focus\:ring-indigo-400:focus{--tw-ring-color:var(--pa-brand-400)!important}
.hover\:bg-indigo-500:hover{background-color:var(--pa-brand-500)!important}
.hover\:text-indigo-500:hover{color:var(--pa-brand-600)!important}
.hover\:border-indigo-500:hover{border-color:var(--pa-brand-500)!important}
.focus\:border-indigo-500:focus{border-color:var(--pa-brand-500)!important}
.focus\:ring-indigo-500:focus{--tw-ring-color:var(--pa-brand-500)!important}
.hover\:bg-indigo-600:hover{background-color:var(--pa-brand-600)!important}
.hover\:text-indigo-600:hover{color:var(--pa-brand-600)!important}
.hover\:border-indigo-600:hover{border-color:var(--pa-brand-600)!important}
.focus\:border-indigo-600:focus{border-color:var(--pa-brand-600)!important}
.focus\:ring-indigo-600:focus{--tw-ring-color:var(--pa-brand-600)!important}
.hover\:bg-indigo-700:hover{background-color:var(--pa-brand-700)!important}
.hover\:text-indigo-700:hover{color:var(--pa-brand-700)!important}
.hover\:border-indigo-700:hover{border-color:var(--pa-brand-700)!important}
.focus\:border-indigo-700:focus{border-color:var(--pa-brand-700)!important}
.focus\:ring-indigo-700:focus{--tw-ring-color:var(--pa-brand-700)!important}
.bg-sky-50{background-color:var(--pa-brand-50)!important}
.bg-sky-100{background-color:var(--pa-brand-100)!important}
.bg-sky-200{background-color:var(--pa-brand-200)!important}
.bg-sky-300{background-color:var(--pa-brand-300)!important}
.bg-sky-400{background-color:var(--pa-brand-400)!important}
.bg-sky-500{background-color:var(--pa-brand-500)!important}
.bg-sky-600{background-color:var(--pa-brand-600)!important}
.bg-sky-700{background-color:var(--pa-brand-700)!important}
.bg-sky-800{background-color:var(--pa-brand-800)!important}
.bg-sky-900{background-color:var(--pa-brand-900)!important}
.text-sky-50{color:var(--pa-brand-600)!important}
.text-sky-100{color:var(--pa-brand-600)!important}
.text-sky-200{color:var(--pa-brand-600)!important}
.text-sky-300{color:var(--pa-brand-600)!important}
.text-sky-400{color:var(--pa-brand-600)!important}
.text-sky-500{color:var(--pa-brand-600)!important}
.text-sky-600{color:var(--pa-brand-600)!important}
.text-sky-700{color:var(--pa-brand-700)!important}
.text-sky-800{color:var(--pa-brand-800)!important}
.text-sky-900{color:var(--pa-brand-900)!important}
.border-sky-50{border-color:var(--pa-brand-50)!important}
.border-sky-100{border-color:var(--pa-brand-100)!important}
.border-sky-200{border-color:var(--pa-brand-200)!important}
.border-sky-300{border-color:var(--pa-brand-300)!important}
.border-sky-400{border-color:var(--pa-brand-400)!important}
.border-sky-500{border-color:var(--pa-brand-500)!important}
.border-sky-600{border-color:var(--pa-brand-600)!important}
.border-sky-700{border-color:var(--pa-brand-700)!important}
.border-sky-800{border-color:var(--pa-brand-800)!important}
.border-sky-900{border-color:var(--pa-brand-900)!important}
.hover\:bg-sky-400:hover{background-color:var(--pa-brand-400)!important}
.hover\:text-sky-400:hover{color:var(--pa-brand-600)!important}
.hover\:border-sky-400:hover{border-color:var(--pa-brand-400)!important}
.focus\:border-sky-400:focus{border-color:var(--pa-brand-400)!important}
.focus\:ring-sky-400:focus{--tw-ring-color:var(--pa-brand-400)!important}
.hover\:bg-sky-500:hover{background-color:var(--pa-brand-500)!important}
.hover\:text-sky-500:hover{color:var(--pa-brand-600)!important}
.hover\:border-sky-500:hover{border-color:var(--pa-brand-500)!important}
.focus\:border-sky-500:focus{border-color:var(--pa-brand-500)!important}
.focus\:ring-sky-500:focus{--tw-ring-color:var(--pa-brand-500)!important}
.hover\:bg-sky-600:hover{background-color:var(--pa-brand-600)!important}
.hover\:text-sky-600:hover{color:var(--pa-brand-600)!important}
.hover\:border-sky-600:hover{border-color:var(--pa-brand-600)!important}
.focus\:border-sky-600:focus{border-color:var(--pa-brand-600)!important}
.focus\:ring-sky-600:focus{--tw-ring-color:var(--pa-brand-600)!important}
.hover\:bg-sky-700:hover{background-color:var(--pa-brand-700)!important}
.hover\:text-sky-700:hover{color:var(--pa-brand-700)!important}
.hover\:border-sky-700:hover{border-color:var(--pa-brand-700)!important}
.focus\:border-sky-700:focus{border-color:var(--pa-brand-700)!important}
.focus\:ring-sky-700:focus{--tw-ring-color:var(--pa-brand-700)!important}
.bg-cyan-50{background-color:var(--pa-brand-50)!important}
.bg-cyan-100{background-color:var(--pa-brand-100)!important}
.bg-cyan-200{background-color:var(--pa-brand-200)!important}
.bg-cyan-300{background-color:var(--pa-brand-300)!important}
.bg-cyan-400{background-color:var(--pa-brand-400)!important}
.bg-cyan-500{background-color:var(--pa-brand-500)!important}
.bg-cyan-600{background-color:var(--pa-brand-600)!important}
.bg-cyan-700{background-color:var(--pa-brand-700)!important}
.bg-cyan-800{background-color:var(--pa-brand-800)!important}
.bg-cyan-900{background-color:var(--pa-brand-900)!important}
.text-cyan-50{color:var(--pa-brand-600)!important}
.text-cyan-100{color:var(--pa-brand-600)!important}
.text-cyan-200{color:var(--pa-brand-600)!important}
.text-cyan-300{color:var(--pa-brand-600)!important}
.text-cyan-400{color:var(--pa-brand-600)!important}
.text-cyan-500{color:var(--pa-brand-600)!important}
.text-cyan-600{color:var(--pa-brand-600)!important}
.text-cyan-700{color:var(--pa-brand-700)!important}
.text-cyan-800{color:var(--pa-brand-800)!important}
.text-cyan-900{color:var(--pa-brand-900)!important}
.border-cyan-50{border-color:var(--pa-brand-50)!important}
.border-cyan-100{border-color:var(--pa-brand-100)!important}
.border-cyan-200{border-color:var(--pa-brand-200)!important}
.border-cyan-300{border-color:var(--pa-brand-300)!important}
.border-cyan-400{border-color:var(--pa-brand-400)!important}
.border-cyan-500{border-color:var(--pa-brand-500)!important}
.border-cyan-600{border-color:var(--pa-brand-600)!important}
.border-cyan-700{border-color:var(--pa-brand-700)!important}
.border-cyan-800{border-color:var(--pa-brand-800)!important}
.border-cyan-900{border-color:var(--pa-brand-900)!important}
.hover\:bg-cyan-400:hover{background-color:var(--pa-brand-400)!important}
.hover\:text-cyan-400:hover{color:var(--pa-brand-600)!important}
.hover\:border-cyan-400:hover{border-color:var(--pa-brand-400)!important}
.focus\:border-cyan-400:focus{border-color:var(--pa-brand-400)!important}
.focus\:ring-cyan-400:focus{--tw-ring-color:var(--pa-brand-400)!important}
.hover\:bg-cyan-500:hover{background-color:var(--pa-brand-500)!important}
.hover\:text-cyan-500:hover{color:var(--pa-brand-600)!important}
.hover\:border-cyan-500:hover{border-color:var(--pa-brand-500)!important}
.focus\:border-cyan-500:focus{border-color:var(--pa-brand-500)!important}
.focus\:ring-cyan-500:focus{--tw-ring-color:var(--pa-brand-500)!important}
.hover\:bg-cyan-600:hover{background-color:var(--pa-brand-600)!important}
.hover\:text-cyan-600:hover{color:var(--pa-brand-600)!important}
.hover\:border-cyan-600:hover{border-color:var(--pa-brand-600)!important}
.focus\:border-cyan-600:focus{border-color:var(--pa-brand-600)!important}
.focus\:ring-cyan-600:focus{--tw-ring-color:var(--pa-brand-600)!important}
.hover\:bg-cyan-700:hover{background-color:var(--pa-brand-700)!important}
.hover\:text-cyan-700:hover{color:var(--pa-brand-700)!important}
.hover\:border-cyan-700:hover{border-color:var(--pa-brand-700)!important}
.focus\:border-cyan-700:focus{border-color:var(--pa-brand-700)!important}
.focus\:ring-cyan-700:focus{--tw-ring-color:var(--pa-brand-700)!important}
.bg-violet-50{background-color:var(--pa-brand-50)!important}
.bg-violet-100{background-color:var(--pa-brand-100)!important}
.bg-violet-200{background-color:var(--pa-brand-200)!important}
.bg-violet-300{background-color:var(--pa-brand-300)!important}
.bg-violet-400{background-color:var(--pa-brand-400)!important}
.bg-violet-500{background-color:var(--pa-brand-500)!important}
.bg-violet-600{background-color:var(--pa-brand-600)!important}
.bg-violet-700{background-color:var(--pa-brand-700)!important}
.bg-violet-800{background-color:var(--pa-brand-800)!important}
.bg-violet-900{background-color:var(--pa-brand-900)!important}
.text-violet-50{color:var(--pa-brand-600)!important}
.text-violet-100{color:var(--pa-brand-600)!important}
.text-violet-200{color:var(--pa-brand-600)!important}
.text-violet-300{color:var(--pa-brand-600)!important}
.text-violet-400{color:var(--pa-brand-600)!important}
.text-violet-500{color:var(--pa-brand-600)!important}
.text-violet-600{color:var(--pa-brand-600)!important}
.text-violet-700{color:var(--pa-brand-700)!important}
.text-violet-800{color:var(--pa-brand-800)!important}
.text-violet-900{color:var(--pa-brand-900)!important}
.border-violet-50{border-color:var(--pa-brand-50)!important}
.border-violet-100{border-color:var(--pa-brand-100)!important}
.border-violet-200{border-color:var(--pa-brand-200)!important}
.border-violet-300{border-color:var(--pa-brand-300)!important}
.border-violet-400{border-color:var(--pa-brand-400)!important}
.border-violet-500{border-color:var(--pa-brand-500)!important}
.border-violet-600{border-color:var(--pa-brand-600)!important}
.border-violet-700{border-color:var(--pa-brand-700)!important}
.border-violet-800{border-color:var(--pa-brand-800)!important}
.border-violet-900{border-color:var(--pa-brand-900)!important}
.hover\:bg-violet-400:hover{background-color:var(--pa-brand-400)!important}
.hover\:text-violet-400:hover{color:var(--pa-brand-600)!important}
.hover\:border-violet-400:hover{border-color:var(--pa-brand-400)!important}
.focus\:border-violet-400:focus{border-color:var(--pa-brand-400)!important}
.focus\:ring-violet-400:focus{--tw-ring-color:var(--pa-brand-400)!important}
.hover\:bg-violet-500:hover{background-color:var(--pa-brand-500)!important}
.hover\:text-violet-500:hover{color:var(--pa-brand-600)!important}
.hover\:border-violet-500:hover{border-color:var(--pa-brand-500)!important}
.focus\:border-violet-500:focus{border-color:var(--pa-brand-500)!important}
.focus\:ring-violet-500:focus{--tw-ring-color:var(--pa-brand-500)!important}
.hover\:bg-violet-600:hover{background-color:var(--pa-brand-600)!important}
.hover\:text-violet-600:hover{color:var(--pa-brand-600)!important}
.hover\:border-violet-600:hover{border-color:var(--pa-brand-600)!important}
.focus\:border-violet-600:focus{border-color:var(--pa-brand-600)!important}
.focus\:ring-violet-600:focus{--tw-ring-color:var(--pa-brand-600)!important}
.hover\:bg-violet-700:hover{background-color:var(--pa-brand-700)!important}
.hover\:text-violet-700:hover{color:var(--pa-brand-700)!important}
.hover\:border-violet-700:hover{border-color:var(--pa-brand-700)!important}
.focus\:border-violet-700:focus{border-color:var(--pa-brand-700)!important}
.focus\:ring-violet-700:focus{--tw-ring-color:var(--pa-brand-700)!important}
.bg-purple-50{background-color:var(--pa-brand-50)!important}
.bg-purple-100{background-color:var(--pa-brand-100)!important}
.bg-purple-200{background-color:var(--pa-brand-200)!important}
.bg-purple-300{background-color:var(--pa-brand-300)!important}
.bg-purple-400{background-color:var(--pa-brand-400)!important}
.bg-purple-500{background-color:var(--pa-brand-500)!important}
.bg-purple-600{background-color:var(--pa-brand-600)!important}
.bg-purple-700{background-color:var(--pa-brand-700)!important}
.bg-purple-800{background-color:var(--pa-brand-800)!important}
.bg-purple-900{background-color:var(--pa-brand-900)!important}
.text-purple-50{color:var(--pa-brand-600)!important}
.text-purple-100{color:var(--pa-brand-600)!important}
.text-purple-200{color:var(--pa-brand-600)!important}
.text-purple-300{color:var(--pa-brand-600)!important}
.text-purple-400{color:var(--pa-brand-600)!important}
.text-purple-500{color:var(--pa-brand-600)!important}
.text-purple-600{color:var(--pa-brand-600)!important}
.text-purple-700{color:var(--pa-brand-700)!important}
.text-purple-800{color:var(--pa-brand-800)!important}
.text-purple-900{color:var(--pa-brand-900)!important}
.border-purple-50{border-color:var(--pa-brand-50)!important}
.border-purple-100{border-color:var(--pa-brand-100)!important}
.border-purple-200{border-color:var(--pa-brand-200)!important}
.border-purple-300{border-color:var(--pa-brand-300)!important}
.border-purple-400{border-color:var(--pa-brand-400)!important}
.border-purple-500{border-color:var(--pa-brand-500)!important}
.border-purple-600{border-color:var(--pa-brand-600)!important}
.border-purple-700{border-color:var(--pa-brand-700)!important}
.border-purple-800{border-color:var(--pa-brand-800)!important}
.border-purple-900{border-color:var(--pa-brand-900)!important}
.hover\:bg-purple-400:hover{background-color:var(--pa-brand-400)!important}
.hover\:text-purple-400:hover{color:var(--pa-brand-600)!important}
.hover\:border-purple-400:hover{border-color:var(--pa-brand-400)!important}
.focus\:border-purple-400:focus{border-color:var(--pa-brand-400)!important}
.focus\:ring-purple-400:focus{--tw-ring-color:var(--pa-brand-400)!important}
.hover\:bg-purple-500:hover{background-color:var(--pa-brand-500)!important}
.hover\:text-purple-500:hover{color:var(--pa-brand-600)!important}
.hover\:border-purple-500:hover{border-color:var(--pa-brand-500)!important}
.focus\:border-purple-500:focus{border-color:var(--pa-brand-500)!important}
.focus\:ring-purple-500:focus{--tw-ring-color:var(--pa-brand-500)!important}
.hover\:bg-purple-600:hover{background-color:var(--pa-brand-600)!important}
.hover\:text-purple-600:hover{color:var(--pa-brand-600)!important}
.hover\:border-purple-600:hover{border-color:var(--pa-brand-600)!important}
.focus\:border-purple-600:focus{border-color:var(--pa-brand-600)!important}
.focus\:ring-purple-600:focus{--tw-ring-color:var(--pa-brand-600)!important}
.hover\:bg-purple-700:hover{background-color:var(--pa-brand-700)!important}
.hover\:text-purple-700:hover{color:var(--pa-brand-700)!important}
.hover\:border-purple-700:hover{border-color:var(--pa-brand-700)!important}
.focus\:border-purple-700:focus{border-color:var(--pa-brand-700)!important}
.focus\:ring-purple-700:focus{--tw-ring-color:var(--pa-brand-700)!important}
.bg-fuchsia-50{background-color:var(--pa-brand-50)!important}
.bg-fuchsia-100{background-color:var(--pa-brand-100)!important}
.bg-fuchsia-200{background-color:var(--pa-brand-200)!important}
.bg-fuchsia-300{background-color:var(--pa-brand-300)!important}
.bg-fuchsia-400{background-color:var(--pa-brand-400)!important}
.bg-fuchsia-500{background-color:var(--pa-brand-500)!important}
.bg-fuchsia-600{background-color:var(--pa-brand-600)!important}
.bg-fuchsia-700{background-color:var(--pa-brand-700)!important}
.bg-fuchsia-800{background-color:var(--pa-brand-800)!important}
.bg-fuchsia-900{background-color:var(--pa-brand-900)!important}
.text-fuchsia-50{color:var(--pa-brand-600)!important}
.text-fuchsia-100{color:var(--pa-brand-600)!important}
.text-fuchsia-200{color:var(--pa-brand-600)!important}
.text-fuchsia-300{color:var(--pa-brand-600)!important}
.text-fuchsia-400{color:var(--pa-brand-600)!important}
.text-fuchsia-500{color:var(--pa-brand-600)!important}
.text-fuchsia-600{color:var(--pa-brand-600)!important}
.text-fuchsia-700{color:var(--pa-brand-700)!important}
.text-fuchsia-800{color:var(--pa-brand-800)!important}
.text-fuchsia-900{color:var(--pa-brand-900)!important}
.border-fuchsia-50{border-color:var(--pa-brand-50)!important}
.border-fuchsia-100{border-color:var(--pa-brand-100)!important}
.border-fuchsia-200{border-color:var(--pa-brand-200)!important}
.border-fuchsia-300{border-color:var(--pa-brand-300)!important}
.border-fuchsia-400{border-color:var(--pa-brand-400)!important}
.border-fuchsia-500{border-color:var(--pa-brand-500)!important}
.border-fuchsia-600{border-color:var(--pa-brand-600)!important}
.border-fuchsia-700{border-color:var(--pa-brand-700)!important}
.border-fuchsia-800{border-color:var(--pa-brand-800)!important}
.border-fuchsia-900{border-color:var(--pa-brand-900)!important}
.hover\:bg-fuchsia-400:hover{background-color:var(--pa-brand-400)!important}
.hover\:text-fuchsia-400:hover{color:var(--pa-brand-600)!important}
.hover\:border-fuchsia-400:hover{border-color:var(--pa-brand-400)!important}
.focus\:border-fuchsia-400:focus{border-color:var(--pa-brand-400)!important}
.focus\:ring-fuchsia-400:focus{--tw-ring-color:var(--pa-brand-400)!important}
.hover\:bg-fuchsia-500:hover{background-color:var(--pa-brand-500)!important}
.hover\:text-fuchsia-500:hover{color:var(--pa-brand-600)!important}
.hover\:border-fuchsia-500:hover{border-color:var(--pa-brand-500)!important}
.focus\:border-fuchsia-500:focus{border-color:var(--pa-brand-500)!important}
.focus\:ring-fuchsia-500:focus{--tw-ring-color:var(--pa-brand-500)!important}
.hover\:bg-fuchsia-600:hover{background-color:var(--pa-brand-600)!important}
.hover\:text-fuchsia-600:hover{color:var(--pa-brand-600)!important}
.hover\:border-fuchsia-600:hover{border-color:var(--pa-brand-600)!important}
.focus\:border-fuchsia-600:focus{border-color:var(--pa-brand-600)!important}
.focus\:ring-fuchsia-600:focus{--tw-ring-color:var(--pa-brand-600)!important}
.hover\:bg-fuchsia-700:hover{background-color:var(--pa-brand-700)!important}
.hover\:text-fuchsia-700:hover{color:var(--pa-brand-700)!important}
.hover\:border-fuchsia-700:hover{border-color:var(--pa-brand-700)!important}
.focus\:border-fuchsia-700:focus{border-color:var(--pa-brand-700)!important}
.focus\:ring-fuchsia-700:focus{--tw-ring-color:var(--pa-brand-700)!important}

/* Saf siyah metin/zemin: 21:1 kontrast göz yorar ve marka dışıdır.
   Nötr ölçeğin en koyusu (15.11:1 — AAA) kullanılır.
   ⚠ bg-black yalnızca ZEMİN olarak eşlenir; .bg-opacity-* ile kurulan
   pencere arka planları çalışmaya devam eder. */
/* Tailwind bu sınıfları rgb(… / var(--tw-*-opacity)) biçiminde yazar.
   Düz renkle ezersek .bg-opacity-70 ile kurulan yarı saydam pencere
   arka planları OPAK olur. Bu yüzden saydamlık değişkeni korunuyor. */
.text-black   { color: rgb(30 39 49 / var(--tw-text-opacity, 1)) !important; }
.bg-black     { background-color: rgb(30 39 49 / var(--tw-bg-opacity, 1)) !important; }
.border-black { border-color: rgb(30 39 49 / var(--tw-border-opacity, 1)) !important; }


/* ══════════════════════════════════════════════════════════════════════
   16. BİLDİRİMLER (.pa-bildirim) — window.alert yerine
   ════════════════════════════════════════════════════════════════════ */

.pa-bildirimler {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

/* Mobilde alt menünün üstünde dursun, üzerine binmesin */
@media (max-width: 1023.98px) {
  .pa-bildirimler { bottom: 5.5rem; left: 1rem; right: 1rem; max-width: none; }
}

.pa-bildirim {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.45;
  background: var(--pa-notr-0);
  color: var(--pa-notr-800);
  border: 0.0625rem solid var(--pa-notr-200);
  border-left: 0.25rem solid var(--pa-notr-400);
  box-shadow: 0 0.5rem 1.5rem rgba(30, 39, 49, 0.16);
  animation: paBildirimGir 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes paBildirimGir {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.pa-bildirim--cikis { opacity: 0; transform: translateX(0.75rem); transition: opacity .2s ease, transform .2s ease; }

.pa-bildirim--ok    { border-left-color: var(--pa-basari-zemin); }
.pa-bildirim--ok    i { color: var(--pa-basari-zemin); }
.pa-bildirim--hata  { border-left-color: var(--pa-hata-zemin); }
.pa-bildirim--hata  i { color: var(--pa-hata-zemin); }
.pa-bildirim--bilgi { border-left-color: var(--pa-brand-aksiyon); }
.pa-bildirim--bilgi i { color: var(--pa-brand-aksiyon); }

.pa-bildirim span { flex: 1 1 auto; word-break: break-word; }

.pa-bildirim__kapat {
  flex: 0 0 auto;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--pa-notr-500);
  padding: 0 0.125rem;
  min-width: 1.5rem;
}
.pa-bildirim__kapat:hover { color: var(--pa-notr-800); }

@media (prefers-reduced-motion: reduce) {
  .pa-bildirim { animation: none; }
  .pa-bildirim--cikis { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   17. PANEL MENÜ İKONLARI
   ----------------------------------------------------------------------
   Menü başlıklarındaki emoji (🏠 💬 📆 …) menuStructure.php'deki süzgeçle
   sökülüyor; ikonu buradan veriyoruz. Neden CSS'ten:

     Kenar menüyü çizen 54 sayfanın 45'i menüyü kendi kuruyor ve 9'u başlığı
     esc_html() ile basıyor. Markup'a <i> koymak 54 dosya değiştirmek ya da
     9 sayfada ham HTML'in görünmesi demekti. href'e göre ::before ile
     eşlemek tek dosyada bitiriyor ve iki yolu da kapsıyor.

   Kod noktaları Font Awesome 6.6.0 Free'den DOĞRULANARAK alındı.
   ⚠ Yeni menü maddesi eklenirse buraya bir satır eklenmeli; eşleşmeyen
   madde varsayılan noktayı alır, kırık kutu görünmez.
   ════════════════════════════════════════════════════════════════════ */

.pa-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pa-sidebar__link::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  content: "\f111";              /* varsayılan: küçük daire */
  font-size: 0.75rem;
  width: 1.25rem;
  flex: 0 0 auto;
  text-align: center;
  color: var(--pa-brand-400);
  transition: color var(--pa-gecis);
}

.pa-sidebar__link:hover::before,
.pa-sidebar__link[aria-current="page"]::before {
  color: var(--pa-brand-aksiyon);
}

/* Ortak */
.pa-sidebar__link[href$="/panel/"]::before        { content: "\f015"; font-size: 0.875rem } /* ev */
.pa-sidebar__link[href*="messages"]::before       { content: "\f0e0"; font-size: 0.875rem } /* zarf */
.pa-sidebar__link[href*="appointments"]::before   { content: "\f274"; font-size: 0.875rem } /* takvim-onay */
.pa-sidebar__link[href*="settings"]::before       { content: "\f013"; font-size: 0.875rem } /* dişli */
.pa-sidebar__link[href*="sosyal-oda"]::before     { content: "\f086"; font-size: 0.875rem } /* sohbetler */
.pa-sidebar__link[href*="/cikis"]::before         { content: "\f2f5"; font-size: 0.875rem } /* çıkış */

/* Uzman paneli */
.pa-sidebar__link[href*="calendar"]::before       { content: "\f073"; font-size: 0.875rem } /* takvim */
.pa-sidebar__link[href*="my-demands"]::before     { content: "\f252"; font-size: 0.875rem } /* kum saati */
.pa-sidebar__link[href*="client-files"]::before   { content: "\f07c"; font-size: 0.875rem } /* açık klasör */
.pa-sidebar__link[href*="seminars"]::before       { content: "\f19d"; font-size: 0.875rem } /* mezuniyet */
.pa-sidebar__link[href*="trainings"]::before      { content: "\f02d"; font-size: 0.875rem } /* kitap */
.pa-sidebar__link[href*="my-contents"]::before    { content: "\f15c"; font-size: 0.875rem } /* döküman */
.pa-sidebar__link[href*="opinions"]::before       { content: "\f005"; font-size: 0.875rem } /* yıldız */
.pa-sidebar__link[href*="expert-questions"]::before { content: "\f059"; font-size: 0.875rem } /* soru */
.pa-sidebar__link[href*="sends"]::before          { content: "\f1d8"; font-size: 0.875rem } /* uçak */
.pa-sidebar__link[href*="send-me"]::before        { content: "\f01c"; font-size: 0.875rem } /* gelen kutusu */
.pa-sidebar__link[href*="my-therapy-list"]::before { content: "\f46d"; font-size: 0.875rem } /* pano */
.pa-sidebar__link[href*="my-answers"]::before    { content: "\f3e5"; font-size: 0.875rem } /* yanıt */
.pa-sidebar__link[href*="belgelerim"]::before    { content: "\f0a3"; font-size: 0.875rem } /* belge/rozet */
.pa-sidebar__link[href*="fiyatlandirma"]::before { content: "\f09d"; font-size: 0.875rem } /* kart/abonelik */

/* Danışan paneli */
.pa-sidebar__link[href*="search"]::before         { content: "\f002"; font-size: 0.875rem } /* büyüteç */
.pa-sidebar__link[href*="my-goals"]::before       { content: "\f140"; font-size: 0.875rem } /* hedef */
.pa-sidebar__link[href*="ask-question"]::before   { content: "\f4ad"; font-size: 0.875rem } /* balon */

/* Yönetim */
.pa-sidebar__link[href*="approve-questions"]::before { content: "\f0ae"; font-size: 0.875rem } /* liste-onay */
.pa-sidebar__link[href*="/yonetim"]::before       { content: "\f3ed"; font-size: 0.875rem } /* kalkan */

@media (prefers-reduced-motion: reduce) {
  .pa-sidebar__link::before { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   18. PANEL İÇİNDE SİTE BAŞLIĞI
   ----------------------------------------------------------------------
   ⚠ BURAYA "Panel" DÜĞMESİNİ GİZLEYEN KURAL EKLENMEYECEK.

   Başlıkta oturum açmış kullanıcıya iki düğme basılıyor
   (nav-style-two.php:130-131):  [Uzmanlar]  [Panel]

   2026-08-19'da buraya, "kullanıcı zaten paneldeyken Panel düğmesi işe
   yaramaz" gerekçesiyle `display:none` konmuştu. Bu İSTENMEYEN bir
   değişiklikti — kullanıcı böyle bir şey istememişti ve düğmenin
   kaybolmasından şikâyet etti. Kural kaldırıldı, düğme her yerde duruyor.

   Ders: istenmeyen "iyileştirme" yapma; başlık temanın kendi tasarımıdır.

   Tema DOSYASI değiştirilmedi: techogy ticari bir tema ve alt tema yok,
   güncelleme her düzenlemeyi silerdi.
   ════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   19. BİLDİRİM ÇANI (.pa-can)
   ----------------------------------------------------------------------
   Panelde notifications.php vardı ve çalışıyordu, ama hiçbir yerden
   bağlantısı yoktu ve okunmamış bildirim işareti de yoktu — kullanıcı
   bildirim geldiğini öğrenemiyordu. Çan her panel sayfasının üstünde.
   ════════════════════════════════════════════════════════════════════ */

.pa-can-sar { position: relative; display: flex; justify-content: flex-end; padding: 0 0.75rem; }

/* İki konum:
   --serit : index.php'deki mavi şeritteki ikon sırası (kişi, zarf, duyuru,
             ayar, çıkış) — çan onlarla AYNI görünür.
   --ust   : diğer sayfalarda başlığın sağı; breadcrumb satırına hizalanır ki
             kendi başına bir satır açıp boşlukta durmasın. */

.pa-can-sar--ust { margin-bottom: -2.75rem; pointer-events: none; padding: 0 0.75rem; }
.pa-can-sar--ust > * { pointer-events: auto; }
@media (max-width: 640px) {
  .pa-can-sar--ust { margin-bottom: -2.5rem; }
}

/* Şerit içindeki çan: sarmalayıcı akışı bozmasın, sıraya girsin */
.pa-can-sar--serit { display: inline-flex; padding: 0; justify-content: flex-start; }

/* Şeritteki diğer ikonlarla birebir aynı ölçü ve renk:
   w-10 h-10 (2.5rem) beyaz daire, marka renginde simge. */
.pa-can.pa-can--serit {
  /* Şeritteki komşular w-10 h-10 = 2.5rem. Özgüllük .pa-can ile eşit
     olmasın diye iki sınıf birlikte yazıldı. */
  width: 2.5rem; height: 2.5rem;
  border: 0; background: #fff;
  /* Beyaz zeminde METIN: kimlik tonu 3,11:1 kaliyordu; metin icin aksiyon tonu. */
  color: var(--pa-brand-600);
  font-size: 0.9375rem;
}
.pa-can.pa-can--serit:hover { background: #fff; color: var(--pa-notr-900); transform: rotate(-12deg); }
.pa-can.pa-can--serit .pa-can__sayi { box-shadow: 0 0 0 0.125rem var(--pa-brand-kimlik); }

/* Şeritte açılır kutu sağa taşmasın */
.pa-can-sar--serit .pa-can-kutu { top: 2.875rem; right: 0; }

@media (prefers-reduced-motion: reduce) {
  .pa-can.pa-can--serit:hover { transform: none; }
}

.pa-can {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;          /* dokunma hedefi ≥ 44px */
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: 50%;
  background: var(--pa-notr-0);
  color: var(--pa-brand-metin);
  font-size: 1rem; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.pa-can:hover { background: var(--pa-brand-50); border-color: var(--pa-brand-300); }

.pa-can__sayi {
  position: absolute; top: -0.1875rem; right: -0.1875rem;
  min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem;
  border-radius: 999px; background: var(--pa-hata-zemin); color: #fff;
  font-size: 0.625rem; font-weight: 700; line-height: 1.125rem; text-align: center;
  box-shadow: 0 0 0 0.125rem var(--pa-notr-0);
}

.pa-can-kutu {
  /* ⚠ Renk AÇIKÇA veriliyor: bu kutu index.php'de mavi şeridin İÇİNDE
     çiziliyor ve oradan `color: #fff` miras alıyordu — "Bildirimler"
     başlığı beyaz zeminde beyaz kalıp görünmüyordu. */
  color: var(--pa-notr-800);
  position: absolute; top: 3.125rem; right: 0.75rem; z-index: 200;
  width: min(22rem, calc(100vw - 1.5rem));
  background: var(--pa-notr-0);
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: 0.75rem;
  box-shadow: 0 0.75rem 2rem rgba(30, 39, 49, 0.18);
  overflow: hidden;
  animation: paCanGir 0.14s ease both;
}
.pa-can-kutu[hidden] { display: none; }

@keyframes paCanGir { from { opacity: 0; transform: translateY(-0.25rem) } to { opacity: 1; transform: none } }

.pa-can-kutu__ust {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 0.875rem; border-bottom: 0.0625rem solid var(--pa-notr-200);
  font-size: 0.875rem; color: var(--pa-notr-900);
}
.pa-can-kutu__ust b { color: var(--pa-notr-900); }
.pa-can-kutu__ust a { font-size: 0.75rem; color: var(--pa-brand-aksiyon); text-decoration: none; }
.pa-can-kutu__ust a:hover { text-decoration: underline; }

.pa-can-liste { list-style: none; margin: 0; padding: 0; max-height: 20rem; overflow-y: auto; overscroll-behavior: contain; }

.pa-can-oge {
  /* ⚠ display:flex, custom.css'teki
       a:not([class~="block"])… { display: unset !important }
     mega-seçicisi tarafından eziliyordu: ikon ile metin alt alta düşüyordu.
     Çözüm oradaki muafiyet zincirine eklemek oldu (yerleşik yöntem);
     burada ayrıca flex-shrink ile taşma engellendi. */
  display: flex; gap: 0.625rem; align-items: flex-start;
  padding: 0.625rem 0.875rem; text-decoration: none;
  border-bottom: 0.0625rem solid var(--pa-notr-200);
  color: var(--pa-notr-800);
  line-height: 1.4;
}
.pa-can-liste li:last-child .pa-can-oge { border-bottom: 0; }
.pa-can-oge:hover { background: var(--pa-brand-50); }
/* Okunmamış: sol kenarda ince şerit. Önceden sağa nokta konuyordu ama
   flex bozulunca nokta metnin ARASINA düşüyordu. */
.pa-can-oge--yeni {
  background: var(--pa-brand-50);
  box-shadow: inset 0.1875rem 0 0 var(--pa-brand-aksiyon);
}
.pa-can-oge > i {
  width: 1.25rem; text-align: center; font-size: 0.8125rem;
  flex: 0 0 auto; margin-top: 0.1875rem;
}
.pa-can-oge > span { flex: 1 1 auto; min-width: 0; display: block; }
.pa-can-oge b {
  display: block; font-size: 0.8125rem; font-weight: 600;
  color: var(--pa-notr-900); margin-bottom: 0.0625rem;
}
.pa-can-oge__metin {
  display: block; font-size: 0.75rem; color: var(--pa-notr-600); line-height: 1.4;
  /* Uzun metin kutuyu şişirmesin: en fazla iki satır */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pa-can-oge__zaman { display: block; font-size: 0.6875rem; color: var(--pa-notr-500); margin-top: 0.1875rem; }

.pa-can-bos { padding: 1.5rem 0.875rem; text-align: center; font-size: 0.8125rem; color: var(--pa-notr-600); margin: 0; }

.pa-can-kutu__alt {
  display: block; padding: 0.75rem; text-align: center;
  background: var(--pa-notr-50); border-top: 0.0625rem solid var(--pa-notr-200);
  font-size: 0.8125rem; font-weight: 600; color: var(--pa-brand-aksiyon); text-decoration: none;
}
.pa-can-kutu__alt:hover { background: var(--pa-brand-50); }

@media (prefers-reduced-motion: reduce) {
  .pa-can, .pa-can-kutu { transition: none; animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   20. ARAMA EKRANI (.ar-*) — Randevu Al / uzman arama
   ----------------------------------------------------------------------
   Süzgeç formu sayfada TEK KEZ bulunur. Masaüstünde sol kolonda durur,
   mobilde "Filtreler" düğmesiyle açılır — iki ayrı kopya değil, aynı DOM
   parçası. (Eskiden iki kopya vardı; ~570 satır tekrar ve altı alanda
   id çakışması.)
   ════════════════════════════════════════════════════════════════════ */

.ar-duzen { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1024px) { .ar-duzen { grid-template-columns: 18.5rem 1fr; } }

/* ── Süzgeç paneli ───────────────────────────────────────────────────── */
.ar-suzgec {
  background: var(--pa-notr-0);
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: 1rem;
  padding: 1rem;
}
@media (min-width: 1024px) {
  .ar-suzgec { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}
@media (max-width: 1023.98px) {
  .ar-suzgec { display: none; }
  .ar-suzgec.ar-suzgec--acik { display: block; }
}

.ar-suzgec__ust {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding-bottom: 0.75rem; margin-bottom: 0.875rem;
  border-bottom: 0.0625rem solid var(--pa-notr-200);
}
.ar-baslik { font-size: 1rem; font-weight: 600; margin: 0; color: var(--pa-notr-900); }
.ar-baslik i { color: var(--pa-brand-aksiyon); margin-right: 0.25rem; }
.ar-temizle { font-size: 0.75rem; color: var(--pa-brand-aksiyon); text-decoration: none; white-space: nowrap; }
.ar-temizle:hover { text-decoration: underline; }

.ar-alan { margin-bottom: 0.875rem; }
.ar-etiket {
  display: block; font-size: 0.75rem; font-weight: 600;
  color: var(--pa-notr-700); margin-bottom: 0.3125rem;
}
.ar-ipucu { font-size: 0.6875rem; color: var(--pa-notr-600); margin: 0.25rem 0 0; line-height: 1.4; }

.ar-girdi {
  width: 100%; padding: 0.5rem 0.625rem;
  font-size: 0.875rem; font-family: inherit;
  color: var(--pa-notr-900); background: var(--pa-notr-0);
  border: 0.0625rem solid var(--pa-notr-500); border-radius: 0.5rem;
  min-height: 2.5rem;
}
.ar-girdi:focus {
  outline: 0.125rem solid var(--pa-brand-aksiyon); outline-offset: 0.0625rem;
  border-color: var(--pa-brand-aksiyon);
}

.ar-arama { position: relative; }
.ar-arama i {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  color: var(--pa-notr-500); pointer-events: none; font-size: 0.8125rem;
}
.ar-arama .ar-girdi { padding-left: 2.125rem; }

/* Terapi şekli — radyo grubu */
.ar-secim-grup { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ar-secim { position: relative; }
.ar-secim input { position: absolute; opacity: 0; width: 0; height: 0; }
.ar-secim span {
  display: inline-block; padding: 0.375rem 0.75rem;
  font-size: 0.8125rem; border-radius: 999px; cursor: pointer;
  border: 0.0625rem solid var(--pa-notr-300); color: var(--pa-notr-700);
  min-height: 2rem; line-height: 1.25rem;
}
.ar-secim input:checked + span {
  background: var(--pa-brand-aksiyon); color: #fff; border-color: var(--pa-brand-aksiyon); font-weight: 600;
}
.ar-secim input:focus-visible + span { outline: 0.125rem solid var(--pa-brand-aksiyon); outline-offset: 0.125rem; }

/* Katlanır gruplar */
.ar-grup {
  border-top: 0.0625rem solid var(--pa-notr-200);
  padding: 0.75rem 0 0; margin-bottom: 0.75rem;
}
.ar-grup > summary {
  cursor: pointer; font-size: 0.8125rem; font-weight: 600;
  color: var(--pa-notr-800); display: flex; align-items: center; gap: 0.375rem;
  list-style: none; min-height: 1.75rem;
}
.ar-grup > summary::-webkit-details-marker { display: none; }
.ar-grup > summary::after {
  content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: 0.625rem; color: var(--pa-notr-500); margin-left: auto;
  transition: transform 0.15s ease;
}
.ar-grup[open] > summary::after { transform: rotate(180deg); }

.ar-grup__sayi {
  min-width: 1.125rem; padding: 0 0.3125rem; border-radius: 999px;
  background: var(--pa-brand-aksiyon); color: #fff;
  font-size: 0.625rem; font-weight: 700; line-height: 1.125rem; text-align: center;
}
.ar-grup__ic { padding-top: 0.5rem; }

.ar-kutu {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.25rem 0; font-size: 0.8125rem; color: var(--pa-notr-800); cursor: pointer;
  min-height: 1.75rem;
}
.ar-kutu input { margin-top: 0.1875rem; flex: 0 0 auto; accent-color: var(--pa-brand-aksiyon); }
.ar-kutu--one {
  font-weight: 600; padding-bottom: 0.5rem; margin-bottom: 0.375rem;
  border-bottom: 0.0625rem solid var(--pa-notr-200);
}
.ar-diger { margin-top: 0.625rem; padding-top: 0.625rem; border-top: 0.0625rem solid var(--pa-notr-200); }

.ar-dugmeler { display: grid; gap: 0.5rem; margin-top: 1rem; }

/* ── Sonuç alanı ─────────────────────────────────────────────────────── */
.ar-sonuclar { min-width: 0; }

.ar-arac {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin-bottom: 0.875rem;
}
.ar-sayi { margin: 0; font-size: 0.875rem; color: var(--pa-notr-700); }
.ar-sayi b { color: var(--pa-notr-900); font-size: 1rem; }
.ar-sirala { margin-left: auto; }
.ar-sirala .ar-girdi { width: auto; min-width: 11rem; }
.ar-suzgec-dugme { display: none; }
@media (max-width: 1023.98px) { .ar-suzgec-dugme { display: inline-flex; } }

/* Etkin süzgeç çipleri */
.ar-cipler { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }
.ar-cip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.3125rem 0.625rem; border-radius: 999px;
  background: var(--pa-brand-50); color: var(--pa-brand-metin);
  border: 0.0625rem solid var(--pa-brand-200);
  font-size: 0.75rem; text-decoration: none; min-height: 1.875rem;
}
.ar-cip:hover { background: var(--pa-brand-100); }
.ar-cip i { font-size: 0.625rem; opacity: 0.7; }

/* Kartlar */
.ar-kartlar {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
}

.ar-kart {
  background: var(--pa-notr-0);
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: 0.875rem;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.ar-kart:hover {
  box-shadow: 0 0.5rem 1.5rem rgba(30, 39, 49, 0.1);
  border-color: var(--pa-brand-300);
  transform: translateY(-0.125rem);
}

.ar-kart__foto { display: block; aspect-ratio: 4 / 5; background: var(--pa-notr-100); }
.ar-kart__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ar-kart__govde { padding: 0.75rem 0.875rem 0.875rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.ar-kart__ad { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.125rem; line-height: 1.3; }
.ar-kart__ad a { color: var(--pa-notr-900); text-decoration: none; }
.ar-kart__ad a:hover { color: var(--pa-brand-aksiyon); text-decoration: underline; }
.ar-kart__unvan { font-size: 0.75rem; color: var(--pa-notr-600); margin: 0 0 0.5rem; }

.ar-kart__bilgi { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.1875rem; }
.ar-kart__bilgi li { font-size: 0.75rem; color: var(--pa-notr-700); display: flex; align-items: center; gap: 0.375rem; }
.ar-kart__bilgi i { color: var(--pa-brand-400); width: 0.875rem; text-align: center; font-size: 0.6875rem; }

.ar-kart__etiketler { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.625rem; }
.ar-kart__dugme { margin-top: auto; width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .ar-kart, .ar-grup > summary::after { transition: none; }
  .ar-kart:hover { transform: none; }
}

/* Mobilde kart YATAY: tek kolonda 4/5 oranlı foto ekranın yarısını yiyor ve
   listede gezmek için çok kaydırma gerekiyordu. Foto solda, bilgi sağda. */
@media (max-width: 599.98px) {
  .ar-kartlar { grid-template-columns: 1fr; gap: 0.625rem; }

  .ar-kart { flex-direction: row; align-items: stretch; }

  .ar-kart__foto {
    aspect-ratio: auto;
    width: 7.5rem; flex: 0 0 7.5rem;
  }

  .ar-kart__govde { padding: 0.75rem 0.875rem; }
  .ar-kart__ad { font-size: 0.875rem; }
  .ar-kart__unvan {
    margin-bottom: 0.375rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .ar-kart__dugme { width: auto; align-self: flex-start; }
  .ar-kart:hover { transform: none; }
}


/* ==========================================================================
   21) BOS HUCRE / BOS DEGER
   Tabloda bir hucrede gosterilecek deger yoksa, oraya TUS koymak yanlis:
   tiklanabilir gorunur ama arkasinda icerik yoktur. Bunun yerine sessiz,
   italik ve ortali bir metin konur.
   ========================================================================== */
.pa-bos-hucre {
  display: block;
  text-align: center;
  font-style: italic;
  color: var(--pa-notr-600);
  font-size: var(--pa-metin-sm);
}


/* ==========================================================================
   22) PANEL GOVDESI VE SAYFA BASLIGI SERIDI
   .pa-panel-govde  : header.php'deki  <br> + <div class="pl-3">  yerine gecti.
                      pl-3'un 12px sol dolgusu panel icerigini tema baslik
                      kartindan iceri kaydiriyordu (olcum 1366px: kart sol=53,
                      panel sol=65). Dolgu YOK; ust bosluk marj ile veriliyor.
   .pa-sayfa-ust    : her sayfanin ayni ilk satiri — geri tusu, kirinti yolu,
                      ve sagda bildirim cani. 68 sayfa breadcrumb() cagirdigi
                      icin tek yerden geliyor.
   ========================================================================== */

.pa-panel-govde { padding: 0; margin-top: 1.25rem; }

.pa-sayfa-ust {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  min-height: 2.75rem;          /* can 2.75rem; can olmayan sayfada satir zipplamasin */
}

/* Geri tusu — her basligin ustunde, hep ayni yerde.
   ⚠ <a> oldugu icin custom.css'teki  display:unset !important  mega-secicisine
   muafiyet eklendi (pa-geri). Yoksa inline-flex ezilir ve ikon/metin altalta duser. */
.pa-geri {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem 0.375rem 0.625rem;
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: var(--pa-yuvarlak-tam);
  background: var(--pa-notr-0);
  color: var(--pa-brand-metin);
  font-size: var(--pa-metin-sm);
  font-weight: var(--pa-agirlik-orta);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.pa-geri:hover {
  background: var(--pa-brand-100);
  border-color: var(--pa-brand-300);
  color: var(--pa-brand-metin);      /* tema hover'da rengi soldurmasin */
  text-decoration: none;
}
.pa-geri:focus-visible {
  outline: var(--pa-odak-kalinlik) solid var(--pa-odak-renk);
  outline-offset: 0.125rem;
}
.pa-geri i { font-size: 0.8125rem; }

.pa-sayfa-ust__yol {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  font-size: var(--pa-metin-sm);
  color: var(--pa-notr-600);
  min-width: 0;
}
.pa-sayfa-ust__yol a { color: var(--pa-brand-metin); text-decoration: none; }
.pa-sayfa-ust__yol a:hover { text-decoration: underline; }
.pa-sayfa-ust__ayrac { color: var(--pa-notr-400); }
.pa-sayfa-ust__simdi { color: var(--pa-notr-700); font-weight: var(--pa-agirlik-yari); }

/* Can seridin sag ucunda; sola degil saga yaslanir */
.pa-sayfa-ust__sag { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

/* Satir icindeki can: NEGATIF MARJ YOK — normal akista durur.
   (Eski  .pa-can-sar--ust  margin-bottom:-2.75rem ile yukari cekiliyordu;
   kullanicinin "havada duruyor" dedigi hal buydu.) */
.pa-can-sar--satir { position: relative; display: inline-flex; padding: 0; margin: 0; justify-content: flex-end; }
.pa-can-sar--satir .pa-can-kutu { top: 3.25rem; right: 0; }

/* Dar ekranda geri tusu ve yol alt alta gecebilir, can sagda kalir */
@media (max-width: 599.98px) {
  .pa-sayfa-ust { gap: 0.5rem; margin-bottom: 1rem; }
  .pa-sayfa-ust__yol { font-size: var(--pa-metin-xs); width: 100%; order: 3; }
  .pa-panel-govde { margin-top: 0.875rem; }
}


/* ==========================================================================
   23) KIRIK GORSEL YEDEGI
   header.php'deki yakalayici, yuklenemeyen gorseli notr bir yer tutucuyla
   degistirir ve bu sinifi ekler. Amac: sayfada tarayicinin "kirik resim"
   simgesi ve yarim alt metni gorunmesin.
   ========================================================================== */
.pa-gorsel-yedek {
  object-fit: cover;
  background-color: var(--pa-notr-100);
}


/* ==========================================================================
   24) BILDIRIM LISTESI SATIRI  (notifications.php)
   Eski hali: emoji + duz kutu; kayit TIKLANABILIR DEGILDI, yalnizca ayri bir
   "Okundu Isaretle" tusu vardi. Artik satirin kendisi hem okundu yapiyor hem
   ilgili ekrana goturuyor; sag ustteki kucuk bag ise hedefe gitmeden okundu
   isaretlemek isteyenler icin duruyor.
   ⚠ __git bir <a> ve display:flex kullaniyor -> custom.css muafiyet
     zincirine EKLENDI, yoksa kural onu inline'a cevirip dagitiyor.
   ========================================================================== */
.pa-bildirim-satir {
  display: flex; align-items: stretch; gap: 0.5rem;
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: var(--pa-yuvarlak-md);
  background: var(--pa-notr-0);
  margin-bottom: 0.5rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.pa-bildirim-satir:hover { border-color: var(--pa-brand-300); }
.pa-bildirim-satir--yeni {
  background: var(--pa-brand-50, #F2F6FC);
  border-left: 0.25rem solid var(--pa-brand-aksiyon);
}

.pa-bildirim-satir__git {
  display: flex; align-items: flex-start; gap: 0.75rem;
  flex: 1 1 auto; min-width: 0;
  padding: 0.75rem 0.875rem;
  text-decoration: none; color: inherit;
}
.pa-bildirim-satir__git:hover { text-decoration: none; color: inherit; }

.pa-bildirim-satir__ikon {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pa-notr-100); font-size: 0.875rem;
}
.pa-bildirim-satir__govde { display: block; min-width: 0; flex: 1 1 auto; }
.pa-bildirim-satir__govde b { display: block; color: var(--pa-notr-900); margin-bottom: 0.0625rem; }
.pa-bildirim-satir__metin { display: block; color: var(--pa-notr-700); font-size: var(--pa-metin-sm); }
.pa-bildirim-satir__govde small { display: block; margin-top: 0.25rem; color: var(--pa-notr-600); font-size: var(--pa-metin-xs); }

.pa-bildirim-satir__okundu {
  flex: 0 0 auto; align-self: center; margin-right: 0.625rem;
  padding: 0.25rem 0.625rem; border-radius: var(--pa-yuvarlak-tam);
  border: 0.0625rem solid var(--pa-notr-300);
  background: var(--pa-notr-0); color: var(--pa-notr-600);
  font-size: var(--pa-metin-xs); text-decoration: none; white-space: nowrap;
}
.pa-bildirim-satir__okundu:hover { background: var(--pa-notr-100); color: var(--pa-notr-800); text-decoration: none; }

@media (max-width: 599.98px) {
  .pa-bildirim-satir__okundu { margin-right: 0.5rem; }
}

/* ==========================================================================
   25) UZMAN PROFILI  (.uz-*)  — /@kullaniciadi  (u.php)
   Sayfa panelin tasarim sistemini hic kullanmiyordu: 25 renk bildiriminin
   23'u Tailwind varsayilan paleti, biri satir ici hex, ikisi de yanlis marka
   tonuydu (#7491D4 uzerine beyaz = 3.11:1, kucuk metin esigi 4.50). Ayni
   ekranda iki ayri buton dili vardi. Artik tek dil: jetonlar + pa-btn.
   ========================================================================== */

/* GENİŞLİK SINIRI YOK: profil sayfası panelin geri kalanıyla aynı hizada
   durmalı. Eskiden max-width: 60rem + otomatik yan boşluk vardı; ölçüm
   (1366px ekran): tema başlık kartı ve breadcrumb şeridi sol 59 / sağ 59
   (1248px) iken profil kartı sol 203 / sağ 203 (960px) kalıyor, iki yanda
   144'er px fazladan boşluk oluşuyordu. */
.uz-sar { width: 100%; }

.uz-kart {
  background: var(--pa-notr-0);
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: var(--pa-yuvarlak-lg);
  box-shadow: var(--pa-golge-1);
  overflow: hidden;
}
.uz-kart--yorum { margin-top: 1rem; padding: 1.25rem; }

/* Kapak seridi + avatar */
.uz-kapak {
  height: 6.5rem;
  background: linear-gradient(135deg, var(--pa-brand-400), var(--pa-brand-600));
}
/* Negatif marj SADECE avatarda: kaptan yalnizca fotograf tassin.
   Once .uz-ust'un tamamina veriliyordu, o zaman AD da mavi seridin uzerine
   biniyor ve koyu metin/mavi zemin okunaksiz kaliyordu. */
.uz-ust {
  display: flex; align-items: flex-end; gap: 1rem;
  padding: 0 1.5rem;
}
.uz-avatar {
  width: 7rem; height: 7rem; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover;
  border: 0.25rem solid var(--pa-notr-0);
  background: var(--pa-notr-100);
  box-shadow: var(--pa-golge-1);
  margin-top: -3rem;
}
.uz-kimlik { padding-bottom: 0.375rem; min-width: 0; }
.uz-ad {
  margin: 0; font-size: var(--pa-metin-xl);
  font-weight: var(--pa-agirlik-kalin); line-height: var(--pa-satir-siki);
  color: var(--pa-notr-900);
}
.uz-unvan { margin: 0.125rem 0 0; color: var(--pa-notr-600); font-size: var(--pa-metin-sm); }
.uz-puan { margin: 0.375rem 0 0; font-size: var(--pa-metin-sm); color: var(--pa-notr-800); font-weight: var(--pa-agirlik-yari); }
.uz-puan i { color: #B8860B; }              /* beyaz uzerinde 4.6:1 — ikon */
.uz-puan span { color: var(--pa-notr-600); font-weight: var(--pa-agirlik-normal); }
.uz-puan--yok { color: var(--pa-notr-600); font-weight: var(--pa-agirlik-normal); }

.uz-takip { padding: 0.875rem 1.5rem 0; }
.uz-takip form { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.uz-takipci { color: var(--pa-notr-600); font-size: var(--pa-metin-sm); margin: 0; }

/* Kunye seridi */
.uz-kunye {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin: 1rem 1.5rem 0; padding: 0.875rem 1rem;
  background: var(--pa-notr-50);
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: var(--pa-yuvarlak-md);
}
.uz-kunye__ucret { display: flex; flex-direction: column; }
.uz-kunye__ucret span { font-size: var(--pa-metin-xs); color: var(--pa-notr-600); }
.uz-kunye__ucret b { font-size: 1.375rem; color: var(--pa-brand-metin); line-height: 1.2; }
.uz-kunye__bilgi { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; }
.uz-satir { margin: 0; font-size: var(--pa-metin-sm); color: var(--pa-notr-700); display: flex; align-items: center; gap: 0.375rem; }
.uz-satir i { color: var(--pa-notr-500); }
.uz-satir a { color: var(--pa-brand-metin); text-decoration: none; }
.uz-satir a:hover { text-decoration: underline; color: var(--pa-brand-metin); }
.uz-satir--rozet { gap: 0.375rem; }
.uz-rozet {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  padding: 0.1875rem 0.625rem; border-radius: var(--pa-yuvarlak-tam);
  background: var(--pa-brand-100); color: var(--pa-brand-metin);
  font-size: var(--pa-metin-xs); font-weight: var(--pa-agirlik-orta);
}

/* Govde */
.uz-govde {
  display: grid; grid-template-columns: minmax(0,1fr) 16rem; gap: 1.75rem;
  padding: 1.5rem;
}
.uz-blok + .uz-blok { margin-top: 1.5rem; }
.uz-blok__baslik {
  margin: 0 0 0.625rem; font-size: var(--pa-metin-lg);
  font-weight: var(--pa-agirlik-yari); color: var(--pa-notr-900);
}
.uz-metin { margin: 0; color: var(--pa-notr-700); line-height: var(--pa-satir-genis); }

.uz-cipler { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.uz-cip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.3125rem 0.75rem; border-radius: var(--pa-yuvarlak-tam);
  background: var(--pa-brand-100); color: var(--pa-brand-metin);   /* 7.89:1 ✔ */
  font-size: var(--pa-metin-sm);
}
.uz-cip i { color: var(--pa-brand-600); font-size: 0.75rem; }

/* Eylem sutunu */
.uz-eylem { display: flex; flex-direction: column; gap: 0.625rem; align-self: start; position: sticky; top: 1rem; }
.uz-not { margin: 0; font-size: var(--pa-metin-xs); color: var(--pa-notr-600); text-align: center; }

/* Yorumlar */
.uz-yorum {
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: var(--pa-yuvarlak-md);
  padding: 0.875rem;
  animation: uzYorumGir .26s ease both;
  transition: box-shadow .16s ease;
}
.uz-yorum + .uz-yorum { margin-top: 0.625rem; }
.uz-yorum:hover { box-shadow: var(--pa-golge-1); }
.uz-yorum__ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
.uz-yorum__ust strong { font-size: var(--pa-metin-sm); color: var(--pa-notr-900); }
.uz-yildiz { font-size: var(--pa-metin-sm); color: #B8860B; letter-spacing: 0.0625rem; }
.uz-yildiz--bos { color: var(--pa-notr-300); }
.uz-yorum__metin { margin: 0; font-size: var(--pa-metin-sm); color: var(--pa-notr-700); white-space: pre-line; line-height: var(--pa-satir-normal); }
.uz-yorum__tarih { margin: 0.375rem 0 0; font-size: var(--pa-metin-xs); color: var(--pa-notr-600); }

@keyframes uzYorumGir { from { opacity: 0; transform: translateY(.375rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .uz-yorum { animation: none; transition: none; } }

@media (max-width: 899.98px) {
  .uz-govde { grid-template-columns: 1fr; gap: 1.25rem; }
  /* Mobilde eylemler icerigin USTUNE: kullanici once "Randevu Al"i gorsun. */
  .uz-eylem { order: -1; position: static; }
}
@media (max-width: 599.98px) {
  .uz-ust { flex-direction: column; align-items: center; text-align: center; gap: 0.625rem; }
  .uz-avatar { width: 6rem; height: 6rem; margin-top: -2.75rem; }
  .uz-kimlik { padding-bottom: 0; }
  .uz-takip form { justify-content: center; }
  .uz-kunye { margin-inline: 1rem; }
  .uz-govde { padding: 1.25rem 1rem; }
}

/* Golge terapi rozeti — yorumda kimligin neden gizli oldugunu soyler */
.uz-golge-rozet {
  display: inline-block; margin-left: 0.375rem;
  padding: 0.0625rem 0.4375rem; border-radius: var(--pa-yuvarlak-tam);
  background: var(--pa-notr-100); color: var(--pa-notr-600);
  font-size: var(--pa-metin-xs); font-weight: var(--pa-agirlik-normal);
}

/* Red gerekcesi — danisanin "neden reddedildi?" sorusunun cevabi */
.pa-red-neden {
  display: block; margin-top: 0.375rem;
  font-size: var(--pa-metin-xs); color: var(--pa-notr-700);
  background: var(--pa-notr-50);
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: var(--pa-yuvarlak-sm);
  padding: 0.3125rem 0.5rem; max-width: 22rem;
}
.pa-red-neden i { color: var(--pa-notr-500); margin-right: 0.1875rem; }

/* ==========================================================================
   26) TEKNIK DESTEK KARTI  (.pa-destek)
   Eskiden illustrasyon metnin ARKA PLANIYDI ve iki satira saran yazi resmin
   ustune biniyordu. Artik resim kendi sutununda; carpisma imkansiz.
   ========================================================================== */
.pa-destek {
  /* ⚠ Kart, yanindaki "Mesajlarim" kartiyla ayni satirdaydi ve izgara/flex
     ogeleri varsayilan olarak GERILDIGI icin yuksekligi ona esitleniyordu;
     dugmenin altinda kocaman bos bir alan kaliyordu. align-self ile kart
     kendi icerigi kadar yer kapliyor. */
  align-self: start;
  background: var(--pa-notr-0);
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: var(--pa-yuvarlak-lg);
  padding: 1rem 1.125rem 1.125rem;
  box-shadow: var(--pa-golge-1);
}
.pa-destek__ust { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.pa-destek__ikon {
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pa-brand-100); color: var(--pa-brand-aksiyon); font-size: 1.375rem;
}
.pa-destek__baslik {
  margin: 0; font-size: var(--pa-metin-xl); font-weight: var(--pa-agirlik-kalin);
  color: var(--pa-notr-900); line-height: var(--pa-satir-siki);
}
.pa-destek__govde { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.875rem; }
.pa-destek__metin { margin: 0; flex: 1 1 auto; color: var(--pa-notr-700); line-height: var(--pa-satir-genis); }
.pa-destek__gorsel { flex: 0 0 auto; width: 6.875rem; height: auto; }
.pa-destek__dugme { margin: 0; }

@media (max-width: 479.98px) {
  /* Dar ekranda resim yer kaplamasin; metin tam genislikte okunsun. */
  .pa-destek__gorsel { display: none; }
}

/* ==========================================================================
   27) ETKINLIK KARTI  (.et-kart) — seminer / egitim / canli yayin
   Denetim bosluğu: uzman etkinligi olusturduktan sonra IPTAL EDEMIYORDU.
   Kart eskiden bastan sona tek bir <a> idi; icine buton koymak gecersiz HTML
   olacagi icin yapi ayrildi: baglanti govdeyi sarar, islem seridi altta durur.
   ========================================================================== */
.et-kart {
  display: flex; flex-direction: column;
  background: var(--pa-notr-0);
  border: 0.0625rem solid var(--pa-notr-200);
  border-radius: var(--pa-yuvarlak-lg);
  box-shadow: var(--pa-golge-1);
  overflow: hidden;
  transition: box-shadow .16s ease, opacity .16s ease;
}
.et-kart:hover { box-shadow: var(--pa-golge-2, 0 .5rem 1.25rem rgba(49,84,165,.12)); }

/* ⚠ <a> ve display:flex — custom.css mega-secicisi ezmesin diye muafiyet
   zincirine  et-kart__bag  eklendi. */
.et-kart__bag {
  display: flex; flex-direction: column; gap: .5rem;
  flex: 1 1 auto; padding: 1rem; text-decoration: none; color: inherit;
}
.et-kart__bag:hover { text-decoration: none; color: inherit; }
.et-kart__baslik { margin: 0; font-size: var(--pa-metin-lg); font-weight: var(--pa-agirlik-yari); color: var(--pa-notr-900); }
.et-kart__aciklama {
  margin: 0; font-size: var(--pa-metin-sm); color: var(--pa-notr-700); line-height: var(--pa-satir-normal);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.et-kart__zaman { margin-top: auto; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--pa-metin-xs); color: var(--pa-notr-600); }
.et-kart__zaman b { color: var(--pa-notr-700); font-weight: var(--pa-agirlik-orta); }

.et-kart__alt {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .625rem 1rem; border-top: 0.0625rem solid var(--pa-notr-200);
  background: var(--pa-notr-50);
}
.et-durum { font-size: var(--pa-metin-xs); color: var(--pa-basari-metin); font-weight: var(--pa-agirlik-orta); }

/* Iptal edilmis etkinlik: kayit DURUYOR, yalnizca sessizlestiriliyor. */
.et-kart--iptal { opacity: .72; border-color: var(--pa-hata-kenar); }
.et-kart--iptal .et-kart__baslik { text-decoration: line-through; color: var(--pa-notr-600); }
.et-kart--iptal .et-durum { color: var(--pa-hata-metin); }

/* Etkinlik duzenleme kutusu — kart altinda, varsayilan kapali */
.et-duzen { border-top: 0.0625rem solid var(--pa-notr-200); padding: .625rem 1rem .875rem; background: var(--pa-notr-50); }
.et-duzen > summary { cursor: pointer; font-size: var(--pa-metin-sm); color: var(--pa-brand-metin); font-weight: var(--pa-agirlik-orta); }
.et-duzen__etiket { display: block; margin-top: .5rem; font-size: var(--pa-metin-xs); color: var(--pa-notr-700); }
.et-duzen__etiket .pa-input, .et-duzen__etiket .pa-textarea { margin-top: .1875rem; width: 100%; }
.et-duzen__ikili { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.et-duzen__not { margin: .5rem 0 0; font-size: var(--pa-metin-xs); color: var(--pa-notr-600); }
.et-duzen .pa-btn { margin-top: .625rem; }

/* Sartnamede birebir tanimli modul aciklama metni */
.pa-modul-metni {
  margin: 0 0 1rem; padding: .625rem .875rem;
  background: var(--pa-brand-50, #F2F6FC);
  border-left: .1875rem solid var(--pa-brand-300);
  border-radius: var(--pa-yuvarlak-sm);
  color: var(--pa-notr-700); font-size: var(--pa-metin-sm); line-height: var(--pa-satir-normal);
}

/* ==========================================================================
   28) DUYURU METNI  (.pa-duyuru)
   Duyurular HTML saklıyor (bağlantı içeriyor) ve gösterimde wp_kses ile
   süzülüyor (bkz. app/generals/addAnnounce.php › duyuruMetni). İçindeki
   bağlantı, çevresindeki düz metinden ayırt edilebilir olmalı: yalnız renk
   yeterli değil, altı da çizili.
   ========================================================================== */

.pa-duyuru a {
  color: var(--pa-brand-700);              /* #3154A5 — beyaz/gri zeminde 7.14:1 */
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}
.pa-duyuru a:hover,
.pa-duyuru a:focus-visible {
  color: var(--pa-brand-600);
}