/* =============================================================================
   PortfolyoMaker — Portfolyo Builder (V2 · Faz 3)
   -----------------------------------------------------------------------------
   Yalnızca /Portfolyo sayfasında (Styles bölümü ile) yüklenir; site.css'ten SONRA.
   portfolyo-wizard.js'e DOKUNULMADAN, mevcut markup .pm-builder scope'unda DS'e
   biçimlendirilir. Önizleme: zoom yerine 202mm (PDF ile aynı) + transform:scale.
   ============================================================================= */

/* --------------------------------------------------------------------------- */
/* Kabuk                                                                        */
/* --------------------------------------------------------------------------- */
.pm-builder {
  max-width: 1320px;
  margin-inline: auto;
  padding: var(--pm-space-6) var(--pm-space-5) var(--pm-space-16);
  color: var(--pm-color-text);
  font-family: var(--pm-font-sans);
}

.pm-builder__header { margin-bottom: var(--pm-space-5); }
.pm-builder__back {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--pm-text-sm); font-weight: var(--pm-fw-medium);
  color: var(--pm-color-text-muted); text-decoration: none; margin-bottom: var(--pm-space-3); transition: color var(--pm-transition-fast);
}
.pm-builder__back:hover { color: var(--pm-color-primary); }
.pm-builder__title { font-family: var(--pm-font-display); font-size: var(--pm-text-3xl); font-weight: 700; letter-spacing: var(--pm-tracking-tight); margin: 0 0 var(--pm-space-2); line-height: 1.1; }
.pm-builder__lead { color: var(--pm-color-text-secondary); font-size: var(--pm-text-base); margin: 0; max-width: 62ch; line-height: var(--pm-leading-relaxed); }

/* --------------------------------------------------------------------------- */
/* Adım göstergesi (JS: .sk-portfolyom-pill üretir)                             */
/* --------------------------------------------------------------------------- */
.pm-builder__steps {
  display: flex; flex-wrap: wrap; gap: var(--pm-space-2);
  padding: var(--pm-space-3); margin-bottom: var(--pm-space-5);
  background: var(--pm-color-surface); border: 1px solid var(--pm-color-border); border-radius: var(--pm-radius-lg); box-shadow: var(--pm-shadow-sm);
}
.pm-builder .sk-portfolyom-pill {
  border: 1px solid var(--pm-color-border) !important;
  background: var(--pm-color-surface) !important;
  color: var(--pm-color-text-secondary) !important;
  border-radius: var(--pm-radius-pill) !important;
  font-family: var(--pm-font-sans) !important;
  font-size: var(--pm-text-sm) !important;
  font-weight: var(--pm-fw-semibold) !important;
  padding: 6px 14px !important;
  box-shadow: none !important;
  transition: background var(--pm-transition-fast), color var(--pm-transition-fast), border-color var(--pm-transition-fast);
}
.pm-builder .sk-portfolyom-pill:hover { border-color: var(--pm-color-border-hover) !important; color: var(--pm-color-text) !important; background: var(--pm-color-surface-sunken) !important; }
.pm-builder .sk-portfolyom-pill.active {
  background: var(--pm-color-primary) !important;
  border-color: var(--pm-color-primary) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(159, 18, 57, 0.28) !important;
}
.pm-builder .sk-portfolyom-pill:focus-visible { outline: none; box-shadow: var(--pm-shadow-focus) !important; }

/* --------------------------------------------------------------------------- */
/* Form kartı + paneller                                                        */
/* --------------------------------------------------------------------------- */
.pm-builder .sk-portfolyom-form.card {
  background: var(--pm-color-surface);
  border: 1px solid var(--pm-color-border) !important;
  border-radius: var(--pm-radius-lg) !important;
  box-shadow: var(--pm-shadow-sm);
}
.pm-builder .sk-portfolyom-form .card-body { padding: var(--pm-space-6) !important; }
@media (min-width: 992px) { .pm-builder .sk-portfolyom-form .card-body { padding: var(--pm-space-8) !important; } }

