/* 13.11.2026 — "Nasil Kullanilir" kart izgarasi (gs-howto.js). Renk: --hk (urun platformu). */
#pane-kullanim .hkx{display:flex;flex-direction:column;gap:16px;color:#e2e8f0}
#pane-kullanim .hkx-hero{display:flex;gap:16px;align-items:center;padding:18px;border-radius:18px;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%,rgba(var(--hk-rgb),.16),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  border:1px solid rgba(var(--hk-rgb),.4)}
#pane-kullanim .hkx-badge{flex:0 0 56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:28px;color:#fff;
  background:linear-gradient(145deg,var(--hk),#1e1b4b);box-shadow:0 12px 30px -12px var(--hk)}
#pane-kullanim .hkx-hero-tx{min-width:0}
#pane-kullanim .hkx-h{margin:0 0 4px;font-size:17px;font-weight:800;letter-spacing:-.01em;color:#fff;line-height:1.3}
#pane-kullanim .hkx-hero p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(203,213,225,.85)}
#pane-kullanim .hkx-hero p b,#pane-kullanim .hkx-hero p strong{color:#fff}
#pane-kullanim .hkx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#pane-kullanim .hkx-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
#pane-kullanim .hkx-chip i{color:var(--hk);font-size:14px}
#pane-kullanim .hkx-sw{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#pane-kullanim .hkx-sw button{appearance:none;-webkit-appearance:none;font:inherit;text-align:left;cursor:pointer;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;
  border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(148,163,184,.18);color:inherit;transition:border-color .2s,background-color .2s,box-shadow .2s}
#pane-kullanim .hkx-sw button:hover{border-color:rgba(var(--hk-rgb),.5)}
#pane-kullanim .hkx-sw button:focus-visible{outline:2px solid var(--hk);outline-offset:2px}
#pane-kullanim .hkx-sw button[aria-checked="true"]{background:rgba(var(--hk-rgb),.16);border-color:var(--hk);box-shadow:0 10px 30px -18px var(--hk)}
#pane-kullanim .hkx-rd{flex:0 0 18px;height:18px;margin-top:2px;border-radius:50%;border:2px solid rgba(148,163,184,.6);box-sizing:border-box}
#pane-kullanim .hkx-sw button[aria-checked="true"] .hkx-rd{border-color:var(--hk);background:radial-gradient(circle,var(--hk) 45%,transparent 50%)}
#pane-kullanim .hkx-swt b{display:block;font-size:14.5px;color:#fff}
#pane-kullanim .hkx-swt small{display:block;font-size:12.5px;color:rgba(148,163,184,.95)}
#pane-kullanim .hkx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;counter-reset:none}
/* Adim sayisina gore sutun: son satirda tek kart kalmasin */
#pane-kullanim .hkx-steps[data-n="2"],#pane-kullanim .hkx-steps[data-n="4"]{grid-template-columns:repeat(2,1fr)}
#pane-kullanim .hkx-steps[data-n="3"],#pane-kullanim .hkx-steps[data-n="6"],#pane-kullanim .hkx-steps[data-n="9"]{grid-template-columns:repeat(3,1fr)}
#pane-kullanim .hkx-steps[data-n="5"]{grid-template-columns:repeat(5,1fr)}
#pane-kullanim .hkx-steps[data-n="7"],#pane-kullanim .hkx-steps[data-n="8"]{grid-template-columns:repeat(4,1fr)}
@media (min-width:1100px){#pane-kullanim .hkx-steps[data-n="4"]{grid-template-columns:repeat(4,1fr)}}
#pane-kullanim .hkx-st{position:relative;padding:16px 14px 14px;border-radius:16px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(148,163,184,.14)}
#pane-kullanim .hkx-st::before,#pane-kullanim .hkx-st::after{content:none!important}
#pane-kullanim .hkx-st.is-diff{border-color:var(--hk);box-shadow:inset 0 0 0 1px rgba(var(--hk-rgb),.4),0 12px 30px -20px var(--hk)}
#pane-kullanim .hkx-n{position:absolute;top:12px;right:14px;font-size:26px;font-weight:900;line-height:1;color:rgba(255,255,255,.08)}
#pane-kullanim .hkx-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;font-style:normal;color:var(--hk);
  background:rgba(var(--hk-rgb),.16);border:1px solid rgba(var(--hk-rgb),.4)}
#pane-kullanim .hkx-tx{min-width:0}
#pane-kullanim .hkx-tx>b{display:block;font-size:14px;color:#fff;margin-bottom:3px;line-height:1.35}
#pane-kullanim .hkx-tx>span{display:block;font-size:12.8px;line-height:1.5;color:rgba(203,213,225,.8);overflow-wrap:anywhere}
#pane-kullanim .hkx-tx>span b,#pane-kullanim .hkx-tx>span strong{color:#fff}
#pane-kullanim .hkx-tag{display:table;margin:0 0 6px;padding:2px 8px;border-radius:999px;font-style:normal;font-size:11px;font-weight:800;color:#0b1020;background:var(--hk)}
#pane-kullanim .hkx-warn{display:flex;gap:12px;padding:14px 16px;border-radius:16px;background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.25)}
#pane-kullanim .hkx-warn>i{font-size:20px;color:#fbbf24;line-height:1.2}
#pane-kullanim .hkx-warn b{display:block;color:#fcd34d;font-size:13.5px;margin-bottom:2px}
#pane-kullanim .hkx-warn span{font-size:13.5px;line-height:1.55;color:#fde68a}
#pane-kullanim .hkx-warn span b{display:inline;color:#fcd34d}
#pane-kullanim .hkx-help{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(148,163,184,.95)}
#pane-kullanim .hkx-help a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;color:#fff;font-weight:700;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
#pane-kullanim .hkx-help a:hover{border-color:rgba(var(--hk-rgb),.6)}
#pane-kullanim .hkx-help a i{color:var(--hk)}
@media (max-width:760px){
  #pane-kullanim .hkx-sw{grid-template-columns:1fr}
  #pane-kullanim .hkx-steps,#pane-kullanim .hkx-steps[data-n]{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  #pane-kullanim .hkx-hero{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  #pane-kullanim .hkx-badge{flex:0 0 auto;width:42px;height:42px;font-size:22px;border-radius:12px}
  #pane-kullanim .hkx-h{font-size:16px}
  #pane-kullanim .hkx-steps,#pane-kullanim .hkx-steps[data-n]{grid-template-columns:1fr;gap:8px}
  #pane-kullanim .hkx-st{flex-direction:row;align-items:flex-start;gap:12px;padding:12px}
  #pane-kullanim .hkx-ic{flex:0 0 36px;width:36px;height:36px}
  #pane-kullanim .hkx-n{top:10px;right:12px;font-size:20px}
  #pane-kullanim .hkx-sw button{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){#pane-kullanim .hkx-sw button{transition:none}}