/* ===== EYU Static — Custom Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #14B8A6;
  --primary-dark: #0D9488;
  --primary-light: #5EEAD4;
  --accent: #F59E0B;
  --accent-dark: #D97706;
  --dark-bg: #0F172A;
  --dark-surface: #1E293B;
  --dark-card: #334155;
  --background: #ffffff;
  --foreground: #0F172A;
  --muted: #F1F5F9;
  --muted-fg: #64748B;
  --border: #E2E8F0;
  --card: #ffffff;
  --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

.dark {
  --background: #0F172A;
  --foreground: #F8FAFC;
  --muted: #1E293B;
  --muted-fg: #94A3B8;
  --border: #334155;
  --card: #1E293B;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); line-height: 1.2; }
a { text-decoration: none; color: inherit; }
img { max-width:100%; height:auto; }
::selection { background: var(--primary); color:#fff; }

/* Text Gradient */
.text-gradient {
  background: linear-gradient(135deg, #14B8A6, #3B82F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Mesh BG */
.bg-mesh {
  background-image:
    radial-gradient(at 40% 20%, rgba(20,184,166,.15) 0, transparent 50%),
    radial-gradient(at 80% 0%, rgba(59,130,246,.1) 0, transparent 50%),
    radial-gradient(at 0% 50%, rgba(245,158,11,.08) 0, transparent 50%);
}

.bg-grid {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%2314B8A6' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Animations */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 0 0 rgba(20,184,166,.4)} 50%{box-shadow:0 0 0 12px rgba(20,184,166,0)} }

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-fade-in { animation: fadeInUp .6s ease-out both; }
.animate-slide-left { animation: slideInLeft .6s ease-out both; }

/* Scroll Reveal */
.reveal { opacity:0; transform:translateY(30px); transition: all .6s ease; }
.reveal.active { opacity:1; transform:translateY(0); }

/* Button styles */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.75rem; border-radius: .75rem;
  font-weight: 600; font-size: .875rem;
  transition: all .2s; cursor: pointer; border: none;
}
.btn-primary { background: var(--primary); color:#fff; box-shadow: 0 4px 14px rgba(20,184,166,.3); }
.btn-primary:hover { background: var(--primary-dark); transform:translateY(-1px); box-shadow: 0 6px 20px rgba(20,184,166,.4); }
.btn-outline { background:transparent; color:var(--foreground); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-white { background:#fff; color:var(--dark-bg); }
.btn-white:hover { background:#F1F5F9; }
.btn-ghost { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); }
.btn-ghost:hover { background:rgba(255,255,255,.2); }

/* Container */
.container { max-width:80rem; margin:0 auto; padding:0 1rem; }
@media(min-width:640px){ .container{padding:0 1.5rem} }
@media(min-width:1024px){ .container{padding:0 2rem} }

/* Card */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  transition: all .3s;
}
.card:hover { box-shadow: 0 20px 40px rgba(0,0,0,.08); transform:translateY(-2px); }

/* Badge */
.badge {
  display: inline-flex; align-items:center; gap:.375rem;
  padding:.25rem .75rem; border-radius:9999px;
  font-size: .75rem; font-weight:600;
}

/* Section Heading */
.section-heading { text-align:center; max-width:48rem; margin:0 auto 3rem; }
.section-heading h2 { font-size:2rem; font-weight:800; margin-bottom:.75rem; }
.section-heading p { color: var(--muted-fg); font-size:1.125rem; }
@media(min-width:768px){ .section-heading h2{font-size:2.5rem} }

/* Stat counter */
.stat-number { font-size:2.5rem; font-weight:800; color: var(--primary); font-family: var(--font-heading); }
.stat-label { font-size:.875rem; color: var(--muted-fg); margin-top:.25rem; }

/* Feature icon box */
.icon-box {
  width:3rem; height:3rem; border-radius:.75rem;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* Header */
.header {
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(255,255,255,.8); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  transition: all .3s;
}
.header.scrolled { box-shadow:0 1px 8px rgba(0,0,0,.06); }
.dark .header { background:rgba(15,23,42,.85); }

/* Nav Dropdown */
.nav-dropdown { position:relative; }
.nav-dropdown-content {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  background: var(--card); border:1px solid var(--border); border-radius:1rem;
  padding:1rem; min-width:30rem; opacity:0; visibility:hidden;
  transition: all .2s; box-shadow:0 20px 40px rgba(0,0,0,.1);
}
.nav-dropdown:hover .nav-dropdown-content { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* Mobile menu */
.mobile-menu { display:none; position:fixed; inset:0; z-index:40; }
.mobile-menu.open { display:flex; }
.mobile-menu-overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.mobile-menu-panel {
  position:absolute; right:0; top:0; bottom:0; width:80%; max-width:24rem;
  background:var(--card); padding:1.5rem; overflow-y:auto;
  animation: slideInRight .3s ease;
}
@keyframes slideInRight { from{transform:translateX(100%)} to{transform:translateX(0)} }

/* Tab buttons */
.tab-btn {
  padding:.625rem 1.25rem; border-radius:.75rem; font-size:.875rem; font-weight:500;
  border:1px solid var(--border); background:transparent; color:var(--muted-fg);
  cursor:pointer; transition:all .2s;
}
.tab-btn.active, .tab-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

/* Feature check list */
.feature-check { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:.75rem; }
.feature-check svg { width:1.25rem; height:1.25rem; color:var(--primary); flex-shrink:0; margin-top:.125rem; }
.feature-check span { font-size:.9375rem; }

/* Footer */
.footer { background:var(--dark-bg); color:#CBD5E1; }
.footer a:hover { color:var(--primary); }
.footer h4 { color:#F8FAFC; font-weight:700; margin-bottom:1rem; }

/* Screenshot mockup */
.browser-mockup {
  border-radius:1rem; border:1px solid var(--border); overflow:hidden; background:var(--card);
  box-shadow:0 20px 40px rgba(0,0,0,.08);
}
.browser-bar {
  display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem;
  background:var(--muted); border-bottom:1px solid var(--border);
}
.browser-dot { width:.625rem; height:.625rem; border-radius:50%; }

/* Responsive grid helpers */
.grid-2 { display:grid; gap:1.5rem; }
.grid-3 { display:grid; gap:1.5rem; }
.grid-4 { display:grid; gap:1.5rem; }
@media(min-width:640px){ .grid-2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:768px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} }

/* Form */
.form-input {
  width:100%; border-radius:.75rem; border:1px solid var(--border);
  background:var(--background); padding:.625rem 1rem; font-size:.875rem;
  transition:all .2s; font-family:var(--font-body);
}
.form-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(20,184,166,.15); }
textarea.form-input { resize:vertical; min-height:8rem; }
.form-label { display:block; font-size:.875rem; font-weight:500; margin-bottom:.375rem; }

/* Gradient headers for module pages */
.gradient-from-primary { --tw-gradient-from: #14B8A6; }
.page-hero { padding-top:8rem; padding-bottom:4rem; position:relative; overflow:hidden; }

/* ===== Renkli Modül / Özellik Kartları ===== */
.module-card {
  position:relative; overflow:hidden; text-decoration:none; display:block;
  padding:2rem; border-radius:1rem; color:#fff;
  transition:transform .3s ease, box-shadow .3s ease;
  border:none !important;
}
.module-card:hover { transform:translateY(-5px); box-shadow:0 24px 48px rgba(0,0,0,.4) !important; }
.module-card .bg-icon {
  position:absolute; right:-1rem; top:50%; transform:translateY(-50%) scale(1);
  transition:transform .45s ease, opacity .45s ease;
  opacity:.18; pointer-events:none;
}
.module-card:hover .bg-icon { transform:translateY(-50%) scale(1.3); opacity:.28; }
.module-card .card-content { position:relative; z-index:1; }
.module-card .card-badge {
  display:inline-block; font-size:.6875rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; background:rgba(255,255,255,.2); padding:.25rem .625rem;
  border-radius:9999px; margin-bottom:1rem;
}
.module-card h3 { font-size:1.25rem; font-weight:800; margin-bottom:.625rem; line-height:1.3; color:#fff; }
.module-card p { font-size:.875rem; opacity:.88; margin-bottom:1.5rem; line-height:1.55; }
.module-card .card-link {
  display:inline-flex; align-items:center; gap:.375rem; font-size:.8125rem; font-weight:700;
  background:rgba(255,255,255,.18); backdrop-filter:blur(4px);
  padding:.4rem 1rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.3);
  transition:background .2s; color:#fff;
}
.module-card:hover .card-link { background:rgba(255,255,255,.28); }
/* Smaller variant for info/contact cards */
.module-card-sm {
  position:relative; overflow:hidden; text-decoration:none; display:block;
  padding:1.5rem; border-radius:1rem; color:#fff;
  transition:transform .3s ease, box-shadow .3s ease;
  border:none !important;
}
.module-card-sm:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.35) !important; }
.module-card-sm .bg-icon {
  position:absolute; right:-.5rem; bottom:-.5rem;
  transition:transform .45s ease, opacity .45s ease;
  opacity:.15; pointer-events:none;
}
.module-card-sm:hover .bg-icon { transform:scale(1.2); opacity:.25; }
.module-card-sm .card-content { position:relative; z-index:1; }
.module-card-sm h4 { font-size:1rem; font-weight:700; margin-bottom:.5rem; color:#fff; }
.module-card-sm p,.module-card-sm a { font-size:.875rem; color:rgba(255,255,255,.88); }