/* ==========================================================================
   Frenox — "Yıldızlı Mutfakların Tercihi" landing page
   Tek stil dosyası, TR ve EN sayfaları ortak kullanır.
   Tüm sınıflar "frx-" önekiyle yazıldı; site CSS'i ile çakışmaz.
   Kırılım noktaları: 1024px (tablet) · 720px (mobil)
   ========================================================================== */

:root {
  --frx-ink: #0e1216;          /* başlıklar, koyu kart, CTA zemini */
  --frx-ink-deep: #080c12;     /* hero zemini */
  --frx-footer: #080b0f;       /* footer zemini */
  --frx-text: #1c2329;         /* gövde metni */
  --frx-muted: #6b7785;        /* ikincil metin */
  --frx-line: #e3e7eb;         /* kenarlık */
  --frx-soft: #f5f7f9;         /* açık gri bölüm zemini */
  --frx-blue: #3ba9e0;         /* Frenox mavi — buton */
  --frx-blue-dark: #1b7fb5;    /* üst başlık (eyebrow) ve vurgu */
  --frx-radius: 14px;
  --frx-container: 1150px;
  --frx-font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif; /* sitenin kurumsal fontu farklıysa yalnızca bu satır değişir */
}

.frx-page,
.frx-page *,
.frx-page *::before,
.frx-page *::after { box-sizing: border-box; }

.frx-page {
  margin: 0;
  font-family: var(--frx-font);
  color: var(--frx-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

/* Sıfırlamalar :where() ile yazıldı — özgüllük 0, bileşen stillerini ezmez */
:where(.frx-page) img { max-width: 100%; height: auto; display: block; }
:where(.frx-page) a { color: inherit; text-decoration: none; }
:where(.frx-page) :where(h1, h2, h3, p, ul, figure, blockquote) { margin: 0; padding: 0; }
:where(.frx-page) ul { list-style: none; }

.frx-container {
  width: 100%;
  max-width: calc(var(--frx-container) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.frx-skip {
  position: absolute; left: -9999px; top: 0;
  background: #fff; color: var(--frx-ink); padding: 10px 16px; z-index: 100;
}
.frx-skip:focus { left: 12px; top: 12px; }

/* ---------- Butonlar ---------- */
.frx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px;
  font: 500 15px/1 var(--frx-font);
  border-radius: 6px; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.frx-btn:hover { transform: translateY(-1px); }
.frx-btn:focus-visible { outline: 3px solid rgba(59, 169, 224, .55); outline-offset: 2px; }
.frx-btn--lg { min-height: 55px; padding: 0 27px; }

.frx-btn--primary { background: var(--frx-blue); color: #fff; }
.frx-btn--primary:hover { background: #2b9bd4; }

.frx-btn--outline { background: #fff; color: var(--frx-ink); border-color: #d5dbe1; }
.frx-btn--outline:hover { border-color: var(--frx-ink); }

.frx-btn--white { background: #fff; color: var(--frx-ink); }
.frx-btn--white:hover { background: #eef2f5; }

.frx-btn--ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .7); }
.frx-btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

/* ---------- Header ---------- */
.frx-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--frx-line);
}
.frx-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px; gap: 16px;
}
.frx-logo img { width: 200px; height: auto; }
.frx-header__actions { display: flex; gap: 12px; }

/* ---------- Hero ---------- */
.frx-hero {
  position: relative; isolation: isolate;
  background: var(--frx-ink-deep);
  color: #fff;
  min-height: 888px;
  display: flex; align-items: center;
  padding: 120px 0;
  overflow: hidden;
}
.frx-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
}
.frx-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.frx-hero::after { /* görsel üstü koyu katman — metin okunurluğu */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 12, 18, .80) 0%, rgba(8, 12, 18, .86) 55%, rgba(8, 12, 18, .96) 100%);
}
.frx-hero__content { max-width: 625px; margin: 0 auto; }
.frx-hero h1 {
  font-size: 62px; line-height: 68px; font-weight: 700; letter-spacing: -.5px;
  color: #fff;
}
.frx-nowrap { white-space: nowrap; }
.frx-hero__lead {
  margin-top: 26px;
  font-size: 21px; line-height: 34px;
  color: rgba(240, 244, 248, .92);
}
.frx-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.frx-hero__note { margin-top: 30px; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .55); }

