/* =====================================================================
   Şekilli nick sayfaları (/araclar/sekilli-nick ve alt sayfaları): OG kit dili, OG Play teması.
   Tasarım geçişi 2026-10-21 (docs/tasarim-gecisi-2026-10-21.md). Önceden 14 sayfada neredeyse aynı satır içi
   stil tekrar ediyordu; hepsi burada toplandı. Sayfa kabı: <div class="ogk ogk--play og-nick">, og-kit.css ile birlikte.

   React aracı (og-sekilli-nick.js) kendi <style>'ını basıyor ve --og-nick-* değişkenlerini okuyor; JS'e dokunmadan
   aşağıdaki .og-nick kapsamlı kurallar aracı kit diline giydirir. Değişkenler hâlâ tanımlı kalmalı (bildirim kutusu
   ve eski kopyalama yardımcısı sayfa kabının dışında da kullanıyor).
   ===================================================================== */

:root {
    --og-nick-primary: #6c5ce7;
    --og-nick-primary-rgb: 108, 92, 231;
    --og-nick-bg: #ebe8fa;
    --og-nick-card: #ffffff;
    --og-nick-text: #0f0f1a;
    --og-nick-text-muted: #50566a;
    --og-nick-border: rgba(15, 15, 26, .11);
    --og-nick-accent: #ff5a36;
}
[data-theme="dark"] {
    --og-nick-bg: #1a1a2e;
    --og-nick-card: #23233d;
    --og-nick-text: #f1f2f7;
    --og-nick-text-muted: #a6abbd;
    --og-nick-border: rgba(255, 255, 255, .11);
}

/* ---------- Manşet (Partials/_SekilliNickNav) ---------- */
.og-nick .ogk-hero { margin-bottom: 1.1rem; }
.og-nick .ogk-hero .ogk-lead { margin-bottom: 0; }
.og-nick .og-nick-subnav { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin: -.6rem 0 1.5rem; }
.og-nick .og-nick-subnav .ogk-label { margin: 0; }
.og-nick .og-nick-subnav .ogk-nav { margin: 0; flex: 1 1 auto; min-width: 0; }
.og-nick .og-nick-subnav .ogk-nav > a { padding: .4rem .85rem; font-size: .84rem; }

/* ---------- Giriş ve başlıklar ---------- */
.ogk.og-nick .og-intro-text { font-size: 1.08rem; line-height: 1.75; color: var(--k-text); max-width: 56rem; margin: 0 0 1.5rem; }
.ogk.og-nick .og-intro-text a,
.ogk.og-nick .text-content a,
.ogk.og-nick .og-alert-info a,
.ogk.og-nick .og-alert-warning a,
.ogk.og-nick .og-extra-platforms a,
.ogk.og-nick .og-nick-more { color: var(--k-icon) !important; font-weight: 700; text-decoration: none; }
.ogk.og-nick .og-intro-text a:hover,
.ogk.og-nick .text-content a:hover,
.ogk.og-nick .og-nick-more:hover { text-decoration: underline; }

.ogk.og-nick .section-title {
    display: inline-block; position: relative; z-index: 0; padding: 0;
    font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.12;
    margin: 0 0 1rem; color: var(--k-text) !important;
}
.ogk.og-nick .section-title::after {
    content: ""; position: absolute; left: -.08em; right: -.12em; bottom: .04em; width: auto; height: .3em;
    background: var(--k-hl); z-index: -1; border-radius: .1em;
}
.ogk.og-nick .section-title i { color: var(--k-icon); font-size: .8em; margin-right: .35rem; }
.ogk.og-nick h3.text-primary, .ogk.og-nick h4.text-primary { font-family: 'Oswald', sans-serif; font-weight: 700; color: var(--k-icon) !important; }
.ogk.og-nick .text-muted { color: var(--k-muted) !important; }

/* Düz metin */
.ogk.og-nick .text-content { color: var(--k-text); line-height: 1.75; font-size: 1.02rem; max-width: 56rem; }
.ogk.og-nick .text-content p { color: var(--k-text); margin-bottom: 1.1rem; }
.ogk.og-nick .text-content ul, .ogk.og-nick .text-content ol { padding-left: 1.2rem; margin-bottom: 1.4rem; }
.ogk.og-nick .text-content li { margin-bottom: .5rem; }
.ogk.og-nick .text-content code {
    background: var(--k-soft); color: var(--k-soft-fg); padding: .1rem .45rem; border-radius: .4rem; font-size: .88em;
}
.ogk.og-nick p.text-content { max-width: 56rem; }
.ogk.og-nick .og-extra-platforms p, .ogk.og-nick .og-game-selection > p { color: var(--k-text); line-height: 1.7; max-width: 56rem; }

