/* =========================================================
   FUTURE FORMATIVE LIVE - template-ff.php icin kapsamli stiller.
   Tokenlar aktif DESIGN.md ("future-formative-live") ile birebir:
   ana sayfanin canli DOM'undan olculmus gercek renk ve yazi tipleri.
   Yazi tipleri (Poppins / Montserrat / Raleway) ana tema tarafindan
   zaten yukleniyor; burada yeniden yuklenmez.
   dials: variance .3  density .4  motion .2 (animasyon yok)
   Her kural .ffp altinda; baska hicbir sayfaya sizmaz.
   ========================================================= */

.ffp {
  --bg:        #FFFFFF;
  --surface:   #F0F5F7;
  --ink:       #252525;
  --body:      #565656;
  --accent:    #D01498;
  --accent2:   #647ECB;
  --deep:      #0A0A0A;
  --line:      #E4E7EA;
  --onDark:    #FFFFFF;
  --onDarkMut: #CCCCCC;
  --accentLt:  #FF6FD0;
  --muted:     #6F7679;
  --mutedLine: #8C9498;

  --r-sm: 3px;
  --r-md: 5px;
  --s-xs: 8px;
  --s-sm: 16px;
  --s-md: 30px;
  --s-lg: 60px;
  --s-xl: 90px;

  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --heading: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --text:    "Raleway", "Helvetica Neue", Arial, sans-serif;

  background: var(--bg);
  color: var(--body);
  font-family: var(--text);
  font-size: 17px;
  line-height: 25px;
  display: block;
}

/* Ana temadan sizan sifirlamalari notrle. :where() ozgullugu 0'a
   dusurur, bilesen kurallarimiz her zaman kazanir. */
:where(.ffp) h1, :where(.ffp) h2, :where(.ffp) h3,
:where(.ffp) p, :where(.ffp) ul, :where(.ffp) ol, :where(.ffp) li,
:where(.ffp) dl, :where(.ffp) dt, :where(.ffp) dd,
:where(.ffp) details, :where(.ffp) summary {
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; list-style: none;
}

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

/* ---------- bolum ve kap ---------- */

.ffp-sec { padding: var(--s-lg) var(--s-md); }
.ffp-sec--hero { padding-top: var(--s-xl); padding-bottom: var(--s-xl); }
.ffp-wrap { max-width: 1170px; margin: 0 auto; }

.ffp-tone--bg      { background: var(--bg); }
.ffp-tone--surface { background: var(--surface); }
.ffp-tone--deep    { background: var(--deep); color: var(--onDarkMut); }

/* ---------- tipografi ---------- */

.ffp-label {
  font-family: var(--text); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
  margin-bottom: var(--s-sm);
}
.ffp-tone--deep .ffp-label { color: var(--accentLt); }

.ffp-h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 4.2vw, 48px); line-height: 1.16;
  letter-spacing: -.005em; color: var(--ink);
  max-width: 22ch;
}
.ffp-tone--deep .ffp-h1 { color: var(--onDark); }

.ffp-h2 {
  font-family: var(--heading); font-weight: 700;
  font-size: clamp(24px, 2.7vw, 36px); line-height: 1.22;
  color: var(--ink); margin-bottom: var(--s-md); max-width: 26ch;
}
.ffp-tone--deep .ffp-h2 { color: var(--onDark); }

.ffp-h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 22px; line-height: 1.3; color: var(--ink);
  margin-bottom: var(--s-sm);
}
.ffp-tone--deep .ffp-h3 { color: var(--onDark); }

.ffp-lead {
  font-size: 19px; line-height: 30px; color: var(--body);
  max-width: 62ch; margin-top: var(--s-sm);
}
.ffp-tone--deep .ffp-lead { color: var(--onDarkMut); }

.ffp-prose p { max-width: 68ch; margin-bottom: var(--s-sm); color: var(--body); }
.ffp-prose p:last-child { margin-bottom: 0; }
.ffp-prose strong { font-weight: 700; color: var(--ink); }
.ffp-tone--deep .ffp-prose p { color: var(--onDarkMut); }
.ffp-tone--deep .ffp-prose strong { color: var(--onDark); }

