/* Claude Skill Kiti — /araclar tasarım sistemine ek parçalar.
   Renkler, font ve yuvarlaklık değerleri /araclar/styles.css içindeki :root'tan gelir. */

.kit-hero{padding:36px 0 8px}
.kit-hero h1{margin-top:14px;font-size:clamp(2.3rem,11vw,4.4rem);line-height:.98;font-weight:750;letter-spacing:-.035em}
.kit-hero h1 span{display:block}
.kit-hero .kicker{font-size:.8125rem;font-weight:700;letter-spacing:.12em;color:var(--accent)}

/* Videodaki 7: hızlı bakış listesi (araclar kart diliyle) */
.seven{display:grid;gap:10px;margin-top:22px}
.seven a{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:60px;padding:12px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);text-decoration:none}
.seven a:hover{border-color:color-mix(in srgb,var(--c,var(--accent)) 45%,var(--line-2))}
.seven b{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.seven .n{font-size:1.75rem;font-weight:800;font-stretch:72%;color:var(--accent);font-variant-numeric:tabular-nums;min-width:2.1ch;line-height:1}
.seven .k{font-size:.8125rem;color:var(--ink-3);white-space:nowrap}
.seven .tx{min-width:0}
.seven span.t{display:block;font-size:.875rem;color:var(--ink-2);margin-top:2px}
.seven .ico{width:34px;height:34px;border-radius:10px}
.seven .ico img{width:20px;height:20px}
.seven .ico .mask{width:19px;height:19px}

/* Skill kartı — /araclar'daki "Benim 4 aracım" kartıyla aynı iskelet */
.skill{--c:#d9dce1;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:18px 18px 18px 14px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden;scroll-margin-top:20px}
.skill::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--c);opacity:.85}
.skill__n{grid-row:1/span 2;align-self:start;min-width:3.4ch;font-size:clamp(3.2rem,15vw,4.6rem);line-height:.8;font-weight:800;font-stretch:72%;letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:6px}
.skill__body{grid-column:2;min-width:0}
.skill__kicker{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.skill__name{display:flex;align-items:center;gap:10px;margin-top:6px;min-width:0}
.skill h3{font-size:1.375rem;line-height:1.1;font-weight:750;letter-spacing:-.02em;overflow-wrap:anywhere}
.skill__desc{margin-top:8px;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.skill__foot{grid-column:1/-1;margin-top:14px;min-width:0}
.skill .spec{margin-top:12px}
.skills{display:grid;gap:14px;margin-top:20px}

/* Kurulum kutusu + kopyala */
.cmd{margin-top:14px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line-2);overflow:hidden}
.cmd__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 6px 12px;border-bottom:1px solid var(--line)}
.cmd__label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cmd__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}
.cmd__copy:hover{border-color:var(--ink-3)}
.cmd__copy[data-done="1"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cmd pre{margin:0;padding:12px;overflow-x:auto;font:500 .875rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);-webkit-overflow-scrolling:touch}
.cmd pre code{white-space:pre}
.steps{margin-top:12px;padding-left:0;display:grid;gap:8px;counter-reset:s}
.steps li{position:relative;padding-left:30px;font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);font-size:.75rem;font-weight:700;color:var(--ink)}

/* Bilgi / uyarı notları — /araclar'daki .note ile aynı aile */
.note--warn i{border-color:#8a6a3f;color:#f1d7b4}

/* Kurulum sırası ve fark bölümü */
.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)}
.defs{display:grid;gap:10px;margin-top:20px}
.defs div{padding:14px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.defs dt{font-weight:700}
.defs dd{margin-top:4px;font-size:.9375rem;color:var(--ink-2)}
.check{display:grid;gap:10px;margin-top:20px}
.check li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);font-size:.9375rem;line-height:1.5}
.check li b{display:block;color:var(--ink)}
.check li span{color:var(--ink-2)}
.check .tick{color:var(--accent);font-weight:800}

@media (min-width:48rem){
  .skills{grid-template-columns:1fr}
  .seven{grid-template-columns:1fr 1fr}
}
@media (max-width:370px){
  .skill{grid-template-columns:minmax(0,1fr)}
  .skill__n{grid-row:auto;font-size:3rem}
  .skill__body{grid-column:1}
  .seven a{grid-template-columns:auto auto minmax(0,1fr)}
  .seven .k{display:none}
}