.pm-builder .sk-portfolyom-step-heading {
  font-family: var(--pm-font-display); font-size: var(--pm-text-xl); font-weight: 600; color: var(--pm-color-text);
  margin: 0 0 var(--pm-space-5); padding-bottom: var(--pm-space-3); border-bottom: 1px solid var(--pm-color-border); letter-spacing: var(--pm-tracking-tight);
}
.pm-builder .sk-portfolyom-subsection {
  padding: var(--pm-space-5); border: 1px solid var(--pm-color-border); border-radius: var(--pm-radius-md); background: var(--pm-color-surface-sunken);
}
.pm-builder .border-bottom.border-light { border-color: var(--pm-color-border) !important; }
.pm-builder .text-sk-navy { color: var(--pm-color-text) !important; font-weight: var(--pm-fw-semibold); }
.pm-builder .text-muted, .pm-builder .text-secondary { color: var(--pm-color-text-muted) !important; }

/* --------------------------------------------------------------------------- */
/* Form kontrolleri (Bootstrap sınıfları → DS görünümü, scope'lu)               */
/* --------------------------------------------------------------------------- */
.pm-builder .form-label {
  font-size: var(--pm-text-sm); font-weight: var(--pm-fw-semibold); color: var(--pm-color-text); margin-bottom: var(--pm-space-1); line-height: 1.3;
}
.pm-builder .form-label.small, .pm-builder label.small { font-size: var(--pm-text-xs); }
.pm-builder .form-text, .pm-builder .form-text.small { color: var(--pm-color-text-muted); font-size: var(--pm-text-xs); }

.pm-builder .form-control,
.pm-builder .form-select {
  border: 1px solid var(--pm-color-border-strong);
  border-radius: var(--pm-radius-md);
  background-color: var(--pm-color-surface);
  color: var(--pm-color-text);
  font-family: var(--pm-font-sans);
  font-size: var(--pm-text-base);
  min-height: var(--pm-control-h);
  padding: 0.5rem 0.75rem;
  line-height: 1.35;
  box-shadow: none;
  transition: border-color var(--pm-transition-fast), box-shadow var(--pm-transition-fast);
}
.pm-builder textarea.form-control { min-height: 88px; line-height: var(--pm-leading-normal); resize: vertical; }
.pm-builder .form-control-sm, .pm-builder .form-select-sm { min-height: var(--pm-control-h-sm); font-size: var(--pm-text-sm); padding: 0.35rem 0.6rem; }
.pm-builder .form-control::placeholder, .pm-builder textarea::placeholder { color: var(--pm-color-text-muted); }
.pm-builder .form-control:hover, .pm-builder .form-select:hover { border-color: var(--pm-color-border-hover); }
.pm-builder .form-control:focus,
.pm-builder .form-select:focus {
  border-color: var(--pm-color-primary);
  box-shadow: var(--pm-shadow-focus);
  background-color: var(--pm-color-surface);
  color: var(--pm-color-text);
}
.pm-builder .form-check-input { border-color: var(--pm-color-border-strong); }
.pm-builder .form-check-input:checked { background-color: var(--pm-color-primary); border-color: var(--pm-color-primary); }
.pm-builder .form-check-input:focus { border-color: var(--pm-color-primary); box-shadow: var(--pm-shadow-focus); }

/* Profil fotoğrafı önizleme kutusu (step 1) */
.pm-builder #pf-profil-preview, .pm-builder #pf-profil-fallback {
  border-radius: var(--pm-radius-lg) !important; border-color: var(--pm-color-border) !important;
}
.pm-builder #pf-profil-fallback { background: var(--pm-color-surface-sunken) !important; color: var(--pm-color-text-muted) !important; }

