/* ═══════════════════════════════════════════════════════════════════════════
   YükYükle Design System v6 — PREMIUM THEME
   Brand: Navy #1E2B4A · Turuncu #EE520E · Beyaz #FFFFFF
   Font: Plus Jakarta Sans — Modern, premium, WebView uyumlu
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── FONT: Plus Jakarta Sans ───
   CDN önce yüklenir; CDN yoksa (offline WebView) system-ui'a düşer.
   İleride woff2 dosyaları projeye eklenirse @font-face ile local yükleme
   yapılabilir — font-family adı aynı kaldığı için hiçbir şey değişmez.
─────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');


/* ══════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════ */
:root {
  /* Brand */
  --yy-orange:          #EE520E;
  --yy-orange-light:    #FF6B2C;
  --yy-orange-dark:     #C94409;
  --yy-orange-glow:     rgba(238,82,14,.22);
  --yy-orange-subtle:   rgba(238,82,14,.09);

  --yy-navy:            #1E2B4A;
  --yy-navy-dark:       #0F1628;
  --yy-navy-light:      #2D3E6B;
  --yy-navy-border:     rgba(30,43,74,.12);

  /* Layout */
  --sidebar-w:          264px;
  --topbar-h:           64px;

  /* Surfaces */
  --yy-body:            #F4F5F7;
  --yy-surface:         #FFFFFF;
  --yy-surface-hover:   #F9FAFB;
  --yy-surface-active:  #FFF4EE;

  /* Typography */
  --yy-text:            #111827;
  --yy-text-secondary:  #374151;
  --yy-text-muted:      #9CA3AF;
  --yy-text-inverse:    #FFFFFF;

  /* Borders + Shadows */
  --yy-border:          rgba(0,0,0,.06);
  --yy-border-hover:    rgba(0,0,0,.10);
  --yy-shadow-sm:       0 1px 4px rgba(0,0,0,.05);
  --yy-shadow:          0 2px 12px rgba(0,0,0,.06);
  --yy-shadow-lg:       0 8px 30px rgba(0,0,0,.08);
  --yy-shadow-xl:       0 16px 48px rgba(0,0,0,.12);

  /* Radius */
  --yy-radius-xs:       6px;
  --yy-radius-sm:       10px;
  --yy-radius:          14px;
  --yy-radius-lg:       20px;
  --yy-radius-xl:       28px;

  /* Semantic */
  --yy-success:         #059669;
  --yy-success-bg:      rgba(5,150,105,.10);
  --yy-error:           #DC2626;
  --yy-error-bg:        rgba(220,38,38,.10);
  --yy-warning:         #D97706;
  --yy-warning-bg:      rgba(217,119,6,.10);
  --yy-info:            #2563EB;
  --yy-info-bg:         rgba(37,99,235,.10);

  /* Font */
  --font-body:          'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Transitions */
  --yy-ease:            cubic-bezier(0.4,0,0.2,1);
  --yy-duration:        0.18s;
}


/* ══════════════════════════════════════════════════
   ESKI TEMPLATE (CLIVAX) OVERRIDE — HEPSİNİ KAPAT
   ══════════════════════════════════════════════════ */
#page-topbar,
.vertical-menu,
.topbar-left,
.navbar-header:not(.yy-tb-inner),
.sidebar-left,
#sidebar-menu {
  display:none !important;
  width:0 !important; height:0 !important;
  overflow:hidden !important;
}

#layout-wrapper {
  display:block !important;
  overflow:visible !important;
  position:relative !important;
}


/* ══════════════════════════════════════════════════
   LAYOUT — Sidebar + Topbar boşlukları
   Bu kısım tüm sayfa kaymalarını çözer
   ══════════════════════════════════════════════════ */

/* Ana içerik alanı — sidebar kadar sol boşluk + topbar kadar üst boşluk */
.main-content {
  margin-left: var(--sidebar-w) !important;
  margin-top: 0 !important;
  min-height: 100vh !important;
  overflow: visible !important;
  position: relative !important;
}

/* page-content içindeki padding — topbar yüksekliği dahil */
.page-content {
  padding: calc(var(--topbar-h) + 28px) 28px 28px 28px !important;
  background: var(--yy-body) !important;
  min-height: 100vh !important;
}

