/* ============================================================
   PRAGMO — ORTAK BİLEŞEN SETİ (B165 FAZ 0A)
   ----------------------------------------------------------------
   Vanilla CSS, framework yok. Tüm bileşenler .pg-* prefix'iyle.
   tokens.css'ten okur — kendi sabit değer yok.

   İki sistem paralel: eski .btn/.card/... class'ları korunur,
   .pg-btn/.pg-card yeni standart. Migration kademeli.

   Bileşenler:
   - .pg-btn (variant: primary/secondary/ghost/danger | size: sm/md/lg)
   - .pg-card (variant: default/active/dashed/elevated)
   - .pg-input / .pg-select / .pg-textarea / .pg-label / .pg-field
   - .pg-modal (overlay + dialog + show/hide via components.js)
   - .pg-badge (variant: success/warning/danger/info/trial/neutral)
   ============================================================ */

/* ============================================
   GLOBAL — base reset + body font (opt-in)
   Mevcut sayfalar bozulmasın diye base reset SADECE
   .pg-scope sınıfı veya body[data-pg-base] varsa uygulanır.
   ============================================ */
body[data-pg-base], .pg-scope {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-app);
}
body[data-pg-base] h1, .pg-scope h1,
body[data-pg-base] h2, .pg-scope h2,
body[data-pg-base] h3, .pg-scope h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* ============================================
   BUTON — .pg-btn
   ============================================ */
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  line-height: 1;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  border: var(--border-width-base) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-base);
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pg-btn:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.pg-btn:disabled, .pg-btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; pointer-events: none;
}

/* Variant */
.pg-btn--primary {
  background: var(--brand-deep);
  color: var(--text-on-brand);
  border-color: var(--brand-deep);
}
.pg-btn--primary:hover {
  background: color-mix(in srgb, var(--brand-deep) 88%, #000);
  border-color: color-mix(in srgb, var(--brand-deep) 88%, #000);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.pg-btn--secondary {
  background: var(--brand-color);
  color: var(--brand-deep);
  border-color: var(--brand-color);
}
.pg-btn--secondary:hover {
  background: color-mix(in srgb, var(--brand-color) 85%, var(--brand-deep));
}
.pg-btn--ghost {
  background: transparent;
  color: var(--brand-deep);
  border-color: var(--brand-deep);
}
.pg-btn--ghost:hover {
  background: var(--brand-soft);
}
.pg-btn--text {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
  padding: var(--space-2) var(--space-3);
}
.pg-btn--text:hover { color: var(--text-primary); background: var(--bg-muted); }
.pg-btn--danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}
.pg-btn--danger:hover {
  background: color-mix(in srgb, var(--color-danger) 88%, #000);
}

/* Size */
.pg-btn--sm { font-size: var(--text-sm); padding: var(--space-2) var(--space-4); }
.pg-btn--lg { font-size: var(--text-md); padding: var(--space-4) var(--space-7); }
.pg-btn--block { display: flex; width: 100%; }

/* ============================================
   KART — .pg-card
   ============================================ */
.pg-card {
  background: var(--bg-elevated);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.pg-card--elevated {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.pg-card--elevated:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.pg-card--active {
  background: var(--brand-deep);
  color: var(--text-on-brand);
  border-color: var(--brand-deep);
}
.pg-card--active .pg-card__title { color: var(--text-on-brand); }
.pg-card--active .pg-card__sub { color: color-mix(in srgb, var(--text-on-brand) 80%, transparent); }
.pg-card--dashed {
  background: var(--bg-surface);
  border-style: dashed;
  border-width: var(--border-width-base);
  border-color: var(--border-strong);
}
.pg-card--dashed:hover { border-color: var(--brand-color); }
/* B165B-1.B feedback: merkezi tek panel (auth/onboarding tek kart sayfaları için)
   max-width + extra padding + ortalı yerleşim. */
.pg-card--auth {
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-10);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 480px) {
  .pg-card--auth { padding: var(--space-7) var(--space-5); }
}
.pg-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}
.pg-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin: 0;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
.pg-card__sub {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}
.pg-card__body { color: var(--text-secondary); }
.pg-card__foot {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width-thin) solid var(--border-divider);
  display: flex;
  gap: var(--space-3);
}

/* ============================================
   FORM — .pg-field / .pg-label / .pg-input / .pg-select / .pg-textarea
   ============================================ */
.pg-field {
  display: block;
  margin-bottom: var(--space-4);
}
.pg-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}
.pg-label__optional {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  margin-left: var(--space-1);
}
.pg-input, .pg-select, .pg-textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: var(--border-width-base) solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
  box-sizing: border-box;
}
.pg-input::placeholder, .pg-textarea::placeholder { color: var(--text-muted); }
.pg-input:hover, .pg-select:hover, .pg-textarea:hover {
  border-color: var(--border-strong);
}
.pg-input:focus, .pg-select:focus, .pg-textarea:focus {
  border-color: var(--brand-color);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-focus);
}
.pg-input:disabled, .pg-select:disabled, .pg-textarea:disabled {
  background: var(--bg-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}
.pg-textarea { min-height: 96px; resize: vertical; line-height: var(--leading-normal); }
.pg-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
                    linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-8);
}
.pg-field__hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.pg-field__error {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin-top: var(--space-1);
  min-height: 14px;
}

