/* =============================================================================
   16.57.0 — AÇILIR PENCERELER · Seçenek 3 "Yan dizin" (kullanıcı 17.10.2026: "tasarımda seçenek 3 olsun")
   Taslak: work/pencere-tasarimlari-2026-10-17/3-yan-dizin.html. Yalnız GÖRÜNÜM: düğme adları/yerleri, alanlar ve sıraları aynı.
   - Başlık Cormorant Garamond, üst satır altın küçük büyük harf; kapat düğmesi yuvarlak.
   - .form-grid formlarında etiket küçük büyük harf, alan alt çizgili; seçili alan altın çizgi.
   - Kaydet / Vazgeç (.form-actions) pencerenin altında YAPIŞKAN — uzun formda da hep görünür.
   - Uzun bölümlü formlar (fieldset.form-sec) için solda bölüm dizini (✓ / eksik) + doluluk; iPad/telefonda üstte sekme.
   - Telefonda tam ekran. Açık (Ivoire) ve koyu temada yalnız değişkenlerle (sabit renk yok).
   index.html'de theme-ivoire.css'ten SONRA yüklenir. Yalnız #modal içini etkiler (sayfa formları aynen).
   16.58.0: onay/soru pencereleri (.ui-confirm-overlay) de aynı belirteçleri (--mv-*) kullanır; eski .modal-form / .modal-actions şablonları .form-grid / .form-actions gibi görünür.
   ============================================================================= */
#modal, .ui-confirm-overlay {
  --mv-card: var(--panel);
  --mv-soft: var(--surface-2);
  --mv-line: var(--line);
  --mv-field: var(--lx-field, var(--line));
  --mv-ink: var(--ink);
  --mv-muted: var(--muted);
  --mv-head: var(--lx-head, var(--ink));
  --mv-gold: var(--lx-gold, var(--gold));
  --mv-gold-dk: var(--lx-gold-dk, var(--gold-ink));
  --mv-serif: var(--lx-serif, "Cormorant Garamond", Georgia, "Times New Roman", serif);
  /* 16.60.0 (T10, tarama 21.10.2026): durum renkleri styles.css --st-* belirteçlerine bağlı (koyu temada orada döner; #f0c46b/#f0a493/#7fd1a6 ikizleri birleşti) */
  --mv-warn: var(--st-warn); --mv-warn-bg: var(--st-warn-bg); --mv-warn-line: var(--gold-200);
  --mv-bad: var(--st-bad); --mv-bad-bg: var(--st-bad-bg);
  --mv-ok: var(--st-ok);
  --mv-head-h: 0px; /* JS ölçer (yapışkan başlık yüksekliği) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(#modal, .ui-confirm-overlay) { --mv-warn-line: rgba(240,196,107,.35); --mv-gold-dk: var(--gold-300); }
}
:root[data-theme="dark"] :is(#modal, .ui-confirm-overlay) { --mv-warn-line: rgba(240,196,107,.35); --mv-gold-dk: var(--gold-300); }

/* ---------- Kart, başlık, gövde ---------- */
#modal .modal-backdrop { background: rgba(9, 22, 16, .52); }
#modal .modal-card { padding: 0; border-radius: 22px; border: 1px solid var(--mv-line); box-shadow: 0 30px 80px -30px rgba(15, 42, 32, .5), 0 2px 0 rgba(15, 42, 32, .03); scroll-padding-top: calc(var(--mv-head-h) + 12px); }
#modal .modal-head { position: sticky; top: 0; z-index: 4; margin: 0; padding: 24px 30px 16px; background: var(--mv-card); align-items: flex-start; gap: 16px; }
#modal .modal-head .eyebrow { margin: 0 0 8px; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mv-gold-dk); }
#modal .modal-head h2 { margin: 0; font: 600 32px/1.06 var(--mv-serif); letter-spacing: .005em; color: var(--mv-head); text-wrap: balance; }
#modal .modal-head > button[data-close] { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--mv-line); background: transparent; color: var(--mv-ink); font: 400 20px/1 var(--sans); cursor: pointer; }
#modal .modal-head > button[data-close]:hover, #modal .modal-head > button[data-close]:focus-visible { border-color: var(--mv-gold); outline: none; }
#modal #modalBody { padding: 4px 30px 26px; }

