/* ============================================================
   KURUMSAL BİRİM SAYFASI — /kurumsal/{kod}
   (bkz. app/Views/pages/kurumsal/birim.php)

   Yalnız bu sayfada yüklenir; icsayfa.css'in üstüne biner.
   Birim rengi kapsayıcıya --renk olarak PHP'den gelir.

   Sayfanın sırası sabittir: önce birimin açıklaması, altında kişiler.
   ============================================================ */

.kr-birim { --renk: #2D7CB5; }

/* ── Birim bilgileri (CKEditor HTML'i) ────────────────────── */
.kr-anlatim {
  color: #334155;
  font-size: 15px;
  line-height: 1.85;
}

.kr-anlatim > :first-child { margin-block-start: 0; }
.kr-anlatim > :last-child  { margin-block-end: 0; }
.kr-anlatim p  { margin: 0 0 .8rem; }
.kr-anlatim ul,
.kr-anlatim ol { margin: 0 0 .8rem; padding-inline-start: 1.4rem; }
.kr-anlatim li { margin-block-end: .35rem; }
.kr-anlatim h2,
.kr-anlatim h3,
.kr-anlatim h4 {
  margin: 1.4rem 0 .6rem;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--daka-dark, #1e293b);
}
.kr-anlatim h2 { font-size: 1.25rem; }
.kr-anlatim h3 { font-size: 1.1rem; }
.kr-anlatim strong { color: var(--daka-dark, #1e293b); }
.kr-anlatim a { color: var(--daka-primary, #2D7CB5); }
.kr-anlatim img { max-inline-size: 100%; block-size: auto; border-radius: 8px; }
.kr-anlatim table { inline-size: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .9rem; }
.kr-anlatim th,
.kr-anlatim td { border: 1px solid var(--daka-border, #e2e8f0); padding: .5rem .65rem; text-align: start; }
.kr-anlatim th { background: #f8fafc; font-weight: 700; }

/* ── Bölüm başlığı ────────────────────────────────────────── */
.kr-alt-baslik {
  margin: 2.25rem 0 1rem;
  padding-block-end: .5rem;
  border-block-end: 2px solid var(--daka-gold, #E8A020);
  display: inline-block;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--daka-dark, #1e293b);
}

/* ── Kişi ızgarası ────────────────────────────────────────
   Genişlik PANELDEN gelir: `kolon` 12'lik ızgarada kaç sütun kaplayacağını
   söyler (12 = tam satır, 6 = ikili, 4 = üçlü). Değer satır içi stille
   --kolon olarak basılır, burada yalnız span'e çevrilir. */
.kr-izgara {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kr-kisi {
  --kolon: 12;
  grid-column: span var(--kolon);
  min-inline-size: 0;
}

.kr-kart {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  block-size: 100%;
  padding: 1rem 1.15rem;
  border: 1px solid var(--daka-border, #e2e8f0);
  border-inline-start: 3px solid var(--renk);
  border-radius: 12px;
  background: #ffffff;
  transition: box-shadow .22s ease, transform .22s ease;
}

.kr-kisi:hover .kr-kart {
  box-shadow: 0 10px 24px rgba(15, 35, 70, .10);
  transform: translateY(-2px);
}

/* ── Fotoğraf ─────────────────────────────────────────────
   Vesikalık oran (3/4). Kutu SABİT: fotoğrafın kendi oranı ne olursa olsun
   satır yüksekliği değişmez, object-fit ile ortadan kırpılır. */
.kr-foto {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 84px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--renk) 12%, #ffffff);
}

.kr-foto img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center top;   /* portrede yüz üstte kalır */
  display: block;
}

/* Fotoğraf yoksa baş harfler — kırık görsel basılmaz */
.kr-foto--bos {
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--renk);
  letter-spacing: .02em;
}

/* ── Künye ────────────────────────────────────────────────── */
.kr-govde { flex: 1 1 auto; min-inline-size: 0; }

.kr-ad {
  display: block;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--daka-dark, #1e293b);
}

.kr-unvan {
  display: block;
  margin-block-start: .2rem;
  font-size: .92rem;
  line-height: 1.55;
  color: #64748b;
}

.kr-gorev { color: var(--renk); font-weight: 600; }

.kr-iletisim {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin-block-start: .45rem;
  font-size: .85rem;
}

.kr-iletisim a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--daka-primary, #2D7CB5);
  text-decoration: none;
}

.kr-iletisim a:hover { text-decoration: underline; }
.kr-iletisim i { font-size: .9rem; }

/* ── "Hakkında" düğmesi ───────────────────────────────────
   Özgeçmiş kartın içinde açılmıyor: 2.000+ karakterlik metinler listeyi
   okunmaz hâle getiriyordu. Düğme modalı açar (bkz. kurumsal.js). */
.kr-hakkinda {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-block-start: .6rem;
  padding: .32rem .7rem;
  border: 1px solid color-mix(in srgb, var(--renk) 45%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--renk) 8%, #ffffff);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--renk);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.kr-hakkinda:hover {
  border-color: var(--renk);
  background: var(--renk);
  color: #ffffff;
}

.kr-hakkinda:focus-visible {
  outline: 2px solid var(--renk);
  outline-offset: 2px;
}

.kr-hakkinda i { font-size: .9rem; }

/* ── Özgeçmiş modalı ──────────────────────────────────────
   <dialog> + showModal(): üst katman, odak tuzağı ve Esc tarayıcıdan gelir.
   Kutu şeffaf; görünen çerçeveyi içteki .kr-modal-kutu çiziyor. */
.kr-modal {
  inline-size: min(680px, 92vw);
  max-inline-size: none;
  max-block-size: 88vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  overflow: visible;
}

.kr-modal::backdrop { background: rgba(9, 20, 40, .72); }

.kr-modal-kutu {
  display: flex;
  flex-direction: column;
  max-block-size: 88vh;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

/* Başlık: fotoğraf + ad + ünvan; kaydırmada sabit kalır */
.kr-modal-bas {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.15rem;
  border-block-end: 1px solid var(--daka-border, #e2e8f0);
  background: color-mix(in srgb, var(--renk) 6%, #ffffff);
}

.kr-modal-foto {
  flex-shrink: 0;
  inline-size: 52px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
}

.kr-modal-foto img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.kr-modal-kunye { flex: 1 1 auto; min-inline-size: 0; }

.kr-modal-kunye strong {
  display: block;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--daka-dark, #1e293b);
}

.kr-modal-kunye span {
  display: block;
  margin-block-start: .15rem;
  font-size: .88rem;
  line-height: 1.5;
  color: #64748b;
}

.kr-modal-kapat {
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 35, 70, .07);
  color: #475569;
  font-size: 13px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.kr-modal-kapat:hover { background: var(--renk); color: #ffffff; }
.kr-modal-kapat:focus-visible { outline: 2px solid var(--renk); outline-offset: 2px; }

/* Gövde: uzun özgeçmiş burada kayar, başlık yerinde kalır */
.kr-modal-govde {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overflow-x: auto;
  padding: 1.1rem 1.15rem 1.25rem;
  font-size: .93rem;
  line-height: 1.8;
  color: #475569;
}

.kr-modal-govde > :first-child { margin-block-start: 0; }
.kr-modal-govde > :last-child  { margin-block-end: 0; }
.kr-modal-govde p  { margin: 0 0 .75rem; }
.kr-modal-govde ul,
.kr-modal-govde ol { margin: 0 0 .75rem; padding-inline-start: 1.25rem; }
.kr-modal-govde li { margin-block-end: .3rem; }
.kr-modal-govde strong { color: var(--daka-dark, #1e293b); }
.kr-modal-govde a { color: var(--daka-primary, #2D7CB5); }
.kr-modal-govde img { max-inline-size: 100%; block-size: auto; border-radius: 6px; }
.kr-modal-govde table { inline-size: 100%; border-collapse: collapse; margin: 0 0 .75rem; font-size: .88rem; }
.kr-modal-govde th,
.kr-modal-govde td { border: 1px solid var(--daka-border, #e2e8f0); padding: .45rem .6rem; text-align: start; }

/* Yedek yol: showModal() desteklenmiyorsa <dialog> satır içinde açılır;
   o durumda tam ekran kutu değil, kart içi bir blok gibi dursun. */
.kr-modal[open]:not(:modal) {
  position: static;
  inline-size: 100%;
  max-block-size: none;
  margin-block-start: .7rem;
}

.kr-modal[open]:not(:modal) .kr-modal-kutu { max-block-size: none; box-shadow: none; border: 1px solid var(--daka-border, #e2e8f0); }

/* ── Duyarlılık ───────────────────────────────────────────
   Dar ekranda 12'lik ızgara anlamını yitirir: her kişi tam satır. */
@media (max-width: 767.98px) {
  .kr-kisi { grid-column: span 12; }
}

@media (max-width: 575.98px) {
  .kr-kart { gap: .85rem; padding: .85rem .9rem; }
  .kr-foto { inline-size: 64px; }
  .kr-ad   { font-size: .98rem; }
  .kr-unvan { font-size: .87rem; }
  .kr-modal { inline-size: 94vw; max-block-size: 90vh; }
  .kr-modal-kutu { max-block-size: 90vh; }
  .kr-modal-bas { padding: .85rem .9rem; }
  .kr-modal-govde { padding: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kr-kart, .kr-hakkinda, .kr-modal-kapat { transition: none; }
  .kr-kisi:hover .kr-kart { transform: none; }
}

@media print {
  .kr-kart { border-color: #999; box-shadow: none; break-inside: avoid; }
  .kr-kisi:hover .kr-kart { transform: none; }
  /* Kağıtta modal basılamaz; düğme de anlamsız kalır */
  .kr-hakkinda, .kr-modal { display: none; }
}