/* ================= ilk11ler — PNG Export Şablonları + Modal ================= */

/* gizli export container (display:none KULLANMA) */
#lineup-export-container{position:fixed;left:-99999px;top:0;pointer-events:none;visibility:visible;z-index:-1}

/* ---- ortak şablon gövdesi: marka çerçevesi arka planda (inline background-image), içerik ortada mutlak ---- */
.exp-tpl{position:relative;overflow:hidden;box-sizing:border-box;
  font-family:'Inter',system-ui,Arial,sans-serif;color:#fff;
  background:#0a1322 !important} /* !important: global .th-classic yeşil çim deseni export kökünü boyamasın */
.exp-tpl *{box-sizing:border-box}

/* marka çerçevesi: en altta tam boy img katmanı */
.exp-bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* çerçevenin ortasındaki boş alana oturan içerik (başlık + saha) */
.exp-content{position:absolute;display:flex;flex-direction:column;gap:12px;z-index:1}
.exp-square   .exp-content{top:15%;bottom:12%;left:9%;right:9%}
.exp-portrait .exp-content{top:11.5%;bottom:10.5%;left:8%;right:8%}
.exp-story    .exp-content{top:11%;bottom:11.5%;left:11%;right:11%}
.exp-c-title{text-align:center;flex-shrink:0}
.exp-c-name{font-family:'Bebas Neue',Impact,sans-serif;font-size:48px;line-height:1;letter-spacing:.5px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp-story .exp-c-name{font-size:60px}
.exp-c-sub{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px}

/* başlık */
.exp-head{display:flex;align-items:center;gap:20px;flex-shrink:0}
.exp-head.col{flex-direction:column;text-align:center;gap:8px}
.exp-logo{height:64px;width:auto}
.exp-logo-sq{height:72px;width:auto}
.exp-titles{flex:1;min-width:0}
.exp-name{font-family:'Bebas Neue',Impact,sans-serif;font-size:52px;line-height:1;letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp-name.big{font-size:66px}
.exp-team{font-size:22px;font-weight:600;color:#9fb2cf}
.exp-sub{display:flex;align-items:center;justify-content:center;gap:14px}
.exp-fmt{background:rgba(55,170,88,.16);border:1.5px solid #37aa58;color:#7fe6a0;font-weight:800;
  font-size:20px;padding:6px 16px;border-radius:999px;white-space:nowrap}
.exp-sep{height:3px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(90deg,transparent,#37aa58 20%,#37aa58 80%,transparent);margin:14px 0}

/* saha */
.exp-field{position:relative;flex:1;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06)} /* box-shadow kaldırıldı (export motoru bozuk çiziyor) */
.ef-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.exp-nodes{position:absolute;inset:0;z-index:2}
/* saha üzeri logolar: ilk11ler watermark (orta, soluk) + takım arması (üst köşe) */
.exp-wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;opacity:.12;pointer-events:none;z-index:1}
.exp-crest{position:absolute;top:14px;right:16px;width:70px;height:70px;object-fit:contain;z-index:2;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.exp-story .exp-crest,.exp-portrait .exp-crest{width:78px;height:78px}
.exp-turf-logo{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:34%;opacity:.14;pointer-events:none}

/* oyuncu kartı */
.ep-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:128px}
.ep-av{position:relative;width:78px;height:78px;border-radius:50%;background:#0e1b2e;
  border:3px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;
  overflow:visible} /* box-shadow KALDIRILDI: snapdom yuvarlak gölgeyi yarım halka gibi bozuk çiziyor */
.ep-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ep-av.empty{border-style:dashed;opacity:.5}
.ep-ini{font-family:'Bebas Neue',sans-serif;font-size:30px;color:#dbe6f2}
.ep-plus{font-size:34px;color:rgba(255,255,255,.7)}
.ep-num{position:absolute;right:-6px;bottom:-4px;background:#37aa58;color:#04240f;font-weight:800;
  font-size:15px;min-width:24px;height:24px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  border:2px solid #06101f;padding:0 5px}
.ep-name{margin-top:8px;font-size:19px;font-weight:700;text-align:center;line-height:1.15;max-width:150px;
  text-shadow:0 1px 4px rgba(0,0,0,.7);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep-pos{font-size:14px;font-weight:800;letter-spacing:.5px;color:#7fe6a0;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ep-badges{position:absolute;left:-8px;top:-8px;display:flex;flex-direction:column;gap:3px}
.epb{font-size:13px;font-weight:900;line-height:1;padding:3px 5px;border-radius:6px;color:#0c100e;border:2px solid #06101f;min-width:20px;text-align:center}
.epb.cap{background:#f2c744}.epb.pen{background:#e5484d;color:#fff}.epb.fk{background:#4aa3ff;color:#03284d}

/* yedekler */
.exp-bench{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0;margin-top:16px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 16px}
.eb-lbl{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;color:#9fb2cf}
.eb-card{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border-radius:10px;padding:6px 10px}
.eb-av{width:32px;height:32px;border-radius:50%;overflow:hidden;background:#0e1b2e;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.eb-av img{width:100%;height:100%;object-fit:cover}
.eb-n{font-size:16px;font-weight:600}
.eb-more{font-weight:800;color:#7fe6a0}

/* alt marka */
.exp-foot{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  background:rgba(0,0,0,.3);border-radius:14px;padding:16px 22px;margin-top:16px}
.exp-foot.col{flex-direction:column;gap:4px;text-align:center}
.exp-cta{font-size:22px;font-weight:700;color:#cfe0f2}
.exp-brand{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:1px;color:#37aa58}
.exp-brand2{font-family:'Bebas Neue',sans-serif;font-size:26px;color:#37aa58}
/* dikey alt detay */
.exp-detail{display:flex;gap:18px;align-items:center;flex-shrink:0;margin-top:16px;
  background:rgba(0,0,0,.3);border-radius:14px;padding:16px 22px}
.exp-dcol{display:flex;flex-direction:column}.exp-dcol.grow{flex:1;text-align:right}
.exp-dcol small{font-size:14px;color:#8ba0bd;letter-spacing:.5px}
.exp-dcol b{font-size:24px;font-weight:800}
/* hikaye roller şeridi */
.exp-roles{display:flex;justify-content:center;gap:26px;flex-shrink:0;margin-top:14px}
.exp-rc{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700}

/* ===== oran-özel ölçekler: dikey/hikâye tuvali daha büyük — kartlar da orantılı büyür ===== */
/* Dikey 3:4 (1080×1440) */
.exp-portrait .ep-node{width:172px}
.exp-portrait .ep-av{width:106px;height:106px;border-width:4px}
.exp-portrait .ep-name{font-size:26px;max-width:180px}
.exp-portrait .ep-pos{font-size:17px}
.exp-portrait .ep-num{font-size:18px;min-width:28px;height:28px;border-radius:14px}
.exp-portrait .ep-ini{font-size:40px}
.exp-portrait .epb{font-size:16px;min-width:24px}
.exp-portrait .exp-c-name{font-size:58px}
.exp-portrait .exp-team{font-size:26px}
.exp-portrait .exp-fmt{font-size:24px}
.exp-portrait .exp-rc{font-size:23px}
.exp-portrait .eb-n{font-size:19px}
.exp-portrait .eb-av{width:38px;height:38px}
/* Hikâye 9:16 (1080×1920) */
.exp-story .ep-node{width:182px}
.exp-story .ep-av{width:116px;height:116px;border-width:4px}
.exp-story .ep-name{font-size:28px;max-width:190px}
.exp-story .ep-pos{font-size:18px}
.exp-story .ep-num{font-size:19px;min-width:30px;height:30px;border-radius:15px}
.exp-story .ep-ini{font-size:44px}
.exp-story .epb{font-size:17px;min-width:25px}
.exp-story .exp-c-name{font-size:68px}
.exp-story .exp-team{font-size:28px}
.exp-story .exp-fmt{font-size:26px}
.exp-story .exp-rc{font-size:25px}
.exp-story .eb-n{font-size:21px}
.exp-story .eb-av{width:42px;height:42px}

/* ================= EXPORT MODAL =================
   Yapı: sabit başlık (.lex-hd) + kaydırılabilir gövde (.lex-body) + sabit alt bar (.lex-foot).
   Kapat ve İndir butonları HER ZAMAN görünür. */
.lex-modal{position:fixed;inset:0;z-index:500;background:rgba(4,8,14,.72);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:20px}
.lex-modal.open{display:flex}
.lex-box{background:var(--card,#0f1512);border:1px solid var(--border,#233);border-radius:18px;
  width:min(860px,96vw);max-height:92vh;padding:0;position:relative;
  display:flex;flex-direction:column;overflow:hidden}
.lex-hd{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 12px;border-bottom:1px solid var(--border,#233)}
.lex-hd h3{font-size:1.15rem;font-weight:800;margin:0}
.lex-close{background:var(--bg2,#0c110e);border:1px solid var(--border,#233);color:var(--text,#e8f0e9);
  width:36px;height:36px;border-radius:50%;font-size:1.4rem;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lex-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 20px}
.lex-foot{flex-shrink:0;padding:12px 20px;border-top:1px solid var(--border,#233);
  padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.lex-grid{display:grid;grid-template-columns:1fr 300px;gap:20px}
.lex-left,.lex-right{min-width:0} /* 1080px'lik önizleme şablonu grid'i genişletmesin */
.lex-preview{max-width:100%}
.lex-formats{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.lex-fmt{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;
  text-align:left;background:var(--bg2,#0c110e);border:1.5px solid var(--border,#233);border-radius:12px;padding:11px 13px;cursor:pointer;color:var(--text,#e8f0e9)}
.lex-fmt.on{border-color:var(--green,#37aa58);box-shadow:0 0 0 2px rgba(55,170,88,.25)}
.lex-fmt b{font-size:.92rem;font-weight:800;grid-column:2}
.lex-fmt small{grid-column:2;font-size:.72rem;color:var(--muted,#9aa)}
.lex-fmt em{grid-column:2;font-style:normal;font-size:.68rem;color:var(--green,#37aa58);margin-top:2px}
.lex-ic{grid-row:1/3;background:var(--card,#151a17);border:1px solid var(--border,#233);border-radius:6px;align-self:center;justify-self:center}
.lex-ic-square{width:30px;height:30px}.lex-ic-portrait{width:26px;height:34px}.lex-ic-story{width:22px;height:38px}
.lex-opts,.lex-qual{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:12px;font-size:.85rem}
.lex-qual span{color:var(--muted,#9aa);font-weight:700}
.lex-tg{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.lex-tg input{accent-color:var(--green,#37aa58)}
.lex-dl{width:100%;margin-top:0;padding:13px;font-size:1rem;font-weight:800;border-radius:12px}
.lex-status{margin-top:8px;font-size:.82rem;font-weight:700;min-height:18px;text-align:center}
.lex-status.ok{color:var(--green,#37aa58)}.lex-status.err{color:#e5484d}
.lex-preview{background:#06101f;border:1px solid var(--border,#233);border-radius:12px;height:420px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.lex-prev-inner{position:relative}
/* ===== Mobil: tam ekran sayfa ===== */
@media(max-width:720px){
  .lex-modal{padding:0}
  .lex-box{width:100%;max-width:100%;height:100%;max-height:100vh;max-height:100dvh;border-radius:0;border:none}
  .lex-hd{padding-top:calc(12px + env(safe-area-inset-top))}
  .lex-hd h3{font-size:1.05rem}
  .lex-grid{grid-template-columns:1fr;gap:12px}
  /* önce önizleme, altında seçenekler */
  .lex-right{order:-1}
  .lex-preview{height:32vh;height:32dvh;min-height:160px}
  .lex-formats{flex-direction:row;gap:8px}
  .lex-fmt{flex:1;grid-template-columns:1fr;text-align:center;padding:8px 6px}
  .lex-ic{display:none}
  .lex-fmt b{grid-column:1;font-size:.8rem}
  .lex-fmt small{grid-column:1;font-size:.62rem}
  .lex-fmt em{display:none}
  .lex-opts,.lex-qual{gap:10px;margin-bottom:8px;font-size:.82rem}
}

/* ===== Mobil sonuç ekranı: görsel + Paylaş/Kaydet ===== */
.lex-result{position:fixed;inset:0;z-index:700;background:rgba(4,8,14,.96);display:none;flex-direction:column;padding:12px;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.lex-result.open{display:flex}
.lex-res-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.lex-res-bar b{font-size:1rem;color:#fff}
.lex-res-bar button{width:38px;height:38px;border-radius:50%;background:var(--card2,#1a221d);border:1px solid var(--border,#233);color:var(--text,#fff);font-size:1.25rem;display:flex;align-items:center;justify-content:center}
.lex-res-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lex-res-img img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.lex-res-hint{text-align:center;font-size:.78rem;color:var(--muted,#9aa);margin:10px 0 8px}
.lex-res-btns{display:flex;gap:10px}
.lex-res-btns button{flex:1;padding:13px;border-radius:12px;font-weight:800;font-size:.95rem}