/* yer.al Landing — v2 design canvas port
   Tokens: brand.css. Panel/Bms alanları panel-*.css kullanır, bu dosya sadece landing. */

/* ============ BASE ============ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  color: var(--t1);
  background: #312e81;
  min-height: 100vh;
}
:root[data-yr-theme="dark"] body {
  background: #0a0a0a;
}

img { max-width: 100%; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ============ FIXED BACKGROUND (iOS-safe: fixed container, background-attachment DEĞİL) ============
   Görsel tema seçicisine bağlı: light = hero-bg.jpg, dark = hero-bg-dark.jpg.
   background-image kullanıldığı için yalnızca aktif temanın görseli indirilir. */
.bg-fixed {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #312e81;
  background-image: url('/img/hero-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
:root[data-yr-theme="dark"] .bg-fixed {
  background-color: #0a0a0a;
  background-image: url('/img/hero-bg-dark.jpg');
}
.bg-fixed-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 27, 75, 0.75) 0%, rgba(30, 27, 75, 0) 50%);
  pointer-events: none;
}
/* Dark: üstte beyaz nav yazıları, altta hero kartı — iki uç biraz koyulaşır, orta görsel kalır. */
:root[data-yr-theme="dark"] .bg-fixed-overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 55%, rgba(10, 10, 10, 0.8) 100%);
}
@media (min-width: 769px) {
  .bg-fixed { background-position: 50% 30%; }
}

/* Sticky footer: content column fills at least the viewport so the footer always sits at the
   bottom and the fixed background photo never shows BELOW the footer on short pages.
   main stays display:block (children keep their normal block flow / auto-margin centering). */
.page-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page-content > main { flex: 1 0 auto; }
.page-content > .site-footer { flex-shrink: 0; }
/* Opt-in (ViewData["MainClass"] = "main-fill"): the page's single card stretches down to the
   footer — used by the "sheet" style not-found pages (magaza.css / kesfet.css). */
.page-content > main.main-fill { display: flex; flex-direction: column; }
.main-fill > * { flex: 1 0 auto; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ============ NAV ============ */
/* Fixed nav height (68px bar + 1px border). Pages that start below the nav use this. */
:root { --nav-h: 69px; }
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled { border-bottom-color: var(--border); }

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  height: calc(var(--nav-h) - 1px);
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-logo {
  display: flex;
  align-items: baseline;
  gap: 2px;
  text-decoration: none;
  font-weight: 600;
  font-size: 22px;
  color: var(--t1);
  letter-spacing: -0.5px;
}
.nav-logo span { color: var(--brand); }

.nav-links { display: flex; gap: 28px; flex: 1; }
.nav-links a {
  text-decoration: none;
  color: var(--t2);
  font-size: 14.5px;
  font-weight: 500;
}
.nav-links a:hover { color: var(--t1); }
.nav-links a.is-active { color: var(--brand) !important; }

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--t2);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
}
.theme-toggle:hover { border-color: var(--border-strong); color: var(--t1); }

.btn-pill-ghost {
  text-decoration: none;
  color: var(--t1);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.btn-pill-ghost:hover { border-color: var(--border-strong); background: var(--card); }

.btn-pill-brand {
  text-decoration: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--brand);
  white-space: nowrap;
}
.btn-pill-brand:hover { background: var(--brand-hover); }

