/*
 * latilon-site additions on top of the legacy stylesheet (main.css).
 * main.css is the legacy file unchanged; everything the port needs beyond
 * it lives here, using the same palette:
 *   navy #102030, coral #f69268, heading #0a1426, text #535559,
 *   border #e3e6ec, light background #eeeff4.
 */

/* ---------- Accessibility ---------- */
.latilon-skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100000000;
  padding: 10px 18px;
  border-radius: 6px;
  background-color: #102030;
  color: #ffffff;
  font-weight: 500;
}

.latilon-skip-link:focus {
  top: 12px;
  color: #ffffff;
}

/* main.css removes focus outlines; keep them for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #f69268;
  outline-offset: 3px;
}

/* ---------- Header ---------- */
/* The legacy sticky header animated with animate.css, which is not loaded. */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.latilon-lang-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
}

.latilon-lang-link:hover,
.latilon-lang-link:focus {
  color: #f69268;
}

.sticky .latilon-lang-link {
  color: #222222;
}

.sticky .latilon-lang-link:hover,
.sticky .latilon-lang-link:focus {
  color: #f69268;
}

@media (min-width: 992px) and (max-width: 1399px) {
  .latilon-lang-link {
    font-size: 13px;
    margin-left: 8px;
  }
}

/* The menu button is a real <button> now; reset browser button styles. */
button.mobile-bar-control {
  padding: 0;
  border: 0;
  background: transparent;
}

/* Without JavaScript the menu cannot open: hide the button and panel.
   Every section stays reachable by scrolling and from the footer. */
.no-js .mobile-bar-control,
.no-js .responsive-sidebar {
  display: none !important;
}

/* Keep the closed off-canvas menu out of the tab order. */
.responsive-sidebar {
  visibility: hidden;
}

.responsive-sidebar.responsive-sidebar-visible {
  visibility: visible;
  box-shadow: -10px 0 40px rgba(8, 0, 42, 0.18);
}

/* Static replacement for the meanmenu block the legacy script generated. */
.latilon-mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #0c1923;
}

.latilon-mobile-nav li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.latilon-mobile-nav a {
  display: block;
  padding: 14px 18px;
  color: #ffffff;
  font-weight: 500;
  text-transform: uppercase;
}

.latilon-mobile-nav a:hover,
.latilon-mobile-nav a:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.latilon-mobile-cta {
  display: block;
  text-align: center;
}

/* ---------- Hero ---------- */
/* The H1 carries the full positioning phrase, longer than the legacy
   two-word headline, so it is set a step smaller. */
.latilon-hero-title {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  font-size: 56px;
  line-height: 1.15;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .latilon-hero-title {
    font-size: 50px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .latilon-hero-title {
    font-size: 42px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .latilon-hero-title {
    font-size: 34px;
  }
}

@media (max-width: 575px) {
  .latilon-hero-title {
    font-size: 28px;
    line-height: 1.25;
  }
}

.latilon-hero-lead {
  max-width: 760px;
  margin: 0 auto 25px;
  color: #ffffff;
}

@media (max-width: 767px) {
  .latilon-hero-lead {
    font-size: 17px;
    line-height: 1.65;
  }
}

.latilon-hero-actions {
  row-gap: 14px;
}

/* ---------- LATILON Nedir ---------- */
.latilon-about-segments {
  max-width: 680px;
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 1.7;
  color: #535559;
}

/* ---------- What is included today ---------- */
.latilon-included-area {
  padding: 105px 0 110px;
  background-color: #eeeff4;
}

.latilon-included {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.latilon-included-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 24px;
  background-color: #ffffff;
  border: 1px solid #e3e6ec;
  border-radius: 14px;
}

.latilon-included-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: rgba(246, 146, 104, 0.12);
  color: #f69268;
  font-size: 19px;
}

.latilon-included-title {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.35;
  color: #0a1426;
}

.latilon-included-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #535559;
}

