:root{
  /* Light, professional palette (open / airy) */
  --bg:#f7f8ff;
  --card: rgba(255,255,255,0.92);
  --muted:#52607a;
  --text:#0f172a;

  /* Brand accents (blue + cyan) */
  --accent:#5b7cfa;
  --accent2:#59c3ff;

  --danger:#ef4444;
  --ok:#22c55e;

  --border: rgba(15,23,42,0.12);
  --shadow: 0 14px 34px rgba(15,23,42,0.08);
  --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  /* Light background with subtle brand gradients */
  background:
    radial-gradient(900px 520px at 16% 0%, rgba(91,124,250,0.14) 0%, rgba(247,248,255,0) 55%),
    radial-gradient(720px 460px at 86% 14%, rgba(89,195,255,0.11) 0%, rgba(247,248,255,0) 60%),
    linear-gradient(180deg, #f9fbff 0%, #eef5ff 100%);
  color:var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:24px}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 18px; border:1px solid var(--border);
  background: rgba(255,255,255,0.82); backdrop-filter: blur(10px);
  border-radius: var(--radius);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.logoBox{
  width:34px;
  height:34px;
  border-radius:10px;
  background: rgba(79,70,229,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(79,70,229,0.22);
  font-weight:900;
}
.badge{font-size:12px; padding:3px 9px; border:1px solid var(--border); border-radius:999px; color: var(--muted)}
.navlinks{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background: rgba(15,23,42,0.04);
  color: var(--text); cursor:pointer;
  font-weight: 600;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, filter 140ms ease;
}
.btn:hover{ background: rgba(15,23,42,0.06); text-decoration:none; }
.btn:active{ transform: translateY(0); }
.btn.primary{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 58%, var(--accent) 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(79,70,229,0.22);
}
.btn.primary:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.btn.danger{background: rgba(239,68,68,0.10); color: #b91c1c; border-color: rgba(239,68,68,0.22)}
.btn.ghost{background: transparent}
.btn:disabled{opacity:0.6; cursor:not-allowed}
.h1{font-size:38px; margin:30px 0 8px}
.p{color: var(--muted); line-height:1.6}
.grid{display:grid; gap:18px}
.grid.two{grid-template-columns: 1fr 1fr}
@media(max-width:880px){.grid.two{grid-template-columns: 1fr}}
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}
.card h2{margin:0 0 10px; font-size:18px}
label{display:block; font-size:13px; color: var(--muted); margin: 12px 0 6px}
input, select, textarea{
  width:100%; padding:11px 12px; border-radius:12px;
  border:1px solid var(--border); background: rgba(255,255,255,0.92);
  color: var(--text); outline:none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

input::placeholder, textarea::placeholder{ color: rgba(71,85,105,0.70); }

input:focus, select:focus, textarea:focus{
  border-color: rgba(79,70,229,0.55);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.18);
  background: rgba(255,255,255,0.98);
}

/* Chrome/Edge autofill can force odd colors on inputs.
   Force it to match the light theme so the UI stays consistent. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.98) inset !important;
  border: 1px solid var(--border);
  transition: background-color 9999s ease-out 0s;
}

/* Native select dropdown (options) readability on Windows/Chrome.
   The page uses a dark theme, but the OS dropdown background is often light.
   Make option text dark so it doesn't look "invisible". */
select option{
  color:#071022;
  background:#ffffff;
}
textarea{min-height:110px; resize:vertical}
.row{display:flex; gap:12px}
.row > *{flex:1}
.table{
  width:100%; border-collapse: collapse; overflow:hidden; border-radius: 12px;
  border:1px solid var(--border);
}
.table th,.table td{padding:10px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top}
.table th{font-size:12px; color: var(--muted); font-weight:600; background: rgba(15,23,42,0.04)}
.table tr:hover td{background: rgba(15,23,42,0.04)}
.kbd{font-family:var(--mono); font-size:12px; padding:2px 6px; border:1px solid var(--border); border-radius:8px; color: var(--muted)}
.flash{padding:10px 12px; border-radius:12px; border:1px solid var(--border); margin:12px 0}
.flash.ok{background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.22)}
.flash.err{background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.22)}
.small{font-size:12px; color: var(--muted)}
.hr{height:1px; background: var(--border); margin:16px 0}
.status{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px;
  border:1px solid var(--border); font-size:12px; color: var(--muted); background: rgba(15,23,42,0.03);
}
.status.open{color:#4338ca; background: rgba(79,70,229,0.10); border-color: rgba(79,70,229,0.22)}
.status.submitted{color:#b45309; background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.26)}
.status.approved{color:#15803d; background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.22)}
.status.rejected{color:#b91c1c; background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.22)}
.status.archived{color:#334155; background: rgba(15,23,42,0.06); border-color: rgba(15,23,42,0.16)}
.footer{margin:28px 0 0; color: var(--muted); font-size:12px}


.pill{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  color: var(--muted);
  background: rgba(15,23,42,0.03);
}
.pill.ok{
  color: var(--ok);
  border-color: rgba(34,197,94,0.28);
  background: rgba(34,197,94,0.12);
}
.pill.err{
  color: #b91c1c;
  border-color: rgba(239,68,68,0.28);
  background: rgba(239,68,68,0.12);
}
.pill.warn{
  color: #b45309;
  border-color: rgba(245,158,11,0.26);
  background: rgba(245,158,11,0.14);
}

input[type="checkbox"]{ width:auto; }


/* Template picker (custom dropdown) */

.templatePicker{ position:relative; display:flex; align-items:center; gap:12px; }
.templatePicker .btn{ padding:10px 12px; }
.templatePicker .chev{ margin-left:10px; opacity:0.8; }
.templateMenu{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 320px;
  max-height: 300px;
  overflow:auto;
  background: #ffffff;
  border:1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 9999;
}
.templateOpt{
  /* Reset native button styling (Windows/Chrome can be stubborn) */
  all: unset;
  display:block;
  width:100%;
  box-sizing:border-box;
  text-align:left;
  padding: 10px 10px;
  border-radius: 10px;
  background: transparent;
  color: #071022;
  cursor: pointer;
  font-size: 14px;
}
.templateOpt:hover{ background: rgba(0,0,0,0.06); }
.templateOpt[data-id=""]{ color: rgba(7,16,34,0.55); }

.templateOpt:focus{ outline: 2px solid rgba(79,70,229,0.55); outline-offset: 2px; }

.muted{ color: var(--muted); }

/* v1.6.8 – Yeni Talep: şablon chipleri (JS'siz, tıklayınca sayfa yenilenir) */
.tplChipsWrap{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.tplChips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; max-width: 560px; }
.tplChip{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.04);
  border:1px solid rgba(15,23,42,0.10);
  color: var(--text);
  text-decoration:none;
  font-size: 13px;
  line-height: 1;
}
.tplChip:hover{ background: rgba(15,23,42,0.06); }
.tplChip.active{ background: rgba(79,70,229,0.12); border-color: rgba(79,70,229,0.30); color: #4338ca; }

/* Templates page: nested cards look heavy; make list cards flatter */
.templateCard{
  box-shadow: none;
  background: rgba(15,23,42,0.02);
}
.templateCard:hover{
  background: rgba(15,23,42,0.03);
}

details > summary{
  cursor:pointer;
  user-select:none;
}

details > summary::-webkit-details-marker{ display:none; }
details > summary:before{
  content: '▸';
  display:inline-block;
  margin-right: 8px;
  opacity: 0.8;
}
details[open] > summary:before{ content: '▾'; }

/* Anchor scroll nicety (template seçince #belgeler'e gel) */
#belgeler{ scroll-margin-top: 18px; }

/* Turnstile widget container */
.turnstile{ margin-top: 6px; }

/* Vendor upload: custom file input (hide native file name) */
.filePick{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fileInput{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.fileBtn{ padding:9px 12px; border-radius:12px; }
.fileChosen{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.04);
  color: rgba(255,255,255,0.8);
  font-weight:900;
}
.fileChosen.ok{
  border-color: rgba(34,197,94,0.28);
  background: rgba(34,197,94,0.16);
  color: var(--ok);
}

/* Templates page: doc list spacing (prevent badge overlap) */
.templateDocList{
  margin: 10px 0 0;
  padding-left: 20px;
}
.templateDocList li{
  margin: 8px 0;
  line-height: 1.65;
}
.templateDocList .badge{
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
  vertical-align: middle;
}

/* JS açıkken manuel upload butonunu gizle (dosya seçince otomatik yüklenir) */
html.js .js-hide { display: none !important; }

/* ==========================================
   RESPONSIVE — Mobil & Tablet
   ========================================== */

/* --- Tablet (max 1024px) --- */
@media (max-width: 1024px) {
  .container { max-width: 100%; padding: 16px; }
  .nav { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .navlinks { gap: 10px; }
  .card { padding: 14px; }
  .table th, .table td { padding: 8px 6px; font-size: 12px; }
}

/* --- Mobil (max 768px) --- */
@media (max-width: 768px) {
  .container { padding: 10px; }

  /* Navbar: dikey stack */
  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
  }
  .brand {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
  }
  .brand .badge { font-size: 10px; padding: 2px 6px; }
  .navlinks {
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .navlinks a, .navlinks .btn {
    font-size: 12px;
    padding: 7px 10px;
  }

  /* Kartlar */
  .card { padding: 12px; border-radius: 10px; }
  .card h2 { font-size: 16px; }

  /* Grid: tek sütun */
  .grid.two { grid-template-columns: 1fr; }

  /* Tablo: yatay kaydırma */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table th, .table td { white-space: nowrap; padding: 8px 8px; font-size: 11px; }

  /* Butonlar */
  .btn { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
  .btn.primary { padding: 10px 14px; }

  /* Form elemanları */
  input, select, textarea { padding: 10px; font-size: 14px; border-radius: 10px; }
  textarea { min-height: 80px; }
  label { font-size: 12px; margin: 8px 0 4px; }

  /* Row: dikey stack */
  .row { flex-direction: column; gap: 8px; }

  /* Flash */
  .flash { font-size: 13px; padding: 8px 10px; border-radius: 10px; }

  /* Footer */
  .footer { font-size: 11px; text-align: center; margin-top: 20px; }

  /* Genel font boyutu */
  .h1 { font-size: 26px; margin: 20px 0 6px; }
  .p { font-size: 13px; }
  .small { font-size: 11px; }
  .pill { font-size: 10px; padding: 2px 8px; }
  .status { font-size: 11px; padding: 2px 8px; }
  .badge { font-size: 10px; padding: 2px 6px; }
  .kbd { font-size: 11px; }

  /* Template picker */
  .templateMenu { min-width: unset; left: 0; right: 0; }
  .tplChips { max-width: 100%; justify-content: flex-start; }
  .tplChipsWrap { justify-content: flex-start; }
  .tplChip { font-size: 11px; padding: 6px 8px; }

  /* Vendor linki input */
  .input[readonly] { font-size: 11px; }
}

/* --- Küçük mobil (max 480px) --- */
@media (max-width: 480px) {
  .container { padding: 6px; }
  .nav { padding: 8px 10px; border-radius: 8px; }
  .navlinks a, .navlinks .btn { font-size: 11px; padding: 6px 8px; }
  .brand { font-size: 13px; }
  .logoBox { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }

  .card { padding: 10px; border-radius: 8px; }
  .card h2 { font-size: 15px; margin-bottom: 6px; }

  .btn { padding: 7px 10px; font-size: 12px; border-radius: 8px; }

  input, select, textarea { padding: 9px; font-size: 13px; }

  .table th, .table td { padding: 6px 5px; font-size: 10px; }

  /* Dashboard metric kartları */
  .metric-card { padding: 10px !important; }
  .metric-card .metric-value { font-size: 1.4em !important; }

  .h1 { font-size: 22px; }
  .footer { font-size: 10px; }
}

/* --- Touch cihazlar: daha büyük dokunma alanları --- */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; min-width: 44px; }
  .navlinks a { min-height: 40px; display: inline-flex; align-items: center; }
  input, select, textarea { min-height: 44px; }
  .table td a.btn { min-height: 36px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
  select { padding-right: 30px; }
  details > summary { padding: 6px 0; }
}

/* --- Yatay kaydırılabilir tablo wrapper --- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}
@media (max-width: 768px) {
  .table-responsive { border-radius: 10px; }
  .table-responsive .table { min-width: 600px; }
}

/* --- Dashboard grid responsive --- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
@media (max-width: 480px) {
  .dash-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* --- Form layout (search/filter) responsive --- */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
}
@media (max-width: 768px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar > * { width: 100%; }
  .filter-bar input, .filter-bar select { width: 100%; }
}

/* --- Bildirim badge responsive --- */
@media (max-width: 768px) {
  .navlinks a[href*="notifications"] span {
    top: -4px;
    right: -6px;
    font-size: 0.6em;
    padding: 1px 4px;
  }
}

/* --- Print --- */
@media print {
  .nav, .navlinks, .footer, .btn, form { display: none !important; }
  .container { max-width: 100%; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  body { background: #fff; }
}