/* Sayfa tepesinde: transparan nav + beyaz linkler */
.site-nav:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-nav:not(.is-scrolled) .nav-logo { color: #ffffff; }
.site-nav:not(.is-scrolled) .nav-logo span { color: #a5b4fc; }
.site-nav:not(.is-scrolled) .nav-links a { color: rgba(255, 255, 255, 0.88); }
.site-nav:not(.is-scrolled) .nav-links a.is-active { color: #ffffff !important; }
.site-nav:not(.is-scrolled) .theme-toggle {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.site-nav:not(.is-scrolled) .btn-pill-ghost {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Inner pages (store, discover, ...): the nav sits over light content or a cover photo, so it is always
   a slightly translucent frosted bar with theme text colors (no white-on-photo mode). Only the home
   hero opts into the transparent mode via ViewData["TransparentNav"]. Higher specificity than the
   :not(.is-scrolled) rules above. */
.site-nav.nav-solid:not(.is-scrolled) {
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}
.site-nav.nav-solid:not(.is-scrolled) .nav-logo { color: var(--t1); }
.site-nav.nav-solid:not(.is-scrolled) .nav-logo span { color: var(--brand); }
.site-nav.nav-solid:not(.is-scrolled) .nav-links a { color: var(--t2); }
.site-nav.nav-solid:not(.is-scrolled) .nav-links a:hover { color: var(--t1); }
.site-nav.nav-solid:not(.is-scrolled) .nav-links a.is-active { color: var(--brand) !important; }
.site-nav.nav-solid:not(.is-scrolled) .theme-toggle {
  color: var(--t2);
  background: var(--card);
  border-color: var(--border);
}
.site-nav.nav-solid:not(.is-scrolled) .btn-pill-ghost {
  color: var(--t1);
  background: transparent;
  border-color: var(--border);
}
.site-nav.nav-solid:not(.is-scrolled) .btn-pill-brand { color: #ffffff; }

/* Never underline nav links/buttons (any state, any page-level CSS leaking in) */
.site-nav a,
.site-nav a:hover,
.site-nav a:focus,
.site-nav a:active,
.site-nav a:visited { text-decoration: none; }

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 140px 24px 152px;
  overflow: hidden;
}
.hero-inner { max-width: 1180px; margin: 0 auto; width: 100%; }

.hero-copy {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - 360px);
  background: var(--bg);
  border-radius: 32px;
  padding: 48px 72px;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  width: 100%;
}
.hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }

.hero-logo {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 600;
  font-size: 38px;
  color: var(--t1);
  letter-spacing: -0.8px;
}
.hero-logo span { color: var(--brand); }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
}

.hero h1 {
  font-size: 60px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -2px;
  margin: 0;
  text-wrap: balance;
  color: var(--t1);
}
.hero h1 .accent { color: var(--brand); }

.hero-lead {
  font-size: 19px;
  line-height: 1.7;
  color: var(--t2);
  margin: 0;
  max-width: 540px;
  text-wrap: pretty;
}

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== Hero işletme arama (→ /kesfet) ===== */
.hero-search {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 540px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  box-shadow: var(--shadow);
}

.hero-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.hero-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--t1);
}

.hero-search-input::placeholder { color: var(--t3); }

.hero-search-btn {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
  background: var(--brand);
  border-radius: 999px;
  padding: 9px 22px;
  transition: background 0.15s ease;
}

.hero-search-btn:hover { background: var(--brand-hover); }
.hero-search-btn:active { background: var(--brand-press); }