/* ---------- Bölüm iskeleti ---------- */
.frx-section { padding: 92px 0 84px; background: #fff; }
.frx-section--soft { background: var(--frx-soft); }

.frx-eyebrow {
  font-size: 13px; line-height: 18px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--frx-blue-dark);
}
.frx-h2 {
  margin-top: 18px;
  font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.4px;
  color: var(--frx-ink);
  max-width: 510px;
}
.frx-lead {
  margin-top: 18px;
  font-size: 17px; line-height: 28px; color: var(--frx-muted);
  max-width: 580px;
}
.frx-section__body { margin-top: 44px; }

/* ---------- Yorumlar ---------- */
.frx-quotes { display: grid; gap: 20px; }
.frx-quote {
  border: 1px solid var(--frx-line); border-radius: var(--frx-radius);
  background: #fff; padding: 32px 33px;
}
.frx-quote__text { font-size: 16px; line-height: 27px; color: var(--frx-ink); }
.frx-quote__text::before {
  content: "\201C";
  display: inline-block; margin-right: 6px;
  font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: 34px; line-height: 0; vertical-align: -10px;
  color: #8fcdee;
}
.frx-quote__by { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--frx-line); }
.frx-quote__name { display: block; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--frx-ink); font-style: normal; }
.frx-quote__role { display: block; font-size: 14px; line-height: 22px; color: var(--frx-muted); }

