/* HARBIQR — Landing (pazarlama) sayfası. Koyu tema, geri kalan menü
   uygulamasından bağımsız, tek dosyalık el yazması CSS. */
* { box-sizing: border-box; }
body.landing {
  margin: 0; background: #030712; color: #fff; font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}
.landing a { color: inherit; text-decoration: none; }
.landing .wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

/* Navbar */
.landing__nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.landing__nav.is-scrolled { background: rgb(3 7 18 / .9); backdrop-filter: blur(8px); border-color: rgb(31 41 55 / .6); }
.landing__nav-inner { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; height: 4rem; display: flex; align-items: center; justify-content: space-between; }
.landing__logo { display: flex; align-items: center; gap: .625rem; }
.landing__logo-badge {
  width: 2rem; height: 2rem; border-radius: .75rem; background: linear-gradient(to bottom right, #6366f1, #7c3aed);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .875rem; box-shadow: 0 10px 15px -3px rgb(99 102 241 / .3);
}
.landing__logo-text { font-weight: 900; font-size: 1.125rem; letter-spacing: -.02em; }
.landing__nav-links { display: none; align-items: center; gap: 2rem; font-size: .875rem; color: #9ca3af; }
.landing__nav-links a:hover { color: #fff; }
.landing__live {
  display: none; align-items: center; gap: .375rem; font-size: .75rem; color: #34d399; background: rgb(16 185 129 / .1);
  border: 1px solid rgb(16 185 129 / .2); padding: .375rem .75rem; border-radius: 9999px;
}
.landing__live-dot { width: .375rem; height: .375rem; border-radius: 9999px; background: #34d399; animation: pulse 2s infinite; }
@media (min-width: 640px) { .landing__live { display: inline-flex; } }
@media (min-width: 768px) { .landing__nav-links { display: flex; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* Hero */
.landing__hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-top: 4rem; overflow: hidden; }
.landing__glow {
  position: absolute; top: 25%; left: 50%; width: 800px; height: 500px; border-radius: 9999px; opacity: .2; pointer-events: none;
  background: radial-gradient(ellipse, #6366f1 0%, #8b5cf6 40%, transparent 70%);
}
.landing__grid-overlay {
  position: absolute; inset: 0; opacity: .04; pointer-events: none;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 60px 60px;
}
.landing__hero-content { position: relative; z-index: 10; text-align: center; padding: 0 1.5rem; max-width: 56rem; margin: 0 auto; }
.landing__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; color: #a5b4fc;
  background: rgb(99 102 241 / .1); border: 1px solid rgb(99 102 241 / .2); padding: .5rem 1rem; border-radius: 9999px; margin-bottom: 2rem;
}
.landing__eyebrow-dot { width: .375rem; height: .375rem; border-radius: 9999px; background: #818cf8; }
.landing__h1 { font-size: 2.75rem; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 1.5rem; }
.landing__h1-gradient { display: block; background: linear-gradient(to right, #818cf8, #a78bfa, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 768px) { .landing__h1 { font-size: 4.5rem; } }
.landing__lead { font-size: 1.125rem; color: #9ca3af; max-width: 42rem; margin: 0 auto 2.5rem; line-height: 1.7; }
.landing__lead strong { color: #fff; }
.landing__flow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
@media (min-width: 640px) { .landing__flow { flex-direction: row; } }
.landing__flow-card { display: flex; align-items: center; gap: .75rem; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); border-radius: 1rem; padding: .875rem 1.25rem; }
.landing__flow-card--active { background: rgb(99 102 241 / .1); border-color: rgb(99 102 241 / .3); }
.landing__flow-emoji { font-size: 1.5rem; }
.landing__flow-label { font-size: .75rem; color: #6b7280; font-weight: 500; margin: 0; }
.landing__flow-value { font-size: .875rem; font-weight: 700; color: #fff; margin: 0; }
.landing__flow-arrow { display: none; color: #374151; font-weight: 700; }
@media (min-width: 640px) { .landing__flow-arrow { display: block; } }
.landing__scroll-cue { margin-top: 5rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: #4b5563; animation: bounce 2s infinite; }
.landing__scroll-cue span { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Stats bar */
.landing__stats { border-top: 1px solid rgb(31 41 55 / .6); border-bottom: 1px solid rgb(31 41 55 / .6); background: rgb(17 24 39 / .4); backdrop-filter: blur(4px); }
.landing__stats-grid { max-width: 72rem; margin: 0 auto; padding: 2rem 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 768px) { .landing__stats-grid { grid-template-columns: repeat(4, 1fr); } }
.landing__stat { text-align: center; }
.landing__stat-value { font-size: 1.875rem; font-weight: 900; background: linear-gradient(to right, #818cf8, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.landing__stat-label { font-size: .75rem; color: #6b7280; margin: .25rem 0 0; font-weight: 500; }

/* Sections */
.landing__section { padding: 6rem 1.5rem; }
.landing__section--alt { background: rgb(17 24 39 / .3); }
.landing__section-head { text-align: center; margin-bottom: 4rem; }
.landing__section-head h2 { font-size: 1.875rem; font-weight: 900; margin: 0 0 1rem; }
@media (min-width: 768px) { .landing__section-head h2 { font-size: 3rem; } }
.landing__section-head p { color: #6b7280; max-width: 36rem; margin: 0 auto; }
.landing__gradient-text { background: linear-gradient(to right, #818cf8, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing__gradient-text--green { background: linear-gradient(to right, #34d399, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }

.landing__features { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .landing__features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .landing__features { grid-template-columns: repeat(3, 1fr); } }
.landing__feature-card { background: rgb(17 24 39 / .6); border: 1px solid #1f2937; border-radius: 1rem; padding: 1.5rem; transition: border-color .3s, background .3s; }
.landing__feature-card:hover { border-color: rgb(99 102 241 / .4); background: #111827; }
.landing__feature-icon { font-size: 1.875rem; display: block; margin-bottom: 1rem; }
.landing__feature-card h3 { font-weight: 700; font-size: 1.125rem; margin: 0 0 .5rem; }
.landing__feature-card p { font-size: .875rem; color: #6b7280; line-height: 1.6; margin: 0; }

.landing__steps { max-width: 64rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .landing__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .landing__steps { grid-template-columns: repeat(4, 1fr); } }
.landing__step-num { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: linear-gradient(to bottom right, #4f46e5, #6d28d9); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; box-shadow: 0 10px 15px -3px rgb(99 102 241 / .2); font-weight: 900; font-size: 1.25rem; }
.landing__step h3 { font-weight: 700; font-size: 1.125rem; margin: 0 0 .25rem; }
.landing__step p { font-size: .875rem; color: #6b7280; line-height: 1.6; margin: 0; }

.landing__realtime-box { max-width: 64rem; margin: 0 auto; position: relative; border-radius: 1.5rem; overflow: hidden; background: linear-gradient(to bottom right, #1e1b4b, #2e1065, #111827); border: 1px solid rgb(99 102 241 / .2); padding: 2.5rem; }
@media (min-width: 768px) { .landing__realtime-box { padding: 4rem; } }
.landing__realtime-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .landing__realtime-grid { grid-template-columns: repeat(2, 1fr); } }
.landing__realtime-badge { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; color: #34d399; background: rgb(16 185 129 / .1); border: 1px solid rgb(16 185 129 / .2); padding: .375rem .75rem; border-radius: 9999px; margin-bottom: 1.5rem; }
.landing__realtime-box h2 { font-size: 1.875rem; font-weight: 900; margin: 0 0 1rem; }
@media (min-width: 768px) { .landing__realtime-box h2 { font-size: 2.25rem; } }
.landing__realtime-box > .landing__realtime-grid > div:first-child p { color: #9ca3af; margin-bottom: 1.5rem; line-height: 1.6; }
.landing__realtime-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.landing__realtime-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; color: #d1d5db; }
.landing__check {
  width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: rgb(16 185 129 / .2); border: 1px solid rgb(16 185 129 / .3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .125rem; color: #34d399; font-size: .625rem; font-weight: 700;
}
.landing__order-mock { background: rgb(17 24 39 / .8); border: 1px solid #374151; border-radius: 1rem; padding: 1rem; display: flex; align-items: center; gap: 1rem; backdrop-filter: blur(4px); opacity: 0; animation: fadeSlideIn .5s ease both; }
.landing__order-mock:nth-child(1) { animation-delay: 0s; }
.landing__order-mock:nth-child(2) { animation-delay: .15s; }
.landing__order-mock:nth-child(3) { animation-delay: .3s; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.landing__order-bar { width: .5rem; height: 2.5rem; border-radius: 9999px; flex-shrink: 0; }
.landing__order-info { flex: 1; min-width: 0; }
.landing__order-info p:first-child { font-size: .75rem; color: #6b7280; font-weight: 500; margin: 0; }
.landing__order-info p:last-child { font-size: .875rem; color: #fff; font-weight: 600; margin: .125rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing__order-status { font-size: .75rem; font-weight: 700; padding: .25rem .625rem; border-radius: 9999px; white-space: nowrap; }
.landing__order-caption { text-align: center; font-size: .75rem; color: #374151; margin-top: .25rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }

.landing__techstack { text-align: center; }
.landing__techstack p { font-size: .75rem; color: #4b5563; text-transform: uppercase; letter-spacing: .2em; margin: 0 0 1.5rem; font-weight: 600; }
.landing__tech-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.landing__tech-badge { font-size: .75rem; font-weight: 600; color: #9ca3af; background: rgb(31 41 55 / .6); border: 1px solid rgb(55 65 81 / .6); padding: .5rem 1rem; border-radius: 9999px; }

.landing__footer { border-top: 1px solid rgb(31 41 55 / .6); padding: 2.5rem 1.5rem; }
.landing__footer-inner { max-width: 72rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 768px) { .landing__footer-inner { flex-direction: row; } }
.landing__footer-logo { display: flex; align-items: center; gap: .625rem; }
.landing__footer-badge { width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: linear-gradient(to bottom right, #6366f1, #7c3aed); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .75rem; }
.landing__footer p { font-size: .75rem; color: #4b5563; margin: 0; }