/* ---------- Form ızgarası ---------- */
#modal .form-grid { gap: 20px 26px; }
#modal :is(.form-grid, .modal-form) label { gap: 8px; font: 700 var(--fs-2xs)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mv-muted); }
#modal :is(.form-grid, .modal-form) label small, #modal :is(.form-grid, .modal-form) .field-hint { display: block; font: 400 12px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--mv-muted); }
#modal :is(.form-grid, .modal-form) label:has(> input[type="checkbox"]), #modal :is(.form-grid, .modal-form) label:has(> input[type="radio"]),
#modal :is(.form-grid, .modal-form) label.check, #modal :is(.form-grid, .modal-form) label.inline { font: 500 var(--fs-sm)/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--mv-ink); }
#modal :is(.form-grid, .modal-form) label.check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } /* kutucuk + metin yan yana (genel label grid'i alt alta diziyordu) */
#modal :is(.form-grid, .modal-form) label.check > small, #modal :is(.form-grid, .modal-form) label.check > .f-err { flex-basis: 100%; }
#modal :is(.form-grid, .modal-form) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
#modal :is(.form-grid, .modal-form) select,
#modal :is(.form-grid, .modal-form) textarea {
  border: 0; border-bottom: 1px solid var(--mv-field); border-radius: 0; background-color: transparent; box-shadow: none;
  padding: 8px 0 9px; min-height: 40px; font: 500 var(--fs-md)/1.35 var(--sans); color: var(--mv-ink);
  transition: border-color .15s ease;
}
#modal :is(.form-grid, .modal-form) textarea { min-height: 64px; padding-top: 8px; resize: vertical; }
#modal :is(.form-grid, .modal-form) select { appearance: none; -webkit-appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--mv-gold-dk) 50%), linear-gradient(135deg, var(--mv-gold-dk) 50%, transparent 50%);
  background-position: calc(100% - 11px) 18px, calc(100% - 6px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
#modal :is(.form-grid, .modal-form) select[multiple] { background-image: none; padding-right: 0; min-height: 96px; }
#modal :is(.form-grid, .modal-form) input:focus, #modal :is(.form-grid, .modal-form) select:focus, #modal :is(.form-grid, .modal-form) textarea:focus { outline: none; box-shadow: none; border-bottom: 2px solid var(--mv-gold); padding-bottom: 8px; }
#modal :is(.form-grid, .modal-form) input[readonly], #modal :is(.form-grid, .modal-form) input:disabled, #modal :is(.form-grid, .modal-form) select:disabled, #modal :is(.form-grid, .modal-form) textarea:disabled { color: var(--mv-muted); border-bottom-style: dashed; }
#modal :is(.form-grid, .modal-form) input::placeholder, #modal :is(.form-grid, .modal-form) textarea::placeholder { color: var(--mv-muted); opacity: .75; font-weight: 400; }
/* hatalı alan (canlı doğrulama) + mesaj */
#modal :is(.form-grid, .modal-form) .f-bad input, #modal :is(.form-grid, .modal-form) .f-bad select, #modal :is(.form-grid, .modal-form) .f-bad textarea, #modal :is(.form-grid, .modal-form) [aria-invalid="true"] { border-bottom-color: var(--mv-bad) !important; }
#modal :is(.form-grid, .modal-form) .f-err { display: block; font: 600 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--mv-bad); }
#modal :is(.form-grid, .modal-form) .req-star { color: var(--mv-bad); margin-left: 3px; letter-spacing: 0; }

/* ---------- Bölümler + bölüm başlığı ---------- */
#modal .form-sec { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px; margin: 0; padding: 26px 0 8px; border: 0; border-bottom: 1px solid var(--mv-line); min-width: 0; scroll-margin-top: calc(var(--mv-head-h) + 56px); }
#modal .form-sec:last-of-type { border-bottom: 0; }
#modal .form-sec > legend { float: left; width: 100%; grid-column: 1 / -1; margin: 0 0 2px; padding: 0; display: flex; align-items: baseline; gap: 14px; font: 600 26px/1.05 var(--mv-serif); color: var(--mv-head); letter-spacing: 0; text-transform: none; }
#modal .form-sec > legend i { font-style: normal; color: var(--mv-gold-dk); font-size: 20px; }
#modal .form-sec > .full, #modal .form-sec > .sec-note { grid-column: 1 / -1; }
#modal .form-sec .sec-note { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--mv-muted); text-transform: none; letter-spacing: 0; margin: -4px 0 0; }
#modal .sec-band { grid-column: 1 / -1; padding: 10px 14px; border-radius: 12px; font: 500 13px/1.45 var(--sans); text-transform: none; letter-spacing: 0; }
#modal .sec-band.ok { background: color-mix(in srgb, var(--mv-ok) 12%, transparent); color: var(--mv-ok); }
#modal .sec-band.warn { background: var(--mv-warn-bg); color: var(--mv-warn); border: 1px solid var(--mv-warn-line); }
#modal .sec-band.bad { background: var(--mv-bad-bg); color: var(--mv-bad); }
#modal .sec-band.info { background: var(--mv-soft); color: var(--mv-ink); border: 1px solid var(--mv-line); }

/* ---------- Yapışkan alt düğmeler ---------- */
/* 16.58.0: eski şablon sınıfları — .modal-form (tek sütun yığın) + .modal-actions (düğme satırı) .form-grid / .form-actions ile aynı görünür (şablonlar değişmedi) */
#modal .modal-form { display: grid; gap: 18px; min-width: 0; }
#modal .modal-form > .form-error:empty { display: none; }
#modal .modal-form > button { justify-self: end; }
#modal .modal-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; }
#modal .form-grid > .form-actions, #modal #modalBody > .form-actions,
#modal :is(.form-grid, .modal-form) > .modal-actions, #modal #modalBody > .modal-actions {
  position: sticky; bottom: 0; z-index: 3; grid-column: 1 / -1;
  margin: 10px -30px -26px; padding: 14px 30px calc(14px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--mv-card) 94%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1px solid var(--mv-line);
}
#modal :is(.form-actions, .modal-actions) :is(.primary-button, .secondary-button, .ghost-button, .danger-button) { min-height: 44px; padding: 0 22px; border-radius: var(--radius-btn); font: 600 14px/1 var(--sans); } /* 16.60.0 (T12): tek köşe belirteci */
#modal .ghost-button { background: transparent; border: 1px solid var(--mv-line); color: var(--mv-ink); border-radius: var(--radius-btn); padding: 10px 16px; font: 600 14px/1 var(--sans); cursor: pointer; }
#modal .ghost-button:hover { border-color: var(--mv-gold); }
#modal .danger-button { background: transparent; border: 1px solid color-mix(in srgb, var(--mv-bad) 45%, transparent); color: var(--mv-bad); border-radius: var(--radius-btn); padding: 10px 16px; font: 600 14px/1 var(--sans); cursor: pointer; }
#modal .form-error { color: var(--mv-bad); }

