/* Oyun Rehberi > Sistemler + clan grade / cape visuals (10 Nov 2026). Site tokens: card #191a1d, raised #25231f, line #2f2b26 / #3a332c, gold #aa8051 / #c2a172, text #d2c7b6, title #ead8ba. */
.sg-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px;margin:0 0 18px}
.sg-card{--ac:#aa8051;position:relative;background:#191a1d;display:flex;gap:14px;align-items:flex-start;min-height:118px;padding:16px 16px 16px 18px;color:inherit;text-decoration:none;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 16%,#191a1d) 0%,#191a1d 58%);border:1px solid #2f2b26;border-left:3px solid var(--ac);border-radius:4px;transition:border-color .15s,transform .15s}
.sg-card:hover,.sg-card:focus-visible{border-color:var(--ac);transform:translateY(-1px)}
.sg-card:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.sg-ico{flex:none;display:grid;place-items:center;width:56px;height:56px;background:#111214;border:1px solid color-mix(in srgb,var(--ac) 60%,#3a332c);border-radius:4px;box-shadow:inset 0 0 18px #0009}
.sg-ico img{width:44px;height:44px;object-fit:contain}
.sg-ico svg{width:28px;height:28px;fill:none;stroke:var(--ac);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sg-card-body{min-width:0}
.sg-chip{display:inline-block;margin-bottom:5px;padding:2px 7px;font-size:10px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent);border-radius:2px}
.sg-card strong{display:block;font:600 17px/1.25 RonarkDisplay,Georgia,serif;color:#ead8ba}
.sg-card p{margin:5px 0 0;font-size:13px;line-height:1.55;color:#b5ada1}
.sg-card .sg-go{position:absolute;right:12px;bottom:10px;font-size:15px;color:var(--ac)}
.sg-cat-item{--ac:#c2a172}.sg-cat-trade{--ac:#d08a4c}.sg-cat-store{--ac:#6f9fd0}.sg-cat-char{--ac:#a77fd1}.sg-cat-quest{--ac:#7fae6a}.sg-cat-social{--ac:#4fb0a5}.sg-cat-event{--ac:#d0624c}
.sg-hero{--ac:#aa8051;display:flex;background:#191a1d;gap:18px;align-items:center;margin:0 0 16px;padding:18px;background:radial-gradient(120% 140% at 0 0,color-mix(in srgb,var(--ac) 22%,#191a1d) 0%,#191a1d 60%);border:1px solid #2f2b26;border-top:3px solid var(--ac);border-radius:4px}
.sg-hero .sg-ico{width:76px;height:76px}.sg-hero .sg-ico img{width:60px;height:60px}.sg-hero .sg-ico svg{width:38px;height:38px}
.sg-hero p{margin:0;font-size:14px;line-height:1.7;color:#d2c7b6}
.sg-hero .sg-chip{margin-bottom:6px}
.sg-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;margin:0 0 18px;padding:0;list-style:none}
.sg-facts li{padding:12px 14px;background:#191a1d;border:1px solid #2f2b26;border-radius:4px}
.sg-facts span{display:block;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#9a8f7e}
.sg-facts b{display:block;margin-top:4px;font:600 19px/1.25 RonarkDisplay,Georgia,serif;color:#ead8ba}
.sg-facts small{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:#aaa39a}
.sg-flow{list-style:none;counter-reset:sg;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:10px;margin:0 0 18px;padding:0}
.sg-flow li{counter-increment:sg;position:relative;padding:14px 14px 14px 52px;background:#191a1d;border:1px solid #2f2b26;border-radius:4px}
.sg-flow li:before{content:counter(sg);position:absolute;left:12px;top:12px;display:grid;place-items:center;width:28px;height:28px;font:600 15px/1 RonarkDisplay,Georgia,serif;color:#111214;background:var(--ac,#aa8051);border-radius:50%}
.sg-flow strong{display:block;font-size:14px;color:#dbc4a1}
.sg-flow p{margin:4px 0 0;font-size:13px;line-height:1.6;color:#b5ada1}
.sg-items{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.sg-items li{display:flex;align-items:center;gap:10px;min-width:min(100%,220px);flex:1 1 220px;padding:10px 12px;background:#191a1d;border:1px solid #2f2b26;border-radius:4px}
.sg-items img{flex:none;width:44px;height:44px;object-fit:contain;padding:2px;background:#111214;border:1px solid #3a332c;border-radius:3px}
.sg-items strong{display:block;font-size:14px;color:#ead8ba}
.sg-items small{display:block;font-size:12px;line-height:1.45;color:#aaa39a}
.sg-table{margin:0 0 18px}
.sg-table td b{color:#ead8ba;font-weight:600}
.sg-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-shot{margin:0 0 18px;padding:8px;background:#191a1d;border:1px solid #2f2b26;border-radius:4px;max-width:560px}
.sg-shot img{display:block;width:100%;height:auto;border-radius:2px}
.sg-shot figcaption{margin-top:8px;font-size:12px;line-height:1.5;color:#aaa39a}
.sg-shot figcaption b{display:block;font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#c2a172}
.sg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.sg-split>*{min-width:0}
.sg-split .sg-flow{grid-template-columns:minmax(0,1fr);margin:0}.sg-split .sg-shot{margin:0;max-width:none}
.sg-warn{margin:0 0 18px;padding:12px 14px;font-size:13px;line-height:1.6;color:#e6c9b5;background:#2a1c17;border-left:3px solid #b9583f}
.sg-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:8px;margin:6px 0 0}
.sg-more a{--ac:#aa8051;display:flex;align-items:center;gap:10px;padding:9px 11px;font-size:13px;color:#d2c7b6;text-decoration:none;background:#191a1d;border:1px solid #2f2b26;border-left:3px solid var(--ac);border-radius:3px}
.sg-more a:hover,.sg-more a:focus-visible{color:#ead8ba;border-color:var(--ac)}
.sg-more img{width:26px;height:26px;object-fit:contain}
.sg-more svg{width:20px;height:20px;fill:none;stroke:var(--ac);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* clan grades */
.cg-ladder{list-style:none;display:grid;gap:8px;margin:0 0 14px;padding:0}
.cg-ladder li{position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px;overflow:hidden;background:#191a1d;border:1px solid #2f2b26;border-radius:4px}
.cg-ladder li>div{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:110px 1fr;gap:2px 14px;align-items:baseline}
.cg-ladder strong{font:600 16px/1.3 RonarkDisplay,Georgia,serif;color:#ead8ba}
.cg-ladder b{font-size:14px;font-weight:600;color:#d2c7b6;font-variant-numeric:tabular-nums}
.cg-ladder small{grid-column:2;font-size:12px;color:#aaa39a}
.cg-ladder i{position:absolute;left:0;bottom:0;height:3px;width:var(--w);background:linear-gradient(90deg,#6f6658,#aa8051 60%,#e2c27d)}
.cg-badge{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:44px;height:44px;font:700 16px/1 RonarkDisplay,Georgia,serif;color:#111214;border-radius:50%;background:#6f6658;box-shadow:0 0 0 2px #111214,0 0 0 3px #3a332c}
.cg-g4 .cg-badge{background:#8a7350}.cg-g3 .cg-badge{background:#aa8051}.cg-g2 .cg-badge{background:#c9a061}.cg-g1 .cg-badge{background:linear-gradient(135deg,#f3d58d,#b7863f);box-shadow:0 0 0 2px #111214,0 0 0 3px #e2c27d,0 0 14px #e2c27d55}
.cg-g1{border-color:#aa8051!important}
/* clan capes */
.cg-capes{display:grid;gap:12px;margin:0 0 14px}
.cg-cape{padding:16px;background:#191a1d;border:1px solid #2f2b26;border-radius:4px}
.cg-cape-top{border-color:#aa8051;background:radial-gradient(120% 120% at 100% 0,#2a2418 0%,#191a1d 55%)}
.cg-cape header h3{margin:4px 0 4px;font:600 18px/1.3 RonarkDisplay,Georgia,serif;color:#ead8ba}
.cg-cape header p{margin:0 0 12px;font-size:13px;line-height:1.6;color:#b5ada1}
.cg-req{display:inline-block;padding:2px 8px;font-size:11px;font-weight:600;letter-spacing:.5px;color:#111214;background:#c2a172;border-radius:2px}
.cg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:10px;margin:0 0 12px}
.cg-swatches.cg-one{grid-template-columns:repeat(auto-fill,minmax(88px,120px))}
.cg-swatches figure{margin:0;text-align:center}
.cg-swatches img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid #3a332c;border-radius:3px;box-shadow:0 3px 8px #000a}
.cg-swatches figcaption{margin-top:5px;font-size:11px;line-height:1.3;color:#b5ada1}
.cg-cost{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.cg-cost div{flex:1 1 150px;padding:9px 12px;background:#111214;border:1px solid #3a332c;border-radius:3px}
.cg-cost dt{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#9a8f7e}
.cg-cost dd{margin:3px 0 0;font:600 18px/1.2 RonarkDisplay,Georgia,serif;color:#ead8ba;font-variant-numeric:tabular-nums}
.cg-cost dd small{display:block;margin-top:2px;font:400 11px/1.3 system-ui,sans-serif;color:#aaa39a}
@media(max-width:640px){.sg-flow{grid-template-columns:minmax(0,1fr)}.sg-hero{flex-direction:column;align-items:flex-start;padding:14px}.sg-split{grid-template-columns:minmax(0,1fr)}.cg-ladder li>div{grid-template-columns:1fr}.cg-ladder small{grid-column:1}.cg-swatches{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}}