@import "./carvel-tokens.css";

/* ============================================================
   Carvel QR — Landing Page
   Quiet Signal · tek vurgu: coral
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--carvel-font-body);
  font-weight: var(--carvel-w-light);
  font-size: var(--carvel-type-body);
  line-height: var(--carvel-leading-loose);
  color: var(--carvel-ink-2);
  background: var(--carvel-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--carvel-margin);
  padding-right: var(--carvel-margin);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 242, 234, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: var(--carvel-line-thin) solid transparent;
  transition: border-color 200ms ease;
}
.site-header.scrolled { border-bottom-color: var(--carvel-line); }

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.site-logo img {
  height: 70px;
  width: auto;
  display: block;
}
.site-logo--footer img { height: 44px; }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.site-header .carvel-cta {
  padding: 0.5rem 1.25rem 0.5rem 0.5rem;
  font-size: 0.9375rem;
}
.site-header .carvel-cta__icon { width: 32px; height: 32px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 96px 0 120px;
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--carvel-space-9);
  align-items: center;
}
.hero__tag { margin-bottom: var(--carvel-space-7); }

.hero h1 {
  font-family: var(--carvel-font-display);
  font-weight: var(--carvel-w-black);
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  line-height: var(--carvel-leading-tight);
  color: var(--carvel-ink);
  margin: 0 0 var(--carvel-space-6);
  letter-spacing: -0.015em;
}
.hero h1 .accent { color: var(--carvel-petrol); }

.hero__sub {
  font-size: 1.1875rem;
  max-width: 540px;
  margin: 0 0 var(--carvel-space-7);
  color: var(--carvel-ink-2);
}

.hero__cta-row {
  display: flex;
  align-items: center;
  gap: var(--carvel-space-5);
  flex-wrap: wrap;
}
.hero__note {
  font-size: var(--carvel-type-small);
  color: var(--carvel-gray);
}

/* Phone mockup — full device image */
.phone-mockup {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
}
.phone-mockup img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 50px rgba(15, 20, 25, 0.25));
}
/* ============================================================
   BÖLÜM BAŞLIKLARI
   ============================================================ */
section { padding: 120px 0; }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--carvel-space-8);
}
.section-head .carvel-tag { margin-bottom: var(--carvel-space-5); }
.section-head h2 {
  font-family: var(--carvel-font-body);
  font-weight: var(--carvel-w-bold);
  font-size: clamp(2rem, 3.4vw, 2.625rem);
  line-height: 1.2;
  color: var(--carvel-ink);
  margin: 0 0 var(--carvel-space-4);
  max-width: 760px;
  letter-spacing: -0.01em;
}
.section-head p {
  max-width: 620px;
  margin: 0;
  font-size: var(--carvel-type-body);
  color: var(--carvel-ink-2);
}

/* ============================================================
   NEDEN CARVEL — 4 fayda
   ============================================================ */
.why { background: var(--carvel-white); }
.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--carvel-space-5);
}
.benefit {
  padding: var(--carvel-space-6) var(--carvel-space-5);
  border: 1px solid var(--carvel-line);
  border-radius: var(--carvel-radius-md);
  background: var(--carvel-white);
  transition: border-color 200ms ease, transform 200ms ease;
}
.benefit:hover {
  border-color: var(--carvel-ink);
  transform: translateY(-2px);
}
.benefit__num {
  font-family: var(--carvel-font-display);
  font-weight: 900;
  font-size: 2rem;
  color: var(--carvel-petrol);
  line-height: 1;
  margin-bottom: var(--carvel-space-5);
}
.benefit h3 {
  font-family: var(--carvel-font-body);
  font-weight: var(--carvel-w-medium);
  font-size: 1.0625rem;
  color: var(--carvel-ink);
  margin: 0 0 var(--carvel-space-3);
  line-height: 1.4;
}
.benefit p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--carvel-ink-2);
  line-height: 1.6;
}

/* ============================================================
   ÖZELLİKLER — 2x4
   ============================================================ */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--carvel-line);
  border: 1px solid var(--carvel-line);
  border-radius: var(--carvel-radius-md);
  overflow: hidden;
}
.feature {
  background: var(--carvel-cream);
  padding: var(--carvel-space-7) var(--carvel-space-6);
  transition: background 200ms ease;
}
.feature:hover { background: var(--carvel-cream-2); }
.feature__icon {
  width: 42px; height: 42px;
  border-radius: var(--carvel-radius-md);
  background: var(--carvel-ink);
  color: var(--carvel-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--carvel-space-5);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 {
  font-family: var(--carvel-font-body);
  font-weight: var(--carvel-w-bold);
  font-size: 1.0625rem;
  color: var(--carvel-ink);
  margin: 0 0 var(--carvel-space-3);
  line-height: 1.35;
}
.feature p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--carvel-ink-2);
  line-height: 1.6;
}