.btn-cta-primary {
  text-decoration: none;
  color: #ffffff;
  background: var(--brand);
  font-size: 16px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-cta-primary:hover { background: var(--brand-hover); }
.btn-cta-primary:active { background: var(--brand-press); }

.btn-cta-ghost {
  text-decoration: none;
  color: var(--t1);
  background: var(--card);
  border: 1px solid var(--border-strong);
  font-size: 16px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 999px;
}
.btn-cta-ghost:hover { border-color: var(--t3); }

.hero-trust { display: flex; gap: 18px; flex-wrap: wrap; color: var(--t3); font-size: 13.5px; }
.hero-trust span { display: flex; align-items: center; gap: 6px; }
.hero-trust .check { color: var(--ok); font-weight: 600; }

.hero-visual { display: flex; justify-content: center; position: relative; text-align: left; }
.hero-visual-wrap { position: relative; }

.phone-frame {
  width: 320px;
  border-radius: 48px;
  background: var(--phone-bezel);
  padding: 11px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.phone-screen { border-radius: 38px; background: var(--alt); overflow: hidden; }
.phone-screen img { display: block; width: 100%; height: auto; }

@keyframes yrFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.float-card {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.float-notify {
  left: -110px;
  top: 42px;
  width: 230px;
  border-radius: 16px;
  padding: 12px 14px;
  animation: yrFloat 5s ease-in-out infinite;
}
.float-notify-row { display: flex; align-items: center; gap: 9px; }
.float-notify-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--brand);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.float-notify-title { font-size: 12.5px; font-weight: 600; color: var(--t1); }
.float-notify-sub { font-size: 11.5px; color: var(--t2); margin-top: 1px; }

.float-revenue {
  right: -60px;
  bottom: 72px;
  border-radius: 14px;
  padding: 11px 15px;
  animation: yrFloat 6s ease-in-out 1.2s infinite;
}
.float-revenue-label { font-size: 11px; color: var(--t3); }
.float-revenue-value { font-size: 17px; font-weight: 600; color: var(--t1); margin-top: 1px; }
.float-revenue-value .up { font-size: 11px; color: var(--ok); font-weight: 600; }

/* ============ SECTIONS ============ */
.section { padding: 88px 24px; background: var(--bg); }
.section--alt { background: var(--alt); }
.section--round-top { border-radius: 32px 32px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18); }
.section--round-bottom { border-radius: 0 0 32px 32px; }

/* Fixed nav offset için anchor hedefleri */
#ozellikler, #fiyatlandirma, #hakkimizda, #iletisim, #indir { scroll-margin-top: calc(76px + var(--ann-h, 0px)); }

.section-head {
  max-width: 640px;
  margin: 0 auto 52px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.section-head--narrow { max-width: 560px; }

.eyebrow {
  color: var(--brand);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.section-head h2, .section h2 {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.8px;
  margin: 0;
  text-wrap: balance;
  color: var(--t1);
}
.section-head p { font-size: 16px; color: var(--t2); margin: 0; }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }

/* ============ KİMLER İÇİN ============ */
.audience-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.audience-head { display: flex; align-items: center; justify-content: space-between; }
.audience-head h3 { font-size: 21px; font-weight: 600; margin: 0; }

.tag-ok {
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}
.tag-brand {
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}

.list-dash { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.list-dash li { display: flex; gap: 11px; font-size: 15px; line-height: 1.5; color: var(--t2); }
.list-dash li::before { content: "—"; color: var(--brand); font-weight: 600; }

/* ============ NASIL ÇALIŞIR ============ */
.step-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--card);
}
.step-num {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
}
.step-card h3 { font-size: 18px; font-weight: 600; margin: 0; }
.step-card p { font-size: 15px; line-height: 1.6; color: var(--t2); margin: 0; }

/* ============ ÖZELLİKLER ============ */
.feature-cards { margin-bottom: 24px; }
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feature-card svg { stroke: var(--brand); }
.feature-card h3 { font-size: 19px; font-weight: 600; margin: 0; }
.feature-card p { font-size: 15px; line-height: 1.6; color: var(--t2); margin: 0; }

.feat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.feat-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
}
.feat-item-title { font-size: 15.5px; font-weight: 600; margin-bottom: 5px; }
.feat-item-desc { font-size: 14px; line-height: 1.55; color: var(--t2); }

/* ============ ARA PENCERE (sabit görsel görünür) ============ */
.photo-window {
  height: 40vh;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: rgba(12, 12, 28, 0.35);
}
.photo-window-quote {
  color: rgba(255, 255, 255, 0.94);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
  text-align: center;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  text-wrap: balance;
}

/* ============ FİYATLANDIRMA ============ */
.pricing-wrap { max-width: 900px; margin: 0 auto; }
.price-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.price-left {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}
.price-left .tag-brand { align-self: flex-start; display: inline-flex; padding: 6px 14px; font-size: 13px; }
.price-line { display: flex; align-items: baseline; gap: 8px; }
.price-amount { font-size: 46px; font-weight: 600; letter-spacing: -1.5px; }
.price-period { font-size: 16px; color: var(--t2); }
.price-note { font-size: 15px; line-height: 1.65; color: var(--t2); }
.price-left .btn-cta-primary { text-align: center; }