.ffp a { color: var(--accent); text-decoration: none; }
.ffp a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- hero ---------- */

.ffp-hero { max-width: 840px; }
.ffp-actions { margin-top: var(--s-md); display: flex; flex-wrap: wrap; gap: 14px; }

.ffp-btn {
  display: inline-block; font-family: var(--text); font-size: 16px; font-weight: 500;
  line-height: 1.2; padding: 15px 28px; border-radius: var(--r-md);
  border: 1px solid transparent; text-decoration: none;
}
.ffp-btn:hover { text-decoration: none; }

.ffp a.ffp-btn--primary { background: var(--accent); color: var(--onDark); }
.ffp a.ffp-btn--primary:hover { background: var(--accent2); color: var(--onDark); }

.ffp a.ffp-btn--ghost { border-color: var(--accent); color: var(--accent); background: transparent; }
.ffp a.ffp-btn--ghost:hover { background: var(--accent); color: var(--onDark); }

.ffp-tone--deep a.ffp-btn--primary {
  background-color: var(--accent);
  background-image: linear-gradient(to right, #D01498, #647ECB);
  color: var(--onDark); font-weight: 700;
}
.ffp-tone--deep a.ffp-btn--primary:hover { background-image: linear-gradient(to right, #647ECB, #D01498); }
.ffp-tone--deep a.ffp-btn--ghost { border-color: var(--onDark); color: var(--onDark); }
.ffp-tone--deep a.ffp-btn--ghost:hover { background: var(--onDark); color: var(--ink); }

/* hero kunye seridi */
.ffp-facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: var(--s-lg); border-top: 1px solid rgba(255,255,255,.18);
}
.ffp-tone--bg .ffp-facts, .ffp-tone--surface .ffp-facts { border-top-color: var(--line); }
.ffp-fact { padding: var(--s-md) var(--s-md) 0 0; }
.ffp-fact + .ffp-fact { border-left: 1px solid rgba(255,255,255,.18); padding-left: var(--s-md); }
.ffp-tone--bg .ffp-fact + .ffp-fact,
.ffp-tone--surface .ffp-fact + .ffp-fact { border-left-color: var(--line); }
.ffp-fact dt {
  font-family: var(--text); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
  margin-bottom: 10px;
}
.ffp-tone--deep .ffp-fact dt { color: var(--accentLt); }
.ffp-fact dd {
  font-family: var(--heading); font-weight: 600; font-size: 20px;
  line-height: 1.35; color: var(--ink);
}
.ffp-tone--deep .ffp-fact dd { color: var(--onDark); }

/* ---------- belirtiler ---------- */

.ffp-symptoms { margin-top: var(--s-md); max-width: 76ch; }
.ffp-symptoms li {
  position: relative; padding: 18px 0 18px 36px;
  border-top: 1px solid var(--line); color: var(--body);
}
.ffp-symptoms li:last-child { border-bottom: 1px solid var(--line); }
.ffp-symptoms li::before {
  content: ""; position: absolute; left: 4px; top: 28px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--accent);
}

/* ---------- iki sutun (kapsam) ---------- */

.ffp-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg); }
.ffp-ticks li {
  position: relative; padding: 12px 0 12px 28px;
  border-top: 1px solid var(--line); font-size: 16px; color: var(--body);
}
.ffp-ticks li:last-child { border-bottom: 1px solid var(--line); }
.ffp-ticks li::before {
  position: absolute; left: 0; top: 12px;
  font-family: var(--text); font-size: 15px; font-weight: 700;
}
.ffp-ticks--in  li::before { content: "+"; color: var(--accent); }
.ffp-ticks--out li::before { content: "\2013"; color: var(--mutedLine); }
.ffp-ticks--out li { color: var(--muted); }

/* ---------- surec ---------- */

.ffp-steps li {
  display: grid; grid-template-columns: 160px 1fr; gap: var(--s-md);
  padding: 24px 0; border-top: 1px solid var(--line);
}
.ffp-steps li:last-child { border-bottom: 1px solid var(--line); }
.ffp-step-when {
  font-family: var(--text); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
  padding-top: 6px;
}
.ffp-step-body { color: var(--body); max-width: 64ch; }
.ffp-step-body strong { color: var(--ink); font-weight: 700; font-family: var(--heading); }