/* ============================================================
   NASIL ÇALIŞIR
   ============================================================ */
.how { background: var(--carvel-white); }
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--carvel-space-6);
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: var(--carvel-line);
  z-index: 0;
}
.step { position: relative; z-index: 1; text-align: left; }
.step__num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--carvel-cream);
  color: var(--carvel-ink);
  border: 1.5px solid var(--carvel-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--carvel-font-display);
  font-weight: 900;
  font-size: 1.5rem;
  margin-bottom: var(--carvel-space-5);
}
.step h3 {
  font-family: var(--carvel-font-body);
  font-weight: var(--carvel-w-bold);
  font-size: 1.125rem;
  color: var(--carvel-ink);
  margin: 0 0 var(--carvel-space-3);
}
.step p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--carvel-ink-2);
  line-height: 1.6;
}

/* ============================================================
   İŞLETME TÜRLERİ
   ============================================================ */
.types {
  padding: 80px 0;
  background: var(--carvel-cream-2);
  border-top: 1px solid var(--carvel-line);
  border-bottom: 1px solid var(--carvel-line);
}
.types__head {
  text-align: center;
  font-family: var(--carvel-font-body);
  font-weight: 500;
  font-size: var(--carvel-type-small);
  color: var(--carvel-gray);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--carvel-space-6);
}
.types__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--carvel-space-5) var(--carvel-space-7);
  font-family: var(--carvel-font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  color: var(--carvel-ink);
  letter-spacing: -0.01em;
}
.types__list span { display: inline-block; }
.types__list .dot {
  width: 6px; height: 6px;
  background: var(--carvel-petrol);
  border-radius: 50%;
  display: inline-block;
}

/* ============================================================
   FİNAL CTA
   ============================================================ */
.final-cta {
  background: var(--carvel-ink);
  color: var(--carvel-white);
}
.final-cta .wrap {
  text-align: center;
  padding-top: 0;
  padding-bottom: 0;
}
.final-cta h2 {
  font-family: var(--carvel-font-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  color: var(--carvel-white);
  margin: 0 0 var(--carvel-space-5);
  letter-spacing: -0.015em;
}
.final-cta h2 .accent { color: var(--carvel-petrol); }
.final-cta p {
  max-width: 560px;
  margin: 0 auto var(--carvel-space-7);
  color: var(--carvel-gray-2);
  font-size: 1.125rem;
}
.final-cta .carvel-cta {
  background: var(--carvel-white);
  color: var(--carvel-ink);
}
.final-cta .carvel-cta:hover { background: var(--carvel-cream); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--carvel-ink);
  color: var(--carvel-gray-2);
  padding: 48px 0 32px;
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--carvel-space-5);
}
.site-footer__links {
  display: flex;
  gap: var(--carvel-space-6);
  font-size: var(--carvel-type-small);
}
.site-footer__links a {
  color: var(--carvel-gray-2);
  text-decoration: none;
  transition: color 150ms ease;
}
.site-footer__links a:hover { color: var(--carvel-white); }
.site-footer__copy {
  font-size: var(--carvel-type-small);
  color: var(--carvel-gray);
}

/* ============================================================
   FLOATING WHATSAPP (mobil)
   ============================================================ */
.fab-wa {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--carvel-wa);
  color: var(--carvel-white);
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(37, 211, 102, 0.5);
  text-decoration: none;
}
.fab-wa svg { width: 30px; height: 30px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--carvel-space-7); }
  .steps::before { display: none; }
}

@media (max-width: 768px) {
  :root { --carvel-margin: 6%; }
  .hero { padding: 64px 0 80px; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--carvel-space-8); }
  .phone-mockup { margin: 0 auto; max-width: 300px; }
  section { padding: 80px 0; }
  .site-header .carvel-cta span:not(.carvel-cta__icon) { display: none; }
  .site-header .carvel-cta { padding: 0.375rem; }
  .fab-wa { display: inline-flex; }
  .site-footer .wrap { flex-direction: column; text-align: center; }
}

@media (max-width: 520px) {
  .benefits { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .types__list { font-size: 1.25rem; gap: var(--carvel-space-4); }
  .site-footer__links { flex-wrap: wrap; justify-content: center; gap: var(--carvel-space-4); }
}