/* ===========================================================
   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); }

/* ===========================================================
   GÜNEŞ ENERJİSİ (SOLAR) BÖLÜMÜ
   =========================================================== */

/* Turuncu-amber gradyan metin (solar başlıklar) */
.text-gradient-solar {
  background: linear-gradient(90deg, #fbbf24, #f97316, #fbbf24);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 5s linear infinite;
}

/* Amber ışıltı */
.solar-glow {
  box-shadow: 0 0 0 1px rgba(251,191,36,0.08),
              0 20px 50px -20px rgba(249,115,22,0.45);
}

/* Solar sekme butonları (amber aktif durum) */
.solar-tab {
  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;
}
.solar-tab:hover { color: #0f172a; background: #e2e8f0; }
.solar-tab.solar-tab-active {
  color: #fff !important;
  background: linear-gradient(90deg, #f59e0b, #f97316) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 32px -12px rgba(249,115,22,.6);
}
/* Koyu zemin üzerindeki solar sekmeler */
.solar-tab-dark {
  color: #cbd5e1; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.solar-tab-dark:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Güneş ışınları dönüşü */
.sun-rays { animation: sun-spin 24s linear infinite; transform-origin: center; }
@keyframes sun-spin { to { transform: rotate(360deg); } }

/* Güneş nabız ışıltısı */
.sun-pulse { animation: sun-pulse 3.2s ease-in-out infinite; transform-origin: center; }
@keyframes sun-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* Panel parlaması (üzerinden geçen ışık şeridi) */
.panel-shine { animation: panel-shine 4.5s ease-in-out infinite; }
@keyframes panel-shine {
  0%, 20%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  45%       { opacity: .9; }
  70%, 100% { transform: translateX(320%) skewX(-18deg); opacity: 0; }
}

/* Enerji akışı: kesikli çizginin akması */
.energy-line {
  stroke-dasharray: 6 8;
  animation: energy-flow 1.2s linear infinite;
}
@keyframes energy-flow { to { stroke-dashoffset: -14; } }

/* Enerji noktacığı (yol üzerinde kayan) */
.energy-dot { animation: energy-dot 2.4s linear infinite; }
.energy-dot.delay-1 { animation-delay: .8s; }
.energy-dot.delay-2 { animation-delay: 1.6s; }
@keyframes energy-dot {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Tasarruf hesaplayıcı: kaydırıcı */
.solar-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 9999px;
  background: linear-gradient(90deg, #f59e0b var(--fill, 30%), #e2e8f0 var(--fill, 30%));
  outline: none; cursor: pointer;
}
.solar-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 9999px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  border: 3px solid #fff;
  box-shadow: 0 6px 18px -4px rgba(249,115,22,.65);
  transition: transform .15s;
}
.solar-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.solar-range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 9999px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  border: 3px solid #fff;
  box-shadow: 0 6px 18px -4px rgba(249,115,22,.65);
  cursor: pointer;
}

/* Solar kart üzeri amber vurgulu hover */
.solar-card-hover {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.solar-card-hover:hover {
  transform: translateY(-6px);
  border-color: rgba(249,115,22,0.45);
  box-shadow: 0 24px 60px -28px rgba(249,115,22,0.5);
}

/* ===========================================================
   GÜVENLİK KAMERA & ALARM SAYFASI
   =========================================================== */

/* Tailwind aspect-ratio eklentisi çekirdek aspect-video sınıfını
   devre dışı bırakıyor; kamera karoları için burada geri tanımlanır. */
.aspect-video { aspect-ratio: 16 / 9; }

/* Yanıp sönen kayıt (REC) ışığı */
.sec-rec-dot { animation: sec-blink 1s steps(2, start) infinite; }
@keyframes sec-blink { 50% { opacity: 0; } }

/* Çevrimiçi LED nabzı */
.sec-online { animation: sec-pulse 2s ease-in-out infinite; }
@keyframes sec-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Kamera karosu üzerinde kayan tarama çizgisi */
.sec-tile { position: relative; overflow: hidden; }
.sec-tile::after {
  content: ''; position: absolute; left: 0; right: 0; top: -30%; height: 26%;
  background: linear-gradient(to bottom, transparent, rgba(6,182,212,.20), transparent);
  animation: sec-scan 3.4s linear infinite; pointer-events: none;
}
.sec-tile.delay-1::after { animation-delay: .9s; }
.sec-tile.delay-2::after { animation-delay: 1.7s; }
.sec-tile.delay-3::after { animation-delay: 2.5s; }
@keyframes sec-scan { to { top: 105%; } }

/* Gece görüşü modu (yeşilimsi IR görünümü) */
.sec-night .sec-tile {
  filter: hue-rotate(70deg) saturate(.45) brightness(1.2) contrast(1.15);
}
.sec-night .sec-tile::after {
  background: linear-gradient(to bottom, transparent, rgba(74,222,128,.25), transparent);
}

/* Hareket algılama vurgusu */
.sec-motion {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.65), 0 14px 34px -12px rgba(245,158,11,.55);
}
.sec-motion .sec-motion-badge { display: inline-flex !important; }

/* Kamera SVG'lerinde parlayan IR LED'ler */
.ir-led { animation: ir-glow 1.6s ease-in-out infinite; }
.ir-led.d2 { animation-delay: .4s; }
.ir-led.d3 { animation-delay: .8s; }
.ir-led.d4 { animation-delay: 1.2s; }
@keyframes ir-glow { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* PTZ kamera kafası hafif sağa-sola döner */
.ptz-head { animation: ptz-turn 6s ease-in-out infinite; transform-origin: center 40%; }
@keyframes ptz-turn { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }

/* Alarm çakar (strobe) ışığı */
.sec-strobe-on {
  animation: sec-strobe .45s steps(2, start) infinite;
}
@keyframes sec-strobe {
  0%  { background: #dc2626; box-shadow: 0 0 44px 8px rgba(220,38,38,.75); }
  50% { background: #7f1d1d; box-shadow: 0 0 10px 2px rgba(220,38,38,.25); }
}

/* Siren sallanması */
.sec-shake { animation: sec-shake .35s linear infinite; }
@keyframes sec-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

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