/* ==========================================================================
   KESOB — Yönetim Şeması (v3)
   ==========================================================================

   TASARIM KARARI: "Neden bu dosya yatay scroll üretemez?"

   Klasik org-chart CSS'i kartlara SABİT bir genişlik verir (ör. 240px) ve
   kardeşleri yan yana dizer. Genişlik = N × 240px + boşluklar. N büyüdükçe bu
   sayı er ya da geç viewport'u aşar; aşınca da ya içerik kesilir ya da
   konteyner "overflow-x:auto" olduğu için scrollbar çıkar. Yani scroll, kart
   sayısının kaçınılmaz bir SONUCUdur — bir hata değil.

   Buradaki formül ters yönde çalışır:

       kart genişliği = (konteyner genişliği - boşluklar) / satırdaki üye sayısı

   Genişlik artık girdi değil, ÇIKTIDIR. Konteyner ne kadarsa kartlar ona
   sığacak şekilde küçülür. clamp() ile bir alt sınır (--ks-card-min) konur;
   üye sayısı o sınırı zorlayacak kadar arttığında satır SARAR (flex-wrap) —
   yine de taşmaz. Sonuç: yatay scroll bu düzende oluşamaz.

   İKİNCİ KARAR: kartın İÇİ de küçülmeli.
   Kart daralıp fotoğraf/yazı aynı kalırsa kart patlar. Bu yüzden kart bir
   "container" (container-type: inline-size) ve içindeki her ölçü cqw
   (container query width) birimiyle yazılıdır: kart daraldıkça fotoğraf,
   punto ve iç boşluk oransal olarak küçülür. Medya sorgusu ile yapılamaz,
   çünkü belirleyici olan ekran genişliği değil KARTIN genişliğidir.

   ÜÇÜNCÜ KARAR: bağlantı çizgileri saf CSS.
   Önceki sürüm çizgileri JS ile ölçüp SVG'ye çiziyordu. Bu düzende her seviye
   TAM GENİŞLİKTE ve ORTALANMIŞ bir satır olduğu için tüm seviyelerin merkezi
   aynı X'tedir; dolayısıyla ortalanmış tek bir dikey çizgi her zaman doğrudur.
   Ölçüm gerekmez → JS gerekmez → resize/lazy-image kaynaklı kayma da olmaz.
   ========================================================================== */