/* --------------------------------------------------------------------------- */
/* Dinamik satırlar (JS: .sk-dynamic-block)                                     */
/* --------------------------------------------------------------------------- */
.pm-builder .sk-dynamic-block {
  border: 1px solid var(--pm-color-border) !important;
  border-radius: var(--pm-radius-md) !important;
  background: var(--pm-color-surface);
  padding: var(--pm-space-4) !important;
  transition: border-color var(--pm-transition-fast), box-shadow var(--pm-transition-fast);
}
.pm-builder .sk-dynamic-block:hover { border-color: var(--pm-color-border-strong) !important; }
.pm-builder [data-job-index] {
  border: 1px solid var(--pm-color-border); border-radius: var(--pm-radius-md); background: var(--pm-color-surface); padding: var(--pm-space-4);
}
/* Sil bağlantıları (× ) — daha belirgin, DS danger */
.pm-builder .pf-egitim-remove, .pm-builder .pf-kurs-remove, .pm-builder .pf-skill-remove,
.pm-builder .pf-lang-remove, .pm-builder .pf-ref-remove, .pm-builder .pf-job-remove, .pm-builder .pf-uz-remove {
  color: var(--pm-color-text-muted) !important; font-size: 1.15rem !important; line-height: 1; text-decoration: none !important;
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pm-radius-sm);
  transition: background var(--pm-transition-fast), color var(--pm-transition-fast);
}
.pm-builder .pf-egitim-remove:hover, .pm-builder .pf-kurs-remove:hover, .pm-builder .pf-skill-remove:hover,
.pm-builder .pf-lang-remove:hover, .pm-builder .pf-ref-remove:hover, .pm-builder .pf-job-remove:hover, .pm-builder .pf-uz-remove:hover {
  color: var(--pm-color-danger) !important; background: var(--pm-color-danger-soft);
}

/* Ekle butonları (statik markup: .btn.btn-outline-secondary) */
.pm-builder .btn-outline-secondary {
  --bs-btn-color: var(--pm-color-text); --bs-btn-border-color: var(--pm-color-border-strong);
  --bs-btn-hover-bg: var(--pm-color-surface-sunken); --bs-btn-hover-border-color: var(--pm-color-border-hover);
  --bs-btn-hover-color: var(--pm-color-text); --bs-btn-active-bg: var(--pm-color-surface-sunken);
  border-radius: var(--pm-radius-md) !important; font-weight: var(--pm-fw-semibold); font-size: var(--pm-text-sm);
}

/* --------------------------------------------------------------------------- */
/* Şablon ızgarası (JS: .pf-sablon-pick)                                        */
/* --------------------------------------------------------------------------- */
.pm-builder .pf-sablon-pick {
  border: 1px solid var(--pm-color-border) !important;
  border-radius: var(--pm-radius-md) !important;
  background: var(--pm-color-surface) !important;
  transition: border-color var(--pm-transition-fast), box-shadow var(--pm-transition-fast), transform var(--pm-transition-fast) !important;
}
.pm-builder .pf-sablon-pick:hover { border-color: var(--pm-color-border-strong) !important; transform: translateY(-1px); box-shadow: var(--pm-shadow-sm) !important; }
.pm-builder .pf-sablon-pick.border-primary {
  border-color: var(--pm-color-primary) !important;
  box-shadow: 0 0 0 1px var(--pm-color-primary) !important;
}
.pm-builder .pf-sablon-pick .text-sk-navy { color: var(--pm-color-text) !important; }

/* Galeri küçük resimleri */
.pm-builder #pf-existing-gallery, .pm-builder #pf-new-images-queue {
  display: flex; flex-wrap: wrap; gap: var(--pm-space-2);
}
.pm-builder #pf-existing-gallery img, .pm-builder #pf-new-images-queue img {
  border-radius: var(--pm-radius-sm) !important; border: 1px solid var(--pm-color-border);
}

/* --------------------------------------------------------------------------- */
/* Alt gezinme (ileri/geri/kaydet)                                              */
/* --------------------------------------------------------------------------- */
.pm-builder__nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pm-space-2);
  margin-top: var(--pm-space-6); padding-top: var(--pm-space-5); border-top: 1px solid var(--pm-color-border);
}
.pm-builder__nav-right { display: flex; gap: var(--pm-space-2); }
.pm-builder #pf-form-alert:empty { display: none; }

/* =============================================================================
   CANLI ÖNİZLEME — PDF ile aynı 202mm genişlik + transform:scale (zoom yok)
   ============================================================================= */
.pm-builder-preview {
  position: sticky; top: var(--pm-space-5);
  background: var(--pm-color-surface); border: 1px solid var(--pm-color-border); border-radius: var(--pm-radius-lg);
  box-shadow: var(--pm-shadow-sm); overflow: hidden; display: flex; flex-direction: column;
}
.pm-builder-preview__bar {
  display: flex; align-items: center; gap: var(--pm-space-2); padding: var(--pm-space-3) var(--pm-space-4);
  border-bottom: 1px solid var(--pm-color-border); background: var(--pm-color-surface);
}
.pm-builder-preview__badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--pm-text-sm); font-weight: var(--pm-fw-semibold);
  color: var(--pm-color-primary);
}
.pm-builder-preview__badge svg { color: var(--pm-color-primary); }
.pm-builder-preview__hint { font-size: var(--pm-text-xs); color: var(--pm-color-text-muted); margin-left: auto; }
.pm-builder-preview__close { display: none; }