/* ============================================
   MODAL — .pg-modal
   JS: window.PgModal.open({ title, body, actions }) / .close()
   ============================================ */
.pg-modal {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  animation: pgModalFade var(--t-base);
}
.pg-modal[data-open="true"] { display: flex; }
@keyframes pgModalFade { from { opacity: 0 } to { opacity: 1 } }
.pg-modal__dialog {
  background: var(--bg-elevated);
  border-radius: var(--radius-xl);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow-xl);
  animation: pgModalSlide var(--t-base);
}
@keyframes pgModalSlide {
  from { transform: translateY(16px); opacity: 0 }
  to   { transform: translateY(0); opacity: 1 }
}
.pg-modal__head {
  padding: var(--space-6) var(--space-6) var(--space-3);
  border-bottom: var(--border-width-thin) solid var(--border-divider);
}
.pg-modal__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  margin: 0;
  color: var(--text-primary);
}
.pg-modal__body { padding: var(--space-5) var(--space-6); }
.pg-modal__foot {
  padding: var(--space-4) var(--space-6) var(--space-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ============================================
   ALERT — .pg-alert (B165B-1.B feedback)
   Form içi success/error/warning/info mesajı.
   Inline kullanım için: form action sonucu, validation mesajı, vb.
   ============================================ */
.pg-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width-thin) solid transparent;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  margin: var(--space-3) 0;
}
.pg-alert--ok {
  background: var(--color-mint-100);
  border-color: var(--color-mint-200);
  color: var(--color-forest-700);
}
.pg-alert--err {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #991B1B;
}
.pg-alert--warning {
  background: #FEF3C7;
  border-color: #FDE68A;
  color: #92400E;
}
.pg-alert--info {
  background: #DBEAFE;
  border-color: #BFDBFE;
  color: #1E40AF;
}
.pg-alert__icon { flex-shrink: 0; font-size: 16px; line-height: 1; margin-top: 1px; }
.pg-alert__body { flex: 1; }
.pg-alert__title {
  font-weight: var(--weight-semi);
  margin-bottom: var(--space-1);
}
.pg-alert--hidden { display: none; }

/* ============================================
   BADGE — .pg-badge
   ============================================ */