.ks-org {
    /* Renkler: Tasarım Paneli değişkenleri varsa onlar, yoksa kurumsal varsayılan. */
    --ks-primary: var(--kesob-primary, #00193c);
    --ks-accent: var(--kesob-secondary, #775a19);
    --ks-surface: var(--kesob-surface, #ffffff);
    --ks-muted: #43474f;
    --ks-line: #c9ccd6;
    --ks-border: #e3e1e2;

    /* Ölçü sistemi */
    --ks-gap: clamp(0.5rem, 1.4vw, 1.15rem);
    --ks-card-min: 7.5rem;    /* okunabilirliğin alt sınırı; altına inilmez, satır sarar */
    --ks-card-max: 18rem;
    --ks-max-row: 2;          /* satır başına azami kart — breakpoint'lerde artar */

    max-width: 1180px;
    margin-inline: auto;
    padding: clamp(1.75rem, 4vw, 3.5rem) clamp(0.875rem, 3vw, 2rem);

    /* Güvenlik ağı: beklenmedik bir içerik bile sayfayı yatay kaydıramaz.
       "clip", "hidden"dan farklı olarak programatik kaydırmayı da engeller ve
       sticky/position:fixed davranışını bozmaz. */
    overflow-x: clip;
}

@media (min-width: 480px)  { .ks-org { --ks-max-row: 3; } }
@media (min-width: 768px)  { .ks-org { --ks-max-row: 4; } }
@media (min-width: 1024px) { .ks-org { --ks-max-row: 5; } }
@media (min-width: 1280px) { .ks-org { --ks-max-row: 6; } }

.ks-org .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Araç çubuğu ───────────────────────────────────────────────────────── */

.ks-org__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.ks-org__search {
    position: relative;
    flex: 1 1 15rem;
    max-width: 24rem;
}

.ks-org__search .material-symbols-outlined {
    position: absolute;
    inset-block: 0;
    left: 0.75rem;
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    color: var(--ks-muted);
    pointer-events: none;
}

.ks-org__search input {
    width: 100%;
    padding: 0.65rem 0.9rem 0.65rem 2.5rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--ks-primary);
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
    border-radius: 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ks-org__search input:focus-visible {
    outline: none;
    border-color: var(--ks-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ks-accent) 22%, transparent);
}

.ks-org__search input::-webkit-search-cancel-button { cursor: pointer; }

.ks-org__views {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: #f0edee;
    border: 1px solid var(--ks-border);
    border-radius: 0.75rem;
}

.ks-org__views button,
.ks-org__print {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ks-muted);
    background: transparent;
    border: 0;
    border-radius: 0.55rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ks-org__views button .material-symbols-outlined,
.ks-org__print .material-symbols-outlined { font-size: 1.05rem; }

.ks-org__views button[aria-pressed="true"] {
    color: var(--ks-primary);
    background: var(--ks-surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.ks-org__print {
    color: var(--ks-surface);
    background: var(--ks-primary);
    padding-inline: 0.9rem;
    border-radius: 0.75rem;
}

.ks-org__print:hover { background: color-mix(in srgb, var(--ks-primary) 85%, #ffffff); }

.ks-org__views button:focus-visible,
.ks-org__print:focus-visible {
    outline: 2px solid var(--ks-accent);
    outline-offset: 2px;
}

.ks-org__status {
    margin: -1rem 0 1.5rem;
    font-size: 0.8125rem;
    color: var(--ks-muted);
    text-align: center;
    min-height: 1.2em;
}

/* ── Bantlar (birimler) ────────────────────────────────────────────────── */

.ks-org__board {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ks-org__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Bantlar arası dikey bağlantı. İlk banttan önce çizilmez. */
.ks-org__unit + .ks-org__unit::before {
    content: "";
    width: 2px;
    height: clamp(1.75rem, 4vw, 3rem);
    background: var(--ks-line);
    border-radius: 2px;
}

.ks-org__badge {
    display: inline-block;
    margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
    padding: 0.55rem clamp(1.25rem, 3vw, 2.5rem);
    font-size: clamp(0.8125rem, 1.6vw, 1.0625rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(135deg,
        var(--ks-primary) 0%,
        color-mix(in srgb, var(--ks-primary) 72%, #2f5f9e) 100%);
    border-radius: 0.7rem;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ks-primary) 55%, transparent);
    /* İnce altın hairline: kurumsal ikinci renk, dozunda. */
    outline: 1px solid color-mix(in srgb, var(--ks-accent) 45%, transparent);
    outline-offset: 2px;
}

.ks-org__levels {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Seviyeler arası dikey bağlantı. Tüm seviyeler ortalanmış olduğundan
   ortalanmış tek çizgi her koşulda doğru yerdedir. */
.ks-org__level + .ks-org__level::before {
    content: "";
    /* Kendi satırını kaplayan şeffaf bir blok; çizgi, ortalanmış 2px'lik bir
       gradient katmanı olarak boyanır. Böylece ::before hem kartların ÜSTÜNDE
       ayrı bir satırda durur hem de çizgi tam merkeze denk gelir. */
    flex: 0 0 100%;
    height: clamp(1.25rem, 2.5vw, 2rem);
    background: linear-gradient(var(--ks-line), var(--ks-line)) no-repeat center / 2px 100%;
}

/* ── Seviye (tek satır) ────────────────────────────────────────────────── */

.ks-org__level {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--ks-gap);
    width: 100%;

    /* Satır başına kart sayısı.
       Temel kural: sayı, breakpoint tavanını aşmasın. */
    --per-row: min(var(--count, 1), var(--ks-max-row));
}

/*
   DENGELİ DAĞITIM (ilerlemeli geliştirme).
   7 üye ve tavan 6 iken temel kural 6 + 1 dizer — tek başına kalan kart çirkindir.
   round(up, …) destekleyen tarayıcılarda satır sayısını hesaplayıp üyeleri eşit
   dağıtıyoruz: 7 üye → 2 satır → satır başına 4 → 4 + 3.
   Desteklemeyen tarayıcıda yukarıdaki temel kural geçerli kalır; düzen bozulmaz,
   sadece daha az zarif olur.
*/
@supports (width: round(up, 1px, 1px)) {
    .ks-org__level {
        --rows: round(up, calc(var(--count, 1) / var(--ks-max-row)), 1);
        --per-row: round(up, calc(var(--count, 1) / max(var(--rows), 1)), 1);
    }
}

/* Tepe seviyesi (Başkan) biraz daha büyük dursun. */
.ks-org__level[data-org-level="0"] { --ks-card-max: 19.5rem; }

/* ── Kart ──────────────────────────────────────────────────────────────── */

.ks-org__item {
    /* Formülün kalbi. 100% = seviyenin genişliği. */
    width: clamp(
        var(--ks-card-min),
        calc((100% - (var(--per-row) - 1) * var(--ks-gap)) / var(--per-row)),
        var(--ks-card-max)
    );
    flex: 0 0 auto;
    min-width: 0;   /* flex item'ın içerikten dolayı şişmesini engeller */
    display: flex;

    /*
       ÖLÇÜ BAĞLAMI BURADA TANIMLANIR, KARTIN ÜZERİNDE DEĞİL.
       Bir eleman KENDİ container-query birimlerini kullanamaz: cqw, elemanın
       EN YAKIN ÜST container'ına göre çözülür. container-type'ı .ks-org__card
       üzerine koyup cqw'yi yine kartın içinde kullanmak sessizce yanlış sonuç
       verir (viewport'a düşer). Bu yüzden bağlam dıştaki .ks-org__item'dedir;
       genişliği zaten kartın genişliğiyle birebir aynıdır.
    */
    container-type: inline-size;
}

.ks-org__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.2rem, 2cqw, 0.55rem);
    width: 100%;
    padding: clamp(0.5rem, 6cqw, 1.35rem) clamp(0.4rem, 4cqw, 1rem);

    font: inherit;
    text-align: center;
    color: var(--ks-primary);
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
    border-radius: clamp(0.6rem, 5cqw, 1.35rem);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ks-org__card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ks-accent) 55%, transparent);
    box-shadow: 0 12px 24px -10px rgb(0 0 0 / 0.22);
}

.ks-org__card:focus-visible {
    outline: 2px solid var(--ks-accent);
    outline-offset: 3px;
}

.ks-org__item.is-lead .ks-org__card {
    border-color: color-mix(in srgb, var(--ks-accent) 60%, transparent);
    box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--ks-accent) 70%, transparent);
}

.ks-org__photo {
    display: block;
    width: clamp(2.75rem, 56cqw, 8.1rem);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: clamp(0.4rem, 4cqw, 0.95rem);
    background: #f0edee;
    border: 1px solid var(--ks-border);
}

.ks-org__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.ks-org__photo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #9a9da6;
}

.ks-org__photo-fallback .material-symbols-outlined { font-size: clamp(1.5rem, 26cqw, 2.75rem); }

.ks-org__flag {
    display: inline-block;
    padding: 0.1em 0.6em;
    font-size: clamp(0.5rem, 5.5cqw, 0.625rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-accent);
    background: color-mix(in srgb, var(--ks-accent) 12%, transparent);
    border-radius: 999px;
}

.ks-org__name {
    font-size: clamp(0.6875rem, 9cqw, 1.1rem);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    overflow-wrap: anywhere;   /* uzun soyadları kartı taşırmaz */
}

.ks-org__role {
    font-size: clamp(0.625rem, 7cqw, 0.9rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--ks-muted);
    overflow-wrap: anywhere;
}

/* Container query desteklenmeyen (çok eski) tarayıcılar için makul sabitler. */
@supports not (container-type: inline-size) {
    .ks-org__photo { width: 5.4rem; }
    .ks-org__name  { font-size: 0.95rem; }
    .ks-org__role  { font-size: 0.8125rem; }
    .ks-org__card  { padding: 0.9rem 0.7rem; border-radius: 1.05rem; }
}

/* ── Görünürlük ─────────────────────────────────────────────────────────
   KRİTİK: Bu dosyadaki neredeyse her blok display:flex/grid tanımlıyor ve bu,
   tarayıcının yerleşik `[hidden] { display:none }` kuralını EZER. Yani JS
   `el.hidden = true` dediğinde eleman gizlenmez. Araç çubuğu da sayfaya
   [hidden] ile geldiği için JS yokken bile GÖRÜNÜR olurdu — sessiz bir hata.
   Tek bir kural hepsini kapatıyor.                                         */

.ks-org [hidden],
.ks-org[hidden] { display: none !important; }

.ks-org__noresult {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--ks-muted);
}

