/* ==========================================================================
   Elbruz Logic — mafe.live replica
   Ölçüler ve renkler yayındaki Framer build'inden birebir alındı.
   ========================================================================== */

:root {
  --bg: #030303;
  --card: #12121c;
  --card-bg: #05050a;
  --line: #202026;
  --line-soft: #17181a;
  --white: #fff;
  --text: #ccc;
  --muted: #a6a6a9;
  --purple: #73f;
  --purple-soft: #beafff;
  --light: rgba(255, 255, 255, 0.95);
  --dark-ink: #0b0a12;

  --font-display: 'DM Sans', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1120px;
  --header-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 160%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
/* <picture> yerleşimde kutu üretmesin — içindeki <img> doğrudan üst
   elemanın çocuğuymuş gibi davransın (flex/grid ölçüleri bozulmaz) */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
p { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  /* Framer statik DM Sans kullanıyor; değişken fontun optik boyut ekseni
     büyük puntolarda yazıyı daraltmasın diye kapatıldı */
  font-optical-sizing: none;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 110%;
  color: var(--white);
  margin: 0;
}
h2 { font-weight: 700; line-height: 120%; }

/* ---------------------------------------------------------------- header -- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(3, 3, 3, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.logo { display: flex; align-items: center; gap: 10px; }
.logo img { width: 52px; height: 22px; object-fit: contain; }
.logo span {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a, .header__actions .link-plain {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.2s ease;
}
.nav a:hover, .header__actions .link-plain:hover { color: var(--white); }

.header__actions { display: flex; align-items: center; gap: 16px; }

/* dil seçici */
.lang {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 32px;
}
.lang__opt {
  padding: 4px 10px;
  border-radius: 32px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease;
}
.lang__opt:hover { color: var(--white); }
.lang__opt.active { background: var(--purple); color: var(--white); }

/* butonlar */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 20px;
  border-radius: 32px;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  white-space: nowrap;
  transition: filter 0.2s ease;
}
.btn:hover { filter: brightness(1.15); }
.btn svg { width: 20px; height: 20px; opacity: 0.8; }
.btn--sm { font-size: 14px; }
.btn--lg { padding: 14px 36px; }
/* açık renkli ikincil buton */
.btn--light { background: var(--light); color: var(--dark-ink); font-size: 14px; }
.btn--light:hover { filter: brightness(1); background: #fff; }

/* mobil menü */
.burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--white); position: relative; transition: background 0.2s ease; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--white); transition: transform 0.25s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger.open span { background: transparent; }
.burger.open span::before { transform: translateY(6px) rotate(45deg); }
.burger.open span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: var(--header-h); left: 0; right: 0;
  z-index: 99;
  display: none;
  flex-direction: column;
  padding: 12px 24px 28px;
  background: rgba(3, 3, 3, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.mobile-menu.open { display: flex; }
.mobile-menu a.m-link { padding: 14px 0; font-size: 16px; color: var(--white); border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 20px; }
.mobile-menu .lang { align-self: flex-start; margin-top: 16px; }

/* ------------------------------------------------------------- iskelet -- */

/* Framer: .framer-peotp7 — column, gap 63px, padding 187px 0 */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 63px;
  padding: 187px 0 0;
}

/* Framer: .framer-1rben0v — width 93%, max 1120, gap 80px */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 93%;
  max-width: var(--container);
  position: relative;
}

/* Framer: .framer-ay5gf2 — 1072px, gap 32px */
.hero__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 1072px;
  max-width: 100%;
  text-align: center;
}
.hero__top h1 { font-size: 64px; font-weight: 500; width: 100%; }
/* Framer preset 1fsaqso: Inter 18px / 160% / #ccc */
.hero__top p { font-size: 18px; max-width: 560px; color: var(--text); }

/* Framer: .framer-yy1irj — gap 20px */
.logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}
/* Framer preset 1p1kq4w: Inter 14px / 160% / #ccc */
.logos__label { font-size: 14px; max-width: 560px; text-align: center; color: var(--text); }

/* Framer: .framer-7oi7il-container — 720 × 50, opacity .6 */
.ticker {
  width: 720px;
  max-width: 100%;
  height: 50px;
  opacity: 0.6;
  padding: 10px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
}
.ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  animation: ticker-slide 30s linear infinite;
}
.ticker__group { display: flex; align-items: center; gap: 40px; padding-right: 40px; flex: none; }
.ticker__group img { flex: none; width: auto; height: auto; }
/* Framer'daki tek tek logo ölçüleri.
   Seçici `> *:nth-child()` — görseller <picture> içine sarıldığı için
   doğrudan `img:nth-child()` artık eşleşmiyor. */
