/* VIPSMS (ÖZEL) – Status Colors Restore (CSS + JS mapping friendly) */

/* Keep your current theme (do NOT change layout drastically) */
body{
  background: radial-gradient(1200px 600px at 20% 0%, #0a1228 0%, #050812 55%, #03050c 100%);
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(22,30,60,0.96), rgba(14,20,42,0.96)) !important;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 50px rgba(0,0,0,.75);
  color:#fff !important;
}

/* Form fields readable */
input,textarea,select{
  background: rgba(10,14,30,0.98) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.28);
  border-radius:8px;
  padding:10px 12px;
  outline:none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
  text-shadow:none !important;
}
input::placeholder,textarea::placeholder{
  color: rgba(255,255,255,.78) !important;
  text-shadow:none !important;
}

/* --- STATUS BADGES ---
   We can't reliably style by text with pure CSS.
   So status-badges.js adds one of these classes to the badge element:
   .st-onay, .st-beklemede, .st-gonderildi, .st-tamamlandi, .st-iptal
*/
.badge, .pill, .status, .status-badge, .durum-badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.18);
  text-shadow:none !important;
  color:#fff !important;
  background: rgba(255,255,255,.10); /* fallback if JS not loaded */
}

/* Colored states */
.st-onay{ background:#c9a227 !important; color:#0b0b0b !important; border-color:rgba(201,162,39,.60) !important; }
.st-beklemede{ background:#17a2b8 !important; border-color:rgba(23,162,184,.60) !important; }
.st-gonderildi{ background:#1e90ff !important; border-color:rgba(30,144,255,.65) !important; }
.st-tamamlandi{ background:#28a745 !important; border-color:rgba(40,167,69,.65) !important; }
.st-iptal{ background:#dc3545 !important; border-color:rgba(220,53,69,.65) !important; }


/* ====== LANDING (index.php) ====== */
.vipsms-bg{ min-height:100vh; }

.topbar{
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(10px);
}
.topbar .container{ max-width:1100px; margin:0 auto; padding:14px 16px; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; }
.brand{ font-weight:800; letter-spacing:.4px; color:#fff; }
.topbar-links a{
  color:rgba(255,255,255,.85);
  text-decoration:none;
  margin-left:16px;
  font-weight:600;
}
.topbar-links a:hover{ color:#fff; }

.container{ max-width:1100px; margin:0 auto; padding:0 16px; }

.hero-grid{
  display:grid;
  grid-template-columns:1.4fr .9fr;
  gap:18px;
  align-items:start;
}
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; }
}

.card.glass{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(16,24,44,.55);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  border-radius:14px;
  padding:22px;
}

.hero-title{ font-size:34px; font-weight:900; color:#fff; }
.hero-sub{
  margin-top:10px;
  color:rgba(255,255,255,.78);
  line-height:1.55;
  font-size:14px;
  max-width:740px;
}
.hero-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:10px;
  font-weight:800;
  text-decoration:none;
  user-select:none;
}
.btn-primary{
  background:linear-gradient(180deg,#1e88ff,#1567d8);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
.btn-outline{
  background:transparent;
  color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.20);
}
.btn-outline:hover{ border-color:rgba(255,255,255,.35); color:#fff; }
.w-100{ width:100%; }

.hero-mini{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.mini-item{ display:flex; gap:10px; align-items:center; }
.mini-dot{
  width:8px;height:8px;border-radius:99px;
  background:#1e88ff;
  box-shadow:0 0 18px rgba(30,136,255,.55);
}
.mini-text{ color:rgba(255,255,255,.78); font-weight:600; font-size:13px; }

.sample-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.badge{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.9);
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}
.sample-mini{ color:rgba(255,255,255,.65); font-weight:700; font-size:12px; }

.sample-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.sample-label{ color:rgba(255,255,255,.75); font-weight:700; font-size:12px; }
.sample-value{ color:#fff; font-weight:900; font-size:13px; }

.sample-note{
  margin-top:12px;
  color:rgba(255,255,255,.70);
  font-size:12px;
  line-height:1.45;
}

.footer-note{
  margin-top:16px;
  color:rgba(255,255,255,.55);
  font-weight:700;
  font-size:12px;
}