.ks-org__empty {
    padding: 4rem 1rem;
    text-align: center;
    color: var(--ks-muted);
}

.ks-org__empty .material-symbols-outlined {
    font-size: 3.5rem;
    color: var(--ks-line);
}

/* ── Liste görünümü ────────────────────────────────────────────────────── */

.ks-org__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 0.75rem;
}

.ks-org__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem;
    font: inherit;
    text-align: left;
    color: var(--ks-primary);
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
    border-radius: 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ks-org__row:hover {
    border-color: color-mix(in srgb, var(--ks-accent) 55%, transparent);
    box-shadow: 0 6px 16px -10px rgb(0 0 0 / 0.25);
}

.ks-org__row:focus-visible { outline: 2px solid var(--ks-accent); outline-offset: 2px; }

.ks-org__row-photo {
    flex: 0 0 auto;
    width: 3rem;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    border-radius: 0.5rem;
    background: #f0edee;
    border: 1px solid var(--ks-border);
}

.ks-org__row-unit {
    display: block;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-accent);
}

.ks-org__row-name { display: block; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; }
.ks-org__row-role { display: block; font-size: 0.75rem; color: var(--ks-muted); }

/* ── Detay penceresi ───────────────────────────────────────────────────── */

.ks-org__dialog {
    width: min(28rem, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: 1.25rem;
    background: var(--ks-surface);
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.4);
    color: var(--ks-primary);
}

