/* =========================================================
   KENDER – Açılır pencere / bilgi sayfaları  |  css/kender-popup.css
   Başkanlar, Kurucular, Misyon, Tüzük gibi bağımsız HTML sayfaları için.
   Ana sitenin kender-modern.css dosyasından bağımsızdır; sınıflar "kp-" önekli.
   ========================================================= */

:root {
  --kp-deep:   #0f3d4a;
  --kp-deeper: #0a2a34;
  --kp-amber:  #e08a1e;
  --kp-aqua:   #b9e4e0;
  --kp-ink:    #1b2a2e;
  --kp-muted:  #566a70;
  --kp-line:   #d9e3e8;
  --kp-soft:   #e8f0f4;
  --kp-head: 'Bitter', Georgia, 'Times New Roman', serif;
  --kp-body: 'Source Sans 3', 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

.kp-body {
  margin: 0;
  font-family: var(--kp-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--kp-ink);
  background: #fff;
}
.kp-body img { max-width: 100%; height: auto; }
.kp-body :focus-visible { outline: 3px solid var(--kp-amber); outline-offset: 2px; }

/* ---------- Başlık bandı ---------- */
.kp-head {
  color: #fff;
  background-color: var(--kp-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='160' viewBox='0 0 600 160'%3E%3Cg fill='none' stroke='%2362a58a' stroke-opacity='.25' stroke-width='1.2'%3E%3Cpath d='M0 150C100 120 160 150 260 124S440 96 600 128'/%3E%3Cpath d='M0 126C100 96 170 124 270 100S450 72 600 104'/%3E%3Cpath d='M0 102C100 72 180 100 280 76S460 48 600 80'/%3E%3Cpath d='M0 78C100 48 190 76 290 52S470 24 600 56'/%3E%3Cpath d='M0 54C100 24 200 52 300 28S480 0 600 32'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 600px 160px;
  border-bottom: 4px solid var(--kp-amber);
}
.kp-head__in { max-width: 820px; margin: 0 auto; padding: 22px 20px 26px; }

.kp-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.kp-brand img {
  width: 52px; height: 52px; padding: 3px; border-radius: 12px;
  background: #fff; object-fit: contain;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.kp-brand__text { display: grid; line-height: 1.2; }
.kp-brand__text strong { font: 700 1.2rem var(--kp-head); letter-spacing: .08em; }
.kp-brand__text small { font-size: .85rem; color: var(--kp-aqua); }

.kp-title {
  margin: 20px 0 0;
  font-family: var(--kp-head); font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 26, 32, .35);
}

/* ---------- İçerik ---------- */
.kp-main { max-width: 820px; margin: 0 auto; padding: 28px 20px 40px; }

.kp-figure { margin: 0 0 32px; }
.kp-figure img {
  display: block; width: 100%;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(10, 42, 52, .2);
}

.kp-h2 {
  margin: 0 0 14px; padding-left: 14px;
  font-family: var(--kp-head); font-weight: 700; font-size: 1.4rem; line-height: 1.2;
  color: var(--kp-deep); border-left: 6px solid var(--kp-amber);
}

/* ---------- Tablo ---------- */
.kp-tablewrap { border: 1px solid var(--kp-line); border-radius: 14px; overflow: hidden; background: #fff; }
.kp-table { width: 100%; border-collapse: collapse; }
.kp-table th {
  padding: 13px 20px; text-align: left;
  font-size: .9rem; font-weight: 700; letter-spacing: .04em; color: var(--kp-muted);
  background: var(--kp-soft); border-bottom: 1px solid var(--kp-line);
}
.kp-table td { padding: 16px 20px; vertical-align: middle; border-bottom: 1px solid var(--kp-line); }
.kp-table tr:last-child td { border-bottom: 0; }
.kp-table tbody tr { transition: background .15s; }
.kp-table tbody tr:hover { background: #f6f9fb; }
.kp-name { font-weight: 700; font-size: 1.1rem; color: var(--kp-deep); }
.kp-period {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--kp-soft); color: var(--kp-deep);
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kp-table .is-current .kp-period { background: var(--kp-deep); color: #fff; }
.kp-table .is-current .kp-name::after {
  content: "Görevde"; margin-left: 10px; padding: 2px 10px; border-radius: 999px;
  background: var(--kp-amber); color: #2a1700;
  font-size: .75rem; font-weight: 800; letter-spacing: .03em; vertical-align: middle;
}

/* ---------- Alt düğmeler ---------- */
.kp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.kp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 12px;
  font: 700 1rem var(--kp-body); text-decoration: none; cursor: pointer;
  border: 2px solid var(--kp-deep); background: var(--kp-deep); color: #fff;
  transition: background .15s, color .15s, transform .15s;
}
.kp-btn:hover { background: var(--kp-deeper); transform: translateY(-1px); }
.kp-btn img { width: 16px; height: 16px; }
.kp-btn--ghost { background: #fff; color: var(--kp-deep); }
.kp-btn--ghost:hover { background: var(--kp-soft); }
.kp-btn[hidden] { display: none; }

/* ---------- Telefon ---------- */
@media (max-width: 560px) {
  .kp-head__in { padding: 18px 16px 22px; }
  .kp-main { padding: 22px 14px 32px; }
  .kp-table th, .kp-table td { padding: 13px 14px; }
  .kp-table .is-current .kp-name::after { display: table; margin: 6px 0 0; }
  .kp-actions .kp-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}