@media (max-width: 1199px) {
  .latilon-included {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .latilon-included-area {
    padding: 85px 0 90px;
  }
}

@media (max-width: 767px) {
  .latilon-included {
    grid-template-columns: 1fr;
  }

  .latilon-included-area {
    padding: 70px 0 75px;
  }
}

/* ---------- References (text only) ---------- */

/* No text-transform: uppercase would turn "Latilon" into "LATİLON" in
   the Turkish locale. */



@media (max-width: 575px) {

}

/* ---------- Contact form ---------- */
.latilon-field-error[hidden] {
  display: none;
}

.latilon-honeypot {
  position: absolute;
  left: -9999px;
}

/* ---------- Footer ---------- */
/* Footer column titles are h2 for a correct outline; same look as the
   legacy `.footer-widget h5`. */
.latilon-footer-title {
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #0a1426;
}

.latilon-operator {
  margin-top: 4px;
  font-size: 13px;
}

/* ---------- 404 ---------- */
.latilon-404 {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 160px 0 100px;
}

.latilon-404-inner {
  max-width: 680px;
  margin: 0 auto;
}

.latilon-404-code {
  margin-bottom: 6px;
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
}

.latilon-404-title {
  font-size: 48px;
}

.latilon-404-text {
  margin-bottom: 30px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
}

.latilon-404-alt {
  margin: 34px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
}

.latilon-404-alt a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 575px) {
  .latilon-404-title {
    font-size: 32px;
  }

  .latilon-404-code {
    font-size: 72px;
  }
}

/* Wordmark images in the header, mobile menu and footer. The logo box sits
   beside the inline navigation, so it is centred on the line instead of
   resting on the text baseline (which pushed the image to the top). */
.sasup-logo {
  vertical-align: middle;
}

.sasup-logo img,
.footer-logo-text img {
  display: block;
  height: auto;
  max-width: 100%;
}

/* ---------- Inner pages (feature pages and their index) ---------- */
/* Short gradient band under the transparent header: it carries the
   breadcrumb, the page's H1 and its summary. */
.latilon-page-hero {
  padding: 170px 0 70px;
}

.latilon-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.latilon-breadcrumb li + li::before {
  content: '/';
  margin: 0 10px;
  color: rgba(255, 255, 255, 0.5);
}

.latilon-breadcrumb a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.latilon-breadcrumb a:hover,
.latilon-breadcrumb a:focus {
  color: #ffffff;
  text-decoration-thickness: 2px;
}

