/*
 * FPS Calculator Pro v5.5 — style.css
 * Jannah Tema Direktifi Uyumlu
 * gecbunlari.com — WP 6.x + Jannah + html.dark-skin
 */

/* ════════════════════════════════════════════════════════
   1. CSS DEĞİŞKENLERİ — Jannah mirror (plugin namespace)
════════════════════════════════════════════════════════ */
.fpc-root {
  overflow-x: clip;
  /* Jannah marka renkleri */
  --fpc-brand:    #fe4641;
  --fpc-brand-dk: #cc140f;
  --fpc-brand-bg: rgba(254,70,65,.08);
  --fpc-brand-glow: rgba(254,70,65,.25);

  /* Jannah arka planlar — PHP build_inline_style ile AYNI isimler */
  --fpc-bg:  #ffffff;   /* bg_color admin */
  --fpc-c1:  #f8f9fa;   /* card_bg admin */
  --fpc-c2:  #f0f1f3;   /* input bg (türetilmiş) */
  --fpc-c3:  #e8eaed;   /* hover bg (türetilmiş) */

  /* Jannah metin — PHP ile AYNI isimler */
  --fpc-P:   #fe4641;   /* primary_color admin */
  --fpc-PA:  #cc140f;   /* accent_color admin */
  --fpc-t1:  #2c2f34;   /* text_color admin */
  --fpc-t2:  rgba(44,47,52,.65);   /* türetilmiş */
  --fpc-t3:  rgba(44,47,52,.35);   /* türetilmiş */
  --fpc-bd:  rgba(0,0,0,.10);      /* türetilmiş */
  --fpc-bdh: rgba(254,70,65,.35);

  /* Sabit değerler */
  --fpc-ok:   #22c55e;
  --fpc-warn: #f59e0b;
  --fpc-err:  #ef4444;
  --fpc-r:    4px;
  --fpc-r-lg: 8px;
  --fpc-btn-r: 100px;
  --fpc-shadow: 0 1px 4px rgba(0,0,0,.08);
  --fpc-shadow-lg: 0 4px 16px rgba(0,0,0,.12);
  --fpc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;

  /* Çalışan kısayollar */
  --bg:   var(--fpc-bg);
  --card: var(--fpc-c1);
  --input:var(--fpc-c2);
  --hover:var(--fpc-c3);
  --P:    var(--fpc-P);
  --Pdk:  var(--fpc-PA);
  --Pbg:  var(--fpc-brand-bg);
  --t1:   var(--fpc-t1);
  --t2:   var(--fpc-t2);
  --t3:   var(--fpc-t3);
  --bd:   var(--fpc-bd);
  --bdh:  var(--fpc-bdh);
  --r:    var(--fpc-r);
  --PG:   var(--fpc-ok);
  --PE:   var(--fpc-warn);
}

/* ════════════════════════════════════════════════════════
   2. DARK MODE — html.dark-skin (Jannah gerçek class'ı)
════════════════════════════════════════════════════════ */
html.dark-skin .fpc-root,
body.dark-skin .fpc-root {
  /* Tüm dark-skin değişkenleri — PHP inline'ı ezmek için !important gerekli
     çünkü build_inline_style() bazı değerleri inline style olarak yazabilir */
  --fpc-bg:  #1e2023 !important;
  --fpc-c1:  #27292d !important;
  --fpc-c2:  #2c2e32 !important;   /* input bg */
  --fpc-c3:  #32353a !important;   /* hover bg */
  --fpc-P:   #fe4641 !important;
  --fpc-PA:  #cc140f !important;
  --fpc-t1:  #e8eaed !important;   /* ana metin */
  --fpc-t2:  rgba(232,234,237,.65) !important;
  --fpc-t3:  rgba(232,234,237,.38) !important;
  --fpc-bd:  rgba(255,255,255,.08) !important;
  --fpc-bdh: rgba(254,70,65,.45)   !important;
  --fpc-shadow:    0 1px 4px rgba(0,0,0,.3)  !important;
  --fpc-shadow-lg: 0 4px 16px rgba(0,0,0,.4) !important;
  /* Kısayol alias'lar da güncellenmeli */
  --bg:    #1e2023  !important;
  --card:  #27292d  !important;
  --input: #2c2e32  !important;
  --hover: #32353a  !important;
  --t1:    #e8eaed  !important;
  --t2:    rgba(232,234,237,.65) !important;
  --t3:    rgba(232,234,237,.38) !important;
  --bd:    rgba(255,255,255,.08) !important;
  --bdh:   rgba(254,70,65,.45)   !important;
}

/* ════════════════════════════════════════════════════════
   3. BOX-SIZING RESET — sadece plugin scope
════════════════════════════════════════════════════════ */
.fpc-root,
.fpc-root *,
.fpc-root *::before,
.fpc-root *::after { box-sizing: border-box; }

/* ════════════════════════════════════════════════════════
   4. KAPSAYICI — Jannah .container-wrapper uyumlu
════════════════════════════════════════════════════════ */
.fpc-root {
  /* Jannah float/flex ortama karşı güvenli ortalama */
  display:       block;
  clear:         both;  /* float içinde çalışmaz — parent'ı temizle */
  float:         none !important;
  background:    var(--bg);
  border:        1px solid var(--bd);
  border-radius: var(--r);
  padding:       24px 26px;
  max-width:     960px;
  width:         100%;
  margin:        0 0 28px;
  box-shadow:    var(--fpc-shadow);
  font-family:   var(--fpc-font);
  color:         var(--t1);
  line-height:   1.6;
  position:      relative;
  overflow:      visible;
}

/* Jannah .entry-content içi — flex wrapper ile centering */
.entry-content .fpc-wrap,
#tie-container .entry-content .fpc-wrap,
.post-content  .entry-content .fpc-wrap {
  display:         flex !important;
  justify-content: center !important;
  align-items:     flex-start !important;
  width:           100% !important;
}
.entry-content .fpc-root,
#tie-container .entry-content .fpc-root {
  display:      block !important;
  float:        none !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}
/* Wrapper: flex centering — Jannah clearfix/float context'inde de çalışır */
.fpc-wrap {
  display:         flex !important;
  justify-content: center !important;
  align-items:     flex-start !important;
  width:           100% !important;
  box-sizing:      border-box !important;
}
.fpc-wrap > .fpc-root {
  flex:       0 1 960px !important; /* grow:0 shrink:1 basis:960px */
  width:      100% !important;
  max-width:  960px !important;
  min-width:  0 !important;
  text-align: left !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* Tema sızma engeli */
.fpc-root a               { text-decoration: none !important; color: var(--P); cursor: pointer; }
.fpc-root a:hover         { color: var(--Pdk); }
.fpc-root ul, .fpc-root ol{ list-style: none; margin: 0; padding: 0; }
.fpc-root p               { margin: 0; padding: 0; }
.fpc-root img             { max-width: 100%; height: auto; border: none; }
.fpc-root button,
.fpc-root input,
.fpc-root textarea,
.fpc-root select          { font-family: var(--fpc-font); }

/* Jannah specificity ezmek için */
#tie-wrapper .fpc-root a,
.tie-wrapper .container-wrapper .fpc-root a { color: var(--P); }
.entry-content .fpc-root p { font-size: inherit; line-height: inherit; }

/* Tam ekran */
.fpc-root:fullscreen,
.fpc-root:-webkit-full-screen,
.fpc-root:-moz-full-screen {
  overflow-y: auto;
  border-radius: 0 !important;
  margin: 0 !important;
  max-width: 100vw !important;
  width: 100vw !important;
  flex: none !important;  /* fullscreen'de flex-basis override */
  padding: 20px 24px !important;
}

/* ════════════════════════════════════════════════════════
   5. HEADER
════════════════════════════════════════════════════════ */
.fpc-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bd);
  margin-bottom: 18px;
}
.fpc-header-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--fpc-r-lg);
  background: var(--P); display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 2px 8px var(--fpc-brand-glow);
}
.fpc-header-text { flex: 1; min-width: 0; }
.fpc-title {
  font-size: clamp(1.1rem, 2.5vw, 1.45rem); font-weight: 800; margin: 0 0 3px;
  color: var(--t1); line-height: 1.25;
}
.fpc-subtitle { font-size: .82rem; color: var(--t2); line-height: 1.5; margin: 0; }
.fpc-header-actions { margin-left: auto; flex-shrink: 0; display: flex; gap: 6px; align-items: center; }

.fpc-fs-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--fpc-r-lg);
  border: 1px solid var(--bd); color: var(--t3); background: transparent;
  cursor: pointer; user-select: none; transition: all .18s;
}
.fpc-fs-btn:hover { border-color: var(--P); color: var(--P); background: var(--Pbg); }
.fpc-share-btn {
  display: flex; align-items: center; gap: 6px; padding: 7px 13px;
  border-radius: var(--fpc-btn-r); border: 1px solid var(--bd);
  color: var(--t2); font-size: .78rem; font-weight: 700; background: transparent;
  cursor: pointer; transition: all .18s; white-space: nowrap; user-select: none;
}
.fpc-share-btn:hover { border-color: var(--P); color: var(--P); background: var(--Pbg); }
@media (max-width:480px) { .fpc-share-label { display:none; } .fpc-share-btn { padding:7px 10px; } }