.price-right { padding: 40px; background: var(--alt); border-left: 1px solid var(--border); }
.price-right-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 18px;
}
.list-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.list-check li { display: flex; gap: 10px; font-size: 14.5px; color: var(--t2); }
.list-check li::before { content: "✓"; color: var(--ok); font-weight: 600; }

/* ============ HAKKIMIZDA ============ */
.about-wrap {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-wrap p { font-size: 16.5px; line-height: 1.7; color: var(--t2); margin: 0; text-wrap: pretty; }
.about-wrap .about-company { font-size: 14px; color: var(--t3); }

/* ============ İLETİŞİM ============ */
.contact-wrap { max-width: 640px; margin: 0 auto; }
.contact-wrap .section-head { margin-bottom: 40px; }
.contact-wrap .section-head a { color: var(--brand); text-decoration: none; font-weight: 500; }

.contact-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--t2);
}
.contact-form input,
.contact-form select {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--t1);
  outline: none;
}
.contact-form input:focus,
.contact-form select:focus { border-color: var(--brand); }

.form-note { font-size: 12.5px; color: var(--t3); text-align: center; }

/* ---- İl/ilçe combobox (tek kutuda aranabilir seçim) ---- */
.combo { position: relative; }
.combo__input { width: 100%; padding-right: 38px; }

.combo__clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--t3);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.combo__clear:hover { background: var(--alt); color: var(--t1); }

.combo__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

.combo__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
}
/* Klavye ve fare aynı vurguyu paylaşır — is-active JS ile gezinirken taşınır. */
.combo__option.is-active,
.combo__option:hover { background: var(--brand-soft); }

.combo__option-main { font-size: 14.5px; color: var(--t1); }
.combo__option-sub { font-size: 12px; color: var(--t3); white-space: nowrap; }
.combo__empty { padding: 12px; font-size: 13.5px; color: var(--t3); text-align: center; }

/* Form gönderim hatası (rate limit, doğrulama, bağlantı) — JS ile is-visible eklenir. */
.form-error {
  display: none;
  background: var(--err-soft);
  color: var(--err);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.45;
}
.form-error.is-visible { display: block; }

.form-success {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 48px 36px;
  text-align: center;
  display: none;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.form-success.is-visible { display: flex; }
.contact-form.is-hidden { display: none; }
.form-success-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
}
.form-success-title { font-size: 20px; font-weight: 600; }
.form-success-sub { font-size: 15px; color: var(--t2); }

/* ---- Online işletme kaydı (TASK-255): adımlar, onay kutuları, SMS kodu ---- */
/* label/step'ler display:flex aldığı için [hidden] özniteliği tek başına gizlemiyordu. */
.contact-form [hidden],
.form-success [hidden] { display: none !important; }
.signup-step { display: flex; flex-direction: column; gap: 18px; }
.contact-form input:disabled,
.contact-form select:disabled { opacity: .6; cursor: not-allowed; background: var(--alt); }
.field-hint { font-size: 12px; font-weight: 400; color: var(--t3); }
.field-optional { font-weight: 400; color: var(--t3); }

.signup-consents { display: flex; flex-direction: column; gap: 12px; }
.contact-form label.check-row {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}
.contact-form .check-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.check-row a,
.form-error a { color: var(--brand); font-weight: 500; }

.otp-intro { font-size: 14.5px; color: var(--t2); line-height: 1.5; }
.otp-intro strong { color: var(--t1); }
.contact-form .otp-input {
  font-size: 24px;
  letter-spacing: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.otp-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.signup-link {
  border: 0;
  background: none;
  padding: 4px 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--brand);
  cursor: pointer;
}
.signup-link:disabled { color: var(--t3); cursor: default; }
.btn-cta-primary:disabled { opacity: .65; cursor: wait; }

/* ============ İNDİRME / KAPANIŞ ============ */
.download-section { padding: 24px 24px 96px; background: var(--bg); }
.download-banner {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--brand);
  border-radius: 24px;
  padding: 64px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.download-banner h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.8px; margin: 0; color: #ffffff; text-wrap: balance; }