.latilon-page-title {
  max-width: 900px;
  margin-bottom: 20px;
  font-size: 52px;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.latilon-page-summary {
  max-width: 820px;
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  color: #ffffff;
}

@media (max-width: 991px) {
  .latilon-page-hero {
    padding: 140px 0 56px;
  }

  .latilon-page-title {
    font-size: 40px;
  }
}

@media (max-width: 575px) {
  .latilon-page-hero {
    padding: 120px 0 44px;
  }

  .latilon-page-title {
    font-size: 30px;
    line-height: 1.25;
  }

  .latilon-page-summary {
    font-size: 17px;
  }
}

.latilon-feature-shots {
  padding: 56px 0;
}

.latilon-feature-shot {
  max-width: 1100px;
  margin: 0 auto;
  background-color: #ffffff;
}

.latilon-feature-shot + .latilon-feature-shot {
  margin-top: 40px;
}

.latilon-feature-shot figcaption {
  padding: 12px 18px;
  border-top: 1px solid #e3e6ec;
  font-size: 14px;
  color: #535559;
}

.latilon-feature {
  padding: 80px 0 60px;
}

.latilon-feature-inner {
  max-width: 860px;
  margin: 0 auto;
}

.latilon-feature-section + .latilon-feature-section {
  margin-top: 64px;
}

.latilon-feature-h2,
.latilon-prose h2 {
  margin: 0 0 24px;
  font-size: 32px;
  line-height: 1.25;
  color: #0a1426;
}

/* A body with several h2 sections: every heading after the first needs air
   above it, or it reads as part of the paragraph before. */
.latilon-prose h2:not(:first-child) {
  margin-top: 48px;
}

.latilon-prose h3 {
  margin: 28px 0 12px;
  font-size: 21px;
  color: #0a1426;
}

.latilon-prose p,
.latilon-prose li,
.latilon-howto-step p,
.latilon-role p {
  font-size: 17px;
  line-height: 1.7;
  color: #535559;
}

.latilon-prose ul,
.latilon-prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.latilon-prose a,
.latilon-faq-a a {
  color: #102030;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Numbered steps: the number comes from a CSS counter on the real <ol>. */
.latilon-howto {
  counter-reset: latilon-howto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.latilon-howto-step {
  counter-increment: latilon-howto;
  position: relative;
  padding: 0 0 26px 62px;
}

.latilon-howto-step::before {
  content: counter(latilon-howto);
  position: absolute;
  left: 0;
  top: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background-color: rgba(246, 146, 104, 0.12);
  color: #f69268;
  font-size: 18px;
  font-weight: 700;
}

.latilon-howto-title,
.latilon-role-title {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.35;
  color: #0a1426;
}

.latilon-howto-step p,
.latilon-role p {
  margin: 0;
}

.latilon-roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.latilon-role {
  padding: 24px;
  border: 1px solid #e3e6ec;
  border-radius: 14px;
  background-color: #ffffff;
}

.latilon-platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.latilon-platform {
  padding: 22px 24px;
  border: 1px solid #e3e6ec;
  border-radius: 14px;
  background-color: #ffffff;
}

.latilon-platform-name {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 600;
  color: #0a1426;
}

.latilon-platform-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #1f7a4d;
}

.latilon-platform.is-unavailable .latilon-platform-state {
  color: #8b8f99;
}

.latilon-platform-note {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #535559;
}

/* FAQ: native <details>, readable and operable without JavaScript. */
.latilon-faq {
  border-top: 1px solid #e3e6ec;
}

.latilon-faq-item {
  border-bottom: 1px solid #e3e6ec;
}

.latilon-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}

.latilon-faq-item summary::-webkit-details-marker {
  display: none;
}

.latilon-faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 26px;
  line-height: 1;
  color: #f69268;
}

.latilon-faq-item[open] summary::after {
  content: '\2212';
}

.latilon-faq-item summary:focus-visible {
  outline: 2px solid #f69268;
  outline-offset: 3px;
}

.latilon-faq-q {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: #0a1426;
}

.latilon-faq-a {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.7;
  color: #535559;
}

.latilon-related {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.latilon-related a {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid #e3e6ec;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  color: #0a1426;
}

.latilon-related a:hover,
.latilon-related a:focus {
  border-color: #f69268;
  color: #f69268;
}

.latilon-feature-cta {
  padding: 80px 0;
}

.latilon-feature-cta-title {
  margin: 0 0 14px;
  font-size: 36px;
  line-height: 1.25;
  color: #ffffff;
}

.latilon-feature-cta .latilon-hero-actions {
  column-gap: 25px;
}

.latilon-feature-cta-text {
  max-width: 640px;
  margin: 0 auto 28px;
  font-size: 18px;
  color: #ffffff;
}

@media (max-width: 767px) {
  .latilon-feature {
    padding: 56px 0 40px;
  }

  .latilon-feature-section + .latilon-feature-section {
    margin-top: 48px;
  }

  .latilon-feature-h2,
  .latilon-prose h2 {
    font-size: 26px;
  }

  .latilon-roles,
  .latilon-platforms {
    grid-template-columns: 1fr;
  }

  .latilon-feature-shots {
    padding: 32px 0;
  }

  .latilon-feature-cta {
    padding: 60px 0;
  }

  .latilon-feature-cta-title {
    font-size: 28px;
  }
}

@media (max-width: 575px) {
  .latilon-howto-step {
    padding-left: 54px;
  }
}

/* Feature index: one card per page. */
.latilon-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.latilon-feature-card {
  position: relative;
  height: 100%;
  padding: 28px 28px 26px;
  border: 1px solid #e3e6ec;
  border-radius: 14px;
  background-color: #ffffff;
  transition: border-color 0.2s ease-in-out;
}

.latilon-feature-card:hover,
.latilon-feature-card:focus-within {
  border-color: #f69268;
}

.latilon-feature-card-title {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.35;
  color: #0a1426;
}

/* The whole card is clickable through the title link. */
.latilon-feature-card-title a {
  color: inherit;
}

.latilon-feature-card-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
}

