/* /extras/patch-studio — Chrome eklentisi sayfası. Mobile-first; ≥900px iki sütun, sağ kart yapışkan.
   Tokenlar patch-studio.css ile aynı (koyu tema, neon lime, altın). */
.xps{--ps-bg:#0B0B0B;--ps-card:#141414;--ps-soft:#1A1A1C;--ps-line:#262626;--ps-line2:#3A3A3A;--ps-text:#fff;--ps-text2:#B9B9B9;--ps-text3:#6E6E6E;--ps-lime:#A4E22B;--ps-lime2:#B6F23D;--ps-lime-on:#16280A;--ps-gold:#C9A24B;--ps-gold2:#DBB661;--ps-gold-dim:#2A2415;--ps-display:'Oswald','Barlow Condensed',sans-serif;--ps-mono:'JetBrains Mono',Consolas,monospace;
  background:var(--ps-bg);color:var(--ps-text);line-height:1.5;overflow-x:hidden}
.xps *{box-sizing:border-box}
.xps img{max-width:100%;display:block}
.xps h1,.xps h2,.xps h3{font-family:var(--ps-display);text-transform:uppercase;letter-spacing:.5px;margin:0;line-height:1.05}
.xps a{color:var(--ps-lime2)}
.xps :focus-visible{outline:2px solid var(--ps-lime);outline-offset:2px}
.xps-wrap{max-width:1100px;margin:0 auto;padding-inline:16px}

/* hero */
.xps-hero{position:relative;isolation:isolate;padding:36px 0 30px;border-bottom:1px solid var(--ps-line);overflow:hidden}
.xps-hero::before{content:"PATCHSTUDIO";position:absolute;left:50%;top:-6%;transform:translateX(-50%);font-family:var(--ps-display);font-weight:700;font-size:clamp(80px,16vw,260px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(164,226,43,.10);z-index:-1;letter-spacing:6px;pointer-events:none;white-space:nowrap}
.xps-hero::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(900px 420px at 50% -10%,rgba(164,226,43,.16),transparent 60%),radial-gradient(700px 300px at 85% 30%,rgba(201,162,75,.10),transparent 60%)}
.xps-eyebrow{display:inline-block;font-family:var(--ps-display);text-transform:uppercase;letter-spacing:2.5px;font-size:12px;color:var(--ps-lime);border:1px solid rgba(164,226,43,.35);background:rgba(164,226,43,.08);border-radius:999px;padding:5px 12px;margin-bottom:14px}
.xps-h1{font-size:clamp(34px,6.5vw,64px);font-weight:700;letter-spacing:1px}
.xps-h1 .lime{color:var(--ps-lime);text-shadow:0 0 30px rgba(164,226,43,.45)}
.xps-lead{color:var(--ps-text2);max-width:62ch;margin:12px 0 0;font-size:15px;line-height:1.5}
.xps-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.xps-chips span{background:var(--ps-soft);border:1px solid var(--ps-line);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--ps-text2);white-space:nowrap}

/* düzen */
.xps-body{padding:20px 16px 72px}
.xps-grid{display:grid;grid-template-columns:1fr;gap:16px}
.xps-main{display:grid;gap:16px;min-width:0}
@media(min-width:900px){.xps-body{padding:28px 16px 88px}.xps-grid{grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}.xps-side{position:sticky;top:84px}}
.xps-card{background:var(--ps-card);border:1px solid var(--ps-line);border-radius:16px;padding:18px}
@media(min-width:600px){.xps-card{padding:24px}}
.xps-card h2{font-size:22px;margin-bottom:12px}
.xps-sub{font-size:14px;color:var(--ps-text2);letter-spacing:1.5px;margin:18px 0 10px}
.xps-p{margin:0;color:var(--ps-text2);font-size:14px;line-height:1.55}