/* İç içe page-content varsa sıfırla */
.page-content .page-content {
  padding: 0 !important;
  min-height: auto !important;
  background: transparent !important;
}

/* Body override class'ları */
body.sidebar-enable .main-content,
body[data-sidebar] .main-content,
body.vertical-collpsed .main-content {
  margin-left: var(--sidebar-w) !important;
}

/* Footer */
.footer {
  margin-left: var(--sidebar-w) !important;
  background: var(--yy-surface) !important;
  color: var(--yy-text-muted) !important;
  border-top: 1px solid var(--yy-border) !important;
  font-size: 13px !important;
  font-family: var(--font-body) !important;
}

/* Mobile — tüm margin'leri sıfırla */
@media (max-width: 991px) {
  .main-content,
  body.sidebar-enable .main-content,
  body[data-sidebar] .main-content,
  body.vertical-collpsed .main-content {
    margin-left: 0 !important;
  }
  .footer { margin-left: 0 !important; }
  .page-content {
    padding: calc(56px + 20px) 16px 16px 16px !important;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: calc(56px + 16px) 14px 80px 14px !important;
  }
}


/* ══════════════════════════════════════════════════
   BASE — HTML / BODY
   ══════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  font-family: var(--font-body) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  background: var(--yy-body) !important;
  color: var(--yy-text) !important;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html body .wrap,
html body .page-content,
html body .content-wrapper,
html body .main-wrapper,
html body .container-fluid {
  background: var(--yy-body) !important;
}


/* ══════════════════════════════════════════════════
   TYPOGRAPHY
   Plus Jakarta Sans optimize ayarları
   ══════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-body) !important;
  color: var(--yy-text) !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

h1 { font-size:28px; font-weight:800; letter-spacing:-0.7px; }
h2 { font-size:22px; font-weight:800; letter-spacing:-0.4px; }
h3 { font-size:18px; font-weight:700; letter-spacing:-0.2px; }
h4 { font-size:16px; font-weight:700; }
h5 { font-size:14px; font-weight:600; }
h6 { font-size:13px; font-weight:600; }

p  { color: var(--yy-text-secondary); line-height:1.75; font-weight:400; }
a  { color: var(--yy-orange); text-decoration:none; transition:color var(--yy-duration) var(--yy-ease); }
a:hover { color: var(--yy-orange-dark); }

.text-muted  { color: var(--yy-text-muted) !important; }
.text-dark   { color: var(--yy-text) !important; }
small,.small { font-size:12px; color:var(--yy-text-muted) !important; font-weight:500; }

/* Plus Jakarta Sans — label/caption özel */
.form-label,
label {
  font-weight: 600 !important;
  letter-spacing: 0.1px;
}

/* Tüm sayı/rakam içerikler için tabular nums */
.yy-stat-value,
.badge,
.sb-badge,
.yy-tb-badge {
  font-variant-numeric: tabular-nums;
}

/* Active color fix (eski template'den kalan yeşil override) */
.mm-active > a,
.mm-active > a i,
.mm-active > a .noti-icon {
  color: var(--yy-orange) !important;
}


/* ══════════════════════════════════════════════════
   CARD
   ══════════════════════════════════════════════════ */
.card {
  background: var(--yy-surface) !important;
  border: 1px solid var(--yy-border) !important;
  border-radius: var(--yy-radius) !important;
  box-shadow: var(--yy-shadow) !important;
  transition: box-shadow var(--yy-duration) var(--yy-ease) !important;
}
.card:hover { box-shadow: var(--yy-shadow-lg) !important; }
.card-header {
  background: var(--yy-surface) !important;
  border-bottom: 1px solid var(--yy-border) !important;
  padding: 16px 20px !important;
  font-family: var(--font-body) !important;
  font-weight: 700;
  color: var(--yy-text) !important;
}
.card-body { padding: 20px !important; }
.card-footer {
  background: var(--yy-surface-hover) !important;
  border-top: 1px solid var(--yy-border) !important;
  padding: 12px 20px !important;
}

