/* ===============================
   VARDIYA – VIP GRUP TARZI GÖRÜNÜM
   =============================== */

/* Dış kart (VIP #vipContainer gibi) */
#vardiya-wrapper {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  background: #020617;        /* koyu lacivert fon */
  border-radius: 18px;
  color: #e5e7eb;
}

/* Üst kısım: logo + başlık + açıklama vs. */
.vardiya-hero {
  text-align: center;
  margin-bottom: 10px;
}

/* Logo */
.vardiya-logo {
  text-align: center;
  margin-bottom: 8px;
}
.vardiya-logo img {
  max-width: 140px;           /* VIP ile aynı ebat */
  height: auto;
  display: inline-block;
}

/* Başlık: VIP header’a yakın */
.vardiya-title {
  display: inline-block;
  background: linear-gradient(90deg,#facc15,#d97706);
  padding: 18px 16px;
  border-radius: 12px;
  color: #000;
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 8px 0;
}

/* Alt başlık (açıklama satırı) */
.vardiya-subtitle {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #e5e7eb;
}

/* Takip no + Tema satırı (üst meta) */
.vardiya-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
}

/* Takip no rengi VIP’e yakın */
.vardiya-track {
  color: #facc15;
  font-weight: 700;
}

/* Tema yazısı (şimdilik sadece metin, VIP’teki select yoksa bile sorun değil) */
.vardiya-theme {
  text-align: right;
}

/* =========================
   FORM KARTI (VIP formu gibi)
   ========================= */
.vardiya-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #0f172a;
  background: #f9fafb;        /* beyaz kart */
  border-radius: 14px;
  padding: 16px;
}

/* Tekil alanlar */
.vardiya-field {
  margin-bottom: 0;           /* aradaki boşlukları gap yönetecek */
}
.vardiya-field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #0f172a;
}
.vardiya-field input,
.vardiya-field select {
  width: 100%;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  background: #ffffff;
  color: #0f172a;
}
.vardiya-field input::placeholder {
  color: #9ca3af;
}

/* İki sütunlu satırlar (VIP’teki gibi) */
.vardiya-columns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Taşıma Türü / Gönderi Türü / Gönderi Şekli kutuları
   VIP’teki fieldset görünümü */
.vardiya-box {
  flex: 1;
  min-width: 200px;
  padding: 12px;
  border: 2px solid #111827;
  border-radius: 10px;
  font-size: 14px;
  background: #ffffff;
}
.vardiya-box-title {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  color: #0f172a;
}
.vardiya-box label {
  display: block;
  margin-bottom: 4px;
  color: #0f172a;
  font-size: 14px;
}
.vardiya-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

/* Fiyat ve Not satırı da yan yana gelsin istiyorsan;
   PHP’de bu iki alan aynı .vardiya-columns içine alınmışsa
   bu stiller kendiliğinden çalışacak. */

/* Submit alanı */
.vardiya-submit-wrap {
  margin-top: 8px;
}

/* =========================
   VIP tarzı 3D parlak buton
   ========================= */
.vardiya-wa-button,
#vardiya-submit {
  position: relative;
  display: block;
  width: 100%;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  background: linear-gradient(180deg,#ffe892,#f5a623);
  color: #000000;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  box-shadow:
    0 4px 0 #e08a10,
    0 10px 18px rgba(0,0,0,0.35);
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  transition: all 0.15s ease;
  overflow: hidden;
}

/* Üst parlak şerit */
.vardiya-wa-button::before,
#vardiya-submit::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 5px;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.35),
    transparent
  );
  pointer-events: none;
}

.vardiya-wa-button:hover,
#vardiya-submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 #c56f09,
    0 14px 24px rgba(0,0,0,0.45);
}

.vardiya-wa-button:active,
#vardiya-submit:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #8b4e06,
    0 8px 14px rgba(0,0,0,0.35);
}

/* MOBİL: köşeleri açalım istersen */
@media (max-width: 480px) {
  #vardiya-wrapper {
    border-radius: 0;
  }
}
/* === BAŞLIĞI ORTALAMA & TAM GENİŞLİK === */
.vardiya-title {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(90deg,#facc15,#d97706);
  padding: 18px 16px;
  border-radius: 12px;
  color: #000;
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 8px 0;
}

/* === LOGO + NEON ÇİZGİ ANİMASYONU === */
.vardiya-logo {
  text-align: center;
  margin-top: 16px;
  margin-bottom: 10px;
}

/* Logo hafif yaklaşıp–uzaklaşsın */
.vardiya-logo img {
  max-width: 140px;
  height: auto;
  display: inline-block;
  animation: vardiyaLogoFloat 3.2s ease-in-out infinite;
}

/* Logonun altındaki neon çizgi */
.vardiya-logo-line {
  width: 120px;
  height: 3px;
  margin: 4px auto 16px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.9);
  animation: vardiyaLinePulse 2.4s ease-in-out infinite;
}

/* Logo float + zoom animasyonu */
@keyframes vardiyaLogoFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.03);
  }
}