/* ---------- Uyarı bantları (eski sabit açık renkler koyu temada da okunur) ---------- */
#modal .pz-missing { background: var(--mv-warn-bg); border: 1px solid var(--mv-warn-line); color: var(--mv-warn); border-radius: 12px; }
#modal .zimmet-warning, #modal .ocr-notice { background: var(--mv-warn-bg); border-color: var(--mv-warn-line); color: var(--mv-warn); }
#modal .employee-profile-grid > div { background: var(--mv-soft); }

/* ---------- Bölüm dizini (Yan dizin) ---------- */
#modal .modal-card.has-index { width: min(1100px, 100%); }
#modal #modalBody.has-index { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 34px; padding-left: 0; }
#modal .mv-index { position: sticky; top: var(--mv-head-h); align-self: start; max-height: calc(90vh - var(--mv-head-h) - 40px); overflow: auto;
  margin: 0; padding: 18px 0; background: var(--mv-soft); border: 1px solid var(--mv-line); border-left: 0; border-radius: 0 16px 16px 0; }
#modal .mv-index a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 11px 20px 11px 22px; border-left: 2px solid transparent;
  color: var(--label, var(--mv-ink)); text-decoration: none; font: 500 14px/1.25 var(--sans); cursor: pointer; }
#modal .mv-index a i { font: 600 15px/1 var(--mv-serif); font-style: normal; color: var(--mv-gold-dk); }
#modal .mv-index a.on { color: var(--mv-head); font-weight: 700; background: var(--mv-card); border-left-color: var(--mv-gold); }
#modal .mv-index a s { text-decoration: none; font: 700 11px/1 var(--sans); color: var(--mv-warn); background: var(--mv-warn-bg); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
#modal .mv-index a s.bad { color: var(--mv-bad); background: var(--mv-bad-bg); }
#modal .mv-index a u { text-decoration: none; color: var(--mv-ok); font-weight: 700; }
#modal .mv-index .mv-prog { margin: 16px 22px 0; padding-top: 14px; border-top: 1px solid var(--mv-line); font: 400 var(--fs-xs)/1.4 var(--sans); color: var(--mv-muted); }
#modal .mv-index .mv-bar { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--mv-line); overflow: hidden; }
#modal .mv-index .mv-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--mv-gold)); transition: width .25s ease; }

