/* ============================================================
   Online Koçunuz — Dekont Yükle sayfası stilleri
   Tüm kurallar .okt-dekont-yukle altına scope'landı (çakışma önleme).
   Token'lar globalde tanımlı (style.css): var(--primary-500) vb.
   Mobil öncelikli.
   ============================================================ */

/* ---- HERO ---- */
.okt-dekont-yukle .okt-dy-crumbs{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--fg-muted); margin-bottom:16px;
}
.okt-dekont-yukle .okt-dy-crumbs a{ color:var(--fg-muted); text-decoration:none; }
.okt-dekont-yukle .okt-dy-crumbs a:hover{ color:var(--primary-700); }
.okt-dekont-yukle .okt-dy-crumbs span[aria-current]{ color:var(--ink-900); font-weight:600; }

.okt-dekont-yukle .okt-dy-pill{
  display:inline-flex; align-items:center;
  padding:6px 13px; border-radius:999px;
  background:#EEF1FF; color:#1E3AE2;
  font-size:12px; font-weight:600; letter-spacing:.01em;
}
.okt-dekont-yukle .okt-dy-title{
  margin:14px 0 12px; color:var(--ink-900);
  font-size:30px; line-height:1.15; max-width:680px;
}
.okt-dekont-yukle .okt-dy-lead{
  max-width:600px; color:var(--fg-muted); line-height:1.6; font-size:15px;
}
.okt-dekont-yukle .okt-dy-lead strong{ color:var(--ink-900); }

/* ---- ANA BÖLÜM ---- */
.okt-dekont-yukle .okt-dy-main{ padding:40px 0; background:#fff; }

.okt-dekont-yukle .okt-dy-card{
  padding:24px; max-width:600px; margin:0 auto;
}
.okt-dekont-yukle .okt-dy-card__title{ color:var(--ink-900); margin:0 0 6px; }
.okt-dekont-yukle .okt-dy-card__sub{
  font-size:13.5px; color:var(--fg-muted); margin:0 0 24px; line-height:1.55;
}

/* ---- FORM ---- */
.okt-dekont-yukle .okt-dy-form{ display:flex; flex-direction:column; gap:18px; }
.okt-dekont-yukle .okt-dy-field{ display:flex; flex-direction:column; }
.okt-dekont-yukle .okt-dy-field > label{
  font-size:12px; font-weight:600; color:var(--ink-500);
  margin-bottom:6px; display:block;
}

.okt-dekont-yukle .okt-dy-form input[type="text"],
.okt-dekont-yukle .okt-dy-form input[type="number"]{
  width:100%; height:44px; padding:0 14px;
  border:1px solid var(--border); border-radius:9px;
  font-size:14px; font-family:var(--font-sans); color:var(--ink-900);
  outline:none; background:#fff;
  transition:border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.okt-dekont-yukle .okt-dy-form input[type="text"]:focus,
.okt-dekont-yukle .okt-dy-form input[type="number"]:focus{
  border-color:var(--primary-500);
  box-shadow:0 0 0 3px rgba(59,91,255,.12);
}
.okt-dekont-yukle .okt-dy-form input::placeholder{ color:var(--ink-400); }

/* Salt okunur sipariş kodu */
.okt-dekont-yukle .okt-dy-readonly{
  background:var(--ink-10) !important;
  color:var(--ink-700) !important;
  font-weight:700; letter-spacing:.02em;
  cursor:default;
}
.okt-dekont-yukle .okt-dy-hint{
  font-size:11px; color:var(--fg-muted); margin:6px 0 0; line-height:1.5;
}

/* ---- DOSYA SEÇİCİ ---- */
.okt-dekont-yukle .okt-dy-file-input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}
.okt-dekont-yukle .okt-dy-drop{
  display:flex; align-items:center; gap:14px;
  padding:18px 16px;
  border:1.5px dashed var(--border); border-radius:11px;
  background:#fafbff; cursor:pointer;
  transition:border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.okt-dekont-yukle .okt-dy-drop:hover{
  border-color:var(--primary-500); background:#f4f6ff;
}
.okt-dekont-yukle .okt-dy-file-input:focus-visible + .okt-dy-filename,
.okt-dekont-yukle .okt-dy-file-input:focus-visible ~ .okt-dy-drop{
  border-color:var(--primary-500); box-shadow:0 0 0 3px rgba(59,91,255,.18);
}
.okt-dekont-yukle .okt-dy-drop__ic{
  width:42px; height:42px; flex-shrink:0; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:#EEF1FF; color:var(--primary-700);
}
.okt-dekont-yukle .okt-dy-drop__text{ display:flex; flex-direction:column; gap:2px; }
.okt-dekont-yukle .okt-dy-drop__main{ font-size:14px; font-weight:600; color:var(--ink-900); }
.okt-dekont-yukle .okt-dy-drop__sub{ font-size:12px; color:var(--fg-muted); }

.okt-dekont-yukle .okt-dy-filename{
  font-size:12.5px; color:var(--primary-700); font-weight:600;
  margin:8px 0 0; word-break:break-all;
}

/* ---- SONUÇ MESAJI ---- */
.okt-dekont-yukle .okt-dy-result{
  padding:14px 16px; border-radius:10px;
  font-size:13.5px; line-height:1.55; font-weight:500;
  border:1px solid transparent;
}
.okt-dekont-yukle .okt-dy-result.is-info{
  background:#EEF1FF; color:#1E3AE2; border-color:#d4ddff;
}
.okt-dekont-yukle .okt-dy-result.is-success{
  background:#E9F8EF; color:#136f3b; border-color:#bfe9cf;
}
.okt-dekont-yukle .okt-dy-result.is-error{
  background:#FDECEC; color:#b3261e; border-color:#f5c6c3;
}

/* ---- BUTON ---- */
.okt-dekont-yukle .okt-dy-submit{ justify-content:center; width:100%; }
.okt-dekont-yukle .okt-dy-submit.is-loading{ opacity:.7; cursor:progress; }
.okt-dekont-yukle .okt-dy-submit:disabled{ cursor:not-allowed; }

.okt-dekont-yukle .okt-dy-foot{
  font-size:12.5px; color:var(--fg-muted); margin:0; text-align:center; line-height:1.55;
}
.okt-dekont-yukle .okt-dy-foot a{ color:var(--primary-700); text-decoration:underline; }

/* ============================================================
   Tablet / Masaüstü
   ============================================================ */
@media (min-width:768px){
  .okt-dekont-yukle .okt-dy-title{ font-size:38px; }
  .okt-dekont-yukle .okt-dy-main{ padding:56px 0; }
  .okt-dekont-yukle .okt-dy-card{ padding:32px; }
  .okt-dekont-yukle .okt-dy-submit{ width:auto; align-self:flex-start; }
}