/* Stat kartları */
.yy-stat-card {
  background: var(--yy-surface);
  border: 1px solid var(--yy-border);
  border-radius: var(--yy-radius);
  padding: 20px;
  transition: all var(--yy-duration) var(--yy-ease);
}
.yy-stat-card:hover {
  box-shadow: var(--yy-shadow-lg);
  transform: translateY(-2px);
}
.yy-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--yy-text);
  line-height: 1;
  letter-spacing: -0.5px;
}
.yy-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--yy-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}


/* ══════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════ */
.btn {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: var(--yy-radius-sm) !important;
  transition: all var(--yy-duration) var(--yy-ease) !important;
  letter-spacing: 0.1px;
}
.btn:focus { box-shadow: none !important; }

.btn-primary {
  background: var(--yy-orange) !important;
  border-color: var(--yy-orange) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--yy-orange-dark) !important;
  border-color: var(--yy-orange-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--yy-orange-glow) !important;
}
.btn-primary:active {
  background: var(--yy-orange-dark) !important;
  transform: translateY(0);
}

.btn-outline-primary {
  color: var(--yy-orange) !important;
  border-color: var(--yy-orange) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--yy-orange) !important;
  color: #fff !important;
}

.btn-secondary {
  background: var(--yy-navy) !important;
  border-color: var(--yy-navy) !important;
  color: #fff !important;
}
.btn-secondary:hover {
  background: var(--yy-navy-light) !important;
  border-color: var(--yy-navy-light) !important;
}

.btn-light {
  background: var(--yy-body) !important;
  border-color: var(--yy-border-hover) !important;
  color: var(--yy-text-secondary) !important;
}
.btn-light:hover {
  background: #e8eaed !important;
  color: var(--yy-text) !important;
}

.btn-danger {
  background: var(--yy-error) !important;
  border-color: var(--yy-error) !important;
  color: #fff !important;
}

.btn-success {
  background: var(--yy-success) !important;
  border-color: var(--yy-success) !important;
  color: #fff !important;
}


/* ══════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════ */
.form-control,
.form-select {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--yy-text) !important;
  background: var(--yy-surface) !important;
  border: 1.5px solid var(--yy-border-hover) !important;
  border-radius: var(--yy-radius-sm) !important;
  padding: 10px 14px !important;
  transition: all var(--yy-duration) var(--yy-ease) !important;
  box-shadow: none !important;
}
.form-control::placeholder { color: var(--yy-text-muted) !important; }
.form-control:focus,
.form-select:focus {
  border-color: var(--yy-orange) !important;
  box-shadow: 0 0 0 3px var(--yy-orange-subtle) !important;
  background: var(--yy-surface) !important;
  outline: none !important;
}

.form-label {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--yy-text-secondary) !important;
  margin-bottom: 6px !important;
}

.invalid-feedback { font-size: 12px !important; color: var(--yy-error) !important; }
.is-invalid {
  border-color: var(--yy-error) !important;
  box-shadow: 0 0 0 3px var(--yy-error-bg) !important;
}


/* ══════════════════════════════════════════════════
   TABLE
   ══════════════════════════════════════════════════ */
.table {
  font-family: var(--font-body) !important;
  font-size: 13.5px;
  color: var(--yy-text) !important;
}
.table thead th {
  background: var(--yy-body) !important;
  color: var(--yy-text-muted) !important;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1.5px solid var(--yy-border-hover) !important;
  padding: 12px 14px !important;
  white-space: nowrap;
}
.table tbody td {
  border-color: var(--yy-border) !important;
  padding: 12px 14px !important;
  vertical-align: middle;
  color: var(--yy-text-secondary) !important;
}
.table tbody tr:hover td { background: var(--yy-surface-hover) !important; }
.table-bordered td, .table-bordered th { border-color: var(--yy-border) !important; }

/* DataTables */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--yy-border-hover) !important;
  border-radius: var(--yy-radius-xs) !important;
  font-family: var(--font-body) !important;
  padding: 6px 10px !important;
  color: var(--yy-text) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--yy-orange) !important;
  box-shadow: 0 0 0 3px var(--yy-orange-subtle) !important;
  outline: none !important;
}
.dataTables_wrapper .dataTables_info { color: var(--yy-text-muted) !important; font-size: 13px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--yy-orange) !important;
  border-color: var(--yy-orange) !important;
  color: #fff !important;
  border-radius: var(--yy-radius-xs) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--yy-orange-subtle) !important;
  border-color: transparent !important;
  color: var(--yy-orange) !important;
  border-radius: var(--yy-radius-xs) !important;
}