/* ════════════════════════════════════════════════════════
   6. MOD SEÇİCİ
════════════════════════════════════════════════════════ */
.fpc-mode-bar {
  display: flex; background: var(--card); border: 1px solid var(--bd);
  border-radius: var(--r); margin-bottom: 18px; overflow: hidden;
}
.fpc-mode-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; font-size: .8rem; font-weight: 600; color: var(--t2);
  cursor: pointer; user-select: none; white-space: nowrap;
  border-bottom: 3px solid transparent; background: transparent; transition: all .18s;
}
.fpc-mode-tab:hover { color: var(--P); background: var(--Pbg); }
.fpc-mode-tab--on   { color: var(--P) !important; border-bottom-color: var(--P); background: var(--Pbg); }

/* ════════════════════════════════════════════════════════
   7. GRID
════════════════════════════════════════════════════════ */
.fpc-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr); gap: 14px; }
.fpc-grid > * { min-width: 0; }
@media (max-width:900px) { .fpc-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width:580px) { .fpc-grid { grid-template-columns: minmax(0,1fr); } }

/* ════════════════════════════════════════════════════════
   8. KARTLAR
════════════════════════════════════════════════════════ */
.fpc-card {
  background: var(--card); border: 1px solid var(--bd); border-radius: var(--fpc-r-lg);
  padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow: visible;
}
.fpc-card-head {
  display: flex; align-items: center; gap: 7px;
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--t2); padding-bottom: 9px; border-bottom: 1px solid var(--bd);
}
.fpc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fpc-dot--purple { background: var(--P); }
.fpc-dot--cyan   { background: var(--P); }
.fpc-dot--green  { background: var(--PG); }
.fpc-field { display: flex; flex-direction: column; gap: 5px; }
.fpc-label {
  display: flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--t2);
}
.fpc-hint { font-size: .67rem; color: var(--t3); font-style: italic; }

/* ════════════════════════════════════════════════════════
   9. DROPDOWN
════════════════════════════════════════════════════════ */
.fpc-dd { position: relative; }
.fpc-dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg); border: 1.5px solid var(--bd); border-radius: var(--fpc-r-lg);
  padding: 9px 12px; cursor: pointer; user-select: none; min-width: 0;
  transition: border-color .18s, box-shadow .18s;
}
.fpc-dd-btn:hover    { border-color: var(--bdh); }
.fpc-dd-btn:focus    { outline: none; border-color: var(--P); box-shadow: 0 0 0 3px var(--Pbg); }
.fpc-dd--open .fpc-dd-btn { border-color: var(--P); box-shadow: 0 0 0 3px var(--Pbg); }
.fpc-dd-selected     { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.fpc-dd-name         { font-size: .84rem; font-weight: 500; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpc-dd-btn--selected .fpc-dd-name { color: var(--t1); font-weight: 600; }
.fpc-dd-sub          { font-size: .62rem; color: var(--t3); }
.fpc-dd-arrow        { color: var(--t3); flex-shrink: 0; transition: transform .2s, color .15s; }
.fpc-dd--open .fpc-dd-arrow { transform: rotate(180deg); color: var(--P); }

.fpc-dd-panel {
  display: none; flex-direction: column; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  max-width: calc(100vw - 24px);
  background: var(--bg); border: 1.5px solid var(--P); border-radius: var(--fpc-r-lg);
  box-shadow: var(--fpc-shadow-lg); z-index: 9999; overflow: hidden; min-width: 260px;
  padding-bottom: 4px;
}
.fpc-dd--open .fpc-dd-panel { display: flex; animation: ddIn .14s cubic-bezier(.4,0,.2,1); }
@keyframes ddIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.fpc-dd-search-bar {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid var(--bd); background: var(--card); position: sticky; top: 0;
}
.fpc-dd-search-bar svg { color: var(--t3); flex-shrink: 0; }
.fpc-dd-search     { flex: 1; background: transparent; border: none; outline: none; color: var(--t1); font-size: .83rem; font-family: var(--fpc-font); }
.fpc-dd-search::placeholder { color: var(--t3); }
.fpc-dd-close      { color: var(--t3); font-size: .78rem; padding: 3px 6px; border-radius: 4px; transition: all .12s; }
.fpc-dd-close:hover { color: var(--P); background: var(--Pbg); }
.fpc-dd-list       { max-height: 280px; overflow-y: auto; padding: 3px 0 5px; scrollbar-width: thin; scrollbar-color: var(--bd) transparent; }
/* SPD dropdown daha geniş liste */
#dd-spd .fpc-dd-list { max-height: 360px; }
#dd-spd .fpc-dd-panel { min-width: 220px; }
.fpc-dd-list::-webkit-scrollbar       { width: 5px; }
.fpc-dd-list::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }
.fpc-dd-grp-lbl    { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--P); padding: 8px 12px 4px; border-top: 1px solid var(--bd); margin-top: 3px; }
.fpc-dd-grp-lbl:first-child { border-top: none; margin-top: 0; }
.fpc-dd-item       { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 8px 13px; cursor: pointer; transition: background .1s; outline: none; }
.fpc-dd-item:hover,.fpc-dd-item:focus { background: var(--Pbg); }
.fpc-dd-item--on   { background: var(--Pbg) !important; }
.fpc-dd-item--on .fpc-ddi-n { color: var(--P); font-weight: 700; }
.fpc-ddi-n         { font-size: .83rem; color: var(--t1); flex: 1; min-width: 0; }
.fpc-ddi-s         { font-size: .62rem; color: var(--t3); white-space: nowrap; flex-shrink: 0; }
.fpc-dd-empty      { padding: 16px; text-align: center; font-size: .82rem; color: var(--t3); }
.fpc-hl            { background: rgba(254,70,65,.15); color: var(--P); border-radius: 2px; padding: 0 1px; }

@media (max-width:700px) {
  .fpc-dd--open .fpc-dd-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    border-radius: var(--fpc-r-lg) var(--fpc-r-lg) 0 0;
    border-left: none; border-right: none; border-bottom: none;
    max-height: 72vh; z-index: 10002; animation: sheetUp .22s cubic-bezier(.4,0,.2,1);
  }
  .fpc-dd-list { max-height: calc(72vh - 58px); }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
}
.fpc-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 10001; }
.fpc-backdrop.fpc-bd--on { display: block; animation: bdIn .18s ease; }
@keyframes bdIn { from { opacity:0; } to { opacity:1; } }

/* ════════════════════════════════════════════════════════
   10. SLIDER — RAM & HIZ
════════════════════════════════════════════════════════ */
.fpc-ram-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fpc-ram-val {
  font-size: .76rem; font-weight: 700; color: var(--P);
  background: var(--Pbg); border: 1px solid rgba(254,70,65,.2);
  padding: 2px 9px; border-radius: var(--fpc-btn-r); min-width: 80px; text-align: center;
}
.fpc-slider-wrap  { display: flex; flex-direction: column; gap: 6px; }
.fpc-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; background: transparent; cursor: pointer; outline: none; margin: 5px 0;
}
.fpc-range::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--P) calc(var(--pct,33%)), var(--hover) calc(var(--pct,33%)));
}
.fpc-range::-moz-range-track    { height: 5px; border-radius: 3px; background: var(--hover); }
.fpc-range::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--P); }
.fpc-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--P); margin-top: -6.5px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18), 0 0 0 2px var(--Pbg); cursor: grab; transition: transform .12s;
}
.fpc-range::-moz-range-thumb    { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2.5px solid var(--P); cursor: grab; }
.fpc-range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }
.fpc-slider-ticks { display: flex; justify-content: space-between; padding: 0 1px; }
.fpc-slider-ticks span { font-size: .6rem; color: var(--t3); text-align: center; flex: 1; cursor: pointer; transition: color .15s; }
.fpc-slider-ticks span.active { color: var(--P); font-weight: 700; }
.fpc-slider-ticks--spd span   { font-size: .54rem; }

