/* ============================================
   VTU Turkey Portal - Custom Styles
   ============================================ */

/* Base */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
.font-serif { font-family: 'Playfair Display', Georgia, serif; }

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Details/Summary custom styles */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Smooth transitions */
.transition { transition: all 0.2s ease; }
.transition-all { transition: all 0.3s ease; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Hero wave */
.hero-wave { position: absolute; bottom: 0; left: 0; right: 0; }

/* Card hover effects */
.group:hover .group-hover\:translate-x-1 { transform: translateX(4px); }

/* Pulse animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #1d4ed8, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Focus rings */
input:focus, select:focus, textarea:focus {
  outline: none;
  ring: 2px;
  ring-color: #3b82f6;
}

/* Table responsive */
.overflow-x-auto { overflow-x: auto; }
table { min-width: 100%; }

/* Print styles */
@media print {
  nav, .sticky, footer, .fixed { display: none !important; }
}

/* Mobile nav improvements */
@media (max-width: 1024px) {
  #mobile-menu { display: none; }
  #mobile-menu.block { display: block; }
}

/* Badge animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.5s ease forwards; }

/* Has selector polyfill-like approach */
.has-\[\:checked\]\:border-primary-500:has(:checked) { border-color: #1d4ed8; }
.has-\[\:checked\]\:bg-primary-50:has(:checked) { background-color: #eff6ff; }

/* Custom select styling */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  appearance: none;
  padding-right: 2.5rem;
}

/* Sticky nav shadow on scroll */
nav.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

/* Program card hover */
.program-card:hover { transform: translateY(-2px); }

/* Trust badge pulse */
.trust-badge {
  animation: pulse 3s infinite;
}

/* Hero gradient overlay */
.hero-overlay {
  background: linear-gradient(135deg, rgba(30, 42, 107, 0.95) 0%, rgba(29, 78, 216, 0.9) 100%);
}

/* Step connector line */
.step-connector {
  position: absolute;
  top: 50%;
  left: calc(50% + 40px);
  right: calc(-50% + 40px);
  height: 2px;
  background: linear-gradient(to right, #3b82f6, #1d4ed8);
}

/* Testimonial card */
.testimonial-card {
  border-left: 4px solid #1d4ed8;
}

/* FAQ accordion smooth */
details[open] > div {
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Gold accent */
.text-gold-400 { color: #f59e0b; }
.bg-gold-400 { background-color: #f59e0b; }
.hover\:bg-gold-500:hover { background-color: #d97706; }

/* Responsive images */
img { max-width: 100%; height: auto; loading: lazy; }

/* Performance: reduce layout shifts */
img, video { max-width: 100%; height: auto; }

/* Improve CLS - reserve space for images */
[data-aspect] { aspect-ratio: attr(data-aspect); }

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.875rem;
}

/* Tooltip */
.tooltip {
  position: relative;
}
.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 50;
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.fa-spin { animation: spin 1s linear infinite; }