.ks-org__dialog::backdrop {
    background: rgb(15 23 42 / 0.55);
    backdrop-filter: blur(3px);
}

.ks-org__dialog-head {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 5rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg,
        var(--ks-primary) 0%,
        color-mix(in srgb, var(--ks-primary) 72%, #2f5f9e) 100%);
}

.ks-org__dialog-unit {
    padding: 0.2rem 0.6rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-primary);
    background: rgb(255 255 255 / 0.92);
    border-radius: 0.35rem;
}

.ks-org__dialog-close { position: absolute; top: 0.6rem; right: 0.6rem; }

.ks-org__dialog-close button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--ks-primary);
    background: rgb(255 255 255 / 0.9);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.ks-org__dialog-close button:focus-visible { outline: 2px solid var(--ks-accent); outline-offset: 2px; }

.ks-org__dialog-body { padding: 0 1.25rem 1.25rem; }

.ks-org__dialog-photo {
    width: 5rem;
    aspect-ratio: 3 / 4;
    margin-top: -2.5rem;
    object-fit: cover;
    object-position: top center;
    border: 3px solid var(--ks-surface);
    border-radius: 0.8rem;
    background: #f0edee;
    display: block;
}

.ks-org__dialog-body h3 {
    margin: 0.85rem 0 0.2rem;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ks-org__dialog-role {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ks-accent);
}

.ks-org__dialog-meta {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ks-border);
}

.ks-org__dialog-meta dt {
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ks-muted);
}

.ks-org__dialog-meta dd { margin: 0.1rem 0 0; font-size: 0.8125rem; }
.ks-org__dialog-meta a { color: var(--ks-primary); text-decoration: none; overflow-wrap: anywhere; }
.ks-org__dialog-meta a:hover { text-decoration: underline; }

/* ── Hareket tercihi ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ks-org__card,
    .ks-org__row,
    .ks-org__print,
    .ks-org__views button { transition: none; }
    .ks-org__card:hover { transform: none; }
}

/* ── Yazdırma ──────────────────────────────────────────────────────────── */

@media print {
    .ks-org { --ks-max-row: 5; max-width: none; padding: 0; }
    .ks-org__toolbar,
    .ks-org__status,
    .ks-org__noresult,
    .ks-org__dialog { display: none !important; }

    .ks-org__unit { break-inside: avoid; page-break-inside: avoid; }

    .ks-org__card {
        box-shadow: none !important;
        border: 1px solid #94969f !important;
    }

    .ks-org__badge {
        color: #ffffff !important;
        background: #00193c !important;
        box-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}