/* QR Tank Takip — Modern Industrial Glassmorphism */
.glass-card {
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}
.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.08);
}
.gauge-circle {
  stroke-dasharray: 251.2;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s ease-out;
}
/* Sayısal okumalar titremesin (data-mono kuralı) */
.tabular { font-variant-numeric: tabular-nums; }

/* Grafik katmanı */
.chart-tooltip {
  position: absolute; pointer-events: none; z-index: 30;
  background: rgba(3, 14, 34, 0.92); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; padding: 8px 12px; font-size: 12px; line-height: 18px;
  color: #d7e2ff; box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  white-space: nowrap; transform: translate(-50%, calc(-100% - 12px));
}
.chart-wrap { position: relative; }

/* İnce kaydırma çubukları */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a354b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #404850; }

/* Form alanları: koyu tema + Dairy Blue odak parlaması */
.input-dark {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  color: #d7e2ff; border-radius: 0.5rem; padding: 10px 14px; width: 100%;
  font-size: 14px; transition: all .2s ease; outline: none;
}
.input-dark:focus { border-color: #0077b6; box-shadow: 0 0 0 3px rgba(0,119,182,0.35); }
.input-dark::placeholder { color: #8a919b; }

.btn-primary {
  background: #0077b6; color: #f3f7ff; border-radius: 0.5rem; padding: 10px 18px;
  font-weight: 600; font-size: 14px; transition: all .2s ease; border: 1px solid transparent;
}
.btn-primary:hover { background: #0088cf; box-shadow: 0 4px 14px rgba(0,119,182,0.4); }
.btn-glass {
  background: transparent; color: #d7e2ff; border: 1px solid rgba(255,255,255,0.25);
  border-radius: 0.5rem; padding: 10px 18px; font-weight: 500; font-size: 14px;
  backdrop-filter: blur(8px); transition: all .2s ease;
}
.btn-glass:hover { background: rgba(255,255,255,0.08); }

/* Kritik alarm nabız animasyonu */
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255,180,171,.45);} 70% { box-shadow: 0 0 0 8px rgba(255,180,171,0);} 100% { box-shadow: 0 0 0 0 rgba(255,180,171,0);} }
.pulse-critical { animation: pulse-ring 2s infinite; }

/* Tablolar */
.table-dark th {
  background: #2a354b; color: #bfc7d1; font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; font-weight: 600; padding: 12px 16px; text-align: left;
}
.table-dark td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 14px; }
.table-dark tr:hover td { background: rgba(255,255,255,0.03); }

/* Sayfa geçiş yumuşatma */
body { opacity: 0; transition: opacity .25s ease; }
body.ready { opacity: 1; }

/* ================= AÇIK TEMA UYARLAMALARI ================= */
html.light .glass-card {
  background-color: #ffffff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid #e0e3e5;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
}
html.light .glass-card:hover {
  border-color: #bfc7d1;
  background-color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.025);
}
/* Koyu temaya özgü beyaz-tabanlı çizgi/dolgu sınıfları açık temada koyuya döner */
html.light [class*="border-white/"] { border-color: rgba(25,28,30,0.12); }
html.light [class*="bg-white/"] { background-color: rgba(25,28,30,0.04); }
html.light .hover\:bg-white\/5:hover { background-color: rgba(25,28,30,0.04); }
html.light .chart-tooltip {
  background: rgba(255,255,255,0.97); border: 1px solid #e0e3e5;
  color: #191c1e; box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
html.light .input-dark {
  background: #ffffff; border: 1px solid #bfc7d1; color: #191c1e;
}
html.light .input-dark:focus { border-color: #0077b6; box-shadow: 0 0 0 3px rgba(0,119,182,0.2); }
html.light .input-dark::placeholder { color: #707881; }
html.light .btn-glass { color: #191c1e; border-color: #bfc7d1; }
html.light .btn-glass:hover { background: rgba(25,28,30,0.05); }
html.light .table-dark th { background: #eceef0; color: #404850; }
html.light .table-dark td { border-bottom-color: rgba(25,28,30,0.08); }
html.light .table-dark tr:hover td { background: rgba(25,28,30,0.03); }
html.light ::-webkit-scrollbar-thumb { background: #bfc7d1; }
html.light ::-webkit-scrollbar-thumb:hover { background: #707881; }