.download-banner p { font-size: 16px; color: rgba(255, 255, 255, 0.85); margin: 0; }
.store-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.store-btn {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0a0a0a;
  color: #ffffff;
  padding: 11px 22px;
  border-radius: 12px;
}
.store-btn:hover { background: #1f1f1f; }
.store-btn-label { text-align: left; }
.store-btn-label small { display: block; font-size: 10.5px; opacity: 0.7; }
.store-btn-label strong { display: block; font-size: 16px; font-weight: 600; margin-top: 1px; }

/* ============ FOOTER ============ */
.site-footer {
  padding: 56px 24px 40px;
  background: #1e1b4b;
  --t1: #ffffff;
  --t2: rgba(224, 231, 255, 0.78);
  --t3: rgba(165, 180, 252, 0.68);
  --border: rgba(255, 255, 255, 0.14);
  --brand: #a5b4fc;
}
.footer-inner { max-width: 1180px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; }

.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-logo { font-weight: 600; font-size: 20px; letter-spacing: -0.5px; color: #fbfafa; }
.footer-logo span { color: #fcfcfc; }
.footer-desc { font-size: 14px; line-height: 1.6; color: var(--t2); max-width: 280px; }
.footer-company { font-size: 12.5px; color: var(--t3); }

.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--t3);
}
.footer-col-title.mt { margin-top: 8px; }
.footer-col a { font-size: 14px; color: var(--t2); text-decoration: none; }
.footer-col a:hover { color: var(--t1); }

.footer-bottom {
  border-top: 1px solid var(--border);
  margin-top: 44px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--t3);
}
.footer-bottom a { color: var(--t3); text-decoration: none; }
.footer-bottom a:hover { color: var(--t1); }

/* ============ DEV LINKS (sadece Development) ============ */
.dev-links { padding: 24px; background: var(--alt); border-top: 1px dashed var(--border-strong); }
.dev-links-banner {
  max-width: 1180px;
  margin: 0 auto;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  padding: 20px;
  background: var(--card);
}
.dev-links-badge {
  display: inline-block;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.dev-links-note { font-size: 13px; color: var(--t3); margin: 8px 0 14px; }
.dev-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.dev-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--t1);
  background: var(--bg);
  font-size: 14px;
}
.dev-card:hover { border-color: var(--brand); }
.dev-card-url { font-size: 12.5px; color: var(--t3); }
.dev-card-form input {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--t1);
}
.dev-card-form button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: var(--brand);
  color: #ffffff;
  cursor: pointer;
}

/* ============ ERROR PAGE ============ */
.text-danger { color: var(--err); }
.error-page { padding: 120px 24px 64px; background: var(--bg); min-height: 70vh; }

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
  .nav-links { display: none !important; }
  .hero-inner { text-align: center; }
  .hero-copy { justify-content: center; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-text { align-items: center !important; }
  .hero-visual { justify-content: center !important; margin-top: 16px; }
  .cols-2 { grid-template-columns: 1fr !important; }
  .cols-3 { grid-template-columns: 1fr !important; }
  .feat-grid { grid-template-columns: 1fr 1fr !important; }
  .price-card { grid-template-columns: 1fr !important; }
  .price-right { border-left: none; border-top: 1px solid var(--border); }
  .footer-grid { grid-template-columns: 1fr 1fr !important; row-gap: 32px; }
}