/* ---------- Araç kabı (React aracı) ---------- */
.ogk.og-nick #sekilli-nick-app {
    background: var(--k-paper); border-radius: 2rem; padding: clamp(1.1rem, 3vw, 2rem); margin-bottom: 2rem; min-height: 400px;
}
.ogk.og-nick .og-tool-section #sekilli-nick-app { background: transparent; padding: 0; margin-bottom: 0; border-radius: 0; }
.ogk.og-nick .og-loader, .ogk.og-nick .og-error { color: var(--k-muted); }
.ogk.og-nick .og-nick-tool { color: var(--k-text); }
.ogk.og-nick .og-input-group {
    background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 1.5rem; box-shadow: none;
    padding: 1.2rem 1.3rem; margin-bottom: 1.5rem;
}
.ogk.og-nick .og-field label { font-weight: 700; font-size: .92rem; color: var(--k-text); margin-bottom: .45rem; }
.ogk.og-nick .og-field input {
    border-radius: 999px; background: var(--k-paper); border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--k-line);
    color: var(--k-text); font-family: 'Outfit', sans-serif; font-size: 1.1rem; padding: .78rem 4.6rem .78rem 1.2rem;
}
.ogk.og-nick .og-field input::placeholder { color: var(--k-muted); opacity: .85; }
.ogk.og-nick .og-field input:focus { border-color: var(--k-accent); box-shadow: none; }
.ogk.og-nick .og-counter { right: 1.1rem; bottom: .95rem; color: var(--k-muted); font-weight: 600; }
.ogk.og-nick .og-tag-input {
    border-radius: 999px; background: var(--k-paper); border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--k-line); padding-left: 1rem;
}
.ogk.og-nick .og-tag-input:focus-within { border-color: var(--k-accent); box-shadow: none; }
.ogk.og-nick .og-tag-input input { box-shadow: none; border: 0; background: transparent; padding: .78rem .8rem .78rem .4rem; border-radius: 0 999px 999px 0; }
.ogk.og-nick .og-tag-input span { color: var(--k-icon); }