.latilon-feature-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #535559;
}

@media (max-width: 767px) {
  .latilon-feature-list {
    grid-template-columns: 1fr;
  }
}

/* Line under the feature index linking the integration pages. */
.latilon-feature-more {
  margin: 28px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #535559;
}

.latilon-feature-more a {
  color: #102030;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Home page: items and module cards that have a feature page. */
.latilon-included-title a,
.latilon-module-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(246, 146, 104, 0.6);
  text-underline-offset: 4px;
}

.latilon-included-title a:hover,
.latilon-included-title a:focus,
.latilon-module-title a:hover,
.latilon-module-title a:focus {
  color: #f69268;
}

/* ---------- Standalone pages with store badges (e.g. /mobil-uygulama/) ---------- */
/* White badges on the inner-page gradient band, aligned with the summary. */
.latilon-stores--page .latilon-store {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #102030;
}

.latilon-stores--page .latilon-store:hover,
.latilon-stores--page .latilon-store:focus {
  background-color: #f69268;
  border-color: #f69268;
  color: #ffffff;
}

/* Phone screenshots side by side; they wrap on narrow screens. */
.latilon-feature-shots--phones .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.latilon-feature-phone {
  flex: 0 1 260px;
  margin: 0;
}

.latilon-feature-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(16, 32, 48, 0.18);
}

.latilon-feature-phone figcaption {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  color: #35637c;
}

@media (max-width: 575px) {
  .latilon-feature-shots--phones .container {
    gap: 24px;
  }

  .latilon-feature-phone {
    flex-basis: 240px;
  }
}

/* Link from the home page's app section to the mobile app page. */
.latilon-app-more {
  margin: 22px 0 0;
}

.latilon-app-more a {
  color: #f69268;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.latilon-app-more a:hover,
.latilon-app-more a:focus {
  color: #ffffff;
}

.latilon-app-more i {
  margin-left: 8px;
}

/* E-mail address under the form on the demo/quote page. */
.latilon-contact-email {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #535559;
}

.latilon-contact-email a {
  color: #102030;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* Blog list (/blog/): one card per article, newest first. */
.latilon-blog-list {
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.latilon-feature-card .latilon-blog-date {
  margin: 0 0 10px;
  font-size: 14px;
  color: #35637c;
}

/* Date line under the H1 of an article. */
.latilon-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  font-size: 16px;
}

/* Release notes (/yenilikler/): one entry per item, newest first. */
.latilon-updates {
  list-style: none;
  margin: 0;
  padding: 0;
}

.latilon-update {
  padding: 28px 0;
  border-top: 1px solid #e3e6ec;
  scroll-margin-top: 110px;
}

.latilon-update:first-child {
  padding-top: 0;
  border-top: 0;
}

.latilon-update-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 8px;
  font-size: 14px;
  color: #35637c;
}

.latilon-update-area {
  font-weight: 600;
}

.latilon-update-title {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.35;
  color: #0a1426;
}

.latilon-update-title a {
  color: inherit;
}

.latilon-update .latilon-prose p:last-child {
  margin-bottom: 0;
}

.latilon-update-more {
  margin: 12px 0 0;
  font-size: 16px;
}

.latilon-update-more a {
  color: #102030;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.latilon-blog-feed i {
  margin-right: 8px;
}