@media (max-width: 600px) {
  .feat-grid { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .contact-form { padding: 24px 18px; border-radius: 20px; }
  /* iOS Safari 16px altındaki input'a odaklanınca sayfayı yakınlaştırır. */
  .contact-form input, .contact-form select { font-size: 16px; }
  .contact-form .otp-input { font-size: 22px; letter-spacing: 8px; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .hero h1 { font-size: 36px !important; }
  .hero-copy { padding: 32px 22px !important; border-radius: 24px !important; }
  .float-card { display: none !important; }
  .nav-actions .btn-pill-ghost { display: none; }
  .nav-inner { gap: 16px; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float-card { animation: none; }
}

/* ============ İLETİŞİM BİLGİ BLOĞU (TASK-257) ============ */
.contact-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: -12px 0 28px;
}
.contact-info-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--t1);
  min-width: 0;
  transition: border-color .15s ease, transform .15s ease;
}
a.contact-info-item:hover { border-color: var(--brand); transform: translateY(-1px); }
.contact-info-item--static { grid-column: 1 / -1; }
.contact-info-icon {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--brand);
  background: rgba(99, 102, 241, 0.12);
}
.contact-info-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-info-label { font-size: 12px; color: var(--t3); text-transform: uppercase; letter-spacing: .04em; }
.contact-info-value { font-size: 16px; font-weight: 600; color: var(--t1); overflow-wrap: anywhere; }
.contact-info-value--small { font-size: 14px; font-weight: 500; line-height: 1.4; }
.contact-info-sub { font-size: 13px; color: var(--t2); }
.footer-col a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 560px) {
  .contact-info { grid-template-columns: 1fr; }
}

/* ============ KURUCU İŞLETME PROGRAMI ============
   Duyuru bandı (_FounderBand.cshtml) + hero rozeti + fiyat kademe tablosu + form notu.
   <html class="has-ann"> (only _Layout, only while a founder tier is open and not dismissed)
   → band is fixed above the fixed nav; nav and page content shift down by --ann-h.
   Sticky/scroll offsets elsewhere add var(--ann-h, 0px) (kesfet.css, magaza-randevu.css, Store/Profile). */
:root { --ann-h: 0px; }
:root.has-ann { --ann-h: 36px; }
:root.has-ann .site-nav { top: var(--ann-h); }
:root.has-ann .page-content { padding-top: var(--ann-h); }

.founder-band { display: none; }
:root.has-ann .founder-band {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ann-h);
  z-index: 101;
  background: linear-gradient(90deg, #4338ca 0%, #6366f1 55%, #7c3aed 100%);
  color: #ffffff;
}
:root[data-yr-theme="dark"].has-ann .founder-band {
  background: linear-gradient(90deg, #312e81 0%, #4c1d95 100%);
}
.founder-band__inner {
  max-width: 1180px;
  height: 100%;
  margin: 0 auto;
  padding: 0 8px 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.founder-band__link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #ffffff;
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.2;
  white-space: nowrap;
}
.founder-band__link:hover .founder-band__cta { background: rgba(255, 255, 255, 0.28); }
.founder-band__long, .founder-band__short { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.founder-band__long strong, .founder-band__short strong { font-weight: 600; }
.founder-band__short { display: none; }
.founder-band__cta {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: background .15s ease;
}
.founder-band__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.founder-band__close:hover { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
.founder-band__close:focus-visible, .founder-band__link:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

@media (max-width: 720px) {
  :root.has-ann { --ann-h: 34px; }
  .founder-band__inner { padding: 0 4px 0 12px; gap: 4px; }
  .founder-band__long { display: none; }
  .founder-band__short { display: block; }
  .founder-band__link { justify-content: flex-start; gap: 8px; font-size: 12.5px; }
  .founder-band__cta { padding: 4px 9px; font-size: 12px; }
  .founder-band__cta span { display: none; }
}

/* Hero rozetleri */
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
a.hero-badge { text-decoration: none; }
.hero-badge--founder {
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.28);
}
.hero-badge--founder:hover { filter: brightness(1.08); }
.hero-badge--founder svg { color: #fde68a; flex-shrink: 0; }

/* Fiyatlandırma — kademe tablosu */
.pricing-wrap--founder { max-width: 980px; }
.pricing-wrap--founder .section-head { margin-bottom: 40px; }
.section-head p.founder-trial { font-size: 15px; color: var(--t1); }

.founder-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.founder-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 26px 32px 18px;
}
.founder-card__head h3 { margin: 0; font-size: 19px; font-weight: 600; color: var(--t1); }
.founder-card__head .tag-brand { font-size: 12.5px; padding: 6px 12px; }

.founder-tiers { width: 100%; border-collapse: collapse; font-size: 15px; }
.founder-tiers th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--t3);
  padding: 10px 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--alt);
}
.founder-tiers td { padding: 16px 32px; border-bottom: 1px solid var(--border); color: var(--t2); vertical-align: middle; }
.founder-tiers .num, .founder-tiers th.num { text-align: right; }
.founder-tiers .ft-range { color: var(--t1); font-weight: 500; }
.founder-tiers .ft-price strong { color: var(--t1); font-weight: 600; font-size: 17px; }
.founder-tiers .ft-m { display: none; }

