/* Editfabric Library tanıtım görselleri (2026-10-25): ana sayfa Library bölümü + /library.
   site.css'in .tool/.demo kutularını kullanır; döngüler yalnız CSS. Library vurgusu yeşil (--a1), panel mor (--v1). */
.lx-eyebrow { color: var(--a1); }
.lx-lead { color: var(--text2); margin-top: 14px; max-width: 64ch; font-size: 17px; }
.lx-tag { font: 600 10px/1 var(--f-mono); letter-spacing: .06em; border-radius: 4px; padding: 3px 5px; vertical-align: middle; margin-inline-start: 6px; white-space: nowrap; }
.lx-go { color: var(--a1); border: 1px solid var(--a1); }
.lx-free { color: var(--mute); border: 1px solid var(--line); }
.lx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.lx-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-grid .tool h3 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lx-lbl { font: 500 11px var(--f-mono); color: var(--mute); }

/* iki kapı: Premiere içi panel / ayrı Library penceresi */
.lx-door { display: grid; gap: 14px; align-content: start; }
.lx-win { height: 150px; border-radius: 10px; border: 1px solid var(--line); background: var(--ink); position: relative; overflow: hidden; }
.lx-bar { height: 22px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding-inline: 10px; font: 500 11px var(--f-mono); color: var(--mute); }
.lx-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.lx-pr { position: absolute; inset: 22px 0 0 0; display: grid; grid-template-columns: 34% 1fr; }
.lx-pr .pn { border-inline-end: 1px solid var(--line); padding: 10px; display: grid; gap: 6px; align-content: start; }
.lx-pr .pn b { height: 8px; border-radius: 3px; background: var(--v1); opacity: .85; }
.lx-pr .pn b + b { width: 70%; opacity: .4; } .lx-pr .pn b + b + b { width: 50%; }
.lx-pr .tl { position: relative; }
.lx-pr .tl u { position: absolute; height: 10px; border-radius: 2px; background: var(--c); transform-origin: left; animation: lxGrow 4s var(--ease) infinite; }
@keyframes lxGrow { 0%, 10% { transform: scaleX(0); } 40%, 90% { transform: none; } 100% { transform: scaleX(0); } }
.lx-lw { position: absolute; inset: 22px 0 0 0; padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lx-lw div { border: 1px solid var(--line); border-radius: 6px; background: var(--night); display: grid; place-items: center; font: 600 10px var(--f-mono); color: var(--a1); text-align: center; padding: 2px; animation: lxLit 6s infinite; animation-delay: calc(var(--d) * 1s); }
@keyframes lxLit { 0%, 8% { border-color: var(--line); } 14%, 30% { border-color: var(--a1); background: rgba(61, 220, 132, .08); } 40%, 100% { border-color: var(--line); } }
.lx-who { font: 600 13px var(--f-mono); color: var(--c); }
.lx-door p { color: var(--text2); font-size: 14.5px; }

/* proje arşivi: klasör küçülür, TC ve anahtar kareler yerinde */
.lx-ar-gb { position: absolute; inset-inline-end: 16px; top: 14px; font: 600 22px var(--f-mono); color: var(--white); }
.lx-ar-gb span { position: absolute; inset-inline-end: 0; white-space: nowrap; animation: lxSw 7s infinite; }
.lx-ar-gb span + span { color: var(--a1); animation-name: lxSw2; }
@keyframes lxSw { 0%, 30% { opacity: 1; } 40%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lxSw2 { 0%, 30% { opacity: 0; } 40%, 90% { opacity: 1; } 100% { opacity: 0; } }
.lx-ar-bars { display: grid; gap: 5px; margin-top: 34px; }
.lx-ar-bars i { display: block; height: 12px; border-radius: 2px; background: var(--c); transform-origin: left; animation: lxShrink 7s var(--ease) infinite; }
@keyframes lxShrink { 0%, 18% { transform: none; } 42%, 88% { transform: scaleX(var(--k)); } 100% { transform: none; } }
.lx-ar-keys { position: absolute; left: 16px; right: 16px; bottom: 48px; height: 2px; background: var(--line); }
.lx-ar-keys em { position: absolute; top: -4px; width: 9px; height: 9px; transform: rotate(45deg); background: var(--ph); }
.lx-foot { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; gap: 8px; font: 500 12px var(--f-mono); color: var(--mute); border-top: 1px solid var(--line); padding-top: 10px; }
.lx-foot b { color: var(--a1); font-weight: 600; }

/* arama */
.lx-se { border: 1px solid var(--a1); border-radius: 8px; padding: 8px 12px; font: 500 14px var(--f-mono); color: var(--white); display: flex; gap: 8px; align-items: center; }
.lx-se s { text-decoration: none; display: inline-block; overflow: hidden; white-space: nowrap; width: 0; animation: lxType 8s steps(10) infinite; border-inline-end: 2px solid var(--a1); }
@keyframes lxType { 0%, 6% { width: 0; } 24%, 90% { width: 10ch; } 100% { width: 0; } }
.lx-res { display: grid; gap: 7px; margin-top: 12px; }
.lx-res div { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; font: 500 12px var(--f-mono); color: var(--text2); opacity: 0; animation: lxPop 8s infinite; animation-delay: calc(var(--d) * .25s); }
.lx-res div i { height: 26px; border-radius: 4px; background: linear-gradient(135deg, var(--c), #222); }
.lx-res div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-res div b { color: var(--mute); font-weight: 500; }
@keyframes lxPop { 0%, 28% { opacity: 0; transform: translateY(6px); } 36%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* kart girişi */
.lx-ci { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; }
.lx-card { height: 90px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); position: relative; display: grid; place-items: center; font: 600 11px var(--f-mono); color: var(--text2); animation: lxIns 7s var(--ease) infinite; }
.lx-card::before { content: ""; position: absolute; top: 0; right: 0; width: 18px; height: 18px; background: var(--ink); clip-path: polygon(100% 0, 0 0, 100% 100%); }
@keyframes lxIns { 0% { transform: translateY(-30px); opacity: 0; } 10%, 95% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.lx-dk { display: grid; gap: 12px; font: 500 12px var(--f-mono); color: var(--text2); }
.lx-pg { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 4px; }
.lx-pg i { display: block; height: 100%; background: var(--a1); transform-origin: left; animation: lxCp 7s linear infinite; animation-delay: var(--dl, 0s); }
@keyframes lxCp { 0%, 12% { transform: scaleX(0); } 55%, 95% { transform: none; } 100% { transform: scaleX(0); } }
.lx-ok { color: var(--a1); opacity: 0; animation: lxOk 7s infinite; }
@keyframes lxOk { 0%, 58% { opacity: 0; } 64%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* kâğıt kurgu: satırlar seçilir, sağda sekansa dizilir */
.lx-pe { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; height: 100%; }
.lx-pe ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; align-content: start; font: 500 11px/1.35 var(--f-mono); color: var(--text2); }
.lx-pe li { padding: 5px 7px; border-radius: 5px; border: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-pe li.k { animation: lxPick 8s infinite; animation-delay: calc(var(--d) * .6s); }
@keyframes lxPick { 0%, 10% { border-color: var(--line); color: var(--text2); } 18%, 88% { border-color: var(--a1); color: var(--white); background: rgba(61, 220, 132, .08); } 100% { border-color: var(--line); } }
.lx-pe .sq { border-inline-start: 1px solid var(--line); padding-inline-start: 12px; display: grid; gap: 6px; align-content: start; }
.lx-pe .sq i { height: 14px; border-radius: 3px; background: var(--c); transform-origin: left; animation: lxSlot 8s var(--ease) infinite; animation-delay: calc(.4s + var(--d) * .6s); }
@keyframes lxSlot { 0%, 14% { transform: scaleX(0); } 24%, 88% { transform: none; } 100% { transform: scaleX(0); } }

/* teslim öncesi kontrol */
.lx-qc { display: grid; gap: 8px; font: 500 12px var(--f-mono); color: var(--text2); }
.lx-qc div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.lx-qc b { font-weight: 600; opacity: 0; animation: lxOkR 7s infinite; animation-delay: calc(var(--d) * .5s); }
.lx-qc b.y { color: var(--a1); } .lx-qc b.n { color: var(--ph); }
@keyframes lxOkR { 0%, 12% { opacity: 0; } 20%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* disk arşivi kuyruğu */
.lx-q { display: grid; gap: 10px; font: 500 12px var(--f-mono); color: var(--text2); }
.lx-q > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
.lx-q .lx-pg { grid-column: 1 / -1; margin: 0; }
.lx-q em { font-style: normal; color: var(--a1); }

/* röntgen / disk haritası */
.lx-dm { display: grid; gap: 9px; font: 500 12px var(--f-mono); color: var(--text2); }
.lx-dm > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) 54px; gap: 10px; align-items: center; }
.lx-dm .lx-pg i { animation: lxFill 6s var(--ease) infinite; background: var(--c); transform: scaleX(var(--k)); }
@keyframes lxFill { 0%, 10% { transform: scaleX(0); } 40%, 92% { transform: scaleX(var(--k)); } 100% { transform: scaleX(0); } }

/* yedekler: sürümler buluta çıkar */
.lx-bk { display: flex; align-items: flex-end; justify-content: space-between; height: 100%; gap: 10px; padding-bottom: 34px; }
.lx-bk .cl { font: 600 26px var(--f-mono); color: var(--a1); align-self: flex-start; }
.lx-bk .vs { display: flex; gap: 8px; }
.lx-bk .vs i { width: 26px; height: 34px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); animation: lxUp 6s var(--ease) infinite; animation-delay: calc(var(--d) * .5s); }
@keyframes lxUp { 0%, 10% { transform: none; border-color: var(--line); } 25%, 85% { transform: translateY(-46px); border-color: var(--a1); } 100% { transform: none; } }

/* paketler */
.lx-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.lx-plan { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--ink); display: grid; gap: 10px; align-content: start; }
.lx-plan.go { border-color: rgba(61, 220, 132, .5); background: linear-gradient(180deg, rgba(61, 220, 132, .07), var(--ink) 60%); }
.lx-plan .pr { font: 600 14px var(--f-mono); color: var(--a1); }
.lx-plan ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--text2); }
.lx-plan li { padding-block: 7px; padding-inline: 24px 0; border-top: 1px solid var(--line); position: relative; }
.lx-plan li::before { content: "✓"; position: absolute; inset-inline-start: 2px; color: var(--a1); font-weight: 600; }
.lx-inc { margin-top: 18px; font-size: 14.5px; color: var(--text2); }
.lx-inc b { color: var(--v1); }
.lx-more { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn.lx-btn { background: var(--a1); color: #0b1a12; }
.btn.lx-btn:hover { background: #5ce89a; }

@media (max-width: 900px) { .lx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-plans, .lx-grid.two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .lx-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  [class^="lx-"] *, [class^="lx-"] { animation: none !important; }
  .lx-res div, .lx-ok, .lx-qc b { opacity: 1; } .lx-se s { width: 10ch; }
}

/* PDF raporlar */
.lx-pdf { display: flex; gap: 12px; justify-content: center; align-items: center; height: 100%; }
.lx-pdf > div { width: 30%; aspect-ratio: 3 / 4; max-width: 100%; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: start; animation: lxUp2 6s var(--ease) infinite; animation-delay: calc(var(--d) * .4s); }
.lx-pdf b { grid-column: 1 / -1; font: 600 10px var(--f-mono); color: var(--ph); }
.lx-pdf i { height: 14px; border-radius: 2px; background: linear-gradient(135deg, var(--v2), #222); }
@keyframes lxUp2 { 0%, 10% { transform: translateY(10px); opacity: .3; } 25%, 88% { transform: none; opacity: 1; } 100% { opacity: .3; } }

/* Project Manager karşılaştırması */
.lx-cmp { margin-top: 36px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--ink); }
.lx-cmp table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.lx-cmp th, .lx-cmp td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: start; }
.lx-cmp thead th { font: 600 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.lx-cmp thead th:last-child { color: var(--a1); }
.lx-cmp tbody th { font-weight: 500; color: var(--text); }
.lx-cmp td { font: 600 16px var(--f-mono); text-align: center; width: 22%; }
.lx-cmp td.n { color: var(--mute); } .lx-cmp td.y { color: var(--a1); background: rgba(61, 220, 132, .06); }
.lx-cmp tr:last-child > * { border-bottom: 0; }
.lx-cmp-note { margin-top: 14px; color: var(--text2); font: 500 13px/1.5 var(--f-mono); }

/* ana sayfa: logolu iki ürün (2026-10-25, sahip: "Editfabric + Editfabric Library logoları, altına ne olduğu") */
.lx-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lx-brand { display: grid; gap: 10px; align-content: start; padding: 30px 28px; border-radius: 16px; background: var(--night); border: 1px solid var(--line); border-top: 3px solid var(--c); text-decoration: none; transition: border-color .2s; }
.lx-brand:hover { border-color: var(--c); }
.lx-brand img { height: 40px; width: auto; }
.lx-logo { display: flex; align-items: center; gap: 12px; }
.lx-logo b { font: 600 30px/1 var(--f-head); color: var(--c); letter-spacing: -.01em; }
.lx-sub { font: 600 13px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c); margin-top: 6px; }
.lx-brand p { color: var(--text2); font-size: 15px; }
.lx-brands-note { margin-top: 18px; color: var(--text2); text-align: center; font-size: 15px; }
@media (max-width: 760px) { .lx-brands { grid-template-columns: minmax(0, 1fr); } }

/* ana sayfa Library şeridi + indirme notu (2026-10-25) */
.lx-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.lx-band .tool .demo { height: 260px; }
.lx-band-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--text); }
.lx-band-list li { padding-inline-start: 26px; position: relative; }
.lx-band-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--a1); font-weight: 600; }
.lx-dlnote { margin-top: 12px; color: var(--mute); font: 500 13px/1.4 var(--f-mono); }
.lx-libline { margin-top: 22px; text-align: center; color: var(--text2); }
.lx-libline a { color: var(--a1); font-weight: 600; }
/* /library fiyat: Ücretsiz + Library Paketi yan yana; paketin aylık/yıllık seçicisi kartın üstünde (2026-10-25) */
.lx-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 38px; align-items: stretch; }
.lx-freecard { margin-top: 64px; }
.lx-buy .plans { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.lx-buy .plans-note { display: none; }
@media (max-width: 900px) { .lx-band { grid-template-columns: minmax(0, 1fr); gap: 28px; } .lx-pricing { grid-template-columns: minmax(0, 1fr); } .lx-freecard { margin-top: 0; } }

/* SSD rakamları (2026-10-25) */
.lx-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.lx-nums div { padding: 22px; border-radius: 14px; background: var(--night); border: 1px solid var(--line); display: grid; gap: 6px; }
.lx-nums b { font: 600 clamp(24px, 3vw, 32px)/1.1 var(--f-mono); color: var(--a1); font-variant-numeric: tabular-nums; }
.lx-nums span { color: var(--text2); font-size: 14.5px; }
@media (max-width: 760px) { .lx-nums { grid-template-columns: minmax(0, 1fr); } }

/* tam özellik tablosu: grup satırları, üç sütun */
.lx-cmp td { width: 16%; }
.lx-cmp tr.g th { padding-top: 22px; font: 600 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--a1); background: var(--night); }
.lx-cmp thead th:nth-child(3) { color: var(--text); }

