/* ChatGPT Ürün Kodları — /araclar tasarım sistemine ek parçalar.
   İskelet /araclar/styles.css'ten gelir; bu sayfanın teması (vurgu rengi) burada değişir. */

:root{
  --accent:#9ee6c0;          /* nane: bu rehberin rengi */
  --accent-2:#bdf0d5;
  --on-accent:#0b0c0e;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.pill-link--accent:hover{background:var(--accent-2);border-color:var(--accent-2)}
button.pill-link{font-family:var(--font);color:inherit;cursor:pointer}
button.pill-link--accent{color:var(--on-accent)}

.gpt-hero h1{font-size:clamp(2.6rem,13.5vw,5.4rem)}
.gpt-hero .kicker{font-size:.8125rem;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.slash{font-family:var(--mono);font-weight:600;font-size:.92em;color:var(--accent);white-space:nowrap}

/* Adımlar */
.order{display:grid;gap:10px;margin-top:20px}
.order li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.order .n{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.order b{display:block;font-size:1rem}
.order span{display:block;margin-top:2px;font-size:.9375rem;color:var(--ink-2)}
.order b.slash{display:inline;font-size:.92em}
.order .slash{white-space:normal}

/* Kurulum metni kutusu */
.setup{margin-top:18px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line-2);overflow:hidden}
.setup__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 6px 14px;border-bottom:1px solid var(--line)}
.setup__label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.setup pre{margin:0;max-height:240px;overflow:auto;padding:12px 14px;font:500 .8125rem/1.6 var(--mono);color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;-webkit-overflow-scrolling:touch}

/* Kopyala butonu (kurulum + kod kartları) */
.copy{min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;color:var(--ink);font:600 .8125rem var(--font);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.copy:hover{border-color:var(--ink-3)}
.copy[data-done="1"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pill-link.copy{min-height:48px;padding:0 20px;font-size:.9375rem}
.pill-link--accent.copy,.pill-link--accent.copy:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pill-link--accent.copy:hover{background:var(--accent-2);border-color:var(--accent-2)}

/* Kategoriler ve kod kartları */
.group__lede{margin-top:10px;font-size:.9375rem;color:var(--ink-2)}
.codes{display:grid;gap:10px;margin-top:14px}
.code{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;padding:16px 16px 14px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);scroll-margin-top:calc(var(--sticky-h) + 12px)}
.code[hidden]{display:none}
.code:hover{border-color:var(--line-2)}
.code__n{grid-row:1;align-self:start;min-width:2.3ch;font-size:2.1rem;line-height:.85;font-weight:800;font-stretch:72%;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:3px}
.code__body{min-width:0}
.code__tag{margin:0;font:650 1.125rem/1.2 var(--mono);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.code__tr{margin-top:4px;font-size:.9375rem;line-height:1.4;color:var(--ink-2)}
.code__ex{margin-top:6px;font-size:.8125rem;line-height:1.4;color:var(--ink-3)}
.code__ex .slash{white-space:normal;font-size:.95em}
.code__foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.code__see{min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink-3);font:600 .875rem var(--font);cursor:pointer;text-align:left}
.code__see::before{content:"▸";display:inline-block;margin-right:6px;transition:transform .15s}
.code__see[aria-expanded="true"]::before{transform:rotate(90deg)}
.code__see:hover{color:var(--ink)}
.code__prompt{grid-column:1/-1;margin-top:6px;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface-2);font:500 .8125rem/1.6 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.code__prompt[hidden]{display:none}
.code__en{display:block;margin-bottom:6px;font-family:var(--font);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.code__keep{color:var(--ink-3)}

@media (min-width:48rem){
  .codes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .code{grid-template-rows:1fr auto auto}
  .code__n,.code__body{align-self:start}
}
@media (max-width:370px){
  .code__n{font-size:1.7rem}
  .code__tag{font-size:1rem}
}

/* Masaüstünde 11 çip alt alta sarıyor: yapışkan çubuk içeriği örtmesin */
@media (min-width:48rem){
  .bar{position:static;margin-top:16px;padding-top:0;padding-bottom:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .chips{flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none;padding-right:0}
}