@media (max-width: 1024px) {
  #modal #modalBody.has-index { display: block; padding-left: 30px; }
  #modal .mv-index { position: sticky; top: var(--mv-head-h); z-index: 3; display: flex; overflow-x: auto; max-height: none; margin: 0 -30px 6px; padding: 0 18px;
    border: 0; border-bottom: 1px solid var(--mv-line); border-radius: 0; background: var(--mv-card); scrollbar-width: none; }
  #modal .mv-index::-webkit-scrollbar { display: none; }
  #modal .mv-index a { flex: none; grid-template-columns: auto auto auto; padding: 12px 12px; border-left: 0; border-bottom: 2px solid transparent; }
  #modal .mv-index a.on { background: transparent; border-bottom-color: var(--mv-gold); }
  #modal .mv-index .mv-prog { display: none; }
}
@media (max-width: 820px) {
  #modal .form-sec { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  #modal { padding: 0; place-items: stretch; }
  #modal .modal-card { width: 100% !important; max-width: none; max-height: none; height: 100dvh; border-radius: 0; border: 0; }
  #modal .modal-head { padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 12px; }
  #modal .modal-head h2 { font-size: 28px; }
  #modal #modalBody, #modal #modalBody.has-index { padding: 4px 18px 20px; }
  #modal .form-grid > .form-actions, #modal #modalBody > .form-actions,
  #modal :is(.form-grid, .modal-form) > .modal-actions, #modal #modalBody > .modal-actions { margin: 10px -18px -20px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); }
  #modal :is(.form-actions, .modal-actions) :is(.primary-button, .secondary-button) { flex: 1; }
  #modal .mv-index { margin: 0 -18px 6px; padding: 0 8px; }
  #modal .form-sec > legend { font-size: 24px; }
}

