/* VPN Merkezi paneli. Dis kaynak yok: sistem yazi tipi yigini ve tek stil dosyasi (CSP 'self'). */

:root {
  --zemin: #f4f6f8;
  --yuzey: #ffffff;
  --kenar: #d8dde4;
  --kenar-koyu: #c2c9d2;
  --metin: #1d252d;
  --soluk: #5a6673;
  --vurgu: #1f5fa8;
  --vurgu-koyu: #174a85;
  --iyi: #1c6b41;
  --iyi-zemin: #e7f3ec;
  --bekle: #8a5a00;
  --bekle-zemin: #fdf3e0;
  --kotu: #9f2b2b;
  --kotu-zemin: #fbebeb;
  --bosluk: 16px;
  --yuvarlak: 8px;
  --golge: 0 1px 2px rgba(16, 24, 40, 0.08);
  --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --tek-aralik: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 15px/1.5 var(--yazi);
}

h1 { font-size: 22px; margin: 0 0 var(--bosluk); }
h2 { font-size: 17px; margin: 0 0 12px; }
p { margin: 0 0 12px; }
a { color: var(--vurgu); }
code { font-family: var(--tek-aralik); font-size: 13px; }

/* ust serit */
.ust { background: var(--yuzey); border-bottom: 1px solid var(--kenar); }
.ust-ic {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px var(--bosluk);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.marka { font-weight: 650; text-decoration: none; color: var(--metin); }
.menu { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.menu a {
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--soluk);
}
.menu a:hover { background: var(--zemin); color: var(--metin); }
.cikis { display: flex; align-items: center; gap: 8px; margin: 0; }
.kim { color: var(--soluk); font-size: 13px; }

.govde { max-width: 1100px; margin: 0 auto; padding: var(--bosluk); }
.alt {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--bosluk) 24px;
  color: var(--soluk);
  font-size: 12px;
}

/* kartlar */
.kart {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
  padding: var(--bosluk);
  margin: 0 0 var(--bosluk);
}
.kart.dar { max-width: 620px; }

/* sayilar */
.sayilar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: var(--bosluk);
}
.sayi {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sayi .deger { font-size: 26px; font-weight: 650; }
.sayi .etiket { color: var(--soluk); font-size: 13px; }

/* tablolar */
.kaydir { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--kenar);
  white-space: nowrap;
}
th { color: var(--soluk); font-weight: 600; font-size: 13px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--zemin); }
td.kirilir { white-space: normal; word-break: break-all; }
td.seri, .seri { font-family: var(--tek-aralik); font-size: 12px; }

/* bilgi listesi */
.bilgi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0; }
.bilgi div { display: flex; flex-direction: column; gap: 2px; }
.bilgi dt { color: var(--soluk); font-size: 12px; }
.bilgi dd { margin: 0; }
.bilgi dd.onemli { font-family: var(--tek-aralik); font-size: 17px; word-break: break-all; }

/* rozetler */
.rozet {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.rozet.aktif { background: var(--iyi-zemin); color: var(--iyi); border-color: #bcdcc9; }
.rozet.pasif { background: var(--bekle-zemin); color: var(--bekle); border-color: #eedcb4; }
.rozet.iptal { background: var(--kotu-zemin); color: var(--kotu); border-color: #eec4c4; }

/* uyarilar */
.uyari {
  padding: 10px 12px;
  border-radius: var(--yuvarlak);
  border: 1px solid transparent;
  margin-bottom: var(--bosluk);
}
.uyari.kotu { background: var(--kotu-zemin); color: var(--kotu); border-color: #eec4c4; }
.uyari.iyi { background: var(--iyi-zemin); color: var(--iyi); border-color: #bcdcc9; }

/* formlar */
form { margin: 0; }
.dikey { display: flex; flex-direction: column; gap: 6px; }
.dikey label { color: var(--soluk); font-size: 13px; margin-top: 6px; }
.satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.satir label { color: var(--soluk); font-size: 13px; }
.ikili { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.suzgec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--bosluk); }
.suzgec label { color: var(--soluk); font-size: 13px; }

input[type="text"], input[type="password"], input[type="search"], input[type="number"],
input[type="date"], input[type="file"], select, textarea {
  font: inherit;
  color: inherit;
  background: var(--yuzey);
  border: 1px solid var(--kenar-koyu);
  border-radius: 6px;
  padding: 8px 10px;
  max-width: 100%;
}
input[type="number"] { width: 100px; }
textarea { width: 100%; font-family: var(--tek-aralik); font-size: 13px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus, .dugme:focus {
  outline: 2px solid var(--vurgu);
  outline-offset: 1px;
}

.dugme {
  display: inline-block;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--kenar-koyu);
  background: var(--yuzey);
  color: var(--metin);
  text-decoration: none;
  cursor: pointer;
}
.dugme:hover { background: var(--zemin); }
.dugme.birincil { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.dugme.birincil:hover { background: var(--vurgu-koyu); }
.dugme.yikici { border-color: #e0b4b4; color: var(--kotu); }
.dugme.yikici:hover { background: var(--kotu-zemin); }
.dugme.sade { color: var(--soluk); }
.dugme.kucuk { padding: 4px 10px; font-size: 13px; }

.eylemler { display: flex; flex-wrap: wrap; gap: 8px; }
.sayfalama { display: flex; align-items: center; gap: 12px; margin: 12px 0 var(--bosluk); }
.liste { margin: 0 0 12px; padding-left: 20px; }
.liste li { margin-bottom: 6px; }
.soluk { color: var(--soluk); }
.kucuk { font-size: 13px; }
.baglanti { text-decoration: none; }
.baglanti:hover { text-decoration: underline; }

@media (max-width: 560px) {
  :root { --bosluk: 12px; }
  .ust-ic { align-items: flex-start; }
  .menu { order: 3; width: 100%; }
  .cikis { margin-left: auto; }
  h1 { font-size: 20px; }
  .sayi .deger { font-size: 22px; }
}