.ogk.og-nick .og-results-grid { gap: .8rem; margin-bottom: 1.5rem; }
.ogk.og-nick .og-result-card {
    background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 1.4rem; box-shadow: none; padding: 1.1rem 1.2rem; gap: .8rem;
}
.ogk.og-nick .og-result-card:hover { transform: translateY(-3px); border-color: var(--k-icon); box-shadow: none; }
.ogk.og-nick .og-result-text { color: var(--k-text); }
.ogk.og-nick .og-result-footer { border-top: 1px solid var(--k-line); padding-top: .8rem; gap: .6rem; }
.ogk.og-nick .og-style-name { color: var(--k-muted); }
.ogk.og-nick .og-badge { align-self: flex-start; border-radius: 999px; padding: .12rem .55rem; font-size: .68rem; letter-spacing: .02em; }
.ogk.og-nick .og-badge-works { background: rgba(46, 160, 67, .14); color: #1f7a35; }
.ogk.og-nick .og-badge-caution { background: rgba(255, 165, 2, .16); color: #8a5300; }
.ogk.og-nick .og-badge-fails { background: rgba(227, 10, 23, .1); color: #b3121f; }
[data-theme="dark"] .ogk.og-nick .og-badge-works { background: rgba(46, 213, 115, .14); color: #5fe08f; }
[data-theme="dark"] .ogk.og-nick .og-badge-caution { background: rgba(255, 165, 2, .16); color: #ffc15c; }
[data-theme="dark"] .ogk.og-nick .og-badge-fails { background: rgba(255, 71, 87, .16); color: #ff8a94; }
.ogk.og-nick .og-copy-btn {
    display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; border-radius: 999px; padding: .5rem 1rem;
    background: var(--k-accent); color: var(--k-on-accent); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .84rem;
    transition: transform .15s ease, filter .15s ease;
}
.ogk.og-nick .og-copy-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: none; }

.ogk.og-nick .og-ready-nicks { margin-bottom: 1.5rem; }
.ogk.og-nick .og-ready-nicks h3 { font-size: 1.3rem; margin: 0 0 .8rem; color: var(--k-text) !important; }
.ogk.og-nick .og-tag-cloud { gap: .4rem; }
.ogk.og-nick .og-tag-cloud button {
    background: var(--k-surface); border: 1px solid var(--k-line); color: var(--k-text); border-radius: 999px;
    padding: .42rem .9rem; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .86rem;
}
.ogk.og-nick .og-tag-cloud button:hover { background: var(--k-accent); border-color: var(--k-accent); color: var(--k-on-accent); }

.ogk.og-nick .og-platform-info {
    background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 1.2rem; padding: 1rem 1.2rem;
}
.ogk.og-nick .og-platform-info h4 { font-size: 1.15rem; margin: 0 0 .6rem; color: var(--k-text) !important; }
.ogk.og-nick .og-platform-info h4 i { color: var(--k-icon); margin-right: .25rem; }
.ogk.og-nick .og-platform-info ul { color: var(--k-muted); }

/* ---------- Hazır nick kartları ---------- */
.ogk.og-nick .og-nick-grid-wrapper,
.ogk.og-nick .og-pool,
.ogk.og-nick .og-tool-section {
    background: var(--k-paper); border: 0; border-radius: 2rem; padding: clamp(1.2rem, 3.2vw, 2.2rem); margin-bottom: 2rem;
}
.ogk.og-nick .og-tool-section .section-title, .ogk.og-nick .og-pool .section-title { margin-top: .2rem; }
.ogk.og-nick .og-pool .og-nick-samples:last-child { margin-bottom: 0 !important; }
.ogk.og-nick .og-nick-grid-wrapper h3 { font-size: 1.15rem; color: var(--k-text) !important; }
.ogk.og-nick .og-nick-grid-wrapper h3 i { color: var(--k-icon); margin-right: .2rem; }
.ogk.og-nick .og-nick-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .55rem; }
.ogk.og-nick .og-sample-card {
    background: var(--k-surface); border: 1px solid var(--k-line); color: var(--k-text); border-radius: 999px;
    padding: .62rem .9rem; text-align: center; cursor: pointer; font-weight: 600; font-size: .92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.ogk.og-nick .og-sample-card:hover { border-color: var(--k-icon); background: var(--k-surface); transform: translateY(-2px); box-shadow: none; }
.ogk.og-nick .og-sample-card:active { background: var(--k-soft); }

/* ---------- Adımlar (og-kit .ogk-steps görünümü) ---------- */
.ogk.og-nick .og-howto-steps { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.ogk.og-nick .og-howto-steps li {
    display: flex; align-items: flex-start; gap: .85rem; margin: 0; padding: 1rem 1.2rem 1.1rem;
    background: var(--k-ink); color: #fff; border: 0; border-radius: 1.6rem; box-shadow: none;
}
.ogk.og-nick .og-howto-steps li:nth-child(3n+1) { transform: rotate(-1.5deg); }
.ogk.og-nick .og-howto-steps li:nth-child(3n+2) { transform: rotate(1.2deg); }
.ogk.og-nick .og-howto-steps li:nth-child(3n+3) { transform: rotate(-.8deg); }
[data-theme="dark"] .ogk.og-nick .og-howto-steps li { background: #0b0b14; border: 1px solid rgba(255, 255, 255, .1); }
.ogk.og-nick .og-howto-steps .howto-step-num {
    flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--k-deco); color: var(--k-on-deco);
    display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.25rem;
}
.ogk.og-nick .og-howto-steps .howto-step-body { flex: 1; min-width: 0; }
.ogk.og-nick .og-howto-steps .howto-step-body h3 { font-size: 1.15rem; margin: 0 0 .2rem; color: #fff !important; }
.ogk.og-nick .og-howto-steps .howto-step-body p { margin: 0; color: rgba(255, 255, 255, .8); line-height: 1.55; font-size: .92rem; }
.ogk.og-nick .og-howto-steps .howto-step-body strong { color: #fff; }

/* ---------- Not kutuları ---------- */
.ogk.og-nick .og-alert-info,
.ogk.og-nick .og-alert-warning {
    background: var(--k-surface); border: 1px solid var(--k-line); border-left: 0; border-radius: 1.2rem;
    padding: 1rem 1.25rem; color: var(--k-muted); line-height: 1.65; max-width: 56rem;
}
.ogk.og-nick .og-alert-info p, .ogk.og-nick .og-alert-warning p { color: var(--k-muted); }
.ogk.og-nick .og-alert-info strong, .ogk.og-nick .og-alert-warning strong { color: var(--k-text); }
.ogk.og-nick .og-alert-info ul { padding-left: 1.2rem; margin: .3rem 0 0; }
.ogk.og-nick .og-alert-info h4, .ogk.og-nick .og-alert-warning h4 { font-size: 1.1rem; color: var(--k-text) !important; }
.ogk.og-nick .og-alert-info h4 i { color: var(--k-icon); }
.ogk.og-nick .og-alert-warning { background: #fff4d6; border-color: transparent; }
.ogk.og-nick .og-alert-warning, .ogk.og-nick .og-alert-warning p { color: #5c4300; }
.ogk.og-nick .og-alert-warning h4 { color: #3d2c00 !important; }
.ogk.og-nick .og-alert-warning h4 i { color: #c98a00; }
[data-theme="dark"] .ogk.og-nick .og-alert-warning { background: rgba(255, 200, 61, .1); border-color: rgba(255, 200, 61, .22); }
[data-theme="dark"] .ogk.og-nick .og-alert-warning, [data-theme="dark"] .ogk.og-nick .og-alert-warning p { color: #f1dca6; }
[data-theme="dark"] .ogk.og-nick .og-alert-warning h4 { color: #ffe3a0 !important; }
[data-theme="dark"] .ogk.og-nick .og-alert-warning h4 i { color: #ffc83d; }

/* Sembol sayfası yönlendirmesi (hub) */
.ogk.og-nick .og-symbol-cta {
    display: flex; gap: .9rem; align-items: center; background: var(--k-soft); border: 0; border-radius: 1.2rem; padding: 1rem 1.2rem; max-width: 56rem;
}
.ogk.og-nick .og-symbol-cta-icon {
    flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--k-accent); color: var(--k-on-accent); font-size: 1rem;
}
.ogk.og-nick .og-symbol-cta-text { color: var(--k-soft-fg); line-height: 1.55; }
.ogk.og-nick .og-symbol-cta-text strong { color: var(--k-soft-fg); }
.ogk.og-nick .og-symbol-cta-text a { color: var(--k-soft-fg) !important; font-weight: 800; text-decoration: underline !important; }

/* ---------- Oyun kartları (hub): og-kit kutucuğu, renk yalnız simge dairesinde ---------- */
.ogk.og-nick .og-nick-tiles { --k-min: 15rem; margin-bottom: 1rem; }
.ogk.og-nick .og-nick-tiles .ogk-ico { font-size: 1.45rem; }
.ogk.og-nick .og-nick-tiles .ogk-tag { align-self: flex-start; }
.ogk.og-nick .og-nick-tiles .ogk-tile h3 { font-size: 1.22rem; }

/* Oyun seçimi bölümü (hub) */
.ogk.og-nick .og-game-selection { background: var(--k-paper); border-radius: 2rem; padding: clamp(1.2rem, 3.2vw, 2.2rem); }
.ogk.og-nick .og-game-selection .og-extra-platforms p { margin: 0; color: var(--k-muted); }

/* ---------- SSS ---------- */
.ogk.og-nick .ogk-faq { margin-bottom: 2.5rem; max-width: 56rem; }

/* ---------- İlgili bağlantılar ---------- */
.ogk.og-nick .og-related-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .6rem; padding: 0; margin: 0 0 2.5rem; list-style: none; }
.ogk.og-nick .og-related-links li { margin: 0; padding: 0; background: none; border: 0; }
.ogk.og-nick .og-related-links li a {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem; height: 100%;
    background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 1.2rem; padding: .85rem 1.1rem;
    color: var(--k-text) !important; font-weight: 700; text-decoration: none !important; transition: transform .15s ease, border-color .15s ease;
}
.ogk.og-nick .og-related-links li a::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .8rem; color: var(--k-icon); }
.ogk.og-nick .og-related-links li a:hover { border-color: var(--k-icon); transform: translateY(-2px); }

/* Açıklamalı bağlantı listesi (klan tag): Bağlantı + kısa not aynı satırda */
.ogk.og-nick .og-related-links--notes li { background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 1.2rem; padding: .85rem 1.1rem; color: var(--k-muted); line-height: 1.5; }
.ogk.og-nick .og-related-links--notes li a { display: inline; height: auto; padding: 0; background: none; border: 0; border-radius: 0; color: var(--k-icon) !important; }
.ogk.og-nick .og-related-links--notes li a::after { content: none; }
.ogk.og-nick .og-related-links--notes li a:hover { transform: none; text-decoration: underline !important; }

/* ---------- Sembol kütüphanesi ---------- */
.ogk.og-nick .og-symbol-section { background: var(--k-paper); border-radius: 2rem; padding: clamp(1.1rem, 3vw, 2rem); margin-bottom: 1.5rem !important; }
.ogk.og-nick .og-symbol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .6rem; margin: 0; }
.ogk.og-nick .og-symbol-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 5.4rem; padding: .8rem .4rem;
    background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 1.2rem; cursor: pointer; color: var(--k-text);
    font-family: 'Outfit', sans-serif; transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.ogk.og-nick .og-symbol-card:hover { border-color: var(--k-icon); transform: translateY(-2px); box-shadow: none; }
.ogk.og-nick .og-symbol-glyph { font-size: 1.7rem; line-height: 1; margin-bottom: .4rem; user-select: text; word-break: break-all; }
.ogk.og-nick .og-symbol-copy-label { font-size: .72rem; font-weight: 700; color: var(--k-muted); }
.ogk.og-nick .og-symbol-card.copied { background: rgba(46, 160, 67, .12); border-color: #2ea043; }
.ogk.og-nick .og-symbol-card.copied .og-symbol-copy-label { color: #1f7a35; }
[data-theme="dark"] .ogk.og-nick .og-symbol-card.copied .og-symbol-copy-label { color: #5fe08f; }

/* Sembol sayfası çağrı bandı (og-kit .ogk-cta görünümü) */
.ogk.og-nick .og-cta-block {
    position: relative; overflow: hidden; overflow: clip; isolation: isolate; text-align: left;
    background: linear-gradient(135deg, var(--k-cta-a) 0%, var(--k-cta-b) 100%); color: var(--k-cta-fg);
    border: 0; border-radius: 2rem; padding: clamp(1.4rem, 3.5vw, 2.2rem);
}
.ogk.og-nick .og-cta-block::after {
    content: ""; position: absolute; z-index: -1; width: 13rem; height: 13rem; border-radius: 50%;
    right: -5rem; bottom: -8rem; border: 2rem solid var(--k-cta-deco); opacity: .55;
}
.ogk.og-nick .og-cta-block h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.08; margin: 0 0 .5rem; color: var(--k-cta-fg) !important; }
.ogk.og-nick .og-cta-block p { color: var(--k-cta-fg); opacity: .88; margin: 0 0 1.1rem; max-width: 42rem; }

@media (max-width: 767.98px) {
    .ogk.og-nick .og-input-group { flex-direction: column; }
    .ogk.og-nick .og-field-tagline { flex: 1 1 auto; }
    .ogk.og-nick .og-results-grid { grid-template-columns: minmax(0, 1fr); }
    .og-nick .og-nick-subnav { margin-top: -.4rem; }
}
@media (max-width: 575.98px) {
    .ogk.og-nick #sekilli-nick-app, .ogk.og-nick .og-nick-grid-wrapper, .ogk.og-nick .og-pool,
    .ogk.og-nick .og-tool-section, .ogk.og-nick .og-symbol-section, .ogk.og-nick .og-cta-block, .ogk.og-nick .og-game-selection { border-radius: 1.4rem; }
    .ogk.og-nick .og-howto-steps li:nth-child(n) { transform: none; }
    .ogk.og-nick .og-nick-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ogk.og-nick .og-symbol-grid { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: .45rem; }
    .ogk.og-nick .og-symbol-card { min-height: 4.6rem; }
    .ogk.og-nick .og-symbol-glyph { font-size: 1.4rem; }
    .ogk.og-nick .og-result-footer { flex-wrap: wrap; }
    /* Hub oyun kutucukları telefonda yatay: Simge solda, başlık ve metin sağda */
    .ogk.og-nick .og-nick-tiles { gap: .6rem; }
    .ogk.og-nick .og-nick-tiles .ogk-tile { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .85rem; row-gap: .2rem; align-items: start; padding: 1rem 2.4rem 1rem 1rem; }
    .ogk.og-nick .og-nick-tiles .ogk-ico { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; grid-row: span 2; }
    .ogk.og-nick .og-nick-tiles .ogk-tile h3 { font-size: 1.1rem; margin: 0; }
    .ogk.og-nick .og-nick-tiles .ogk-tile p { font-size: .86rem; }
    .ogk.og-nick .og-nick-tiles .ogk-tile__go { top: 1rem; right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ogk.og-nick .og-sample-card:hover, .ogk.og-nick .og-result-card:hover, .ogk.og-nick .og-symbol-card:hover,
    .ogk.og-nick .og-related-links li a:hover, .ogk.og-nick .og-copy-btn:hover { transform: none; }
}