/* =====================================================================
   CareerVision — ORTAK MODAL / POP-UP SİSTEMİ
   ---------------------------------------------------------------------
   Kural: pop-up'lar SADECE (×) düğmesi, "İptal/Vazgeç" düğmesi ve ESC
   tuşu ile kapanır. Karartılmış boşluğa tıklamak KAPATMAZ.
   ===================================================================== */

:root {
  --cv-modal-backdrop: rgba(19, 29, 43, .55);
  --cv-modal-surface: #ffffff;
  --cv-modal-text: #1f2b3d;
  --cv-modal-muted: #64748b;
  --cv-modal-border: #d9e0ea;
  --cv-modal-radius: 14px;
  --cv-modal-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  --cv-modal-accent: #4c5f7f;
}

html[data-theme="dark"] {
  --cv-modal-backdrop: rgba(3, 8, 16, .68);
  --cv-modal-surface: #16212f;
  --cv-modal-text: #e7eefb;
  --cv-modal-muted: #93a4bd;
  --cv-modal-border: #2a3a4f;
  --cv-modal-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

/* ---------- Katman: karartma ---------- */
.cv-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--cv-modal-backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overscroll-behavior: contain;
  /* Boşluğa tıklama kapatmaz; imleç de bunu ima etmesin. */
  cursor: default;
}

.cv-modal.cv-open {
  display: flex;
  animation: cvModalFade .16s ease-out;
}

@keyframes cvModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Panel ---------- */
.cv-modal > .cv-modal-panel,
.cv-modal > .modal-content,
.cv-modal > form,
.cv-modal > .popup-body {
  position: relative;
  width: min(460px, 100%);
  max-height: min(88vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  margin: 0;
  padding: 22px 22px 18px;
  background: var(--cv-modal-surface);
  color: var(--cv-modal-text);
  border: 1px solid var(--cv-modal-border);
  border-radius: var(--cv-modal-radius);
  box-shadow: var(--cv-modal-shadow);
  text-align: left;
  animation: cvModalRise .18s cubic-bezier(.2, .8, .3, 1);
}

@keyframes cvModalRise {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.cv-modal.cv-size-wide  > .cv-modal-panel { width: min(680px, 100%); }
.cv-modal.cv-size-large > .cv-modal-panel { width: min(980px, 100%); }

.cv-modal h1,
.cv-modal h2,
.cv-modal h3,
.cv-modal .modal-title {
  margin: 0 34px 12px 0;
  font-size: 17px;
  line-height: 1.3;
  color: var(--cv-modal-text);
}

.cv-modal p,
.cv-modal label {
  color: var(--cv-modal-muted);
  font-size: 13.5px;
}

.cv-modal input[type="text"],
.cv-modal input[type="password"],
.cv-modal input[type="email"],
.cv-modal input[type="number"],
.cv-modal select,
.cv-modal textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  margin: 6px 0 12px;
  font-size: 15px;
  color: var(--cv-modal-text);
  background: transparent;
  border: 1px solid var(--cv-modal-border);
  border-radius: 8px;
  outline: none;
}

.cv-modal input:focus,
.cv-modal select:focus,
.cv-modal textarea:focus {
  border-color: var(--cv-modal-accent);
  box-shadow: 0 0 0 3px rgba(76, 95, 127, .18);
}

/* ---------- Kapat (×) düğmesi ---------- */
.cv-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--cv-modal-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s, color .15s;
  z-index: 2;
}

.cv-modal-close:hover,
.cv-modal-close:focus-visible {
  background: rgba(127, 143, 168, .16);
  color: var(--cv-modal-text);
  outline: none;
}

/* ---------- Aksiyon satırı ---------- */
.cv-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}

.cv-modal-actions button,
.cv-modal-actions .btn {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Gövde kilidi ---------- */
body.cv-modal-open {
  overflow: hidden !important;
  touch-action: none;
}

/* ---------- Mobil: alttan açılan sayfa (bottom sheet) ---------- */
@media (max-width: 640px) {
  .cv-modal {
    align-items: flex-end;
    padding: 0;
  }

  .cv-modal > .cv-modal-panel,
  .cv-modal > .modal-content,
  .cv-modal > form,
  .cv-modal > .popup-body {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    animation: cvSheetUp .22s cubic-bezier(.2, .8, .3, 1);
  }

  /* Sürükleme çubuğu görseli */
  .cv-modal > .cv-modal-panel::before,
  .cv-modal > .modal-content::before,
  .cv-modal > form::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: -6px auto 14px;
    border-radius: 99px;
    background: var(--cv-modal-border);
  }

  .cv-modal-actions {
    flex-direction: column-reverse;
  }

  .cv-modal-actions button,
  .cv-modal-actions .btn {
    width: 100%;
    min-height: 48px;
  }
}

@keyframes cvSheetUp {
  from { transform: translateY(24px); opacity: .6; }
  to   { transform: none; opacity: 1; }
}

/* ---------- "Boşluğa tıkladın, burası kapatmaz" geri bildirimi ---------- */
.cv-nudge {
  animation: cvNudge .22s ease-in-out;
}

@keyframes cvNudge {
  0%, 100% { transform: none; }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .cv-modal.cv-open,
  .cv-modal > .cv-modal-panel,
  .cv-modal > .modal-content,
  .cv-modal > form,
  .cv-nudge { animation: none !important; }
}

/* ---------- Uygulama içi iframe penceresi (manage_content) ---------- */
.app-frame-modal.cv-modal > .app-frame-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  height: min(84vh, 860px);
  background: var(--cv-modal-surface);
  border: 1px solid var(--cv-modal-border);
  border-radius: var(--cv-modal-radius);
  box-shadow: var(--cv-modal-shadow);
  overflow: hidden;
}

.app-frame-modal.cv-size-compact > .app-frame-dialog { width: min(520px, 100%); height: min(64vh, 640px); }
.app-frame-modal.cv-size-wide    > .app-frame-dialog { width: min(820px, 100%); }
.app-frame-modal.cv-size-large   > .app-frame-dialog { width: min(1040px, 100%); }

@media (max-width: 640px) {
  .app-frame-modal.cv-modal > .app-frame-dialog {
    width: 100%;
    height: 94vh;
    border-radius: 18px 18px 0 0;
  }
}