.ticker__group > *:nth-child(1) img { width: 117px; }
.ticker__group > *:nth-child(2) img { width: 117px; }
.ticker__group > *:nth-child(3) img { width: 101px; }
.ticker__group > *:nth-child(4) img { width: 105px; }
.ticker__group > *:nth-child(5) img { width: 112px; filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.49)); }
.ticker__group > *:nth-child(6) img { width: 108px; }

@keyframes ticker-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------ dashboard -- */

/* Framer: .framer-1evcwdt — height 742px, radius 24px */
.dashboard {
  position: relative;
  width: 100%;
  height: 742px;
  border-radius: 24px;
}
.dashboard__img {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
}
.dashboard__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Framer "Highlights": üst kenardaki mor parıltı yığını */
.highlights { position: absolute; top: -46px; left: 0; right: 0; height: 196px; z-index: 0; pointer-events: none; }
.highlights .h-bg {
  position: absolute; inset: 0;
  background: var(--purple-soft);
  opacity: 0.1;
  filter: blur(67.5px);
  border-radius: 732px;
}
.highlights .h-1 {
  position: absolute; top: 31px; left: 0; width: 100%; height: 29px;
  background: radial-gradient(50% 50% at 50% 50%, var(--purple) 0%, #7500ca66 100%);
  opacity: 0.3; filter: blur(12.25px); border-radius: 544px;
}
.highlights .h-2 {
  position: absolute; top: 37px; left: calc(50% - 342px); width: 684px; height: 16px;
  background: radial-gradient(50% 50% at 50% 50%, var(--purple) 0%, #7500ca66 100%);
  opacity: 0.8; filter: blur(20.25px); border-radius: 348px;
}
.highlights .h-3 {
  position: absolute; top: 44px; left: calc(50% - 233px); width: 466px; height: 4px;
  background: radial-gradient(50% 50% at 50% 50%, var(--purple) 0%, #7500ca66 100%);
  opacity: 0.8; filter: blur(6px); border-radius: 234px;
}
.highlights .h-line {
  position: absolute; top: 46px; left: calc(50% - 325px); width: 650px; height: 2px;
  background: radial-gradient(50% 50%, #fff 0%, #c7ffee00 100%);
  border-radius: 325px;
}

/* ------------------------------------------------------------- bölümler -- */

/* Framer: .framer-yuivnm / .framer-1nzuv0l — 1120px, gap 64px */
.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 1120px;
  max-width: 93%;
  scroll-margin-top: 164px;
}

/* Framer: .framer-gzxfq / .framer-17acsb2 — max 560px, gap 24px */
.section__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 560px;
  text-align: center;
}
.section__head h2 { font-size: 40px; }
/* Framer preset bv5iyi: Inter 16px / 160% / #ccc */
.section__head p { font-size: 16px; color: var(--text); }

/* Framer: .framer-1i9tay5 — gap 128px */
.splits { display: flex; flex-direction: column; align-items: center; gap: 128px; width: 100%; }

/* Framer: .framer-y08gk4 — row, gap 84px, height 340px, padding 0 56px */
.split {
  display: flex;
  align-items: center;
  gap: 84px;
  width: 100%;
  min-height: 340px;
  padding: 0 56px;
}
/* Framer: .framer-rbs9k7 — width 66% */
.split__content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: 1 1 66%; min-width: 0; }
.split__content h2 { font-size: 40px; }
.split__content p { font-size: 16px; color: var(--text); }
.split__content .btn { margin-top: 8px; }
/* Framer'da her bölümün görseli farklı ölçüde: 324 / 340 / %40 */
.split__visual { flex: none; width: 324px; border-radius: 18px; overflow: hidden; }
.split__visual img { width: 100%; height: auto; }
.split:nth-of-type(2) .split__visual { width: 340px; border-radius: 26px; }
.split:nth-of-type(3) .split__visual { width: 40%; }
.split--visual-first .split__visual { order: 0; }
.split--visual-first .split__content { order: 1; }

/* etiketler — hepsi #beafff, arka plan #12121c, radius 40px */
.tags { display: flex; flex-wrap: wrap; gap: 9px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 40px;
  background: var(--card);
  color: var(--purple-soft);
  font-size: 12px;
  line-height: 120%;
}

/* --------------------------------------------------------------- kartlar -- */

/* Framer: .framer-1i41fx2 — grid 3×2, gap 24px */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; }

