/* Formül özeti: animasyonlu kazan, hammadde karışım yeri, giriş/kayıt alanı (konu.php üstünde).
   Sitenin makale stilleri (başlık, liste, bağlantı) bu bloğa sızmasın diye her şey sınıfla ve sıfırlanmış. */
.fl-wrap{--fl-surface:#ffffff;--fl-ink:#0c2a2c;--fl-soft:#4f6a6e;--fl-line:#d6e5e6;--fl-accent:#0f8a8a;--fl-accent-ink:#ffffff;--fl-c1:#0a4a4a;--fl-c2:#0f8a8a;--fl-c3:#8fd3d2;--fl-bg:#f4f8f7;
  display:block;width:100%;max-width:100%;margin:18px 0 22px;color:var(--fl-ink);font-family:inherit;font-size:.95rem;line-height:1.5;container-type:inline-size;clear:both;text-align:left}
.fl-wrap *,.fl-wrap *::before,.fl-wrap *::after{box-sizing:border-box}
.fl-wrap ol,.fl-wrap ul{list-style:none;margin:0;padding:0}
.fl-wrap p{margin:0}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .fl-wrap{--fl-surface:#122628;--fl-ink:#e7f2f2;--fl-soft:#9cb7b9;--fl-line:#25403f;--fl-accent:#4fb9b7;--fl-accent-ink:#06201f;--fl-c1:#9fdcdb;--fl-c2:#4fb9b7;--fl-c3:#2b7f7d;--fl-bg:#0c1b1d}
}
:root[data-theme="dark"] .fl-wrap{--fl-surface:#122628;--fl-ink:#e7f2f2;--fl-soft:#9cb7b9;--fl-line:#25403f;--fl-accent:#4fb9b7;--fl-accent-ink:#06201f;--fl-c1:#9fdcdb;--fl-c2:#4fb9b7;--fl-c3:#2b7f7d;--fl-bg:#0c1b1d}

/* Görünüm seçici */
.fl-switch{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.fl-switch-btn{font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--fl-line);background:var(--fl-bg);color:var(--fl-ink);text-decoration:none}
.fl-switch-btn.on{background:var(--fl-accent);color:var(--fl-accent-ink);border-color:var(--fl-accent)}
.fl-switch-btn:focus-visible{outline:2px solid var(--fl-accent);outline-offset:2px}

.fl-head{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.fl-pill{font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--fl-bg);border:1px solid var(--fl-line);color:var(--fl-soft)}

.fl-split{display:grid;gap:14px;grid-template-columns:1fr}
.fl-card{background:var(--fl-surface);border:1px solid var(--fl-line);border-radius:14px;padding:18px;min-width:0}
.fl-title{font-size:1.1rem;font-weight:700;margin:0 0 10px;color:var(--fl-ink)}
.fl-sub{font-size:1rem;font-weight:700;margin:18px 0 8px;color:var(--fl-ink)}
.fl-mix{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.fl-note{color:var(--fl-soft);font-size:.84rem;margin-top:8px}

/* Animasyonlu kazan (SVG) */
.fl-kettle{width:150px;height:auto;flex:0 0 150px;overflow:visible}
.fl-kazan-lid{fill:var(--fl-line)}
.fl-kazan-wall{fill:none;stroke:var(--fl-soft);stroke-width:2.5}
.fl-k1{fill:var(--fl-c1)}
.fl-k2{fill:var(--fl-c2)}
.fl-k3{fill:var(--fl-c3)}
.fl-shaft{fill:var(--fl-soft)}
.fl-blade{fill:var(--fl-ink)}
.fl-bub{fill:var(--fl-surface);opacity:0;animation:fl-rise 2.6s ease-in infinite}
.fl-stir{transform-box:view-box;transform-origin:80px 120px;animation:fl-stir 2.4s linear infinite}
@keyframes fl-stir{0%{transform:scaleX(1)}25%{transform:scaleX(.18)}50%{transform:scaleX(-1)}75%{transform:scaleX(.18)}100%{transform:scaleX(1)}}
@keyframes fl-rise{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(-62px);opacity:0}}

.fl-legend{display:grid;gap:5px;font-size:.88rem;color:var(--fl-soft)}
.fl-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:middle}
.fl-steps{display:grid;gap:0;font-size:.88rem}
.fl-steps li{display:grid;grid-template-columns:26px 1fr auto;gap:2px 10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--fl-line)}
.fl-num{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--fl-accent);color:var(--fl-accent-ink);font-weight:700;font-size:.74rem}
.fl-name{min-width:0;overflow-wrap:anywhere;color:var(--fl-ink)}
.fl-where{grid-column:2;color:var(--fl-soft);font-size:.8rem}
.fl-pct{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--fl-ink)}
.fl-name--locked{color:var(--fl-soft);letter-spacing:.15em;user-select:none}
.fl-pct--locked{color:var(--fl-soft)}

.fl-guest{margin:10px 0 12px;font-weight:700;color:var(--fl-ink)}
.fl-lock{border:1px dashed var(--fl-line);border-radius:12px;padding:14px;background:var(--fl-bg)}
.fl-lock strong{display:block;margin-bottom:4px;font-size:1rem;color:var(--fl-ink)}
.fl-lock p{margin:0 0 10px;color:var(--fl-soft);font-size:.9rem}
.fl-lock--gate{margin:18px 0}
.fl-lock--entry{border-style:solid;border-color:var(--fl-accent)}
.fl-cta{display:flex;flex-wrap:wrap;gap:8px}
.fl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:10px;background:var(--fl-accent);color:var(--fl-accent-ink);font-weight:700;text-decoration:none;margin:0}
.fl-btn--ghost{background:transparent;color:var(--fl-accent);border:1.5px solid var(--fl-accent)}
.fl-btn:focus-visible{outline:2px solid var(--fl-accent);outline-offset:2px}

/* B · Yan yana: kutu genişliği yeterliyse iki sütun */
@container (min-width:620px){
  .fl-v-b .fl-split{grid-template-columns:1.1fr .9fr;align-items:start}
}

/* A · Tek sütun: her zaman alt alta (varsayılan) */
.fl-v-a .fl-split{grid-template-columns:1fr}

/* C · Vitrin: büyük kazan ortada, hammadde yeri yatay şerit */
.fl-v-c .fl-card:first-child{text-align:center}
.fl-v-c .fl-mix{justify-content:center}
.fl-v-c .fl-kettle{width:200px;flex-basis:200px}
.fl-v-c .fl-legend{text-align:left}
.fl-v-c .fl-steps{display:flex;flex-wrap:wrap;gap:8px;text-align:left}
.fl-v-c .fl-steps li{flex:1 1 160px;border:1px solid var(--fl-line);border-radius:12px;padding:8px 10px;grid-template-columns:24px 1fr;border-bottom:1px solid var(--fl-line)}
.fl-v-c .fl-steps .fl-pct{grid-column:2}
@container (min-width:620px){
  .fl-v-c .fl-split{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion: reduce){
  .fl-stir,.fl-bub{animation:none}
  .fl-bub{opacity:.6}
}