.frx-quote--featured { background: var(--frx-ink); border-color: var(--frx-ink); }
.frx-quote--featured .frx-quote__text { font-size: 20px; line-height: 34px; color: #eef2f5; }
.frx-quote--featured .frx-quote__text::before { color: #255f7d; }
.frx-quote--featured .frx-quote__by { border-top-color: #262c33; }
.frx-quote--featured .frx-quote__name { color: #fff; }
.frx-quote--featured .frx-quote__role { color: #a2a8af; }

.frx-badge {
  display: inline-block; margin-bottom: 18px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  background: #162d3a; color: #9bd4f0;
}

/* ---------- Ürün yelpazesi ---------- */
.frx-range__figure { border-radius: var(--frx-radius); overflow: hidden; background: #8b919b; }
.frx-range__figure img { width: 100%; aspect-ratio: 1150 / 642; object-fit: cover; }
.frx-stats {
  margin-top: 22px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--frx-line); border-radius: var(--frx-radius);
  overflow: hidden;
}
.frx-stat { padding: 30px 28px 32px; border-left: 1px solid var(--frx-line); }
.frx-stat:first-child { border-left: 0; }
.frx-stat__num { display: block; font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.5px; color: var(--frx-ink); }
.frx-stat__label { display: block; margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--frx-muted); }

/* ---------- Ödüller ---------- */
.frx-awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.frx-award {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--frx-line); border-radius: var(--frx-radius);
  background: #fff; padding: 22px 24px; min-height: 112px;
}
.frx-medal {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.frx-medal svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.frx-medal--gold   { background: linear-gradient(135deg, #c6a15b, #e7c987); }
.frx-medal--silver { background: linear-gradient(135deg, #9aa1ab, #d2d7de); }
.frx-medal--bronze { background: linear-gradient(135deg, #b07a47, #d0a06a); }
.frx-medal--blue   { background: linear-gradient(135deg, #1f86c0, #3aa0dc); }
.frx-award__meta { display: block; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .02em; color: var(--frx-blue-dark); }
.frx-award__title { display: block; margin-top: 4px; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--frx-ink); }
.frx-award__sub { display: block; margin-top: 3px; font-size: 13.5px; line-height: 19px; color: var(--frx-muted); }

/* ---------- Sertifikalar ---------- */
.frx-certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.frx-cert {
  border: 1px solid var(--frx-line); border-radius: var(--frx-radius);
  background: #fff; overflow: hidden;
}
.frx-cert img { width: 100%; aspect-ratio: 271 / 383; object-fit: cover; object-position: top; border-bottom: 1px solid var(--frx-line); }
.frx-cert figcaption { padding: 16px 18px 20px; }
.frx-cert__title { display: block; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--frx-ink); }
.frx-cert__sub { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--frx-muted); }

.frx-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.frx-pills li {
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--frx-line); background: #fff;
  font-size: 14px; line-height: 20px; color: var(--frx-ink);
}

/* ---------- CTA ---------- */
.frx-cta { background: var(--frx-ink); color: #fff; text-align: center; padding: 88px 0; }
.frx-cta h2 { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.4px; color: #fff; max-width: 440px; margin: 0 auto; }
.frx-cta p { margin: 20px auto 0; max-width: 480px; font-size: 17px; line-height: 29px; color: rgba(255, 255, 255, .78); }
.frx-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }

/* ---------- Footer ---------- */
.frx-footer { background: var(--frx-footer); color: #8f939a; padding: 52px 0 56px; }
.frx-footer__logo img { width: 173px; height: auto; opacity: .9; }
.frx-footer__addr { margin-top: 22px; font-size: 14px; line-height: 22px; color: #b9bdc3; font-style: normal; }
.frx-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.frx-footer__nav a { font-size: 14px; line-height: 22px; color: #a2a8af; }
.frx-footer__nav a:hover { color: #fff; }
.frx-footer__legal { margin-top: 24px; max-width: 540px; font-size: 12px; line-height: 19px; color: #5f656d; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .frx-hero { min-height: 0; padding: 96px 0; }
  .frx-hero h1 { font-size: 50px; line-height: 56px; }
  .frx-awards { grid-template-columns: repeat(2, 1fr); }
  .frx-certs { grid-template-columns: repeat(2, 1fr); }
  .frx-section { padding: 72px 0 60px; }
}

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  .frx-container { padding: 0 16px; }
  .frx-header__inner { min-height: 60px; }
  .frx-logo img { width: 140px; }
  .frx-header__actions { gap: 8px; }
  .frx-header .frx-btn { min-height: 38px; padding: 0 12px; font-size: 13px; }

  .frx-hero { padding: 64px 0 72px; }
  .frx-hero h1 { font-size: 36px; line-height: 42px; letter-spacing: -.3px; }
  .frx-hero__lead { font-size: 17px; line-height: 28px; margin-top: 20px; }
  .frx-hero__actions .frx-btn { flex: 1 1 140px; }

  .frx-section { padding: 56px 0 48px; }
  .frx-h2, .frx-cta h2 { font-size: 30px; line-height: 37px; }
  .frx-lead { font-size: 16px; line-height: 26px; }
  .frx-section__body { margin-top: 32px; }

  .frx-quote { padding: 24px 22px; }
  .frx-quote--featured .frx-quote__text { font-size: 17px; line-height: 29px; }
  .frx-quote__text { font-size: 15px; line-height: 25px; }

  .frx-stats { grid-template-columns: repeat(2, 1fr); }
  .frx-stat { padding: 20px 18px 22px; }
  .frx-stat:nth-child(odd) { border-left: 0; }
  .frx-stat:nth-child(n+3) { border-top: 1px solid var(--frx-line); }
  .frx-stat__num { font-size: 32px; line-height: 38px; }

  .frx-awards { grid-template-columns: 1fr; gap: 12px; }
  .frx-award { min-height: 0; padding: 18px; }
  .frx-certs { gap: 12px; }
  .frx-cert figcaption { padding: 12px 12px 14px; }
  .frx-cert__title { font-size: 14px; line-height: 19px; }
  .frx-cert__sub { font-size: 12.5px; line-height: 17px; }
  .frx-pills li { padding: 8px 14px; font-size: 13px; }

  .frx-cta { padding: 64px 0; }
  .frx-cta__actions .frx-btn { flex: 1 1 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .frx-btn { transition: none; }
  .frx-btn:hover { transform: none; }
}

@media print {
  .frx-header { position: static; }
}