/* Framer: .framer-eq7vf4 — padding 24 24 32, gap 32, radius 12 */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 24px 24px 32px;
  border: 0.4px solid var(--line-soft);
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
/* Framer "Light shade" — hover'da beliren mor parıltı */
.card::before {
  content: '';
  position: absolute;
  bottom: -120px; left: 50%;
  width: 240px; height: 200px;
  transform: translateX(-50%);
  background: rgba(81, 47, 235, 0.3);
  border-radius: 231px;
  filter: blur(50px);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.card:hover::before { opacity: 1; }

/* Framer: .framer-1an3ung — 56×56, padding 12, radius 12, bg #12121c */
.card__icon {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 12px;
  border-radius: 12px;
  background: var(--card);
  color: rgba(255, 255, 255, 0.9);
}
.card__icon svg { width: 24px; height: 24px; }
.card__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
/* Framer preset 1oz0azo: DM Sans 20px */
.card__text h3 { font-size: 20px; font-weight: 500; line-height: 120%; }
.card__text h3 strong { font-weight: 700; }
.card__text p { font-size: 14px; color: var(--text); }
/* Etiketler yalnızca hover'da görünür (orijinalde de opacity:0).
   Akışta bırakılıyor — yerleri her zaman ayrıldığı için açıklama metninin
   üstüne binmiyor; sadece görünürlükleri değişiyor. */
.card .tags {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 8px;
  opacity: 0;
  transform: translateY(6px);
}
.card:hover .tags,
.card:focus-within .tags { opacity: 1; transform: none; }

/* --------------------------------------------------- yaptığımız işler -- */

/* Kart dili .card ile aynı (radius 12, çizgi #17181a, zemin #05050a),
   yerleşim .split gibi iki sütun. Görsel sağda ve daha geniş. */
.work {
  position: relative;
  display: flex;
  align-items: center;
  gap: 56px;
  width: 100%;
  padding: 40px;
  border: 0.4px solid var(--line-soft);
  border-radius: 12px;
  background: linear-gradient(160deg, var(--card-bg) 0%, #0a0b24 100%);
  overflow: hidden;
}
/* .card ile aynı mor parıltı, hover'da değil hep açık — vitrin kartı */
.work::before {
  content: '';
  position: absolute;
  bottom: -180px; left: 22%;
  width: 420px; height: 320px;
  transform: translateX(-50%);
  background: rgba(81, 47, 235, 0.17);
  border-radius: 231px;
  filter: blur(90px);
  pointer-events: none;
}
.work__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 1 42%;
  min-width: 0;
}
.work__brand { display: flex; align-items: center; gap: 14px; }
.work__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 12px;
  border-radius: 12px;
  background: var(--card);
}
.work__mark img { width: 100%; height: auto; }
.work__names { display: flex; flex-direction: column; gap: 4px; }
.work__names h3 { font-size: 24px; font-weight: 500; line-height: 120%; }
.work__role { font-size: 13px; color: var(--muted); }
.work__body > p { font-size: 16px; color: var(--text); }
.work__body .btn { margin-top: 4px; }
.work__visual {
  position: relative;
  z-index: 1;
  flex: 1 1 58%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.work__visual img { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------------- cta -- */

.cta { width: 1120px; max-width: 93%; }
.cta__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 96px 32px 104px;
  border-radius: 16px;
  background: linear-gradient(180deg, #08080f 0%, #0e0d22 100%);
  /* alt kenardaki parıltı orijinalde olduğu gibi banner'ın dışına taşar */
  overflow: visible;
}
.cta__banner > * { position: relative; z-index: 1; }
.cta__banner h2 { font-size: 40px; max-width: 720px; }
.cta__banner p { font-size: 16px; max-width: 620px; color: var(--text); }
.cta__banner .btn { margin-top: 16px; }
/* aynı parıltı yığını, dikeyde çevrilip banner'ın ALT kenarına oturtuldu */
.cta__glow { position: absolute; z-index: 0; top: auto; bottom: -48px; transform: scaleY(-1); }

/* ---------------------------------------------------------------- footer -- */

.footer { width: 100%; border-top: 1px solid var(--line); margin-top: 63px; padding: 64px 0 40px; }
.footer__inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
  width: 1120px; max-width: 93%; margin: 0 auto;
}
.footer__left { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
.footer .logo img { width: 28px; height: 28px; }
.footer__left p { font-size: 14px; color: var(--muted); }
.socials { display: flex; gap: 12px; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 50%;
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.2s ease, color 0.2s ease;
}
.socials a:hover { background: var(--card); color: var(--white); }
.socials svg { width: 17px; height: 17px; }
.footer__bottom {
  width: 1120px; max-width: 93%; margin: 48px auto 0;
  padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}

/* ---------------------------------------------------------- iletişim --- */

.page-hero { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; width: 1120px; max-width: 93%; }
.page-hero .eyebrow { font-size: 14px; color: var(--purple-soft); }
.page-hero h1 { font-size: 56px; font-weight: 500; }
.page-hero p { font-size: 18px; max-width: 520px; color: var(--text); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
.contact-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 32px;
  border: 0.4px solid var(--line-soft); border-radius: 12px;
  background: var(--card-bg);
  transition: border-color 0.25s ease;
}
.contact-card:hover { border-color: #2a2a44; }
.contact-card h3 { font-size: 20px; }
.contact-card p { font-size: 14px; color: var(--text); }
.contact-card .value { color: var(--purple-soft); }

.form-card { width: 100%; padding: 40px; border: 0.4px solid var(--line-soft); border-radius: 12px; background: var(--card-bg); }
.form-card h3 { font-size: 24px; margin-bottom: 8px; }
.form-card > p { font-size: 14px; color: var(--text); margin-bottom: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--white); font-family: var(--font-body); font-size: 14px;
  outline: none; transition: border-color 0.2s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #5f5f6b; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--purple); }
.field select option { background: #12121c; color: var(--white); }
.form-card .btn { width: 100%; padding: 15px 20px; }
.form-note { margin-top: 16px; font-size: 13px; color: var(--muted); text-align: center; }
.hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }

/* animasyonlar animations.css dosyasinda */

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1199.98px) {
  .page { gap: 128px; padding-top: 164px; }
  .hero { gap: 64px; width: 96%; }
  .hero__top { width: 760px; padding: 0 24px; }
  .hero__top h1 { font-size: 62px; }
  .dashboard { height: auto; aspect-ratio: 1.5195; }
  .section { padding: 0 24px; }
  .split { flex-direction: column; gap: 40px; min-height: 0; padding: 0; text-align: left; }
  .split__visual { order: 0 !important; width: 100%; max-width: 420px; }
  .split__content { order: 1 !important; align-items: center; text-align: center; }
  .split__content h2 { font-size: 32px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__banner h2, .section__head h2 { font-size: 32px; }

  .work { flex-direction: column; gap: 32px; padding: 32px; }
  .work__visual { order: 0; width: 100%; }
  .work__body { order: 1; align-items: center; text-align: center; }
  .work::before { left: 50%; }
}

@media (max-width: 809.98px) {
  .nav, .header__actions .link-plain, .header__actions .btn { display: none; }
  .burger { display: flex; }
  .header__actions { gap: 8px; }

  .page { gap: 58px; padding-top: 140px; }
  .hero { gap: 56px; }
  .hero__top { width: 100%; gap: 24px; padding: 0 16px; }
  .hero__top h1 { font-size: 36px; }
  .hero__top p { font-size: 16px; }
  .logos { gap: 40px; max-width: 560px; padding: 0 16px; }

  .section { gap: 48px; max-width: 100%; padding: 0 16px; }
  .section__head h2, .cta__banner h2 { font-size: 24px; }
  .splits { gap: 72px; }
  .split__content h2 { font-size: 24px; }
  .cards { grid-template-columns: 1fr; }
  /* dokunmatik cihazda hover yok — etiketler hep görünür */
  .card .tags { opacity: 1; transform: none; }

  .work { gap: 24px; padding: 24px 20px 28px; }
  .work__body > p { font-size: 15px; }
  .work__names h3 { font-size: 20px; }
  .work__mark { width: 48px; height: 48px; padding: 10px; }

  .cta { max-width: 100%; padding: 0 16px; }
  .cta__banner { padding: 56px 24px 64px; }

  .page-hero h1 { font-size: 36px; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-card { padding: 24px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer__inner { flex-direction: column; gap: 32px; }
}