.pm-builder-preview__viewport {
  padding: 16px; background: var(--pm-neutral-150); overflow: auto;
  display: flex; justify-content: center; align-items: flex-start;
  max-height: min(78vh, 900px);
}
.pm-builder-preview__stage { position: relative; margin: 0 auto; }
.pm-builder-preview__doc {
  position: absolute; top: 0; left: 0;
  width: 202mm;                       /* PDF içerik genişliği ile birebir */
  transform-origin: top left;
  transform: scale(var(--pv-scale, 0.5));
  box-shadow: var(--pm-shadow-lg);
  background: #fff;
}
.pm-builder-preview__doc:empty { box-shadow: none; }

/* Boşken bilgilendirme */
.pm-builder-preview__viewport:has(.pm-builder-preview__doc:empty)::before {
  content: "Bilgi girdikçe önizleme burada güncellenir";
  color: var(--pm-color-text-muted); font-size: var(--pm-text-sm); padding: var(--pm-space-8) var(--pm-space-4); text-align: center;
}

/* Mobil önizleme açma düğmesi (FAB) */
.pm-builder__preview-fab {
  display: none;
  position: fixed; right: var(--pm-space-4); bottom: var(--pm-space-4); z-index: var(--pm-z-sticky);
  align-items: center; gap: 8px; height: 48px; padding: 0 20px;
  background: var(--pm-color-primary); color: #fff; border: none; border-radius: var(--pm-radius-pill);
  font-family: var(--pm-font-sans); font-weight: var(--pm-fw-semibold); font-size: var(--pm-text-base);
  box-shadow: var(--pm-shadow-lg); cursor: pointer;
}
.pm-builder__preview-fab svg { color: #fff; }

/* --------------------------------------------------------------------------- */
/* Kırpma modalı (Bootstrap modal — yapı korunur, yüzey DS)                     */
/* --------------------------------------------------------------------------- */
#pfProfilCropModal .modal-content { border: 1px solid var(--pm-color-border); border-radius: var(--pm-radius-lg); box-shadow: var(--pm-shadow-lg); }
#pfProfilCropModal .modal-header, #pfProfilCropModal .modal-footer { border-color: var(--pm-color-border); }
#pfProfilCropModal .modal-title { font-family: var(--pm-font-display); font-weight: 600; }
#pfProfilCropModal .pf-crop-stage { border-radius: var(--pm-radius-md) !important; border-color: var(--pm-color-border) !important; background: var(--pm-color-surface-sunken) !important; }

/* --------------------------------------------------------------------------- */
/* Responsive                                                                   */
/* --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .pm-builder { padding: var(--pm-space-5) var(--pm-space-4) var(--pm-space-16); }

  /* Önizleme paneli tam ekran alt sayfa (bottom-sheet) olur */
  .pm-builder-preview {
    position: fixed; inset: 0; z-index: var(--pm-z-drawer); border-radius: 0; border: none;
    transform: translateY(100%); transition: transform var(--pm-transition-slow); max-height: none;
    visibility: hidden;
  }
  .pm-builder-preview.is-open { transform: translateY(0); visibility: visible; }
  .pm-builder-preview__close { display: inline-flex; }
  .pm-builder-preview__viewport { flex: 1 1 auto; max-height: none; }
  .pm-builder__preview-fab { display: inline-flex; }
  /* Boş kolon yer kaplamasın */
  .pm-builder .row > .col-lg-5:has(.pm-builder-preview) { position: static; }
}

@media (max-width: 575.98px) {
  .pm-builder__title { font-size: var(--pm-text-2xl); }
  .pm-builder .sk-portfolyom-form .card-body { padding: var(--pm-space-5) !important; }
  .pm-builder__steps { padding: var(--pm-space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .pm-builder-preview, .pm-builder .pf-sablon-pick, .pm-builder .sk-portfolyom-pill { transition: none !important; }
}