@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");

/* AI Yönetimi brand assets. Loaded after the purchased theme stylesheet. */
:root {
  --font-heading: "Space Grotesk", sans-serif;
}

.xb-header-logo .logo1,
.xb-logo-mobile a {
  display: flex;
  align-items: center;
}

/* Header logo uses logo_with_text_2_trimmed.png (no transparent border), so it is sized by height directly. */
.xb-header-logo .logo1 img,
.xb-logo-mobile img {
  width: auto;
  height: 44px;
  max-width: none;
}

.preloader .loader-logo img {
  width: 160px;
  height: auto;
  object-fit: contain;
}

.xb-footer-heading .title {
  font-size: 190px;
}

@media (max-width: 1199px) {
  .xb-footer-heading .title {
    font-size: 130px;
  }
}

@media (max-width: 991px) {
  .xb-footer-heading .title {
    font-size: 92px;
  }
}

@media (max-width: 767px) {
  .xb-header-logo .logo1 img,
  .xb-logo-mobile img {
    height: 34px;
  }

  .xb-footer-heading .title {
    font-size: 50px;
  }
}

/* ---- One-page site (LandingPage.jsx) ---- */

/* Anchor targets land below the sticky header. */
#neden, #neler-yapar, #nasil-calisir, #sss, #iletisim { scroll-margin-top: 90px; }

.how-intro { max-width: 820px; }

