@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

:root {
  --bg:           #f4f6fb;
  --bg-card:      #ffffff;
  --bg-card2:     #f8fafd;
  --bg-input:     #f8fafd;
  --border:       #e3e7f0;
  --border-hover: #b8c4e8;
  --accent:       #3b62f5;
  --accent-light: #eef1fe;
  --accent-glow:  rgba(59,98,245,.10);
  --text:         #18203a;
  --text-2:       #52587a;
  --text-3:       #9aa0bc;
  --success:      #15803d;
  --success-bg:   #f0fdf4;
  --warning:      #b45309;
  --warning-bg:   #fffbeb;
  --danger:       #b91c1c;
  --danger-bg:    #fef2f2;
  --radius:       12px;
  --radius-sm:    8px;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.06);
  --shadow:       0 4px 18px rgba(0,0,0,.08);
  --shadow-lg:    0 8px 36px rgba(0,0,0,.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; font-size: 14px; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
h1,h2,h3,h4,h5,h6 { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text); }

/* NAVİGASYON */
.navbar-esign { background: #fff; border-bottom: 1px solid var(--border); padding: .6rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm); }
.navbar-brand-logo { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--accent); text-decoration: none; }
.navbar-esign .nav-link { color: var(--text-2); font-weight: 500; font-size: .875rem; padding: .35rem .8rem; border-radius: var(--radius-sm); transition: all .15s; }
.navbar-esign .nav-link:hover, .navbar-esign .nav-link.active { color: var(--accent); background: var(--accent-light); }