/* ══════════════════════════════════════════════════
   BADGE
   ══════════════════════════════════════════════════ */
.badge {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  letter-spacing: 0.2px;
}
.badge.bg-primary,.badge.bg-orange  { background: var(--yy-orange) !important; color:#fff !important; }
.badge.bg-secondary { background: var(--yy-navy) !important; color:#fff !important; }
.badge.bg-success   { background: var(--yy-success) !important; color:#fff !important; }
.badge.bg-danger    { background: var(--yy-error) !important; color:#fff !important; }
.badge.bg-warning   { background: var(--yy-warning) !important; color:#fff !important; }
.badge.bg-info      { background: var(--yy-info) !important; color:#fff !important; }
.badge.bg-light     { background: var(--yy-body) !important; color:var(--yy-text-secondary) !important; }


/* ══════════════════════════════════════════════════
   ALERT
   ══════════════════════════════════════════════════ */
.alert {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  border-radius: var(--yy-radius-sm) !important;
  border-width: 1px !important;
  padding: 14px 16px !important;
}
.alert-success  { background:var(--yy-success-bg) !important; border-color:rgba(5,150,105,.2) !important; color:#065f46 !important; }
.alert-danger   { background:var(--yy-error-bg)   !important; border-color:rgba(220,38,38,.2)  !important; color:#991b1b !important; }
.alert-warning  { background:var(--yy-warning-bg) !important; border-color:rgba(217,119,6,.2)  !important; color:#92400e !important; }
.alert-info     { background:var(--yy-info-bg)    !important; border-color:rgba(37,99,235,.2)  !important; color:#1e40af !important; }
.alert-primary  { background:var(--yy-orange-subtle) !important; border-color:rgba(238,82,14,.2) !important; color:#9a2f00 !important; }


/* ══════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════ */
.modal-content {
  background: var(--yy-surface) !important;
  border: 1px solid var(--yy-border) !important;
  border-radius: var(--yy-radius-lg) !important;
  box-shadow: var(--yy-shadow-xl) !important;
  overflow: hidden;
}
.modal-header {
  background: var(--yy-surface) !important;
  border-bottom: 1px solid var(--yy-border) !important;
  padding: 18px 24px !important;
}
.modal-title {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--yy-text) !important;
}
.modal-body  { padding: 24px !important; }
.modal-footer {
  background: var(--yy-surface-hover) !important;
  border-top: 1px solid var(--yy-border) !important;
  padding: 14px 24px !important;
}
.btn-close { opacity: .5 !important; }
.btn-close:hover { opacity: 1 !important; }
.modal-backdrop { backdrop-filter: blur(2px); }


/* ══════════════════════════════════════════════════
   DROPDOWN (Bootstrap genel)
   ══════════════════════════════════════════════════ */
.dropdown-menu {
  background: var(--yy-surface) !important;
  border: 1px solid var(--yy-border-hover) !important;
  border-radius: var(--yy-radius) !important;
  box-shadow: var(--yy-shadow-lg) !important;
  padding: 6px !important;
  font-family: var(--font-body) !important;
}
.dropdown-item {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--yy-text-secondary) !important;
  border-radius: var(--yy-radius-xs) !important;
  padding: 8px 12px !important;
  transition: all var(--yy-duration) var(--yy-ease) !important;
}
.dropdown-item:hover {
  background: var(--yy-orange-subtle) !important;
  color: var(--yy-orange-dark) !important;
}
.dropdown-item.active,.dropdown-item:active {
  background: var(--yy-orange) !important;
  color: #fff !important;
}
.dropdown-divider { border-color: var(--yy-border) !important; }


/* ══════════════════════════════════════════════════
   NAV TABS / PILLS
   ══════════════════════════════════════════════════ */
.nav-tabs .nav-link {
  color: var(--yy-text-muted) !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 14px;
  border-color: transparent !important;
  padding: 10px 16px;
  border-radius: var(--yy-radius-xs) var(--yy-radius-xs) 0 0 !important;
  transition: all var(--yy-duration) var(--yy-ease);
}
.nav-tabs .nav-link:hover {
  color: var(--yy-text-secondary) !important;
  background: var(--yy-body) !important;
  border-color: var(--yy-border) !important;
}
.nav-tabs .nav-link.active {
  background: var(--yy-surface) !important;
  border-color: var(--yy-border) var(--yy-border) var(--yy-surface) !important;
  color: var(--yy-orange) !important;
  font-weight: 700;
}
.nav-pills .nav-link {
  color: var(--yy-text-secondary) !important;
  font-weight: 600;
  border-radius: 8px !important;
  padding: 8px 16px;
  transition: all var(--yy-duration) var(--yy-ease);
}
.nav-pills .nav-link.active {
  background: var(--yy-orange) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px var(--yy-orange-glow);
}


/* ══════════════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════════════ */
.yy-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.yy-page-header h1,
.yy-page-header h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--yy-text) !important;
  margin: 0 !important;
}
.yy-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--yy-text-muted);
  margin-top: 4px;
}
.yy-breadcrumb a { color: var(--yy-text-muted); }
.yy-breadcrumb a:hover { color: var(--yy-orange); }
.yy-breadcrumb .sep { opacity: .4; }


/* ══════════════════════════════════════════════════
   TOAST (bildirim popup)
   ══════════════════════════════════════════════════ */
.yy-toast-container {
  position: fixed;
  top: calc(var(--topbar-h) + 16px);
  right: 20px;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.yy-toast {
  pointer-events: all;
  min-width: 300px;
  max-width: 380px;
  background: var(--yy-surface);
  border-radius: var(--yy-radius-sm);
  box-shadow: var(--yy-shadow-xl);
  border-left: 4px solid var(--yy-orange);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: yyToastIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes yyToastIn {
  from { opacity:0; transform:translateX(20px) }
  to   { opacity:1; transform:translateX(0) }
}
.yy-toast.yy-toast--success { border-color: var(--yy-success); }
.yy-toast.yy-toast--error   { border-color: var(--yy-error); }
.yy-toast.yy-toast--warning { border-color: var(--yy-warning); }


/* ══════════════════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════════════════ */
.yy-text-primary    { color: var(--yy-orange) !important; }
.yy-text-navy       { color: var(--yy-navy) !important; }
.yy-text-success    { color: var(--yy-success) !important; }
.yy-text-error      { color: var(--yy-error) !important; }
.yy-text-warning    { color: var(--yy-warning) !important; }
.yy-text-muted-c    { color: var(--yy-text-muted) !important; }

.yy-bg-primary      { background: var(--yy-orange) !important; color:#fff !important; }
.yy-bg-navy         { background: var(--yy-navy) !important; color:#fff !important; }
.yy-bg-surface      { background: var(--yy-surface) !important; }
.yy-bg-body         { background: var(--yy-body) !important; }
.yy-bg-orange-soft  { background: var(--yy-orange-subtle) !important; }

.yy-border          { border: 1px solid var(--yy-border) !important; }
.yy-radius          { border-radius: var(--yy-radius) !important; }
.yy-shadow          { box-shadow: var(--yy-shadow) !important; }
.yy-shadow-lg       { box-shadow: var(--yy-shadow-lg) !important; }

.bg-white  { background: var(--yy-surface) !important; }
.bg-light  { background: var(--yy-body) !important; }
.bg-body   { background: var(--yy-body) !important; }


/* ══════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════ */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.18); }

::selection { background:rgba(238,82,14,.15); color:#7A2800; }


/* ══════════════════════════════════════════════════
   iOS SAFE AREA
   ══════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
  .yy-sidebar { padding-bottom: env(safe-area-inset-bottom,0px); }
  .page-content {
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }
}


/* ══════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════ */
@media print {
  .yy-sidebar,.yy-topbar { display:none !important; }
  .main-content { margin-left:0 !important; }
  .page-content { padding:0 !important; }
}