/* ---------- ciktilar ---------- */

.ffp-deliv { margin-top: var(--s-md); }
.ffp-deliv-row {
  display: grid; grid-template-columns: 280px 1fr; gap: var(--s-md);
  padding: 22px 0; border-top: 1px solid var(--line);
}
.ffp-deliv-row:last-child { border-bottom: 1px solid var(--line); }
.ffp-deliv-name {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  line-height: 1.35; color: var(--ink);
}
.ffp-deliv-desc { font-size: 16px; color: var(--body); max-width: 62ch; }

/* ---------- kimin icin degil (koyu bant) ---------- */

.ffp-notfor { max-width: 74ch; }
.ffp-notfor li {
  padding: 18px 0 18px 30px; position: relative;
  border-top: 1px solid rgba(255,255,255,.16); color: var(--onDarkMut);
}
.ffp-notfor li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.ffp-notfor li::before {
  content: ""; position: absolute; left: 2px; top: 27px;
  width: 14px; height: 2px; background: var(--accent);
}

/* ---------- SSS ---------- */

.ffp-faq { max-width: 80ch; }
.ffp-faq details { border-top: 1px solid var(--line); }
.ffp-faq details:last-child { border-bottom: 1px solid var(--line); }
.ffp-faq summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0;
  position: relative; font-family: var(--heading); font-weight: 600;
  font-size: 18px; line-height: 1.4; color: var(--ink);
}
.ffp-faq summary::-webkit-details-marker { display: none; }
.ffp-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 20px;
  font-family: var(--text); font-size: 22px; font-weight: 700; color: var(--accent);
}
.ffp-faq details[open] summary::after { content: "\2013"; }
.ffp-faq-a { padding: 0 0 24px; }
.ffp-faq-a p { color: var(--body); max-width: 68ch; }

/* ---------- kapanis ---------- */

.ffp-cta { max-width: 680px; }

/* ---------- mobil daralma ---------- */

@media (max-width: 860px) {
  .ffp-sec { padding: 42px 20px; }
  .ffp-sec--hero { padding-top: 52px; padding-bottom: 52px; }
  .ffp-facts { grid-template-columns: 1fr; }
  .ffp-fact { padding: 20px 0 0; }
  .ffp-fact + .ffp-fact { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-left: 0; }
  .ffp-tone--bg .ffp-fact + .ffp-fact,
  .ffp-tone--surface .ffp-fact + .ffp-fact { border-top-color: var(--line); }
  .ffp-split { grid-template-columns: 1fr; gap: var(--s-md); }
  .ffp-steps li { grid-template-columns: 1fr; gap: 6px; }
  .ffp-deliv-row { grid-template-columns: 1fr; gap: 6px; }
  .ffp-h1 { max-width: none; }
  .ffp-actions .ffp-btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- katalog (hizmetler hub) ---------- */

.ffp-catalog { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-lg); margin-top: var(--s-xs); }
.ffp-cat { border-top: 2px solid var(--ink); padding-top: var(--s-md); }
.ffp-cat-desc { color: var(--body); font-size: 16px; margin-bottom: var(--s-sm); max-width: 50ch; }
.ffp-cat-list li { border-top: 1px solid var(--line); }
.ffp-cat-list li:last-child { border-bottom: 1px solid var(--line); }
.ffp-cat-list a, .ffp-cat-list span {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; font-family: var(--heading); font-size: 16px; line-height: 1.35;
}
.ffp .ffp-cat-list a { color: var(--ink); font-weight: 600; }
.ffp .ffp-cat-list a::after { content: "\2192"; color: var(--accent); font-weight: 700; }
.ffp .ffp-cat-list a:hover { color: var(--accent); text-decoration: none; }
.ffp-cat-list span { color: var(--muted); font-weight: 500; }

@media (max-width: 860px) {
  .ffp-catalog { grid-template-columns: 1fr; gap: var(--s-md); }
}