/* SIDEBAR */
.sidebar { width: 230px; background: #fff; border-right: 1px solid var(--border); min-height: 100vh; padding: 1.25rem 0; position: fixed; left: 0; top: 0; overflow-y: auto; }
.sidebar-logo { padding: .5rem 1.25rem 1.25rem; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.sidebar-section { padding: .1rem .65rem; }
.sidebar-section-label { color: var(--text-3); font-size: .67rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; padding: .75rem .75rem .2rem; }
.sidebar-link { display: flex; align-items: center; gap: .6rem; padding: .52rem .75rem; border-radius: var(--radius-sm); color: var(--text-2); font-size: .85rem; font-weight: 500; text-decoration: none; transition: all .15s; }
.sidebar-link:hover { background: var(--accent-light); color: var(--accent); }
.sidebar-link.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.sidebar-link .icon { width: 16px; text-align: center; opacity: .8; }
.main-content { margin-left: 230px; padding: 2rem; min-height: 100vh; }

/* KARTLAR */
.card-dark { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.card-gradient { background: linear-gradient(135deg, var(--accent-light) 0%, #f3effe 100%); border: 1px solid #dce4fb; border-radius: var(--radius); padding: 1.5rem; }
.card-hover { transition: transform .2s, box-shadow .2s; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* BUTONLAR */
.btn-primary-esign { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: .55rem 1.2rem; font-weight: 600; font-size: .875rem; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.btn-primary-esign:hover { background: #2a50e8; color: #fff; box-shadow: 0 4px 14px rgba(59,98,245,.3); }
.btn-primary-esign:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-outline-esign { background: #fff; color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .55rem 1.2rem; font-weight: 600; font-size: .875rem; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.btn-outline-esign:hover { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.btn-danger-esign { background: var(--danger); color: #fff; border: none; border-radius: var(--radius-sm); padding: .55rem 1.2rem; font-weight: 600; font-size: .875rem; cursor: pointer; transition: all .15s; }
.btn-danger-esign:hover { background: #991b1b; color: #fff; }

/* FORMLAR */
.form-control-dark { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: .58rem .9rem; font-size: .875rem; transition: all .15s; width: 100%; font-family: inherit; }
.form-control-dark:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); background: #fff; color: var(--text); }
.form-control-dark::placeholder { color: var(--text-3); }
.form-label-dark { color: var(--text-2); font-size: .77rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; margin-bottom: .35rem; display: block; }
.form-select-dark { background: var(--bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2352587a' d='M5 7L0 2h10z'/%3E%3C/svg%3E") no-repeat right 10px center; -webkit-appearance: none; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: .58rem 2rem .58rem .9rem; font-size: .875rem; width: 100%; cursor: pointer; }
.form-select-dark:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* BADGE */
.badge-kontör { background: var(--accent); color: #fff; border-radius: 20px; padding: .18rem .7rem; font-size: .73rem; font-weight: 700; display: inline-flex; align-items: center; gap: .25rem; }
.badge-status { border-radius: 20px; padding: .18rem .65rem; font-size: .72rem; font-weight: 600; display: inline-block; }
.badge-bekliyor   { background: var(--warning-bg); color: var(--warning); }
.badge-tamamlandi { background: var(--success-bg); color: var(--success); }
.badge-iptal      { background: var(--danger-bg);  color: var(--danger); }

/* KONTÖR */
.kontor-widget { background: var(--accent-light); border: 1px solid #d4dcfa; border-radius: var(--radius); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.kontor-number { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1; }

/* TABLO */
.table-dark-custom { color: var(--text); border-collapse: collapse; width: 100%; }
.table-dark-custom thead th { color: var(--text-3); font-size: .71rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; padding: .45rem 1rem; border-bottom: 2px solid var(--border); background: var(--bg-card2); }
.table-dark-custom tbody tr { transition: background .1s; }
.table-dark-custom tbody tr:hover { background: var(--bg-card2); }
.table-dark-custom tbody td { padding: .8rem 1rem; font-size: .86rem; vertical-align: middle; border-bottom: 1px solid var(--border); }

/* STAT KART */
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; text-align: center; box-shadow: var(--shadow-sm); transition: all .2s; }
.stat-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.stat-number { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.9rem; font-weight: 700; color: var(--accent); line-height: 1.1; }
.stat-label  { font-size: .71rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-top: .25rem; }

/* ALERT */
.alert-dark         { border-radius: var(--radius-sm); padding: .75rem 1rem; font-size: .875rem; border: 1px solid; }
.alert-info-dark    { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.alert-warning-dark { background: var(--warning-bg); border-color: #fde68a; color: var(--warning); }
.alert-danger-dark  { background: var(--danger-bg); border-color: #fecaca; color: var(--danger); }

/* AUTH */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 2rem 1rem; }
.auth-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 2.25rem; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); }
.auth-logo { text-align: center; margin-bottom: 1.75rem; }
.auth-logo h1 { font-size: 1.7rem; color: var(--accent); }
.auth-logo p  { color: var(--text-2); font-size: .875rem; margin-top: .25rem; }
.auth-divider { text-align: center; position: relative; margin: 1.25rem 0; }
.auth-divider::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background: var(--border); }
.auth-divider span { position: relative; background: #fff; padding: 0 .75rem; color: var(--text-3); font-size: .8rem; }

/* UPLOAD */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; cursor: pointer; transition: all .2s; background: var(--bg-card2); }
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--accent); background: var(--accent-light); }
.upload-icon { font-size: 2.5rem; margin-bottom: .75rem; opacity: .65; }

/* PDF CONTAINER */
.pdf-container { position: relative; background: #dde1ea; border-radius: var(--radius); overflow: hidden; cursor: crosshair; border: 1px solid var(--border); }
.signature-placeholder { position: absolute; border: 2px dashed var(--accent); border-radius: 6px; background: rgba(59,98,245,.1); cursor: move; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--accent); font-weight: 600; user-select: none; min-width: 110px; min-height: 44px; }
.sig-handle { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; background: var(--accent); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .6rem; }

/* STEPS */
.steps-bar { display: flex; align-items: center; margin-bottom: 2rem; }
.step-item { display: flex; align-items: center; gap: .45rem; flex: 1; }
.step-circle { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; flex-shrink: 0; border: 2px solid var(--border); color: var(--text-3); background: #fff; transition: all .2s; }
.step-circle.active { border-color: var(--accent); color: var(--accent); }
.step-circle.done   { border-color: var(--success); background: var(--success); color: #fff; }
.step-label { font-size: .78rem; color: var(--text-3); font-weight: 500; }
.step-label.active { color: var(--text); font-weight: 600; }
.step-line { flex: 1; height: 1px; background: var(--border); margin: 0 .4rem; }
.step-line.done { background: var(--success); }

/* MODAL */
.modal-dark .modal-content { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); box-shadow: var(--shadow-lg); }
.modal-dark .modal-header { border-bottom: 1px solid var(--border); padding: 1.1rem 1.5rem; }
.modal-dark .modal-body   { padding: 1.5rem; }
.modal-dark .modal-footer { border-top: 1px solid var(--border); padding: 1rem 1.5rem; }

/* ÖDEME KART */
.payment-card { background: var(--bg-card2); border: 2px solid var(--border); border-radius: var(--radius); padding: 1.25rem; cursor: pointer; transition: all .15s; text-align: center; position: relative; }
.payment-card:hover, .payment-card.selected { border-color: var(--accent); background: var(--accent-light); }
.payment-card.featured { border-color: var(--accent); }
.payment-card .featured-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; padding: .12rem .7rem; border-radius: 20px; }
.payment-card .pkg-price { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.payment-card .pkg-kontör { font-size: 2.2rem; font-weight: 800; color: var(--text); }

/* DAVET SATIRI */
.invitee-row { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; background: var(--bg-card2); border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: .5rem; }
.invitee-row .invitee-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-light); border: 1px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; }

/* TİMELİNE */
.timeline-item { display: flex; gap: .9rem; padding-bottom: 1.25rem; position: relative; }
.timeline-item::before { content:''; position:absolute; left:19px; top:40px; bottom:0; width:2px; background: var(--border); }
.timeline-item:last-child::before { display:none; }
.timeline-dot { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-card2); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.timeline-dot.signed  { border-color: var(--success); background: var(--success-bg); }
.timeline-dot.pending { border-color: var(--warning); background: var(--warning-bg); }

/* QR VERIFY */
.qr-verify-page { background: var(--bg); min-height: 100vh; padding: 3rem 1rem; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { margin-left: 0; padding: 1rem; }
}

/* ANİMASYON */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.fade-in { animation: fadeIn .3s ease forwards; }