/* nasıl çalışır */
.xps-steps{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.xps-steps{grid-template-columns:repeat(3,1fr)}}
.xps-step{position:relative;display:grid;gap:6px}
.xps-shot{aspect-ratio:380/520;border-radius:14px;overflow:hidden;border:1px solid var(--ps-line2);background:#0f0f0f;box-shadow:0 20px 40px rgba(0,0,0,.6),0 0 0 1px rgba(164,226,43,.08)}
.xps-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.xps-step-n{position:absolute;left:10px;top:10px;width:30px;height:30px;border-radius:50%;background:var(--ps-lime);color:var(--ps-lime-on);font-family:var(--ps-display);font-weight:700;font-size:15px;display:grid;place-items:center;box-shadow:0 6px 18px rgba(164,226,43,.35)}
.xps-step h3{font-size:16px;margin-top:8px}
.xps-step p{margin:0;font-size:13px;color:var(--ps-text2);line-height:1.5}

/* kurulum adımları */
.xps-adim{counter-reset:a;list-style:none;margin:0;padding:0}
.xps-adim>li{counter-increment:a;position:relative;padding-left:44px;margin-bottom:14px;font-size:14px;color:var(--ps-text2);line-height:1.6}
.xps-adim>li::before{content:counter(a);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--ps-soft);border:1px solid var(--ps-line2);color:var(--ps-lime2);font-family:var(--ps-display);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.xps-adim b{color:var(--ps-text)}
.xps-adim code{background:var(--ps-soft);border:1px solid var(--ps-line2);border-radius:6px;padding:1px 6px;font-family:var(--ps-mono);font-size:.9em;color:var(--ps-lime2)}
.xps-note{border-left:3px solid var(--ps-line2);background:var(--ps-soft);border-radius:0 10px 10px 0;padding:12px 14px;font-size:13px;color:var(--ps-text2);line-height:1.55;margin-top:14px}
.xps-note b{color:var(--ps-text)}
.xps-note-gold{border-left-color:var(--ps-gold);background:var(--ps-gold-dim);color:var(--ps-gold2);margin:0 0 14px}

/* özellikler, SSS, bağlantılar */
.xps-ozellik{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:520px){.xps-ozellik{grid-template-columns:1fr 1fr}}
.xps-ozellik li{position:relative;padding-left:18px;font-size:13.5px;color:var(--ps-text2);line-height:1.5}
.xps-ozellik li::before{content:'';position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--ps-lime);box-shadow:0 0 8px rgba(164,226,43,.6)}
.xps-sss details{border-top:1px solid var(--ps-line);padding:10px 0}
.xps-sss details:first-of-type{border-top:0}
.xps-sss summary{cursor:pointer;font-weight:600;color:var(--ps-text);font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:10px}
.xps-sss summary::-webkit-details-marker{display:none}
.xps-sss summary::after{content:'+';color:var(--ps-lime);font-weight:400;flex:none}
.xps-sss details[open] summary::after{content:'–'}
.xps-sss p{margin:8px 0 0;font-size:13.5px;color:var(--ps-text2);line-height:1.6}
.xps-link{font-size:13px;color:var(--ps-text3);margin:14px 0 0;line-height:1.6}
.xps-link a{color:var(--ps-lime2);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* indirme kartı */
.xps-dl{text-align:center;display:grid;gap:10px;border-color:var(--ps-line2);position:relative;overflow:hidden}
.xps-dl::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--ps-lime),var(--ps-gold))}
.xps-logo{display:inline-flex;align-items:baseline;justify-content:center;font-family:var(--ps-display);text-transform:uppercase;font-weight:700;font-size:30px;letter-spacing:1px;line-height:1;margin:4px 0 6px}
.xps-logo span{color:var(--ps-text)}
.xps-logo b{color:var(--ps-lime);text-shadow:0 0 30px rgba(164,226,43,.45)}
.xps-logo i{font-style:normal;font-size:.36em;letter-spacing:2px;color:var(--ps-lime-on);background:var(--ps-lime);border-radius:6px;padding:3px 7px;margin-left:8px;transform:translateY(-.9em);align-self:center}
.xps-btn{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;padding:14px 18px;font-family:var(--ps-display);text-transform:uppercase;letter-spacing:1px;font-size:15px;font-weight:600;text-decoration:none;border:1px solid transparent;line-height:1.1;transition:transform .12s,background .2s}
.xps-btn svg{width:20px;height:20px;flex:none}
.xps-btn:active{transform:translateY(1px)}
/* Düğmeler <a>; `.xps a` ve sitenin genel link rengi ezmesin diye !important (Burak: "color important yap") */
.xps-btn-lime{background:var(--ps-lime);color:var(--ps-lime-on)!important;box-shadow:0 8px 30px rgba(164,226,43,.28)}
.xps-btn-lime:hover{background:var(--ps-lime2);color:var(--ps-lime-on)!important}
.xps-btn-ghost{background:transparent;color:var(--ps-text)!important;border-color:var(--ps-line2)}
.xps-btn-ghost:hover{border-color:var(--ps-lime);color:var(--ps-lime2)!important}
.xps-kunye{margin:0;font-size:12px;color:var(--ps-text3);line-height:1.7}
.xps-kunye b{color:var(--ps-text2)}
.xps-yok{background:rgba(226,52,47,.1);border:1px solid rgba(226,52,47,.35);color:#f3a09c;border-radius:10px;padding:12px;font-size:13px}
.xps-link-btn{font-size:13px;color:var(--ps-lime2);text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.xps *{transition:none!important}}