/* ================================================================
   MCARIS - Ortak stiller
   ================================================================ */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Header dil bayrakları: uzun dil metinleriyle (DE/FR/ES/PL) nav çakışmasını
   önlemek için masaüstü sürümde standart boyuttan (32x20) biraz daha küçük. */
.lang-switcher { gap: 4px; }
.lang-switcher button { width: 1.75rem; height: 1.125rem; }

/* Zebra tablo satırları */
.zebra-row:nth-child(even) { background-color: #f2f4f6; }

/* Hero'daki hafif yüzen görsel animasyonu */
@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* Hero'daki hafif genel acil durum ışığı yansıması */
@keyframes emergency-lights {
  0%, 45%  { background-color: rgba(220, 20, 60, .16); }
  50%, 95% { background-color: rgba(37, 99, 235, .16); }
  100%     { background-color: rgba(220, 20, 60, .16); }
}
.emergency-glow {
  animation: emergency-lights .5s steps(1) infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Ambulans tepe lambasının olduğu bölgede anlık kırmızı/mavi çakar ışığı */
@keyframes beacon-strobe {
  0%, 45% {
    background: radial-gradient(ellipse at center, rgba(220,20,60,.95) 0%, rgba(220,20,60,.55) 35%, transparent 72%);
  }
  50%, 95% {
    background: radial-gradient(ellipse at center, rgba(37,99,235,.95) 0%, rgba(37,99,235,.55) 35%, transparent 72%);
  }
  100% {
    background: radial-gradient(ellipse at center, rgba(220,20,60,.95) 0%, rgba(220,20,60,.55) 35%, transparent 72%);
  }
}
.emergency-beacon {
  animation: beacon-strobe .3s steps(1) infinite;
  mix-blend-mode: screen;
  filter: blur(4px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .emergency-glow, .emergency-beacon { animation: none; background: none; }
}

/* ----------------------------------------------------------------
   Görsel yer tutucu (placeholder).
   Gerçek fotoğrafı koyunca <img> ile değiştir; bu blok sadece
   yer göstersin diye var.
   ---------------------------------------------------------------- */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    linear-gradient(135deg, #1c3450 0%, #162839 100%);
  color: #96a9be;
  text-align: center;
  border-radius: 0.5rem;
  overflow: hidden;
}
.img-placeholder .material-symbols-outlined { font-size: 40px; opacity: .5; }
.img-placeholder span.cap { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }

/* ----------------------------------------------------------------
   Ambulans ışığı çerçeve efekti: ürün/sertifika görsellerinin
   kenarında dönen kırmızı ışık.
   ---------------------------------------------------------------- */
@property --frame-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.frame-glow { position: relative; }
.frame-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 12px;
  background: conic-gradient(from var(--frame-glow-angle),
    transparent 0 40%,
    #ff1f3d 50%, #ff9baa 55%, #ff1f3d 60%,
    transparent 65% 85%,
    #2563eb 90%, #93c5fd 93%, #2563eb 96%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: frame-glow-spin 4s linear infinite;
  pointer-events: none;
}
@keyframes frame-glow-spin {
  to { --frame-glow-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .frame-glow::before { animation: none; }
}

/* Mobil menü */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.mobile-menu.open { max-height: 420px; }

/* WhatsApp sabit butonu */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; }

/* Sertifika büyütme (lightbox) */
[data-lightbox-overlay] {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(22, 40, 57, .92);
}
[data-lightbox-overlay].open { display: flex; }
[data-lightbox-overlay] img {
  max-width: min(90vw, 720px);
  max-height: 85vh;
  border-radius: .5rem;
}
[data-lightbox-close] {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
[data-lightbox-prev], [data-lightbox-next] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
[data-lightbox-prev]:hover, [data-lightbox-next]:hover { background: rgba(255, 255, 255, .22); }
[data-lightbox-prev] { left: 12px; }
[data-lightbox-next] { right: 12px; }
[data-lightbox-prev] .material-symbols-outlined,
[data-lightbox-next] .material-symbols-outlined { font-size: 32px; }

/* Dil değiştirme butonu (bayrak) */
[data-lang-toggle].lang-active {
  box-shadow: 0 0 0 2px #006497;
}

/* ----------------------------------------------------------------
   360° panorama turu (assets/js/panorama.js ile birlikte çalışır)
   ---------------------------------------------------------------- */
.panorama-instructions {
  background: rgba(22, 40, 57, .85);
  color: #fff;
  border-radius: .75rem;
  padding: 14px 18px;
  backdrop-filter: blur(2px);
}
.panorama-instructions .row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.panorama-instructions .row + .row { margin-top: 6px; }
.panorama-instructions .material-symbols-outlined { font-size: 18px; color: #77c2ff; }

.panorama-hud-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(22, 40, 57, .85);
  color: #fff;
  backdrop-filter: blur(2px);
  border-radius: .5rem;
  padding: .5rem .75rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  transition: background-color .15s ease;
}
.panorama-hud-btn:hover { background: rgba(22, 40, 57, .97); }

.panorama-controlbar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(22, 40, 57, .85);
  border-radius: 9999px;
  padding: 6px;
  backdrop-filter: blur(2px);
}
.panorama-controlbar button {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background-color .15s ease;
}
.panorama-controlbar button:hover { background: rgba(255, 255, 255, .15); }

.panorama-nav-hotspot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.panorama-nav-dot {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #006497;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  animation: panorama-hotspot-pulse 2s ease-in-out infinite;
}
.panorama-nav-dot .material-symbols-outlined { font-size: 20px; }
.panorama-link-dot { background: #c2410c; }
.panorama-nav-label {
  background: rgba(22, 40, 57, .9);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 9999px;
  white-space: nowrap;
}

.panorama-hotspot-dot {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #006497;
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(0, 100, 151, .3);
  cursor: pointer;
  animation: panorama-hotspot-pulse 2s ease-in-out infinite;
}
@keyframes panorama-hotspot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0, 100, 151, .3); }
  50% { box-shadow: 0 0 0 9px rgba(0, 100, 151, .05); }
}
.panorama-hotspot-tip {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: #162839;
  color: #fff;
  padding: 4px 10px;
  border-radius: .375rem;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.panorama-hotspot:hover .panorama-hotspot-tip { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .panorama-hotspot-dot { animation: none; }
}

/* Erişilebilirlik: klavye odak halkası */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #006497;
  outline-offset: 2px;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  .animate-float { animation: none; }
  * { scroll-behavior: auto !important; }
}