/* worldtolls.com — Shared "icy" design system.
   ---------------------------------------------------------------------------
   15.09.2026: worldtolls'un tüm YENİ sayfaları (pricing.php, account.php,
   admin/*.php) ve auth sayfaları (uye-girisi/uye-ol, bkz. auth.css'in
   @import'u) BU dosyadaki renk tokenlarını ve bileşenleri paylaşıyor —
   index.php'nin kendi <style> bloğundaki icy paletiyle BİREBİR aynı renkler
   (kasıtlı olarak ayrı dosyalarda tutuluyor çünkü index.php tek dosyalık,
   yüksek trafikli ana sayfa — burada paylaşılan sayfalar için ayrı, tekrar
   kullanılabilir bir CSS dosyası daha uygun). Renk bir yerde değişirse
   BURADAKİ :root ile index.php'nin kendi :root'u birlikte güncellenmeli. */

:root {
  --bg: #dbe9f5;
  --panel: rgba(255,255,255,.86);
  --panel-2: #eef6fc;
  --line: #cde1f0;
  --text: #163a5c;
  --text-soft: #5c7f9e;
  --accent: #2f8fd6;
  --accent-2: #4fc9dc;
  --warn: #a5680a;
  --warn-bg: #fff2dc;
  --warn-line: #f0d9a3;
  --danger: #d3455e;
  --danger-bg: rgba(211,69,94,.1);
  --danger-line: rgba(211,69,94,.35);
  --ok: #1f9d6f;
  --ok-bg: rgba(31,157,111,.1);
  --ok-line: rgba(31,157,111,.35);
  --radius: 18px;
  --shadow: 0 12px 40px rgba(47,143,214,.18), 0 2px 8px rgba(22,58,92,.08);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100%; background: var(--bg); color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
}
body.wt-page {
  background: radial-gradient(circle at 50% 0%, #eef6fc 0%, var(--bg) 60%);
}
a { color: var(--accent); }
h1, h2, h3 { font-family: 'Poppins', sans-serif; letter-spacing: -.2px; margin: 0; }

/* ---- Top nav (pricing.php / account.php / admin/*) ---- */
.wt-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px; flex-wrap: wrap;
}
.wt-nav .brand {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.2px;
  color: var(--text); text-decoration: none; user-select: none;
}
.wt-nav .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.wt-nav .brand b { color: var(--accent); font-weight: 800; }
.wt-nav-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wt-nav-links a.tab {
  font-size: 13.5px; font-weight: 600; color: var(--text-soft); text-decoration: none;
  padding: 9px 14px; border-radius: 999px; transition: all .12s;
}
.wt-nav-links a.tab:hover { color: var(--text); background: var(--panel-2); }
.wt-nav-links a.tab.active { color: #fff; background: var(--accent); }

.wt-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px 80px; }
.wt-wrap.narrow { max-width: 720px; }
.wt-wrap.wide { max-width: 1280px; }

/* ---- Cards / panels (frosted glass) ---- */
.wt-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  padding: 24px;
}
.wt-card + .wt-card { margin-top: 18px; }
.wt-card h2 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.wt-card .sub { font-size: 13px; color: var(--text-soft); margin: 0 0 16px; line-height: 1.5; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 20px; border: none; border-radius: 12px; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13.5px;
  letter-spacing: .2px; text-decoration: none; transition: filter .12s, transform .12s;
}
.btn.block { width: 100%; }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }
.btn.small { padding: 7px 13px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---- Forms ---- */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-soft); margin: 14px 0 6px; }
label:first-of-type { margin-top: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
textarea, select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; font-size: 14px; color: var(--text); font-family: inherit; outline: none;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }

.pw-kural { font-size: 11.5px; margin: 3px 0; color: var(--danger); transition: color .2s; }
.pw-kural.ok { color: var(--ok); }
.pw-kural::before { content: '\2717  '; }
.pw-kural.ok::before { content: '\2713  '; }

/* ---- Messages / alerts ---- */
.msg { border-radius: 12px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
.msg.err { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger); }
.msg.ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); }
.msg.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); }

/* ---- Badges (status pills) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.badge.pending { background: var(--warn-bg); color: var(--warn); }
.badge.approved { background: var(--ok-bg); color: var(--ok); }
.badge.rejected { background: var(--danger-bg); color: var(--danger); }
.badge.neutral { background: var(--panel-2); color: var(--text-soft); }

/* ---- Stat tiles ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat-tile {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px;
}
.stat-tile .n { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 800; color: var(--accent); }
.stat-tile .l { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }

/* ---- Pricing grid ---- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.plan-card {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px; position: relative;
}
.plan-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan-card .flag {
  position: absolute; top: -11px; right: 16px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px;
}
.plan-card .name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; }
.plan-card .price { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 26px; color: var(--accent); }
.plan-card .price small { font-size: 12px; color: var(--text-soft); font-weight: 600; }
.plan-card .desc { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; min-height: 36px; }
.plan-card ul { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--text); display: flex; flex-direction: column; gap: 6px; }
.plan-card ul li { display: flex; align-items: baseline; gap: 6px; }
.plan-card ul li::before { content: '✓'; color: var(--ok); font-weight: 700; }
.plan-card .btn { margin-top: 8px; }

/* ---- Tabs (section switch inside a page) ---- */
.wt-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.wt-tabs button {
  background: none; border: none; padding: 10px 4px; margin-right: 18px; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; border-bottom: 2px solid transparent;
}
.wt-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Simple data table (admin lists) ---- */
table.wt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.wt-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-soft); font-weight: 700; padding: 0 10px 8px; border-bottom: 1px solid var(--line);
}
table.wt-table td { padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.wt-table tr:last-child td { border-bottom: none; }
table.wt-table .num { text-align: right; font-weight: 700; white-space: nowrap; }
table.wt-table input[type="number"], table.wt-table input[type="text"], table.wt-table select { padding: 7px 8px; font-size: 12.5px; }

/* ---- Key display (API key reveal) ---- */
.key-box {
  display: flex; align-items: center; gap: 8px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-family: 'Courier New', monospace; font-size: 13px; color: var(--text);
}
.key-box code { flex: 1; overflow-x: auto; white-space: nowrap; }
.key-box button { flex: 0 0 auto; }

/* ---- Footer note ---- */
.wt-foot-note { font-size: 12px; color: var(--text-soft); text-align: center; margin-top: 26px; }
.wt-foot-note a { color: var(--accent); text-decoration: none; font-weight: 600; }

@media (max-width: 720px) {
  .wt-nav { padding: 14px 16px; }
  .wt-wrap { padding: 0 16px 60px; }
  .wt-card { padding: 18px; }
  table.wt-table { display: block; overflow-x: auto; white-space: nowrap; }
}