.ft-row.is-full td { color: var(--t3); }
.ft-row.is-full .ft-range, .ft-row.is-full .ft-price strong { color: var(--t3); text-decoration: line-through; text-decoration-thickness: 1px; }
.ft-row.is-open td { background: var(--brand-soft); }
.ft-row.is-open .ft-range, .ft-row.is-open .ft-price strong { color: var(--brand); }
.ft-row.is-open .ft-range { box-shadow: inset 4px 0 0 var(--brand); font-weight: 600; }
.ft-row.is-open .ft-price strong { font-size: 20px; }

.ft-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--alt);
  color: var(--t2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.ft-pill--open { background: var(--brand); color: #ffffff; border-color: var(--brand); }
.ft-pill--full { background: transparent; color: var(--t3); }

.founder-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 32px 26px;
}
.founder-vat { font-size: 13.5px; color: var(--t3); }
.founder-card__foot .btn-cta-primary { text-align: center; }

.founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.founder-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px 32px;
  box-shadow: var(--shadow);
}
.list-check--2 { grid-template-columns: 1fr 1fr; }

.founder-faq details { border-bottom: 1px solid var(--border); }
.founder-faq details:last-child { border-bottom: 0; }
.founder-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--t1);
}
.founder-faq summary::-webkit-details-marker { display: none; }
.founder-faq summary::after {
  content: "+";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}
.founder-faq details[open] summary::after { content: "−"; }
.founder-faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.founder-faq p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.65; color: var(--t2); }

.price-note--muted { font-size: 13.5px; color: var(--t3); }

/* Kayıt formu notu */
.founder-form-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--t1);
  font-size: 14px;
  line-height: 1.55;
}
.founder-form-note svg { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.founder-form-note strong { color: var(--brand); font-weight: 600; }

@media (max-width: 960px) {
  .hero-badges { justify-content: center; }
  .founder-grid { grid-template-columns: 1fr; }
}

/* Mobil: tablo → kart listesi (yatay kaydırma yok) */
@media (max-width: 640px) {
  .founder-card__head { padding: 20px 18px 14px; }
  .founder-card__head h3 { font-size: 17px; }
  .founder-tiers thead { display: none; }
  .founder-tiers, .founder-tiers tbody { display: block; }
  .founder-tiers tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "range status" "price disc";
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
  }
  .founder-tiers td { padding: 0; border: 0; background: transparent !important; }
  .ft-row.is-open { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); }
  .ft-row.is-open .ft-range { box-shadow: none; }
  .founder-tiers .ft-range { grid-area: range; font-size: 14px; }
  .founder-tiers .ft-status { grid-area: status; text-align: right; }
  .founder-tiers .ft-price { grid-area: price; text-align: left; }
  .founder-tiers .ft-disc { grid-area: disc; text-align: right; font-size: 13px; }
  .founder-tiers .ft-m { display: inline; }
  .founder-tiers .ft-price .ft-m { font-size: 13px; color: var(--t3); margin-left: 2px; }
  .ft-row.is-list .ft-disc { visibility: hidden; }
  .ft-pill { font-size: 11.5px; padding: 4px 9px; }
  .founder-card__foot { padding: 18px; }
  .founder-card__foot .btn-cta-primary { width: 100%; padding: 14px 18px; font-size: 15px; }
  .founder-vat { width: 100%; text-align: center; }
  .founder-panel { padding: 22px 18px; border-radius: 20px; }
  .list-check--2 { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .founder-band__link { font-size: 12px; gap: 6px; }
  .founder-band__cta { padding: 4px 8px; font-size: 11.5px; }
}