.pg-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
  line-height: 1;
  background: var(--bg-muted);
  color: var(--text-secondary);
  white-space: nowrap;
}
.pg-badge--success { background: var(--color-mint-100); color: var(--color-forest-700); }
.pg-badge--warning { background: #FEF3C7; color: #92400E; }
.pg-badge--danger  { background: #FEE2E2; color: #991B1B; }
.pg-badge--info    { background: #DBEAFE; color: #1E40AF; }
.pg-badge--trial   { background: #FEF3C7; color: #B45309; }
.pg-badge--brand   { background: var(--brand-soft); color: var(--brand-deep); }
.pg-badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* ============================================
   UPLOAD ZONE — .pg-upload-zone (B166-PG-PATTERNS)
   Dosya sürükle-bırak alanı. Tek dosya / çoklu dosya farketmez.
   Kullanım:
     <div class="pg-upload-card">
       <div class="pg-upload-zone" onclick="..." ondragover="..." ondrop="...">
         <div class="pg-upload-zone__icon">📂</div>
         <div class="pg-upload-zone__title">Dosyayı buraya sürükleyin</div>
         <div class="pg-upload-zone__sub">Excel · .xlsx, .xls</div>
       </div>
     </div>
   State'ler: default → hover/drag → has-file (yeşil dolu)
   ============================================ */
.pg-upload-card {
  background: var(--bg-elevated);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}
.pg-upload-zone {
  border: var(--border-width-thick) dashed var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base);
  position: relative;
  background: var(--bg-surface);
}
.pg-upload-zone:hover,
.pg-upload-zone.is-dragging {
  border-color: var(--brand-color);
  background: var(--brand-soft);
}
.pg-upload-zone.has-file {
  border-color: var(--color-success);
  border-style: solid;
  background: var(--color-mint-100);
}
.pg-upload-zone__icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.pg-upload-zone__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.pg-upload-zone__sub {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.pg-upload-zone--sm {
  padding: var(--space-5) var(--space-4);
}
.pg-upload-zone--sm .pg-upload-zone__icon { font-size: 28px; }

/* ============================================
   STAT BOX — .pg-stat-box (B166-PG-PATTERNS)
   Küçük metrik kutusu. .pg-stat-grid grid container'ı ile birlikte.
   Kullanım:
     <div class="pg-stat-grid pg-stat-grid--4">
       <div class="pg-stat-box">
         <div class="pg-stat-box__label">Toplam Aktif</div>
         <div class="pg-stat-box__value">1.2 M ₺</div>
       </div>
     </div>
   Variant: --success / --warning / --danger / --info (sadece value rengi)
   ============================================ */
.pg-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.pg-stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pg-stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .pg-stat-grid--3, .pg-stat-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pg-stat-grid, .pg-stat-grid--3, .pg-stat-grid--4 { grid-template-columns: 1fr; }
}
.pg-stat-box {
  background: var(--bg-elevated);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: left;
}
.pg-stat-box--center { text-align: center; }
.pg-stat-box__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--weight-semi);
  margin-bottom: var(--space-2);
}
.pg-stat-box__value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
.pg-stat-box__sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}
.pg-stat-box--success .pg-stat-box__value { color: var(--color-forest-700); }
.pg-stat-box--warning .pg-stat-box__value { color: var(--color-warning); }
.pg-stat-box--danger  .pg-stat-box__value { color: var(--color-danger); }
.pg-stat-box--info    .pg-stat-box__value { color: var(--color-info); }
.pg-stat-box--brand   .pg-stat-box__value { color: var(--brand-deep); }

/* ============================================
   TAB NAV — .pg-tab-nav (B166-PG-PATTERNS)
   Yatay sekme şeridi, alt underline, scroll'lanabilir.
   Kullanım:
     <div class="pg-tab-nav" role="tablist">
       <button class="pg-tab-btn is-active" role="tab">👤 Profil</button>
       <button class="pg-tab-btn" role="tab">🔐 Güvenlik</button>
     </div>
     <div class="pg-tab-panel is-active">…</div>
     <div class="pg-tab-panel">…</div>
   ============================================ */
.pg-tab-nav {
  display: flex;
  gap: var(--space-1);
  border-bottom: var(--border-width-thin) solid var(--border-divider);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  scrollbar-width: thin;
}
.pg-tab-nav::-webkit-scrollbar { height: 3px; }
.pg-tab-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-sm); }
.pg-tab-btn {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  cursor: pointer;
  border-bottom: var(--border-width-thick) solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.pg-tab-btn:hover { color: var(--text-primary); background: var(--bg-muted); }
.pg-tab-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.pg-tab-btn.is-active {
  color: var(--brand-deep);
  border-bottom-color: var(--brand-deep);
}
.pg-tab-btn__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-warning);
  margin-left: var(--space-1);
  vertical-align: middle;
}
.pg-tab-panel { display: none; }
.pg-tab-panel.is-active { display: block; animation: pgTabFade var(--t-base); }
@keyframes pgTabFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .pg-tab-btn { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); }
}

/* ============================================
   YARDIMCI LAYOUT
   ============================================ */
.pg-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.pg-stack--sm { gap: var(--space-2); }
.pg-stack--lg { gap: var(--space-6); }
.pg-row   { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pg-row--between { justify-content: space-between; }
.pg-spacer { flex: 1; }
.pg-divider {
  border: 0;
  border-top: var(--border-width-thin) solid var(--border-divider);
  margin: var(--space-4) 0;
}