/* /panel (Editfabric Go) — 2026-10-25 */
.go-hero h1 { margin-top: 6px; max-width: 18ch; }
.go-grid .tool { --a1: var(--v1); }
.go-grid .lx-se, .go-grid .lx-pe li.k { border-color: var(--v1); }
.go-subs { display: grid; gap: 10px; align-content: center; justify-items: center; height: 100%; }
.go-subs span { padding: 5px 12px; font: 600 15px/1.2 var(--f-body); opacity: 0; animation: lxPop 7s infinite; animation-delay: calc(var(--d) * .7s); }
.go-subs .s0 { background: rgba(0, 0, 0, .75); color: #fff; border-radius: 4px; }
.go-subs .s1 { color: #ffe14d; text-shadow: 0 2px 0 #000, 0 0 6px #000; font-weight: 700; }
.go-subs .s2 { background: var(--v1); color: #fff; border-radius: 999px; }
.go-kj { justify-self: start; display: grid; border-inline-start: 4px solid var(--v1); padding-inline-start: 10px; opacity: 0; animation: lxPop 7s infinite; animation-delay: 2.1s; }
.go-kj i { font: 600 14px var(--f-head); font-style: normal; color: var(--white); }
.go-kj em { font: 500 12px var(--f-mono); font-style: normal; color: var(--text2); }
.go-all { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.go-all h3 { font: 600 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--v1); margin-bottom: 10px; }
.go-all ul { margin: 0; padding: 0; list-style: none; color: var(--text2); font-size: 15px; }
.go-all li { padding: 8px 0; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .go-all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .go-all { grid-template-columns: minmax(0, 1fr); } }

/* ana sayfa önce/sonra: ürün satırları, logolu sol sütun + hareketli küçük kartlar (2026-10-25) */
.mb-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.mb-row + .mb-row { margin-top: 28px; }
.mb-side { display: grid; gap: 8px; align-content: start; }
.mb-side .lx-logo img { height: 30px; }
.mb-side .lx-logo b { font-size: 24px; color: var(--c); }
.mb-side p { color: var(--text2); font-size: 14px; }
.mb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mb { padding: 10px 10px 16px; border-radius: 14px; background: var(--night); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; transition: border-color .25s, transform .25s var(--ease); }
.mb:hover { border-color: var(--c); transform: translateY(-2px); }
.mb .mb-vis { height: 132px; padding: 0; }
.mb .mb-z { position: absolute; inset: 0; width: 166.7%; height: 166.7%; padding: 16px; transform: scale(.6); transform-origin: 0 0; }
.mb-row[style*="v1"] .mb-z { --a1: var(--v1); }
.mb h3 { font-size: 15.5px; margin: 8px 4px 0; }
.mb p { color: var(--text2); font-size: 13.5px; margin: 0 4px; }
@media (max-width: 1100px) { .mb-row { grid-template-columns: minmax(0, 1fr); } .mb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mb-grid { grid-template-columns: minmax(0, 1fr); } }

/* Library sütununda "Go paketlerinde ücretsiz" rozeti (2026-10-25) */
.mb-free { justify-self: start; margin-top: 2px; padding: 5px 10px; border-radius: 999px; font: 600 12px/1.2 var(--f-mono); color: #0b1a12; background: var(--a1); }

/* "Nasıl çalışır" Library/Go bölümleri (2026-10-25) */
.ch-prod { font-style: normal; font: 600 11px/1 var(--f-mono); letter-spacing: .06em; padding: 4px 8px; border-radius: 999px; margin-inline-start: 4px; }
.ch-prod.lib { color: #0b1a12; background: var(--a1); }
.ch-prod.go { color: #fff; background: var(--v1); }
.st-vis { display: grid; gap: 16px; }
.st-vis .demo { height: 250px; }
.st-vis.go { --a1: var(--v1); }