:root,
body {
  --token-fe9dedc1-7167-4441-8d0e-1755c18dc836: #9b6dff !important;
  --kralin-purple: #9b6dff;
  --kralin-purple-dark: #5a3291;
}

.kralin-wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  white-space: nowrap;
  color: #131311;
  font-family: "Satoshi", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.kralin-wordmark img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  background: transparent;
}

.kralin-logo-replacement {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kralin-language-switch {
  position: fixed;
  z-index: 2147483646;
  top: 78px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(19, 19, 17, 0.88);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  color: rgba(255, 255, 255, 0.55);
  font-family: "Satoshi", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  backdrop-filter: blur(12px);
}

.kralin-language-switch a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 160ms ease;
}

.kralin-language-switch a:hover,
.kralin-language-switch a[aria-current="page"] {
  color: #bda3ff;
}

[data-kralin-faq="true"] {
  cursor: pointer;
}

.kralin-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  opacity: 0;
  transition: grid-template-rows 240ms ease, opacity 180ms ease, padding 240ms ease;
}

.kralin-faq-answer p {
  overflow: hidden;
  margin: 0;
  color: rgba(19, 19, 17, 0.74) !important;
  font-family: "Satoshi", "Inter", sans-serif !important;
  font-size: clamp(14px, 1.2vw, 17px) !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.kralin-faq-open .kralin-faq-answer,
[data-kralin-faq="true"][aria-expanded="true"] .kralin-faq-answer {
  grid-template-rows: 1fr;
  padding-top: 16px;
  opacity: 1;
}

a[data-framer-name="Nav Logo"],
a[data-framer-name="Logo"] {
  width: auto !important;
  min-width: max-content !important;
  overflow: visible !important;
}

a[data-framer-name="Logo"] .kralin-wordmark {
  color: #fafafa;
}

[role="group"][aria-label="Currency selector"] {
  display: none !important;
}

[data-framer-name="Testimonial"] img {
  object-fit: cover !important;
  padding: 0 !important;
}

/* Original award badges belong to the source brand and are intentionally removed. */
.framer-1spscyu {
  display: none !important;
}

/* The "Two Countries, One Global Vision" section (originally the donation/
   "Hungry For Life" block) — removed at the user's request, gallery photos
   included, rather than kept and re-themed. */
[data-framer-name="HFL"] {
  display: none !important;
}

/* The team grid originally showed the original studio's real staff photos;
   kralin-brand.js now points each avatar at a generic stock headshot
   instead (set via JS, so no CSS override needed here beyond making sure
   it fills its circle nicely). */
.kralin-about [data-framer-name="Team Image"] img,
.kralin-about [data-framer-name="Profile Image"] img {
  object-fit: cover !important;
}

/* "Meet Kralin Software" / "Kralin Software ile Tanışın" sits in a heading
   node that was sized (and set to white-space:pre, i.e. it never wraps) for
   the single original word "Meet" — holding the full translated sentence
   there runs off both edges of the viewport. Shrink it and let it wrap. */
.kralin-meet-heading,
.kralin-shrink-heading {
  font-size: clamp(24px, 4vw, 38px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* Framer also gives these headings' *containers* a fixed height sized for
   the original short phrase — with our longer sentence wrapping to more
   lines than that budget allows, the extra lines spill out and overlap
   whatever sits above or below (a sticky nav, the following paragraph). */
.kralin-shrink-heading {
  position: relative;
  z-index: 1;
}

/* Some of these headings sit inside a wrapper with a fixed pixel height and
   overflow:clip, budgeted for the original short two-line phrase — our
   longer wrapped sentence needs a third line, and that ancestor was
   clipping it clean off. Let it grow instead of clipping wherever a
   shrink-heading lives inside it. */
.kralin-shrink-heading,
[data-framer-name="Trust Heading Wrapper"]:has(.kralin-shrink-heading),
[data-framer-name="Trust Content Wrapper"]:has(.kralin-shrink-heading),
[data-framer-name="Heading Content"]:has(.kralin-shrink-heading),
[data-framer-name="Heading Wrapper"]:has(.kralin-shrink-heading) {
  height: auto !important;
  overflow: visible !important;
}

/* Long Turkish/English words in headings (e.g. "Geliştiriyoruz") can hit a
   column edge and get cut mid-word with no hyphen. Let the browser hyphenate. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Framer fades+slides every section in on scroll, driven by an
   IntersectionObserver that sets opacity/transform via the Web Animations
   API, not a stylesheet rule. That trigger can fail to fire (seen around
   the "Meet Kralin Software" heading), leaving correct content stuck at
   ~0 opacity — a blank hole in the page. Forcing opacity back to 1 only for
   that specific, known-stuck wrapper (not site-wide — the hero cards rely
   on the same opacity+transform combo to animate into their scattered
   layout, and forcing it broke that) fixes the hole without touching
   anything else's entrance animation. */
.kralin-meet-heading,
[data-framer-name="Heading Con"]:has(.kralin-meet-heading) {
  opacity: 1 !important;
  transform: translateZ(0) !important;
}

/* The testimonial ticker's own <ul> (not any single card) is the element
   stuck at opacity:0 — a slide-in reveal that never got triggered, hiding
   five otherwise-correct cards behind the section's dark background. */
ul:has(> .ticker-item) {
  opacity: 1 !important;
  transform: none !important;
}

/* The team row shrank from a full photo grid to a line of plain color
   circles; give them a bit of presence instead of tiny flat dots, and make
   the "K" mark legible. */
.kralin-about [data-framer-name="Bubble"] {
  width: 64px !important;
  height: 64px !important;
  box-shadow: 0 6px 16px rgba(90, 50, 145, 0.35);
}

.kralin-about [data-framer-name="Team Image"]::after {
  font-size: 44% !important;
}

/* Testimonial category tag ("KURUMSAL WEB", "#BUILTBYKRALIN"...) sits right
   above the quote in some cards and right below it in others depending on
   which Framer breakpoint variant survived — pin it to the top consistently. */
[data-framer-name="Testimonial"] [data-framer-name="Testimonial Eyebrow"] {
  order: -1;
  margin-bottom: 8px;
}

[data-framer-name="Testimonial Content"] {
  display: flex !important;
  flex-direction: column !important;
}

/* The four "why trust us" stat tiles (TR + US, 360°, ∞, 1) read as flat
   solid-color rectangles. Give the purple ones a diagonal gradient + glow
   and every tile a subtle lift on hover so the grid feels less static. */
[data-framer-name="Gallery Stat"] {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

[data-framer-name="Gallery Stat"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(19, 19, 17, 0.16);
}

[data-framer-name="Gallery Stat"] {
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.05)) !important;
  background-blend-mode: overlay;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 22px rgba(19, 19, 17, 0.14);
}

/* "Jamie Profile" is a leftover decorative avatar bubble from the original
   Framer template, absolutely positioned inline inside the Trust section's
   paragraph at a character offset that matched the original (shorter)
   English sentence. The Turkish/English copy we use is a different length,
   so the bubble now floats disconnected mid-sentence, reading as a stray
   broken logo. It adds no information, so it's removed outright rather than
   repositioned. */
[data-framer-name="Jamie Profile"] {
  display: none !important;
}

/* The "Freelancer" column header in the 4-way comparison table loses its
   rich-text wrapper on Framer's runtime re-render (the other three headers
   keep theirs), leaving a bare unstyled text node: small, black, lowercase,
   instead of the shared white/bold/uppercase badge style. Re-apply that
   styling directly so it matches its siblings regardless of DOM shape. */
[data-framer-name="Freelancer"] [data-framer-name="Tab"] {
  color: rgb(250, 250, 250) !important;
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 9px !important;
  text-transform: uppercase !important;
}

/* Testimonial cards have a fixed 272px height budgeted for the original
   (shorter) English quotes; several of our translated quotes run to a third
   line and get clipped mid-letter at the card's bottom edge. Growing the
   card via `height: auto` doesn't work here — its internal
   `justify-content: space-between` just stretches the gap between the
   avatar row and the quote instead of giving the quote more room — so a
   taller fixed height plus `flex-start` alignment is used instead, which
   keeps every card visually consistent too. */
[data-framer-name="Testimonial"] {
  height: 320px !important;
  overflow: visible !important;
  justify-content: flex-start !important;
  gap: 20px !important;
}

/* The testimonial row (5 cards, ~1970px) is wider than its 1200px viewport
   and the wrapper clips the overflow with no scroll affordance, so 2 of the
   5 testimonials were simply never visible. kralin-brand.js duplicates the
   card set once and tags the row with this class; animate it into a smooth
   auto-scrolling loop (pausing on hover so a quote can be read) rather than
   leaving it static. */
.kralin-testimonial-track {
  animation: kralin-testimonial-scroll 34s linear infinite;
}

.kralin-testimonial-track:hover {
  animation-play-state: paused;
}

@keyframes kralin-testimonial-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Footer copyright row: "©" sits in its own flex item, gap:6px, next to a
   "2026" year box, next to the "Kralin Software. All rights reserved" text —
   but Framer's client runtime re-parents that text INSIDE the year box at
   runtime (confirmed via live DOM inspection; the static export has them as
   three separate siblings, but the hydrated page nests two of them), and
   that inner box has gap:0, so "2026" and "Kralin Software" render glued
   together with no space. Force a small gap on that box specifically. */
.framer-aka92q {
  gap: 4px !important;
}

/* Footer "Crafted with 💜 by Kralin Software" credit line and the large
   watermark "Kl" mark graphic behind the copyright row — both removed at
   the user's request. */
.framer-1vbwkyb,
.framer-1t7y9do {
  display: none !important;
}

/* The footer's outer "Footer BG" box is a flex container with the default
   align-items:center, wrapping a fixed 800px-tall inner frame (leftover from
   the original template's full badges row + watermark layout, the latter
   now hidden above). With that content gone and our translated copy
   shorter, capping Footer BG's own height (below) to remove dead space
   combined with center-alignment instead pushes HALF of that 800px frame
   above Footer BG's own top edge — clipping away the top of the real
   content (logo, nav links) while leaving the empty reserved space at the
   bottom, which is backwards from what's wanted. Top-aligning fixes that:
   the real content now starts exactly at Footer BG's own top edge instead
   of being clipped. */
[data-framer-name="Footer BG"] {
  align-items: flex-start !important;
  height: 380px !important;
}

/* The gap between the footer's own "Projeni Başlat" button and the
   copyright row below it was too tight once the dead space above was
   removed — give it real breathing room instead of sitting flush. */
[data-framer-name="Footer BG"] [data-framer-name="Container"] {
  gap: 56px !important;
}

/* Both the footer's "Container" (logo/links/socials + copyright row) and
   "Footer Top" (logo/links/socials alone) are `flex: 1 0 0` in their column
   flex parents — i.e. they grow to fill whatever leftover space their fixed-
   height ancestor reserves, which combined with `justify-content:
   space-between` is what stretches the copyright row down to the bottom of
   that reserved space instead of sitting right after the content above it.
   Turning off the grow and sizing each to its own content collapses that
   gap. (Footer BG's height above is sized to fit the result: real content
   height plus a little breathing room before the box's bottom edge.) */
[data-framer-name="Footer BG"] [data-framer-name="Container"],
[data-framer-name="Footer Top"] {
  flex-grow: 0 !important;
  height: min-content !important;
}

/* The "Nasıl Çalışıyoruz" / "How We Work" footer nav link sits in a wrapper
   (.framer-1auq722-container) hardcoded to 96px at this breakpoint — sized
   for the original short English label ("How It Works"). Both translations
   need more room and overflow:hidden on the link itself then clips a few
   pixels off each end ("asıl Çalışıyorı" instead of "Nasıl Çalışıyoruz").
   The other footer links in the same list don't carry this fixed width and
   size correctly; match that by letting this one size to its content too. */
.framer-1auq722-container {
  width: auto !important;
}

/* The "Fikrini bize anlat" eyebrow pill above the contact-form heading
   ("Fikriniz Kendi Kendine Gerçek Olmaz...") — removed outright at the
   user's request rather than kept and re-centered. */
.framer-1w0za9c {
  display: none !important;
}

/* "Neler Geliştiriyoruz" (desktop list variant, >=1440px): each list item
   reveals a large preview image on hover. Those previews are CMS-fetched
   framerusercontent assets we never mapped in kralin-brand.js's
   enforceLocalAssets(), so its blanket fallback swaps every unmapped image
   to our own logo — meaning hovering "Kurumsal Web", "QR Menü" etc. pops up
   a giant Kralin logo instead of a project photo. Removed at the user's
   request rather than sourced with real per-category photos. */
[data-framer-name="Work Card"] img[src*="kralin-logo"] {
  display: none !important;
}

@media (max-width: 809px) {
  .kralin-language-switch {
    top: 13px;
    right: 72px;
    padding: 7px 9px;
  }

  .kralin-wordmark {
    gap: 7px;
    font-size: 15px;
  }

  .kralin-wordmark img {
    width: 31px;
    height: 31px;
  }

  /* At this breakpoint the footer's nav links, socials and copyright stack
     into a single tall column instead of desktop's compact row, so it needs
     considerably more height than the desktop value to avoid clipping the
     copyright row again. */
  [data-framer-name="Footer BG"] {
    height: 680px !important;
  }
}