/* ---------- Personalfragebogen (16.57.0, Lastenheft) ---------- */
#modal .pz-field { display: grid; gap: 6px; min-width: 0; }
#modal .pz-field.full { grid-column: 1 / -1; }
#modal .pz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px; }
#modal .pz-nonEU { padding: 16px 18px 18px; border: 1px dashed var(--mv-warn-line); border-radius: 14px; background: color-mix(in srgb, var(--mv-warn-bg) 45%, transparent); }
#modal .check.pz-later { font: 500 var(--fs-xs)/1.3 var(--sans); color: var(--mv-muted); display: flex; align-items: center; gap: 8px; }
#modal .check.pz-later input { width: auto; margin: 0; }
#modal .row-btn { display: flex; gap: 8px; align-items: flex-end; }
#modal .row-btn input { flex: 1; min-width: 0; }
#modal .row-btn .ghost-button { white-space: nowrap; padding: 8px 12px; font-size: var(--fs-xs); }
#modal .pz-sign-wrap { display: grid; gap: 8px; justify-items: start; }
#modal .pz-sign-label { font: 700 var(--fs-2xs)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mv-muted); }
#modal .pz-sign { width: 100%; max-width: 700px; height: 170px; border: 1px dashed var(--mv-field); border-radius: 14px; background: #fffdf8; touch-action: none; cursor: crosshair; }
#modal .pz-sign-wrap.f-bad .pz-sign { border-color: var(--mv-bad); }
#modal .pz-checks { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--mv-line); border-radius: 14px; background: var(--mv-soft); }
#modal .pz-points { display: grid; gap: 6px; }
#modal .pz-pt { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font: 500 var(--fs-sm)/1.4 var(--sans); text-transform: none; letter-spacing: 0; }
#modal .pz-pt b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; }
#modal .pz-pt.red b { background: var(--mv-bad-bg); color: var(--mv-bad); }
#modal .pz-pt.yellow b { background: var(--mv-warn-bg); color: var(--mv-warn); }
#modal .pz-pt.blue b { background: color-mix(in srgb, var(--st-info) 14%, transparent); color: var(--st-info); }
#modal .pz-pt.ok b { background: color-mix(in srgb, var(--mv-ok) 14%, transparent); color: var(--mv-ok); }
#modal .pz-facts { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--mv-muted); }
#modal .pz-facts a { color: var(--mv-gold-dk); font-weight: 600; }
#modal .pz-lohn { display: grid; gap: 8px; justify-items: start; }
#modal .pz-lohn-row { display: flex; gap: 12px; font: 500 var(--fs-sm)/1.4 var(--sans); text-transform: none; letter-spacing: 0; }
#modal .pz-lohn-row span { min-width: 140px; color: var(--mv-muted); }
#modal .mv-index a span { min-width: 0; overflow-wrap: break-word; hyphens: auto; } /* uzun Almanca başlık (Identitätsprüfung) kesilmesin, bölünsün */
@media (max-width: 1024px) { #modal .mv-index a span { white-space: nowrap; } }
#modal .mv-index a em { font-style: normal; }
@media (max-width: 820px) { #modal .pz-grid { grid-template-columns: 1fr; } }
:root[data-theme="dark"] #modal .pz-sign { background: #fffdf8; }
/* 16.57.0: Dateizentrale şeridi (eski sabit açık zemin) — pencerede tema belirteçleriyle, koyu temada da okunur */
#modal .pz-filecenter { background: var(--mv-soft); border-color: var(--mv-line); color: var(--mv-ink); }
#modal .pz-filecenter.soon { background: var(--mv-warn-bg); border-color: color-mix(in srgb, var(--mv-warn) 35%, transparent); }
#modal .pz-filecenter.risk { background: var(--mv-bad-bg); border-color: color-mix(in srgb, var(--mv-bad) 35%, transparent); }
#modal .pz-filecenter.soon .pz-fc-flag { color: var(--mv-warn); }
#modal .pz-filecenter.risk .pz-fc-flag { color: var(--mv-bad); }

/* ---------- 16.58.0: iOS yakınlaştırma — dokunmatikte pencere alanları 16 px (16 px altı odakta sayfayı büyütüyordu); masaüstü 15,5 px aynen ---------- */
@media (pointer: coarse) {
  #modal :is(.form-grid, .modal-form) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  #modal :is(.form-grid, .modal-form) select,
  #modal :is(.form-grid, .modal-form) textarea { font-size: 16px; }
}

/* ---------- 16.58.0: Onay / soru pencereleri (uiConfirm · uiPrompt · uiChoose · şifre sorusu) — Seçenek 3 dili ----------
   Önceden sabit beyaz kutu (koyu temada okunmuyordu); tehlikeli onayın .danger-button'u yalnız #modal içinde tanımlıydı → gri tarayıcı düğmesi.
   Yalnız görünüm: metin, düğme adı/sırası aynı. Katman sırası aynı: onay (--z-dialog) pencerenin (--z-modal) üstünde. */
.ui-confirm-overlay { background: rgba(9, 22, 16, .52); }
.ui-confirm-box { background: var(--mv-card); color: var(--mv-ink); border: 1px solid var(--mv-line); border-radius: 22px; padding: 26px 26px 20px;
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 30px 80px -30px rgba(15, 42, 32, .5), 0 2px 0 rgba(15, 42, 32, .03); }
.ui-confirm-box::before { content: ""; display: block; width: 34px; height: 2px; margin: 0 0 14px; border-radius: 2px; background: var(--mv-gold); }
.ui-confirm-msg { color: var(--mv-ink); font: 400 15px/1.55 var(--sans); }
.ui-confirm-title { display: block; margin: 0 0 6px; font: 600 24px/1.16 var(--mv-serif); letter-spacing: .005em; color: var(--mv-head); text-wrap: balance; font-variant-numeric: lining-nums; }
.ui-prompt-input { border: 1px solid var(--mv-field); border-radius: 12px; background: var(--mv-soft); color: var(--mv-ink); font-size: 16px; }
.ui-prompt-input:focus { border-color: var(--mv-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mv-gold) 20%, transparent); }
.ui-confirm-actions :is(.primary-button, .secondary-button, .danger-button) { min-height: 44px; padding: 0 20px; border-radius: var(--radius-btn); font: 600 14px/1 var(--sans); }
.ui-confirm-actions .danger-button { background: var(--mv-bad-bg); border: 1px solid color-mix(in srgb, var(--mv-bad) 45%, transparent); color: var(--mv-bad); }
.ui-confirm-actions .danger-button:hover, .ui-confirm-actions .danger-button:focus-visible { border-color: var(--mv-bad); }
.ui-choose-item { min-height: 44px; padding: 10px 16px; border-radius: var(--radius-btn); line-height: 1.35; }
@media (max-width: 520px) {
  .ui-confirm-box { padding: 22px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .ui-confirm-title { font-size: 22px; }
  .ui-confirm-actions :is(.primary-button, .secondary-button, .danger-button) { flex: 1 1 auto; }
}