.fpc-spd-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.fpc-spd-badge  {
  font-size: .6rem; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  letter-spacing: .03em; transition: all .2s; opacity: .35;
}
.fpc-spd-ddr3   { background: rgba(139,92,246,.10); color: #7c3aed; border: 1px solid rgba(139,92,246,.2); }
.fpc-spd-ddr4   { background: rgba(59,130,246,.10);  color: #2563eb; border: 1px solid rgba(59,130,246,.2); }
.fpc-spd-ddr5   { background: rgba(254,70,65,.10);   color: var(--P); border: 1px solid rgba(254,70,65,.2); }
.fpc-spd-badge.active   { opacity: 1; }
.fpc-spd-badge.inactive { opacity: .3; }

html.dark-skin .fpc-spd-ddr3,
body.dark-skin  .fpc-spd-ddr3 { color: #a78bfa; border-color: rgba(167,139,250,.3); }
html.dark-skin .fpc-spd-ddr4,
body.dark-skin  .fpc-spd-ddr4 { color: #60a5fa; border-color: rgba(96,165,250,.3); }
html.dark-skin .fpc-spd-ddr5,
body.dark-skin  .fpc-spd-ddr5 { color: #f87171; border-color: rgba(248,113,113,.3); }

@media (max-width:400px) { .fpc-slider-ticks--spd span:nth-child(even) { display:none; } }

/* ════════════════════════════════════════════════════════
   11. CHIP / PILL SEÇİCİLER
════════════════════════════════════════════════════════ */
.fpc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fpc-chip  {
  display: inline-block; padding: 5px 11px; border-radius: var(--fpc-btn-r);
  border: 1.5px solid var(--bd); color: var(--t2); font-size: .73rem; font-weight: 600;
  cursor: pointer; transition: all .15s; background: var(--bg); user-select: none;
}
.fpc-chip:hover  { border-color: var(--bdh); color: var(--P); background: var(--Pbg); }
.fpc-chip--on    { background: var(--Pbg) !important; border-color: var(--P) !important; color: var(--P) !important; font-weight: 700; }

.fpc-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.fpc-pills--sm .fpc-pill { padding: 4px 8px; }
.fpc-pill  {
  display: inline-flex; flex-direction: column; align-items: center; padding: 6px 11px;
  border-radius: var(--fpc-r-lg); border: 1.5px solid var(--bd); color: var(--t2);
  cursor: pointer; transition: all .15s; background: var(--bg); user-select: none; min-width: 44px; text-align: center;
}
.fpc-pill b     { font-size: .74rem; font-style: normal; display: block; line-height: 1.3; font-weight: 700; }
.fpc-pill small { font-size: .58rem; opacity: .75; display: block; line-height: 1.2; }
.fpc-pill:hover { border-color: var(--bdh); color: var(--P); }
.fpc-pill--on   { background: var(--Pbg) !important; border-color: var(--P) !important; color: var(--P) !important; }

/* ════════════════════════════════════════════════════════
   12. HW BADGE & TAGS
════════════════════════════════════════════════════════ */
.fpc-hw-badge { display: none; flex-wrap: wrap; align-items: center; gap: 5px; padding: 3px 0; }
.fpc-tag      { display: inline-block; padding: 2px 9px; border-radius: var(--fpc-btn-r); font-size: .65rem; font-weight: 700; }
.tag-hi    { background: rgba(34,197,94,.12);  color: #15803d; border: 1px solid rgba(34,197,94,.25); }
.tag-mid   { background: rgba(59,130,246,.10); color: #1d4ed8; border: 1px solid rgba(59,130,246,.2); }
.tag-lo    { background: rgba(245,158,11,.10); color: #b45309; border: 1px solid rgba(245,158,11,.2); }
.tag-warn  { background: rgba(239,68,68,.10);  color: #b91c1c; border: 1px solid rgba(239,68,68,.2); }
.tag-vok   { background: rgba(34,197,94,.08);  color: #15803d; border: 1px solid rgba(34,197,94,.18); }
.tag-vwarn { background: rgba(239,68,68,.08);  color: #b91c1c; border: 1px solid rgba(239,68,68,.16); }
html.dark-skin .tag-hi    { color:#4ade80; } html.dark-skin .tag-mid { color:#60a5fa; }
html.dark-skin .tag-lo    { color:#fbbf24; } html.dark-skin .tag-warn { color:#f87171; }
html.dark-skin .tag-vok   { color:#86efac; } html.dark-skin .tag-vwarn { color:#fca5a5; }
.fpc-tag-s { font-size: .64rem; color: var(--t3); }
.fpc-tag.tag-laptop  { background: rgba(59,130,246,.12); color: #3b82f6; border-color: rgba(59,130,246,.25); }
.fpc-tag.tag-desktop { background: rgba(139,92,246,.12); color: #8b5cf6; border-color: rgba(139,92,246,.25); }
.fpc-tag.tag-tdp     { background: rgba(249,115,22,.10); color: #f97316; border-color: rgba(249,115,22,.25); font-family: monospace; font-size: .65rem; }

/* Uyumluluk uyarısı */
.fpc-warn-compat {
  gap: 10px; padding: 10px 14px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.28);
  border-radius: var(--fpc-r-lg);
  color: var(--t1);
  font-size: .8rem; line-height: 1.5;
  margin-top: 8px;
}
.fpc-warn-compat strong { color: #dc2626; }
.fpc-warn-compat span:first-child { font-size: 1rem; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════
   13. WEBGL BANNER
════════════════════════════════════════════════════════ */
.fpc-webgl-banner {
  display: none; align-items: center; gap: 9px;
  background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.18);
  border-radius: var(--fpc-r-lg); padding: 9px 12px; font-size: .76rem; color: var(--t1);
  animation: fadeSlideDown .4s ease;
}
.fpc-webgl-banner.visible { display: flex; }
@keyframes fadeSlideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.fpc-webgl-banner-text strong { color: var(--info, #3b82f6); }
.fpc-webgl-btn, .fpc-webgl-dismiss {
  background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.22); color: #2563eb;
  padding: 4px 11px; border-radius: var(--fpc-btn-r); font-size: .72rem; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.fpc-webgl-btn:hover { background: rgba(59,130,246,.18); }
.fpc-webgl-dismiss { color: var(--t3); font-size: .76rem; cursor: pointer; padding: 2px 4px; }
html.dark-skin .fpc-webgl-banner-text strong,
html.dark-skin .fpc-webgl-btn, .fpc-webgl-dismiss { color: #60a5fa; }

/* ════════════════════════════════════════════════════════
   14. OYUN ARTWORK
════════════════════════════════════════════════════════ */
.fpc-game-art {
  position: relative; width: 100%; height: 120px; border-radius: var(--fpc-r-lg);
  overflow: hidden; background: var(--input); border: 1px solid var(--bd); flex-shrink: 0;
}
.fpc-art-bg   { position: absolute; inset: 0; transition: background .5s ease; }
.fpc-art-img  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; z-index: 1; }
/* Overlay: sadece görsel varken göster */
.fpc-art-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.12) 50%, transparent 100%);
  opacity: 0;
  transition: opacity .35s;
}
.fpc-game-art.has-image .fpc-art-overlay { opacity: 1; }
.fpc-art-meta { position: absolute; bottom: 7px; left: 9px; right: 9px; display: flex; align-items: center; justify-content: space-between; z-index: 3; }
.fpc-art-cat  { background: var(--P); color: #fff; padding: 2px 8px; border-radius: var(--fpc-btn-r); font-size: .6rem; font-weight: 700; }
.fpc-art-eng  { font-size: .58rem; color: rgba(255,255,255,.65); font-style: italic; }
.fpc-art-ph   { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; z-index: 3; }
.fpc-art-ph-ico  { font-size: 1.8rem; opacity: .35; }
.fpc-art-ph-name {
  font-size: .78rem; font-weight: 700; color: var(--t2);
  text-align: center; padding: 0 12px; line-height: 1.3;
}
.fpc-art-ph-cat  { font-size: .6rem; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; }

/* ════════════════════════════════════════════════════════
   15. SONUÇ KARTI — Tahmini Performans
   Light modda Jannah tema renkleri kullanılır.
   Dark modda koyu arka plan (gauge okunabilirliği için).
════════════════════════════════════════════════════════ */

/* ── Light mod: Jannah kart renkleri ── */
.fpc-result {
  background: var(--card);
  border: 1px solid var(--bd);
}
.fpc-result .fpc-card-head {
  color: var(--t2);
  border-bottom-color: var(--bd);
}
.fpc-result .fpc-dot--green { background: #16a34a; }

/* ── Dark mod: koyu arka plan ── */
html.dark-skin .fpc-result,
body.dark-skin  .fpc-result {
  background: #1e2023;
  border-color: rgba(255,255,255,.08);
}
html.dark-skin .fpc-result .fpc-card-head,
body.dark-skin  .fpc-result .fpc-card-head {
  color: rgba(255,255,255,.55);
  border-bottom-color: rgba(255,255,255,.08);
}

/* ── Gauge ── */
.fpc-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; }
.fpc-gauge      { width: min(200px,100%); margin: 0 auto; }
.fpc-gauge-svg  { width: 100%; height: auto; display: block; overflow: visible; }

/* Track: light=açık gri, dark=koyu */
.gauge-track    { stroke: rgba(44,47,52,.12); }
html.dark-skin .gauge-track,
body.dark-skin  .gauge-track { stroke: rgba(255,255,255,.10); }

.gauge-fill { transition: stroke-dasharray .55s cubic-bezier(.4,0,.2,1); stroke-linecap: round; }

/* FPS sayısı: light=Jannah base, dark=beyaz */
.gauge-num {
  fill: #2c2f34;
  font-size: 38px; font-weight: 900;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -1px;
}
html.dark-skin .gauge-num,
body.dark-skin  .gauge-num { fill: #ffffff; }

.gauge-fps-txt {
  fill: rgba(44,47,52,.45);
  font-size: 8px; font-weight: 700;
  font-family: -apple-system,sans-serif; letter-spacing: 2px;
}
html.dark-skin .gauge-fps-txt,
body.dark-skin  .gauge-fps-txt { fill: rgba(255,255,255,.5); }

.gauge-lbl {
  fill: rgba(44,47,52,.35);
  font-size: 8px;
  font-family: -apple-system,sans-serif;
}
html.dark-skin .gauge-lbl,
body.dark-skin  .gauge-lbl { fill: rgba(255,255,255,.3); }

/* ── Rating ── */
.fpc-rating {
  padding: 4px 16px; border-radius: var(--fpc-btn-r);
  font-size: .73rem; font-weight: 700;
  border: 1px solid var(--bd);
  background: var(--input);
  color: var(--t2);
  transition: all .3s; text-align: center;
}
.r-epic  { background:rgba(254,70,65,.10);  color:#cc140f; border-color:rgba(254,70,65,.30); }
.r-great { background:rgba(22,163,74,.10);  color:#15803d; border-color:rgba(22,163,74,.30); }
.r-good  { background:rgba(22,163,74,.07);  color:#166534; border-color:rgba(22,163,74,.22); }
.r-fair  { background:rgba(202,138,4,.10);  color:#92400e; border-color:rgba(202,138,4,.25); }
.r-ok    { background:rgba(234,88,12,.08);  color:#9a3412; border-color:rgba(234,88,12,.22); }
.r-bad   { background:rgba(220,38,38,.08);  color:#991b1b; border-color:rgba(220,38,38,.22); }

/* Dark mod rating */
html.dark-skin .r-epic,  body.dark-skin .r-epic  { background:rgba(254,70,65,.20);  color:#fca5a5; }
html.dark-skin .r-great, body.dark-skin .r-great { background:rgba(22,163,74,.20);  color:#86efac; }
html.dark-skin .r-good,  body.dark-skin .r-good  { background:rgba(22,163,74,.15);  color:#bbf7d0; }
html.dark-skin .r-fair,  body.dark-skin .r-fair  { background:rgba(202,138,4,.18);  color:#fde68a; }
html.dark-skin .r-ok,    body.dark-skin .r-ok    { background:rgba(234,88,12,.15);  color:#fed7aa; }
html.dark-skin .r-bad,   body.dark-skin .r-bad   { background:rgba(220,38,38,.15);  color:#fca5a5; }

/* ── Metrikler ── */
.fpc-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.fpc-metric  {
  background: var(--input);
  border: 1px solid var(--bd);
  border-radius: var(--fpc-r-lg); padding: 8px 5px; text-align: center;
}
.fpc-mv { font-size: 1.05rem; font-weight: 800; color: var(--t1); font-variant-numeric: tabular-nums; line-height: 1.2; }
.fpc-ml { font-size: .58rem; color: var(--t2); margin-top: 2px; }

/* ── Hedef FPS ── */
.fpc-targets { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.fpc-target-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 3px; border-radius: var(--fpc-r-lg);
  border: 1px solid var(--bd); background: var(--input);
  transition: all .3s;
}
.fpc-target-item--ok { border-color: #16a34a; background: rgba(22,163,74,.08); }
html.dark-skin .fpc-target-item--ok,
body.dark-skin  .fpc-target-item--ok { background: rgba(22,163,74,.15); }

.fpc-target-ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bd); transition: all .3s; }
.fpc-target-item--ok .fpc-target-ring { border-color: #16a34a; background: rgba(22,163,74,.25); }
.fpc-target-fps   { font-size: .78rem; font-weight: 800; color: var(--t1); line-height: 1; }
.fpc-target-label { font-size: .53rem; color: var(--t2); text-transform: uppercase; }

/* ── Performans Barı ── */
.fpc-bar-outer { display: flex; flex-direction: column; gap: 4px; }
.fpc-bar-track {
  height: 8px; background: var(--hover);
  border-radius: 5px; position: relative; overflow: hidden;
}
.fpc-bar-fill  {
  height: 100%; border-radius: 5px;
  transition: width .5s cubic-bezier(.4,0,.2,1), background .4s ease; width: 0;
}
.fpc-bar-m     { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bd); }
.fpc-bar-labels{ display: flex; font-size: .53rem; color: var(--t3); }
.fpc-bar-labels span { flex: 1; text-align: center; }

/* ── Uyarılar ── */
.fpc-warn { display: none; align-items: flex-start; gap: 7px; padding: 8px 11px; border-radius: var(--fpc-r-lg); font-size: .72rem; line-height: 1.45; }
.fpc-warn-cpu  { background: rgba(202,138,4,.08);  border: 1px solid rgba(202,138,4,.22); color: #92400e; }
.fpc-warn-vram { background: rgba(220,38,38,.08);  border: 1px solid rgba(220,38,38,.22); color: #991b1b; }
html.dark-skin .fpc-warn-cpu,  body.dark-skin .fpc-warn-cpu  { color: #fbbf24; }
html.dark-skin .fpc-warn-vram, body.dark-skin .fpc-warn-vram { color: #fca5a5; }

.fpc-disc { font-size: .6rem; color: var(--t3); text-align: center; line-height: 1.5; }

/* ════════════════════════════════════════════════════════
   16. ÖNERİ MODU
════════════════════════════════════════════════════════ */
.fpc-panel { animation: panelFadeIn .2s ease; }
@keyframes panelFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.fpc-rec-wrap { display: grid; grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 14px; align-items: start; }
.fpc-rec-wrap > * { min-width: 0; }
.fpc-rec-gpu-name { overflow-wrap: anywhere; }
@media (max-width:760px) { .fpc-rec-wrap { grid-template-columns: 1fr; } }
.fpc-rec-card { min-height: 260px; }
.fpc-rec-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 36px 20px; color: var(--t3); text-align: center; }
.fpc-rec-placeholder p { font-size: .82rem; }
.fpc-rec-tiers { display: flex; flex-direction: column; gap: 9px; margin-bottom: 10px; }
.fpc-rec-tier  { border-radius: var(--fpc-r-lg); border: 1px solid var(--bd); background: var(--card); overflow: hidden; transition: border-color .18s; }
.fpc-rec-tier:hover { border-color: var(--bdh); }
.tier-rec   { border-color: rgba(254,70,65,.3); background: var(--Pbg); }
.tier-comfy { border-color: rgba(59,130,246,.25); background: rgba(59,130,246,.04); }
.fpc-rec-tier-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px 5px; }
.fpc-rec-tier-icon { font-size: 1rem; width: 22px; text-align: center; flex-shrink: 0; }
.fpc-rec-tier-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fpc-rec-tier-label { font-size: .78rem; font-weight: 700; color: var(--t1); }
.fpc-rec-tier-desc  { font-size: .63rem; color: var(--t2); }
.fpc-rec-tier-fps   { font-size: 1.25rem; font-weight: 900; color: var(--t3); line-height: 1; font-variant-numeric: tabular-nums; flex-shrink: 0; text-align: right; }
.fpc-rec-tier-fps span { font-size: .64rem; font-weight: 600; margin-left: 2px; }
.fpc-rec-tier-fps.fps-ok  { color: var(--PG); }
.fpc-rec-tier-fps.fps-low { color: var(--P); }
.fpc-rec-tier-gpu  { padding: 0 12px 10px; }
.fpc-rec-gpu-name  { font-size: .82rem; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.fpc-rec-gpu-meta  { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 7px; font-size: .65rem; color: var(--t2); }
.fpc-rec-badge     { display: inline-block; padding: 1px 8px; border-radius: var(--fpc-btn-r); font-size: .61rem; font-weight: 700; }
.fpc-rec-badge--ok { background: rgba(34,197,94,.12); color: #15803d; border: 1px solid rgba(34,197,94,.22); }
.fpc-rec-badge--warn { background: rgba(239,68,68,.10); color: #b91c1c; border: 1px solid rgba(239,68,68,.20); }
html.dark-skin .fpc-rec-badge--ok   { color:#4ade80; } html.dark-skin .fpc-rec-badge--warn { color:#f87171; }
.fpc-rec-mini-bar  { height: 4px; background: var(--hover); border-radius: 2px; overflow: hidden; }
.fpc-rec-mini-fill { height: 100%; background: linear-gradient(90deg,var(--P),var(--Pdk)); border-radius: 2px; transition: width .4s ease; max-width: 100%; }
.fpc-rec-note { font-size: .64rem; color: var(--t3); line-height: 1.5; padding-top: 6px; border-top: 1px solid var(--bd); }

/* ════════════════════════════════════════════════════════
   17. TOAST
════════════════════════════════════════════════════════ */
.fpc-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1f2a3c; color: #93c5fd; border: 1px solid rgba(59,130,246,.32); border-radius: var(--fpc-r-lg); padding: 10px 20px; font-size: .82rem; font-weight: 600; z-index: 20000; pointer-events: none; opacity: 0; transition: opacity .25s,transform .25s; white-space: nowrap; box-shadow: var(--fpc-shadow-lg); }
.fpc-toast--on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ════════════════════════════════════════════════════════
   18. FAQ
════════════════════════════════════════════════════════ */
.fpc-faq-section { max-width: 960px; margin: 0 auto 28px; background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r); padding: 20px 22px; }
.fpc-faq-header  { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--bd); color: var(--P); }
.fpc-faq-title   { font-size: 1rem; font-weight: 700; color: var(--t1); }
.fpc-faq-list    { display: flex; flex-direction: column; gap: 5px; }
.fpc-faq-item    { border-radius: var(--fpc-r-lg); overflow: hidden; border: 1px solid var(--bd); transition: border-color .18s; }
.fpc-faq-item:hover { border-color: var(--bdh); }
.fpc-faq-q       { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; background: var(--card); color: var(--t1); font-size: .84rem; font-weight: 600; cursor: pointer; transition: background .15s; line-height: 1.4; user-select: none; }
.fpc-faq-q:hover { background: var(--hover); color: var(--P); }
.fpc-faq-q--open { background: var(--Pbg); color: var(--P); }
.fpc-faq-chevron { flex-shrink: 0; color: var(--t3); transition: transform .25s,color .15s; display: flex; align-items: center; }
.fpc-faq-q--open .fpc-faq-chevron { transform: rotate(180deg); color: var(--P); }
.fpc-faq-a       { background: var(--bg); overflow: hidden; max-height: 0; transition: max-height .3s cubic-bezier(.4,0,.2,1),padding .3s ease; padding: 0 14px; }
.fpc-faq-a--open { max-height: 800px; padding: 11px 14px 13px; }
.fpc-faq-a[hidden] { display: block !important; max-height: 0; padding: 0 14px; }
.fpc-faq-a-body  { font-size: .83rem; color: var(--t2); line-height: 1.7; }
.fpc-faq-a-body strong { color: var(--t1); font-weight: 700; }
.fpc-faq-a-body code { background: var(--Pbg); color: var(--P); padding: 1px 6px; border-radius: 4px; font-size: .78rem; }

/* ════════════════════════════════════════════════════════
   19. BUTON — Jannah Pill Uyumu
════════════════════════════════════════════════════════ */
.fpc-btn {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--fpc-btn-r);
  font-family: var(--fpc-font); font-weight: 700; padding: 10px 22px;
  transition: background .2s, box-shadow .15s, transform .1s;
  border: none; cursor: pointer; text-decoration: none; font-size: .88rem;
}
.fpc-btn-primary { background: var(--P); color: #fff; }
.fpc-btn-primary:hover { background: var(--Pdk); box-shadow: 0 4px 12px var(--fpc-brand-glow); color: #fff; }
.fpc-btn-primary:active { transform: scale(.98); }

/* ════════════════════════════════════════════════════════
   20. RESPONSIVE — Jannah breakpoints
════════════════════════════════════════════════════════ */
@media (max-width:900px) { .fpc-grid > .fpc-result { grid-column: span 2; } }

@media screen and (max-width:768px) {
  .fpc-root {
    padding: 16px 15px;
    border-radius: 0;
    border-left: none; border-right: none;
    margin-left: -15px; margin-right: -15px;
    max-width: none; width: calc(100% + 30px);
  }
  /* iOS zoom engeli */
  .fpc-root input[type="text"],
  .fpc-root input[type="number"],
  .fpc-root input[type="range"] { font-size: 16px !important; }
  .fpc-root select { min-height: 44px; font-size: 16px !important; }
  .fpc-btn { min-height: 44px; width: 100%; justify-content: center; }
  .fpc-grid { gap: 10px; }
  .fpc-grid > .fpc-result { grid-column: span 1; }
}

@media screen and (max-width:480px) {
  .fpc-root { padding: 14px 12px; }
  .fpc-targets { grid-template-columns: 1fr 1fr; }
  .fpc-gauge   { width: min(175px,100%); }
  .fpc-metrics { grid-template-columns: 1fr 1fr 1fr; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .fpc-root *, .fpc-root *::before, .fpc-root *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ════════════════════════════════════════════════════════
   YENI ÖZELLIKLER v5.6
════════════════════════════════════════════════════════ */

/* ── Geçmiş Butonu ── */
.fpc-hist-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--fpc-r-lg);
  border: 1px solid var(--bd); color: var(--t3); background: transparent;
  cursor: pointer; transition: all .18s;
}
.fpc-hist-btn:hover,
.fpc-hist-btn--open { border-color: var(--P); color: var(--P); background: var(--Pbg); }

/* ── Geçmiş Paneli ── */
.fpc-hist-panel {
  background: var(--card); border: 1px solid var(--bd);
  border-radius: var(--fpc-r-lg); margin-bottom: 14px;
  overflow: hidden; box-shadow: var(--fpc-shadow);
}
.fpc-hist-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--bd);
  font-size: .78rem; font-weight: 700; color: var(--t2);
}
.fpc-hist-clear {
  font-size: .72rem; color: var(--t3); padding: 2px 8px;
  border: 1px solid var(--bd); border-radius: var(--fpc-btn-r);
  transition: all .15s;
}
.fpc-hist-clear:hover { color: var(--P); border-color: var(--bdh); }
.fpc-hist-list { max-height: 280px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bd) transparent; }
.fpc-hist-empty { padding: 14px; text-align: center; font-size: .8rem; color: var(--t3); }
.fpc-hist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--bd);
  cursor: pointer; transition: background .12s; outline: none;
}
.fpc-hist-item:last-child { border-bottom: none; }
.fpc-hist-item:hover { background: var(--Pbg); }
.fpc-hist-item:focus-visible { box-shadow: inset 0 0 0 2px var(--P); }
.fpc-hist-info { flex: 1; min-width: 0; }
.fpc-hist-hw  { font-size: .8rem; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpc-hist-sub { font-size: .68rem; color: var(--t3); margin-top: 1px; }
.fpc-hist-fps { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.fpc-hist-fps-num { font-size: 1.1rem; font-weight: 900; color: var(--P); line-height: 1; font-variant-numeric: tabular-nums; }
.fpc-hist-fps-lbl { font-size: .55rem; color: var(--t3); font-weight: 700; letter-spacing: .04em; }
.fpc-hist-date { font-size: .62rem; color: var(--t3); flex-shrink: 0; min-width: 40px; text-align: right; }

/* ── Laptop Termal Modu ── */
.fpc-notebook-field { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ── Benchmark Link ── */
.fpc-bench-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 600;
  color: var(--t2); text-decoration: none;
  padding: 4px 12px; border-radius: var(--fpc-btn-r);
  border: 1px solid var(--bd);
  background: transparent;
  transition: all .15s; margin-top: 6px;
}
.fpc-bench-link:hover { color: var(--P); border-color: var(--bdh); background: var(--Pbg); }
html.dark-skin .fpc-bench-link,
body.dark-skin  .fpc-bench-link { color: rgba(232,234,237,.65); }

/* ── Çözünürlük Ölçekleyici ── */
.fpc-res-scaler {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(255,255,255,.04); border-radius: var(--fpc-r-lg);
  border: 1px solid var(--bd);
}
html.dark-skin .fpc-res-scaler,
body.dark-skin  .fpc-res-scaler { background: rgba(255,255,255,.03); }
.fpc-res-scaler-head {
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--t2); margin-bottom: 8px;
}
.fpc-res-scaler-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.fpc-res-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; border-radius: var(--fpc-r);
  border: 1px solid transparent; transition: border-color .15s;
}
.fpc-res-item--cur { border-color: var(--P); background: var(--Pbg); }
.fpc-res-label { font-size: .64rem; font-weight: 700; color: var(--t2); }
.fpc-res-label small { display: block; font-size: .54rem; color: var(--t3); font-weight: 400; }
.fpc-res-fps {
  font-size: .9rem; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--t1);
}
/* Renk sınıfları result kartından kalıtım */
.fpc-res-fps.r-epic  { color: #60a5fa; }
.fpc-res-fps.r-great { color: #4ade80; }
.fpc-res-fps.r-good  { color: #86efac; }
.fpc-res-fps.r-fair  { color: #fbbf24; }
.fpc-res-fps.r-bad   { color: #f87171; }
html.dark-skin .fpc-res-fps.r-epic  { color: #93c5fd; }

/* ── GPU Karşılaştırma ── */
.fpc-compare { margin-top: 10px; }
.fpc-compare-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 700; color: var(--t2);
  padding: 5px 12px; border-radius: var(--fpc-btn-r);
  border: 1px solid var(--bd); background: transparent;
  cursor: pointer; transition: all .15s;
}
.fpc-card-dl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 700; color: var(--P);
  padding: 7px 14px; border-radius: var(--fpc-btn-r);
  border: 1px solid var(--P); background: var(--Pbg);
  cursor: pointer; transition: all .15s; text-decoration: none;
  margin: 4px 0 10px;
}
.fpc-card-dl:hover { background: var(--Pbg); border-color: var(--Pdk); color: var(--Pdk); }
.fpc-card-dl:active { transform: scale(.98); }
.fpc-compare-toggle:hover,
.fpc-compare-toggle--open { color: var(--P); border-color: var(--bdh); background: var(--Pbg); }
.fpc-compare-body { margin-top: 8px; }
.fpc-compare-dd-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.fpc-compare-dd-row .fpc-dd { flex: 1; }
.fpc-compare-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--bd); color: var(--t3);
  font-size: .8rem; cursor: pointer; flex-shrink: 0; transition: all .15s;
}
.fpc-compare-clear:hover { color: var(--P); border-color: var(--bdh); }

.fpc-compare-result { animation: panelFadeIn .2s ease; }
.fpc-compare-cols { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.fpc-compare-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 8px; border-radius: var(--fpc-r-lg);
  border: 1px solid var(--bd); background: var(--input); transition: border-color .3s, background .3s;
}
.fpc-compare-col--win {
  border-color: var(--P) !important; background: var(--Pbg) !important;
}
.fpc-compare-gpu-name { font-size: .68rem; font-weight: 700; color: var(--t2); text-align: center; line-height: 1.3; }
.fpc-compare-fps-num  { font-size: 1.6rem; font-weight: 900; color: var(--t1); line-height: 1; font-variant-numeric: tabular-nums; }
.fpc-compare-fps-lbl  { font-size: .55rem; font-weight: 700; color: var(--t3); letter-spacing: .05em; }
.fpc-compare-bar-track { width: 100%; height: 5px; background: var(--hover); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.fpc-compare-bar-fill  { height: 100%; background: linear-gradient(90deg,var(--P),var(--Pdk)); border-radius: 3px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.fpc-compare-vs {
  display: flex; align-items: center; justify-content: center;
  font-size: .64rem; font-weight: 900; color: var(--t3);
  flex-shrink: 0; align-self: center;
}
.fpc-compare-diff {
  font-size: .74rem; text-align: center; color: var(--t2);
  font-weight: 600; padding: 4px;
}

@media (max-width:480px) {
  .fpc-res-scaler-grid { grid-template-columns: repeat(2,1fr); }
  .fpc-compare-fps-num { font-size: 1.3rem; }
  .fpc-compare-gpu-name { font-size: .62rem; }
}

/* ── RAM Hız Dropdown ── */
.fpc-pills--ram { flex-wrap: wrap; gap: 6px; }



.fpc-spd-select-wrap { display: flex; flex-direction: column; gap: 8px; }

/* .fpc-root ile yüksek özgüllük — Jannah tema override'larını geçersiz kılar */

.fpc-spd-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fpc-spd-gen-indicator {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all .2s;
}
.fpc-spd-gen-ddr3 { background: rgba(139,92,246,.12); color: #7c3aed; border-color: rgba(139,92,246,.3); }
.fpc-spd-gen-ddr4 { background: rgba(59,130,246,.12); color: #1d4ed8; border-color: rgba(59,130,246,.3); }
.fpc-spd-gen-ddr5 { background: rgba(16,185,129,.12); color: #047857; border-color: rgba(16,185,129,.3); }
html.dark-skin .fpc-spd-gen-ddr3 { color: #a78bfa; background: rgba(139,92,246,.18); }
html.dark-skin .fpc-spd-gen-ddr4 { color: #60a5fa; background: rgba(59,130,246,.18); }
html.dark-skin .fpc-spd-gen-ddr5 { color: #34d399; background: rgba(16,185,129,.18); }

.fpc-spd-hint {
  font-size: .72rem;
  color: var(--t3);
  font-style: italic;
}

@media (max-width: 480px) {
  .fpc-spd-select { max-width: 100%; }
}

/* ── CPU-GPU Kilidi & DDR Uyumluluk ── */
.fpc-field--gpu { position: relative; }

.fpc-gpu-lock {
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: rgba(239,68,68,.07);
  border: 1px dashed rgba(239,68,68,.35);
  border-radius: var(--fpc-r-lg);
  color: var(--t2);
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.5;
  transition: background .2s, border-color .2s;
}
.fpc-gpu-lock[style*="flex"] { display: flex !important; }
.fpc-gpu-lock-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.fpc-gpu-lock-msg { color: #dc2626; font-weight: 600; }
html.dark-skin .fpc-gpu-lock-msg { color: #f87171; }

/* Birleşik bellek notu (Apple/Qualcomm) */
.fpc-unified-mem {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(59,130,246,.07);
  border: 1px dashed rgba(59,130,246,.3);
  border-radius: var(--fpc-r-lg);
  color: var(--t2);
  font-size: .78rem;
  font-weight: 500;
}
.fpc-unified-mem[style*="flex"] { display: flex !important; }

/* Disabled DDR options */
.fpc-root .fpc-spd-select option:disabled {
  color: var(--t3) !important;
  opacity: .4;
}
.fpc-root .fpc-spd-select option:disabled::after { content: " (uyumsuz)"; }

/* Disabled RAM pills (Apple/Qualcomm) */
.fpc-pills--ram[style*="pointer-events: none"] .fpc-pill {
  opacity: .35 !important;
  cursor: not-allowed !important;
}

/* Apple compat note */
.fpc-warn-apple {
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,149,0,.07);
  border: 1px dashed rgba(255,149,0,.35);
  border-radius: var(--fpc-r-lg);
  color: var(--t2);
  font-size: .78rem;
  line-height: 1.5;
  margin-top: 4px;
}
.fpc-warn-apple[style*="flex"] { display: flex !important; }
.fpc-warn-apple span:first-child { font-size: 1rem; flex-shrink: 0; }

/* ── Yeni Özellikler CSS ── */

/* Extra Stats (PSU / Monitör / Fiyat-Performans) */
.fpc-extra-stats {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 6px;
}
.fpc-extra-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--fpc-r-lg);
  flex: 1 1 auto;
  min-width: 110px;
}
.fpc-extra-icon { font-size: .9rem; }
.fpc-extra-val  { font-size: 1rem; font-weight: 800; color: var(--P); }
.fpc-extra-lbl  { font-size: .72rem; color: var(--t3); }

/* Monitör uyarısı */
.fpc-warn-monitor {
  display: none; align-items: flex-start; gap: 10px;
  padding: 10px 14px; margin-top: 4px;
  background: rgba(59,130,246,.07);
  border: 1px dashed rgba(59,130,246,.3);
  border-radius: var(--fpc-r-lg);
  color: var(--t2); font-size: .8rem; line-height: 1.5;
}
.fpc-warn-monitor[style*="flex"] { display: flex !important; }

/* OC + RT chip grubu için ek renk */
[data-g="oc"].fpc-chip--on { background: rgba(245,158,11,.15); color: #d97706; border-color: rgba(245,158,11,.4); }
[data-g="rt"].fpc-chip--on { background: rgba(139,92,246,.15); color: #7c3aed; border-color: rgba(139,92,246,.4); }
html.dark-skin [data-g="oc"].fpc-chip--on { color: #fbbf24; }
html.dark-skin [data-g="rt"].fpc-chip--on { color: #a78bfa; }

/* ── Mobil UX İyileştirmeleri ─────────────────────────────── */

/* Dokunma hedefleri büyüt */
@media (max-width: 600px) {
  .fpc-chip, .fpc-pill {
    min-height: 36px;
    min-width: 44px;
    font-size: .78rem;
    padding: 6px 10px;
  }
  /* Extra stats yığıt */
  .fpc-extra-stats { flex-direction: column; }
  .fpc-extra-item  { min-width: unset; width: 100%; }

  /* Header aksiyonları sığdır */
  .fpc-header-actions { gap: 6px; }
  .fpc-share-label    { display: none; }

  /* Gauge daha küçük */
  .fpc-gauge-svg { max-width: 280px; }
  #g-num         { font-size: 2.6rem !important; }

  /* Mode tab yazısı */
  .fpc-mode-tab { font-size: .72rem; padding: 8px 6px; gap: 4px; }

  /* Compare toggle gizle */
  .fpc-compare-toggle { font-size: .72rem; }

  /* Benchmark link */
  .fpc-bench-link { font-size: .78rem; }
}

/* Tam ekran — mobilde overflow düzeltme */
.fpc-root.fpc-fs-active {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ═══════════════════════════════════════════════
   GPU PROFİL SAYFALARI
═══════════════════════════════════════════════ */
.fps-gpu-profile {
  font-family: system-ui, -apple-system, sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 32px;
}
.fps-gp-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0 16px;
  border-bottom: 2px solid #fe4641;
  margin-bottom: 20px;
}
.fps-gp-icon {
  font-size: 2rem;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg,#fe4641,#cc140f);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fps-gp-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: #1a1f2e;
}
.dark-skin .fps-gp-title { color: #f0f4ff; }
.fps-gp-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.fps-gp-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
}
.fps-gp-badge--brand { background: #e8f4fd; color: #1565c0; }
.fps-gp-badge--vram  { background: #e8f5e9; color: #2e7d32; }
.fps-gp-badge--score { background: #fce4ec; color: #c62828; }
.dark-skin .fps-gp-badge--brand { background: #1a2744; color: #82b1ff; }
.dark-skin .fps-gp-badge--vram  { background: #1a3a2a; color: #69f0ae; }
.dark-skin .fps-gp-badge--score { background: #3a1a1a; color: #ff6b6b; }

/* Tablo */
.fps-gp-table-wrap { overflow-x: auto; }
.fps-gp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.fps-gp-table th {
  background: #1a1f2e;
  color: #fff;
  padding: 8px 12px;
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}
.dark-skin .fps-gp-table th { background: #0e1420; }
.fps-gp-table td {
  padding: 7px 12px;
  border-bottom: 1px solid #eee;
}
.dark-skin .fps-gp-table td { border-bottom-color: #1e2530; }
.fps-gp-table tr:nth-child(even) td { background: #f9f9f9; }
.dark-skin .fps-gp-table tr:nth-child(even) td { background: #141820; }

/* FPS renk sınıfları */
.fps-gp-td-fps { font-weight: 700; text-align: center; min-width: 90px; }
.fps-gp-td-fps small { font-weight: 400; font-size: .7rem; color: inherit; opacity: .7; }
.fps-hi  { color: #7c3aed; }
.fps-ok  { color: #166534; }
.fps-low { color: #92400e; }
.fps-bad { color: #991b1b; }
.fps-gp-cat {
  background: #f1f5f9;
  color: #475569;
  font-size: .7rem;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 600;
}
.dark-skin .fps-gp-cat { background: #1e2530; color: #94a3b8; }

/* Disclaimer */
.fps-gp-disclaimer {
  margin-top: 12px;
  font-size: .75rem;
  color: #888;
  border-top: 1px solid #eee;
  padding-top: 8px;
}
.dark-skin .fps-gp-disclaimer { color: #666; border-top-color: #2a3040; }

@media (max-width: 600px) {
  .fps-gp-table th:nth-child(n+4),
  .fps-gp-td-fps:nth-child(n+4) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SEO İÇERİK TABLOSU — hesaplayıcı dışında, kendi renk değişkenleri
   (html.dark-skin ile dark mode uyumlu)
   ═══════════════════════════════════════════════════════════════ */
.fpc-seo {
  --s-bg:#ffffff; --s-card:#f8f9fa; --s-hover:#eef0f3;
  --s-t1:#2c2f34; --s-t2:rgba(44,47,52,.66); --s-t3:rgba(44,47,52,.42);
  --s-bd:rgba(0,0,0,.10); --s-P:#fe4641; --s-Pbg:rgba(254,70,65,.08);
  max-width:1100px; margin:30px auto 0; padding:0 6px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--s-t1); box-sizing:border-box;
}
html.dark-skin .fpc-seo, body.dark-skin .fpc-seo {
  --s-bg:#1e2023; --s-card:#27292d; --s-hover:#32353a;
  --s-t1:#e8eaed; --s-t2:rgba(232,234,237,.65); --s-t3:rgba(232,234,237,.4);
  --s-bd:rgba(255,255,255,.08); --s-Pbg:rgba(254,70,65,.14);
}
.fpc-seo * { box-sizing:border-box; }
.fpc-seo-h2 { font-size:1.3rem; font-weight:800; margin:0 0 8px; color:var(--s-t1); line-height:1.25; }
.fpc-seo-intro { font-size:.92rem; line-height:1.6; color:var(--s-t2); margin:0 0 16px; }
.fpc-seo-table-wrap { overflow-x:auto; border:1px solid var(--s-bd); border-radius:12px; -webkit-overflow-scrolling:touch; }
.fpc-seo-table { width:100%; border-collapse:collapse; font-size:.86rem; min-width:540px; background:var(--s-bg); }
.fpc-seo-table th, .fpc-seo-table td { padding:11px 12px; text-align:center; border-bottom:1px solid var(--s-bd); }
.fpc-seo-table thead th { background:var(--s-card); font-weight:700; color:var(--s-t1); }
.fpc-seo-table tbody tr:last-child th, .fpc-seo-table tbody tr:last-child td { border-bottom:0; }
.fpc-seo-table tbody th.fpc-seo-gpu { text-align:left; font-weight:700; color:var(--s-t1); white-space:nowrap; }
.fpc-seo-table tbody tr:hover { background:var(--s-hover); }
.fpc-seo-vram { font-size:.72rem; color:var(--s-t3); font-weight:600; }
.fpc-seo-cell { display:inline-block; color:var(--s-P); font-weight:700; text-decoration:none; padding:3px 8px; border-radius:7px; transition:background .15s; white-space:nowrap; }
.fpc-seo-cell small { font-size:.66rem; color:var(--s-t3); font-weight:600; }
.fpc-seo-cell:hover { background:var(--s-Pbg); }
.fpc-seo-note { font-size:.77rem; color:var(--s-t3); margin:12px 0 0; line-height:1.5; }
@media (max-width:600px) {
  .fpc-seo-h2 { font-size:1.1rem; }
  .fpc-seo-table { font-size:.8rem; }
  .fpc-seo-table th, .fpc-seo-table td { padding:9px 8px; }
}

/* ── GPU profil sayfası: Benzer Ekran Kartları (iç linkleme) ── */
.fps-gp-related { margin-top: 22px; }
.fps-gp-related-title { font-size: 1.05rem; font-weight: 800; margin: 0 0 12px; color: #1a1d2e; }
.dark-skin .fps-gp-related-title { color: #f0f4ff; }
.fps-gp-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.fps-gp-related-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 14px; border: 1px solid rgba(0,0,0,.10); border-radius: 10px;
  text-decoration: none; background: #fff; transition: all .15s;
}
.dark-skin .fps-gp-related-card { background: #27292d; border-color: rgba(255,255,255,.08); }
.fps-gp-related-card:hover { border-color: #fe4641; box-shadow: 0 3px 12px rgba(254,70,65,.12); transform: translateY(-1px); }
.fps-gp-related-name { font-weight: 700; font-size: .9rem; color: #fe4641; }
.fps-gp-related-meta { font-size: .74rem; color: #6b7280; }
.dark-skin .fps-gp-related-meta { color: rgba(232,234,237,.5); }

/* SEO tablosunda GPU adı linki */
.fpc-seo-gpu-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--s-bd); }
.fpc-seo-gpu-link:hover { color: var(--s-P); border-bottom-color: var(--s-P); }

/* ═══════════════════════════════════════════════════════════════
   DARBOĞAZ HESAPLAYICI — kendi renk değişkenleri (light + dark)
   ═══════════════════════════════════════════════════════════════ */
.fpc-bn {
  --b-bg:#fff; --b-card:#f8f9fa; --b-t1:#2c2f34; --b-t2:rgba(44,47,52,.62); --b-t3:rgba(44,47,52,.42);
  --b-bd:rgba(0,0,0,.10); --b-P:#fe4641;
  --b-ex:#16a34a; --b-good:#65a30d; --b-med:#f59e0b; --b-high:#ef4444;
  max-width:680px; margin:0 auto; padding:18px; border:1px solid var(--b-bd); border-radius:16px;
  background:var(--b-bg); color:var(--b-t1);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; box-sizing:border-box;
}
html.dark-skin .fpc-bn, body.dark-skin .fpc-bn {
  --b-bg:#1e2023; --b-card:#27292d; --b-t1:#e8eaed; --b-t2:rgba(232,234,237,.62); --b-t3:rgba(232,234,237,.4); --b-bd:rgba(255,255,255,.08);
}
.fpc-bn * { box-sizing:border-box; }
.fpc-bn-data { display:none; }
.fpc-bn-title { font-size:1.4rem; font-weight:800; margin:0 0 6px; color:var(--b-t1); text-align:center; letter-spacing:-.01em; }
.fpc-bn-sub { font-size:.86rem; color:var(--b-t2); margin:0 auto 18px; line-height:1.5; text-align:center; max-width:460px; }
.fpc-bn-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.fpc-bn-field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.fpc-bn-field>span { font-size:.78rem; font-weight:700; color:var(--b-t2); }
.fpc-bn .fpc-bn-field select {
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; height:auto !important; min-height:0 !important;
  padding:11px 38px 11px 13px !important; line-height:1.3 !important;
  border:1px solid var(--b-bd) !important; border-radius:10px !important;
  background-color:var(--b-card) !important; color:var(--b-t1) !important;
  font-size:.9rem !important; font-family:inherit !important; font-weight:500 !important;
  box-shadow:none !important; outline:none !important; text-transform:none !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.8' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 13px center !important; background-size:12px 8px !important;
}
.fpc-bn .fpc-bn-field select:focus { border-color:var(--b-P) !important; }
.fpc-bn .fpc-bn-field select option { background:var(--b-bg); color:var(--b-t1); }
.fpc-bn-res { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.fpc-bn .fpc-bn-pill {
  display:inline-block !important; padding:7px 16px !important; margin:0 !important;
  border:1px solid var(--b-bd) !important; border-radius:999px !important;
  text-decoration:none !important; color:var(--b-t2) !important; background:var(--b-card) !important;
  font-size:.82rem !important; font-weight:600 !important; line-height:1.4 !important; box-shadow:none !important;
}
.fpc-bn .fpc-bn-pill:hover { color:var(--b-t1) !important; border-color:var(--b-P) !important; }
.fpc-bn .fpc-bn-pill.on, .fpc-bn .fpc-bn-pill.on:hover { background:var(--b-P) !important; border-color:var(--b-P) !important; color:#fff !important; }
.fpc-bn-result { text-align:center; padding:22px 16px; border-radius:14px; background:var(--b-card); border:1px solid var(--b-bd); }
.fpc-bn-gauge { position:relative; width:150px; height:150px; margin:0 auto 12px; }
.fpc-bn-gauge svg { width:100%; height:100%; transform:rotate(-90deg); display:block; }
.fpc-bn-gauge circle { fill:none; stroke-width:10; }
.fpc-bn-gauge-bg { stroke:rgba(0,0,0,.09); }
.dark-skin .fpc-bn-gauge-bg { stroke:rgba(255,255,255,.1); }
.fpc-bn-gauge-fg { stroke-linecap:round; transition:stroke-dashoffset .55s cubic-bezier(.4,0,.2,1), stroke .3s; }
.fpc-bn-gauge-c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.fpc-bn-pctwrap { display:flex; align-items:baseline; }
.fpc-bn-pct { font-size:2.6rem; font-weight:800; line-height:1; }
.fpc-bn-pctsign { font-size:1.1rem; font-weight:800; margin-left:1px; }
.fpc-bn-comp { font-size:.7rem; font-weight:700; color:var(--b-t2); text-transform:uppercase; letter-spacing:.04em; }
.fpc-bn-label { font-weight:800; font-size:1.05rem; }
.fpc-bn-advice { font-size:.85rem; color:var(--b-t2); margin:8px 0 0; line-height:1.5; }
.fpc-bn-lv-excellent .fpc-bn-pct, .fpc-bn-lv-excellent .fpc-bn-label { color:var(--b-ex); }
.fpc-bn-lv-excellent .fpc-bn-gauge-fg { stroke:var(--b-ex); }
.fpc-bn-lv-good .fpc-bn-pct, .fpc-bn-lv-good .fpc-bn-label { color:var(--b-good); }
.fpc-bn-lv-good .fpc-bn-gauge-fg { stroke:var(--b-good); }
.fpc-bn-lv-medium .fpc-bn-pct, .fpc-bn-lv-medium .fpc-bn-label { color:var(--b-med); }
.fpc-bn-lv-medium .fpc-bn-gauge-fg { stroke:var(--b-med); }
.fpc-bn-lv-high .fpc-bn-pct, .fpc-bn-lv-high .fpc-bn-label { color:var(--b-high); }
.fpc-bn-lv-high .fpc-bn-gauge-fg { stroke:var(--b-high); }
.fpc-bn-ctx { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.fpc-bn-ctx-row { display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--b-t2); }
.fpc-bn-ctx-row>span:first-child { flex:0 0 110px; }
.fpc-bn-ctx-bar { flex:1; height:8px; border-radius:5px; background:rgba(0,0,0,.08); overflow:hidden; }
.dark-skin .fpc-bn-ctx-bar { background:rgba(255,255,255,.1); }
.fpc-bn-ctx-bar>span { display:block; height:100%; background:var(--b-P); border-radius:5px; transition:width .35s; }
.fpc-bn-foot { font-size:.76rem; color:var(--b-t3); margin:16px 0 0; line-height:1.5; text-align:center; }
.fpc-bn-foot a { color:var(--b-P); text-decoration:none; font-weight:700; }
@media (max-width:520px) {
  .fpc-bn-controls { grid-template-columns:1fr; }
  .fpc-bn-pct { font-size:2.8rem; }
}

/* Darboğaz — boş durum (seçim yapılmadan prompt göster) */
.fpc-bn-prompt { display:none; text-align:center; padding:30px 18px; border-radius:14px; background:var(--b-card); border:1px dashed var(--b-bd); }
.fpc-bn-prompt-ic { font-size:2rem; margin-bottom:8px; line-height:1; }
.fpc-bn-prompt p { font-size:.9rem; color:var(--b-t2); margin:0; line-height:1.55; }
.fpc-bn.is-empty .fpc-bn-result { display:none; }
.fpc-bn.is-empty .fpc-bn-prompt { display:block; }

/* Darboğaz — paylaş butonu */
.fpc-bn-share { margin-top:16px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.fpc-bn-copy, .fpc-bn-dl { -webkit-appearance:none; appearance:none; cursor:pointer; padding:9px 18px; border:1px solid var(--b-bd); border-radius:999px; background:var(--b-card); color:var(--b-t1); font-size:.84rem; font-weight:700; font-family:inherit; transition:all .15s; }
.fpc-bn-copy:hover, .fpc-bn-dl:hover { border-color:var(--b-P); color:var(--b-P); }
.fpc-bn-copied { font-size:.8rem; font-weight:600; color:var(--b-ex); }

/* ═══════════════════════════════════════════════════════════════
   DARBOĞAZ — POPÜLER KOMBİNASYON TABLOSU (deep-link'li hücreler)
   ═══════════════════════════════════════════════════════════════ */
.fpc-bnt {
  --t-bg:#fff; --t-card:#f8f9fa; --t-t1:#2c2f34; --t-t2:rgba(44,47,52,.62); --t-t3:rgba(44,47,52,.42); --t-bd:rgba(0,0,0,.10); --t-P:#fe4641;
  --t-ex:#e8f7ee; --t-exT:#15803d; --t-good:#eaf6dd; --t-goodT:#4d7c0f; --t-med:#fef3d6; --t-medT:#b45309; --t-high:#fde2e1; --t-highT:#c0362f;
  max-width:1000px; margin:30px auto 0; padding:0 6px; color:var(--t-t1);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; box-sizing:border-box;
}
html.dark-skin .fpc-bnt, body.dark-skin .fpc-bnt {
  --t-bg:#1e2023; --t-card:#27292d; --t-t1:#e8eaed; --t-t2:rgba(232,234,237,.62); --t-t3:rgba(232,234,237,.4); --t-bd:rgba(255,255,255,.08);
  --t-ex:rgba(22,163,74,.18); --t-exT:#4ade80; --t-good:rgba(101,163,13,.2); --t-goodT:#a3e635; --t-med:rgba(245,158,11,.18); --t-medT:#fbbf24; --t-high:rgba(239,68,68,.2); --t-highT:#f87171;
}
.fpc-bnt * { box-sizing:border-box; }
.fpc-bnt-h2 { font-size:1.3rem; font-weight:800; margin:0 0 8px; text-align:center; color:var(--t-t1); }
.fpc-bnt-intro { font-size:.9rem; line-height:1.6; color:var(--t-t2); margin:0 auto 16px; text-align:center; max-width:640px; }
.fpc-bnt-wrap { overflow-x:auto; border:1px solid var(--t-bd); border-radius:12px; -webkit-overflow-scrolling:touch; }
.fpc-bnt-table { width:100%; border-collapse:collapse; font-size:.84rem; min-width:560px; background:var(--t-bg); }
.fpc-bnt-table th, .fpc-bnt-table td { padding:8px; text-align:center; border-bottom:1px solid var(--t-bd); border-right:1px solid var(--t-bd); }
.fpc-bnt-table thead th { background:var(--t-card); font-weight:700; color:var(--t-t1); font-size:.8rem; }
.fpc-bnt-corner { text-align:left !important; font-size:.72rem !important; color:var(--t-t2) !important; white-space:nowrap; }
.fpc-bnt-table tbody th { text-align:left; font-weight:700; color:var(--t-t1); white-space:nowrap; background:var(--t-card); font-size:.8rem; }
.fpc-bnt-table td { padding:5px; }
.fpc-bnt-table tr:last-child th, .fpc-bnt-table tr:last-child td { border-bottom:0; }
.fpc-bnt-table th:last-child, .fpc-bnt-table td:last-child { border-right:0; }
.fpc-bnt-cell { display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 6px; border-radius:8px; text-decoration:none; transition:transform .12s; }
.fpc-bnt-cell:hover { transform:scale(1.05); }
.fpc-bnt-pct { font-weight:800; font-size:.92rem; }
.fpc-bnt-cell small { font-size:.6rem; font-weight:600; opacity:.85; }
.fpc-bnt-lv-excellent { background:var(--t-ex); color:var(--t-exT); }
.fpc-bnt-lv-good { background:var(--t-good); color:var(--t-goodT); }
.fpc-bnt-lv-medium { background:var(--t-med); color:var(--t-medT); }
.fpc-bnt-lv-high { background:var(--t-high); color:var(--t-highT); }
.fpc-bnt-note { font-size:.76rem; color:var(--t-t3); margin:12px 0 0; line-height:1.5; text-align:center; }
@media (max-width:600px){ .fpc-bnt-h2 { font-size:1.1rem; } .fpc-bnt-table { font-size:.78rem; } }

/* Darboğaz — oyun seçimi (opsiyonel) */
.fpc-bn-gamefield { margin-bottom:14px; }
.fpc-bn-opt { font-weight:500; color:var(--b-t3); font-size:.72rem; }
.fpc-bn-gamenote { font-size:.78rem; color:var(--b-P); font-weight:600; margin-top:2px; }
.fpc-bn-gamenote[hidden] { display:none; }

/* Darboğaz — yükseltme önerisi */
.fpc-bn-suggest {
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:block; width:100%; margin:14px 0 0; padding:11px 14px; text-align:left;
  border:1px solid var(--b-P); border-radius:10px; background:rgba(254,70,65,.06);
  color:var(--b-t1); font-size:.86rem; font-family:inherit; line-height:1.5; transition:background .15s;
}
.fpc-bn-suggest:hover { background:rgba(254,70,65,.13); }
.fpc-bn-suggest[hidden] { display:none; }
.fpc-bn-suggest strong { color:var(--b-P); }
.fpc-bn-suggest .fpc-bn-suggest-pct { color:var(--b-ex); font-weight:800; }