/* ===========================================================
   Albayrak Elektronik - Özel Stiller
   Tailwind'i tamamlayan ince dokunuşlar
   =========================================================== */

:root {
  --brand: #2563eb;
  --accent: #06b6d4;
  --ink: #0b1220;
}

html { -webkit-tap-highlight-color: transparent; }
body { overflow-x: hidden; }

/* Modern, ince kaydırma çubuğu */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #e2e8f0; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Açık (light) içerik kartı — koyu hero/footer dışında kullanılır */
.card-soft {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 34px -18px rgba(15,23,42,.14);
}

/* Izgara desenli arka plan (hero için) */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(148,163,184,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Yumuşak ışıltı (glow) */
.glow {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04),
              0 20px 50px -20px rgba(6,182,212,0.35);
}

/* Cam efekti kart */
.glass {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(10px);
}

/* Gradyan metin */
.text-gradient {
  background: linear-gradient(90deg, #fff, #67e8f9, #fff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* Kart üzerine gelince kenarlık parlaması */
.card-hover {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.card-hover:hover {
  transform: translateY(-6px);
  border-color: rgba(6,182,212,0.45);
  box-shadow: 0 24px 60px -28px rgba(6,182,212,0.5);
}

/* Üstte ince ilerleme çizgisi */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  z-index: 60; transition: width .1s linear;
}

/* ---------- İnteraktif sekmeler ---------- */
.tab-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.25rem; border-radius: .9rem;
  font-weight: 600; font-size: .95rem; color: #475569;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  transition: all .25s; cursor: pointer;
}
.tab-btn:hover { color: #0f172a; background: #e2e8f0; }
.tab-active {
  color: #fff !important;
  background: linear-gradient(90deg, var(--brand), var(--accent)) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 32px -12px rgba(6,182,212,.6);
}

/* ---------- Kamera demo ---------- */
.cam-tile { transition: all .3s; cursor: pointer; }
.cam-tile:hover { border-color: rgba(6,182,212,.45); }
.cam-tile.cam-active {
  border-color: #06b6d4;
  box-shadow: 0 0 0 2px rgba(6,182,212,.55), 0 16px 40px -16px rgba(6,182,212,.6);
  transform: scale(1.02);
}

/* ---------- Alarm simülasyonu ---------- */
.alarm-shield { transition: all .4s ease; }
.zone-chip { transition: all .3s ease; }
.zone-chip .zone-dot { transition: all .3s ease; }
[data-alarm][data-armed="true"] .alarm-shield {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  box-shadow: 0 0 0 6px rgba(34,197,94,.15);
}
[data-alarm][data-armed="true"] .alarm-badge {
  color: #bbf7d0 !important; background: rgba(34,197,94,.18) !important;
}
.zone-chip.zone-on {
  border-color: rgba(74,222,128,.5) !important;
  background: rgba(34,197,94,.12) !important;
  color: #bbf7d0 !important;
}
.zone-chip.zone-on .zone-dot { background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.18); }

/* ---------- Diafon tuş takımı ---------- */
.keypad-btn {
  display: grid; place-items: center; height: 3rem; border-radius: .8rem;
  font-size: 1.1rem; font-weight: 700; color: #0f172a;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  transition: all .15s; cursor: pointer; user-select: none;
}
.keypad-btn:hover { background: #e2e8f0; color: #0f172a; }
.keypad-btn:active { transform: scale(.94); }

/* Erişilebilirlik: hareketi azalt */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}