.crm-example { padding-top: 10px; }
.crm-example .sub-title {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.crm-example__heading { font-size: 22px; margin-bottom: 0; }

.crm-example > .row { margin-top: 10px; }

/* Example role: "tasks" and "what we need" each sit in their own tinted card so the two lists don't
   read as one; inside a card the list is a single column. */
.crm-example__panel {
  height: 100%;
  padding: 32px 34px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid var(--panel-accent);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel-tint) 0%, rgba(255, 255, 255, 0.02) 100%);
}
.crm-example__panel--tasks { --panel-accent: #00ff97; --panel-tint: rgba(0, 255, 151, 0.07); }
.crm-example__panel--needs { --panel-accent: #4d5bff; --panel-tint: rgba(77, 91, 255, 0.1); }
.crm-example__panel .crm-example__heading {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.crm-example__panel .service-outcome-list {
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px !important;
}
.crm-example__panel .service-outcome-list li { align-items: flex-start; }
@media (max-width: 767px) {
  .crm-example__panel { padding: 24px 20px; }
}

/* Contact form ---------------------------------------------------------------- */

/* Labels show exactly the text in content/site.js (the theme forced Title Case, which also
   produced wrong Turkish capitals such as "Istediğiniz"). */
.xb-contact-form .xb-input-field label { text-transform: none; }

/* Native role select, matched to the theme's text inputs (same colours, radius, padding for the icon). */
.xb-contact-form .xb-input-field .native-select {
  width: 100%;
  height: 60px;
  padding: 0 44px 0 48px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 5px;
  background-color: rgb(43, 61, 102);
  /* white chevron on the right so it still reads as a dropdown */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: -0.02em;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.xb-contact-form .xb-input-field .native-select:focus { outline: none; border-color: #00ff97; }
/* Nothing chosen yet: show the prompt in the same faded colour as the other labels */
.xb-contact-form .xb-input-field .native-select:invalid { color: rgba(255, 255, 255, 0.5); }
.xb-contact-form .xb-input-field .native-select option { background: #1b2540; color: #fff; }
/* The icon sits on the left inside the field, like the other inputs, and never blocks clicks */
.xb-contact-form .xb-select-field img { pointer-events: none; }

/* Optional phone field: an empty optional field counts as :valid, which made the theme hide its label.
   Keep the label visible until the visitor types. */
.xb-input-field.optional-field input:placeholder-shown:not(:focus) + label { transform: translateY(-50%); opacity: 1; }

.consent-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.consent-field input { margin-top: 4px; width: 16px; height: 16px; flex: none; accent-color: #00ff97; }
.consent-field a { color: #00ff97; text-decoration: underline; text-underline-offset: 2px; }
.consent-field a:hover { color: #fff; }

.form-error { color: #ff6b6b; }

/* KVKK page */
.legal-content h2 { font-size: 22px; margin: 32px 0 10px; }
.legal-content p { line-height: 1.7; }
.legal-updated { margin-top: 40px; opacity: 0.7; }

/* Role cards: the theme sized them (920px) for a photo plus 42px vertical titles. The photos were
   placeholders and are removed, so cards are shorter and the vertical titles smaller to still fit the
   longest role name. Mobile stacking is left as the theme has it. */
@media (min-width: 992px) {
  #neler-yapar .xb-service-item { height: 640px; }
  #neler-yapar .service-vertical-text .xb-item--title { font-size: 28px; }
}

/* Contact form: confirmation shown after a successful submit */
.form-success {
  text-align: center;
  padding: 30px 10px 10px;
  animation: form-success-in 0.4s ease-out both;
}
.form-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: #00ff97;
  color: #07090f;
  box-shadow: 0 0 0 10px rgba(0, 255, 151, 0.12);
}
.form-success__title { font-size: 30px; margin-bottom: 12px; }
.form-success__text { font-size: 17px; opacity: 0.85; margin-bottom: 28px; }
.form-success__again {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 30px;
  padding: 10px 22px;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.form-success__again:hover { border-color: #00ff97; }
@keyframes form-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .form-success { animation: none; } }

/* Font Awesome icons chosen in content/site.js, painted with the brand gradient (same colours as the rings). */
.brand-icon {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  background: linear-gradient(135deg, #4d5bff 0%, #00c2d1 55%, #00ff97 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Contact: commitments list on the theme's gradient card (replaces the old odometer counters, whose
   70px "1 Sunucu" overflowed the card). Stacked rows, so long Turkish words never get clipped. */
.xb-contact-inner.contact-promises {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 64px 32px 36px;
  text-align: start;
}
.contact-promise { display: flex; align-items: flex-start; gap: 16px; }
.contact-promise__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 20px;
}
.contact-promise__title { font-size: 20px; margin: 2px 0 4px; color: #fff; }
.contact-promise__text { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
@media (max-width: 767px) {
  .xb-contact-inner.contact-promises { padding: 56px 20px 28px; }
}

/* Roles heading: the theme put the eyebrow inline, left of the title. Give it its own centred line with a
   dot on each side, like the other section headings. */
#neler-yapar .custom-sec-title .sub-title {
  display: table;
  margin: 0 auto 15px;
  transform: none;
}
#neler-yapar .custom-sec-title .title { margin-left: 0; }
/* Below 1300px the theme drops the button's 35px offset, so it touched the last word of the title. */
@media (max-width: 1300px) {
  #neler-yapar .xb-heading-btn { margin-left: 20px; }
}

/* Roles heading: the GIF now sits between the two halves of the title, so it needs space on both sides. */
#neler-yapar .round-img img { margin: 0 24px; vertical-align: middle; }
@media (max-width: 767px) {
  #neler-yapar .round-img img { margin: 0 8px; }
}
/* Keep the second half of the title on one line so it never splits around the GIF (wide screens only). */
@media (min-width: 768px) {
  #neler-yapar .title-keep { white-space: nowrap; }
}

/* Hero highlight cards: Bootstrap columns already stretch to the tallest card in the row; make each card
   fill its column so all bottoms line up even when one text wraps to fewer lines. */
.hero-highlights > [class*="col-"] { display: flex; }
.hero-highlights .xb-feature-item { width: 100%; }
.hero-highlights .xb-feature-item,
.hero-highlights .xb-item--inner { height: 100%; }

/* Phone number (siteConfig.contactPhone) ---------------------------------------------------------- */
/* Mobile header: a call button beside the menu button, same size and outline. */
.header-bar-mobile { display: flex; align-items: center; gap: 10px; }
.header-call-mobile {
  width: 40px;
  height: 40px;
  border: 1px solid #00ff97;
  border-radius: 6px;
  color: #00ff97;
  font-size: 16px;
  transition: 0.3s;
}
.header-call-mobile:hover { background: #00ff97; color: #07090f; }
@media (max-width: 767px) {
  .header-call-mobile { width: 35px; height: 35px; }
}
@media (min-width: 992px) {
  .header-call-mobile { display: none !important; }
}

/* Contact section: line under the form. */
.contact-phone {
  margin: 22px 0 0;
  text-align: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}
.contact-phone i { color: #00ff97; margin-right: 6px; }
.contact-phone a { color: #00ff97; font-weight: 600; white-space: nowrap; }
.contact-phone a:hover { color: #fff; }

/* Role cards: the arrow button is pinned to the top-right of the title block, so long titles
   ("CRM ve Raporlama Ekibi Çalışanı") ran underneath it. Keep the title clear of the arrow. */
.xb-service-item .xb-item--head-item .xb-item--title { padding-right: 66px; }

/* Header: language switch (TR | EN) grouped with the CTA button and the mobile buttons --------------- */
.header-actions { display: flex; align-items: center; gap: 14px; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
}
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 8px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  transition: 0.2s;
}
a.lang-switch__item:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.lang-switch__item.is-active { background: #00ff97; color: #07090f; }
@media (max-width: 767px) {
  .header-actions { gap: 8px; }
  .lang-switch__item { min-width: 30px; height: 27px; font-size: 12px; padding: 0 6px; }
}

/* Packages (sections/Pricing.jsx): live prices from the panel API, styled like the example-role panels. */
.pricing-state { text-align: center; margin-top: 40px; opacity: 0.85; }
.pricing-state a,
.pricing-custom a { color: #00ff97; text-decoration: underline; text-underline-offset: 3px; }
.pricing-state a:hover,
.pricing-custom a:hover { color: #fff; }
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 36px 32px 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
}
.pricing-card--featured {
  border-color: #00ff97;
  background: rgba(0, 255, 151, 0.06);
  box-shadow: 0 24px 60px -30px rgba(0, 255, 151, 0.6);
}
.pricing-card__badge {
  position: absolute;
  top: -13px;
  left: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #00ff97;
  color: #0b1121;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pricing-card__name { font-size: 26px; margin-bottom: 18px; }
.pricing-card__price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.pricing-card__amount { font-size: 44px; font-weight: 700; line-height: 1; color: #fff; }
.pricing-card__period { font-size: 16px; opacity: 0.7; }
.pricing-card__vat { margin: 6px 0 0; font-size: 13px; opacity: 0.6; }
.pricing-card__details { margin: 20px 0 0; line-height: 1.6; white-space: pre-line; opacity: 0.85; }
.pricing-card__features { margin: 22px 0 0; }
.pricing-card__features li { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; line-height: 1.5; }
.pricing-card__features li span { flex: none; margin-top: 2px; }
.pricing-card__included {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  opacity: 0.75;
}
.pricing-card__cta { margin-top: auto; padding-top: 24px; }
.pricing-custom { margin: 50px 0 0; font-size: 17px; }
@media (max-width: 575px) {
  .pricing-card { padding: 32px 22px 24px; }
  .pricing-card__amount { font-size: 38px; }
}

/* İletişim: legal seller details under the commitments card (payment providers require them on the home page). */
.contact-company {
  margin-top: 30px;
  padding: 26px 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
}
.contact-company__title { font-size: 20px; margin-bottom: 12px; }
.contact-company li { margin-top: 6px; font-size: 15px; line-height: 1.55; opacity: 0.85; }

/* Footer: legal page links and payment logos */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  /* Same 16px side padding as the theme's footer items above. */
  padding: 26px 16px 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-legal__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.footer-legal__links a { font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.footer-legal__links a:hover { color: #00ff97; }
.footer-legal__logos { height: 30px; width: auto; }

/* Legal pages: bulleted lists */
.legal-list { padding-left: 20px; margin: 0 0 14px; }
.legal-list li { line-height: 1.7; margin-top: 4px; list-style: disc; }