/* Neon çizgi nefes efekti */
@keyframes vardiyaLinePulse {
  0%, 100% {
    opacity: .5;
    transform: scaleX(0.9);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.1);
  }
}
/* =======================================
   TEMA SİSTEMİ: KOYU & AÇIK
   ======================================= */

/* --- KOYU TEMA --- */
#vardiya-wrapper.vardiya-dark {
  background:#020617;
  color:#f9fafb;
}

#vardiya-wrapper.vardiya-dark input,
#vardiya-wrapper.vardiya-dark select,
#vardiya-wrapper.vardiya-dark textarea {
  background:#0f172a !important;
  border:1px solid #1e293b !important;
  color:#f9fafb !important;
}

#vardiya-wrapper.vardiya-dark .vardiya-box {
  background:#0f172a;
  border:1px solid #1e293b;
  color:#f9fafb;
}

/* --- AÇIK TEMA --- */
#vardiya-wrapper.vardiya-light {
  background:#ffffff;
  color:#111827;
}

#vardiya-wrapper.vardiya-light input,
#vardiya-wrapper.vardiya-light select,
#vardiya-wrapper.vardiya-light textarea {
  background:#ffffff !important;
  border:1px solid #d1d5db !important;
  color:#111827 !important;
}

#vardiya-wrapper.vardiya-light .vardiya-box {
  background:#ffffff;
  border:1px solid #d1d5db;
  color:#111827;
}

/* Başlık metni her temada ortada */
.vardiya-title {
  text-align:center !important;
}

/* Logo tema görevi */
.vardiya-logo img {
  width:160px;
  transition:0.25s;
}
/* ===========================
   TEMA BAZLI YAZI RENKLERİ
   =========================== */

/* --- KOYU TEMA (varsayılan) --- */
#vardiya-wrapper.vardiya-dark {
  background: #020617;
  color: #f9fafb;
}

/* Koyu temada tüm metinler açık renk olsun */
#vardiya-wrapper.vardiya-dark .vardiya-title,
#vardiya-wrapper.vardiya-dark .vardiya-subtitle,
#vardiya-wrapper.vardiya-dark .vardiya-meta,
#vardiya-wrapper.vardiya-dark .vardiya-track,
#vardiya-wrapper.vardiya-dark label,
#vardiya-wrapper.vardiya-dark legend,
#vardiya-wrapper.vardiya-dark .vardiya-box-title,
#vardiya-wrapper.vardiya-dark .vardiya-hint {
  color: #f9fafb;
}

/* Form içi dark arka plan + çerçeve */
#vardiya-wrapper.vardiya-dark .vardiya-form {
  background: #020617;
}

#vardiya-wrapper.vardiya-dark .vardiya-field input,
#vardiya-wrapper.vardiya-dark .vardiya-field select {
  background-color: #020617;
  color: #f9fafb;
  border-color: #111827;
}

#vardiya-wrapper.vardiya-dark .vardiya-field input::placeholder {
  color: #6b7280;
}

#vardiya-wrapper.vardiya-dark .vardiya-box {
  background: #020617;
  border-color: #111827;
}

/* --- AÇIK TEMA --- */
#vardiya-wrapper.vardiya-light {
  background: #f9fafb;
  color: #111827;
}

/* Açık temada tüm metinler koyu renk olsun */
#vardiya-wrapper.vardiya-light .vardiya-title,
#vardiya-wrapper.vardiya-light .vardiya-subtitle,
#vardiya-wrapper.vardiya-light .vardiya-meta,
#vardiya-wrapper.vardiya-light .vardiya-track,
#vardiya-wrapper.vardiya-light label,
#vardiya-wrapper.vardiya-light legend,
#vardiya-wrapper.vardiya-light .vardiya-box-title,
#vardiya-wrapper.vardiya-light .vardiya-hint {
  color: #111827;
}

/* Form içi light arka plan + çerçeve */
#vardiya-wrapper.vardiya-light .vardiya-form {
  background: #f9fafb;
}

#vardiya-wrapper.vardiya-light .vardiya-field input,
#vardiya-wrapper.vardiya-light .vardiya-field select {
  background-color: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

#vardiya-wrapper.vardiya-light .vardiya-field input::placeholder {
  color: #9ca3af;
}

#vardiya-wrapper.vardiya-light .vardiya-box {
  background: #ffffff;
  border-color: #e5e7eb;
}
.vardiya-panel-topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  margin-bottom:14px;
  border-radius:12px;
  background:#020617;
  color:#f9fafb;
  border:1px solid #111827;
}

.vardiya-panel-topbar .vp-left .vp-logo-text {
  font-weight:800;
  letter-spacing:0.5px;
  font-size:14px;
}

.vardiya-panel-topbar .vp-right {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
}

.vardiya-panel-topbar .vp-user strong {
  font-weight:700;
}

.vardiya-panel-topbar .vp-logout {
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #f97316;
  color:#f97316;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
}

.vardiya-panel-topbar .vp-logout:hover {
  background:#f97316;
  color:#111827;
}