/* Ekopay Vitrin - Global Styles */

/* ============================================
   FONT
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
  --brand: #9fe870;
  --brand-dark: #173601;
  --brand-medium: #163300;
  --brand-light: #e2f6d5;
  --brand-hover: #d3f2c0;
  --brand-bg: #e8f5e0;
  --bg: #ffffff;
  --bg-muted: #fafafa;
  --bg-footer: #ecefec;
  --text: #171717;
  --text-muted: #737373;
  --border: #e5e5e5;
  --border-dark: #d4d4d4;
  --destructive: #ef4444;
  --radius: 0.625rem;
}

/* ============================================
   BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes loading-bar {
  from { width: 0%; }
  to { width: 100%; }
}

.animate-slide-up { animation: slide-up 0.3s ease-out; }
.animate-slide-right { animation: slide-in-right 0.3s ease-out; }
.animate-slide-left { animation: slide-in-left 0.3s ease-out; }
.animate-fade-in { animation: fade-in 0.2s ease-out; }
.animate-loading { animation: loading-bar 2s ease-in-out; }

/* ============================================
   SCROLLBAR UTILITIES
   ============================================ */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ============================================
   SAFE AREA (iPhone notch)
   ============================================ */
.safe-area-pb {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================
   TRANSITIONS
   ============================================ */
.transition-transform-300 {
  transition: transform 0.3s ease;
}

/* ============================================
   OVERLAY
   ============================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
}

/* ============================================
   SIDEBAR PANEL
   ============================================ */
.sidebar-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  background: white;
  z-index: 50;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.sidebar-left {
  left: 0;
  width: 20rem;
}
.sidebar-right {
  right: 0;
  width: 100%;
}
@media (min-width: 640px) {
  .sidebar-right {
    width: 24rem;
  }
}

/* ============================================
   TOAST
   ============================================ */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  animation: slide-in-right 0.3s ease-out;
  max-width: 24rem;
}
.toast-success { background: #22c55e; }
.toast-error { background: #ef4444; }
.toast-info { background: #3b82f6; }
.toast-warning { background: #f59e0b; }

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

/* ============================================
   PROSE (CMS icerik alani)
   ============================================ */
.prose h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #171717;
}
.prose h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #171717;
}
.prose h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: #171717;
}
.prose h4 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: #171717;
}
.prose h5, .prose h6 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #171717;
}
.prose p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.prose ul, .prose ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
}
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.prose blockquote {
  border-left: 4px solid var(--border-dark);
  padding-left: 1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}
.prose pre {
  background: #f5f5f5;
  border-radius: 0.375rem;
  padding: 1rem;
  overflow-x: auto;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}
.prose code {
  background: #f5f5f5;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}
.prose pre code {
  background: none;
  padding: 0;
}
.prose a {
  color: var(--brand-dark);
  text-decoration: underline;
}
.prose a:hover {
  color: var(--brand-medium);
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.prose th, .prose td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.prose th {
  background: #f5f5f5;
  font-weight: 600;
}
.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.prose > :first-child { margin-top: 0; }
.prose-invert h1, .prose-invert h2, .prose-invert h3,
.prose-invert h4, .prose-invert h5, .prose-invert h6 { color: #ffffff; }
.prose-invert a { color: #9fe870; }
.prose-invert a:hover { color: #b5f090; }
.prose-sm h1 { font-size: 1.5rem; }
.prose-sm h2 { font-size: 1.25rem; }
.prose-sm h3 { font-size: 1.125rem; }
.prose-sm h4, .prose-sm h5, .prose-sm h6 { font-size: 1rem; }
.prose-sm p { margin-top: 0.375rem; margin-bottom: 0.375rem; }

/* ============================================
   PLACEHOLDER IMAGE
   ============================================ */
.placeholder-img {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 0.75rem;
}