/**
 * Glassmorphism Effects - Frosted Glass UI Components
 * Bora Akü Website Modernization
 * Modern glass-like transparent elements with blur effects
 */

/* ============================================
   GLASSMORPHISM BASE CLASSES
   ============================================ */

.glass {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 8px 32px var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.glass-light {
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--glass-border);
}

.glass-medium {
  background: var(--glass-bg-medium);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border-strong);
  box-shadow:
    0 8px 32px var(--glass-shadow-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.glass-dark {
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ============================================
   HEADER GLASSMORPHISM
   ============================================ */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--header-shadow);
  z-index: var(--z-sticky);
  transition: all var(--transition-base);
}

header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
  header {
    background: rgba(255, 255, 255, 0.97);
  }
}

/* ============================================
   BANNER LOGO CONTAINER - Glassmorphism
   ============================================ */

.agileinfo-logo {
  position: relative;
  z-index: 10;
  display: inline-block;
  padding: var(--space-8) var(--space-12);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 32px rgba(31, 38, 135, 0.37),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  animation: floatIn 1s ease-out;
}

.agileinfo-logo img {
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 4px 20px rgba(255, 255, 255, 0.4))
    drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6))
    brightness(1.15)
    contrast(1.05);
  max-width: 100%;
  height: auto;
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(16px)) {
  .agileinfo-logo {
    background: rgba(255, 255, 255, 0.4);
  }
}

/* ============================================
   CHOOSE SECTION - Glassmorphism Container
   ============================================ */

.choose {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 1200px);
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: var(--z-dropdown);
}

/* Fallback */
@supports not (backdrop-filter: blur(10px)) {
  .choose {
    background: rgba(255, 255, 255, 1);
  }
}

/* ============================================
   GLASS CARD VARIANTS
   ============================================ */

.card-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 8px 32px rgba(31, 38, 135, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all var(--transition-base);
}

.card-glass:hover {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 12px 40px rgba(31, 38, 135, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-4px);
}

/* Dark Glass Card */
.card-glass-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.card-glass-dark:hover {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ============================================
   MODAL GLASSMORPHISM (if needed)
   ============================================ */

.modal-glass {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
}

.modal-glass-content {
  position: relative;
  width: 100%;
  max-width: 600px;
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ============================================
   DROPDOWN GLASSMORPHISM
   ============================================ */

.dropdown-glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ============================================
   TOOLTIP GLASSMORPHISM
   ============================================ */

.tooltip-glass {
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: white;
  font-size: var(--font-size-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ============================================
   NOTIFICATION/ALERT GLASSMORPHISM
   ============================================ */

.alert-glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 4px solid var(--color-primary);
  box-shadow:
    0 8px 32px rgba(31, 38, 135, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.alert-glass-success {
  border-left-color: #10B981;
  background: rgba(236, 253, 245, 0.9);
}

.alert-glass-warning {
  border-left-color: #F59E0B;
  background: rgba(255, 251, 235, 0.9);
}

.alert-glass-danger {
  border-left-color: #EF4444;
  background: rgba(254, 242, 242, 0.9);
}

/* ============================================
   BUTTON GLASSMORPHISM
   ============================================ */

.btn-glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow:
    0 4px 16px rgba(31, 38, 135, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 6px 20px rgba(31, 38, 135, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

/* ============================================
   INPUT GLASSMORPHISM
   ============================================ */

.input-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.input-glass::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.input-glass:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* ============================================
   SIDEBAR/MENU GLASSMORPHISM
   ============================================ */

.sidebar-glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    2px 0 30px rgba(0, 0, 0, 0.1),
    inset -1px 0 0 rgba(255, 255, 255, 0.3);
}

/* ============================================
   FOOTER TOP GLASSMORPHISM (Optional)
   ============================================ */

.footer-glass {
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   OVERLAY GLASSMORPHISM
   ============================================ */

.overlay-glass {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-overlay);
}

/* ============================================
   FLOATING ACTION BUTTON GLASSMORPHISM
   ============================================ */

.fab-glass {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 8px 24px rgba(99, 102, 241, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.fab-glass:hover {
  background: rgba(99, 102, 241, 1);
  transform: translateY(-4px);
  box-shadow:
    0 12px 32px rgba(99, 102, 241, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ============================================
   BADGE GLASSMORPHISM
   ============================================ */

.badge-glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ============================================
   PROGRESS BAR GLASSMORPHISM
   ============================================ */

.progress-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-glass-fill {
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

/* ============================================
   SHINE EFFECT (for enhanced glassmorphism)
   ============================================ */

.glass-shine {
  position: relative;
  overflow: hidden;
}

.glass-shine::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* ============================================
   ACCESSIBILITY - Reduced Transparency
   ============================================ */

@media (prefers-reduced-transparency: reduce) {
  .glass,
  .glass-light,
  .glass-medium,
  .glass-strong,
  header,
  .agileinfo-logo,
  .choose,
  .card-glass,
  .modal-glass-content,
  .dropdown-glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
  }
}

/* ============================================
   BROWSER FALLBACKS
   ============================================ */

/* Firefox fallback */
@-moz-document url-prefix() {
  .glass,
  .glass-strong,
  header,
  .agileinfo-logo {
    background: rgba(255, 255, 255, 0.95);
  }
}