/* =====================================================================
   Sensitivity converter sayfaları (/araclar/sensitivity, /araclar/sensitivity/pubg ve çiftler): OG kit dili,
   OG Play teması. Tasarım geçişi 2026-10-21 (docs/tasarim-gecisi-2026-10-21.md); önceden iki görünümde satır içi
   stildi. Kap: .ogk.ogk--play.sch-page (hub) ya da .ogk.ogk--play.sc-page (dönüştürücü), og-kit.css ile birlikte.
   JS'in kullandığı kimlikler ve "copied" sınıfı aynı.
   ===================================================================== */

/* ---------- Manşet ---------- */
.ogk .sc-header .ogk-lead, .ogk .sch-header .ogk-lead { margin-bottom: 0; }

/* ---------- Hub: Ana yönlendirme (çağrı bandı görünümü) ---------- */
.ogk a.sch-primary {
    position: relative; overflow: hidden; overflow: clip; isolation: isolate; display: flex; align-items: center; gap: 1.1rem;
    background: linear-gradient(135deg, var(--k-cta-a) 0%, var(--k-cta-b) 100%); color: var(--k-cta-fg) !important;
    border-radius: 2rem; padding: clamp(1.2rem, 3vw, 2rem); margin: 0 0 1.5rem; text-decoration: none !important;
    transition: transform .18s ease;
}
.ogk a.sch-primary::after {
    content: ""; position: absolute; z-index: -1; width: 11rem; height: 11rem; border-radius: 50%;
    right: -4rem; bottom: -7rem; border: 1.8rem solid var(--k-cta-deco); opacity: .55;
}
.ogk a.sch-primary:hover { transform: translateY(-3px); }
.ogk .sch-primary-icon {
    width: 3.4rem; height: 3.4rem; flex: 0 0 3.4rem; border-radius: 50%; background: var(--k-ink); color: var(--k-bright);
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.ogk .sch-primary-body { flex: 1; min-width: 0; }
.ogk .sch-primary-body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.08; margin: 0 0 .35rem; color: var(--k-cta-fg) !important; }
.ogk .sch-primary-body p { margin: 0; color: var(--k-cta-fg); opacity: .88; font-size: .98rem; }
.ogk .sch-primary-arrow {
    width: 2.8rem; height: 2.8rem; flex: 0 0 2.8rem; border-radius: 50%; background: var(--k-ink); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}

/* ---------- Dönüştürücü paneli ---------- */
.ogk .sc-tool { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; margin: 0; }
.ogk .sc-inputs { background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 1.5rem; padding: 1.3rem; }
.ogk .sc-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; flex: 1; min-width: 0; }
.ogk .sc-field:last-child { margin-bottom: 0; }
.ogk .sc-field-row { display: flex; gap: .85rem; }
.ogk .sc-field label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--k-muted); }
.ogk .sc-hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ogk .sc-input {
    width: 100%; border: 2px solid transparent; border-radius: 1rem; background: var(--k-paper); color: var(--k-text);
    box-shadow: inset 0 0 0 1px var(--k-line); font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; padding: .7rem 1rem;
}
.ogk .sc-input:focus { outline: none; border-color: var(--k-accent); box-shadow: none; }
/* Sayı kutusunda tarayıcının ok düğmeleri temaya uymuyor (Faruk kuralı): Gizli, değer yazılarak girilir. */
.ogk input.sc-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ogk input.sc-input[type="number"]::-webkit-inner-spin-button,
.ogk input.sc-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Açılır liste: İşletim sistemi çiziyor, opak renk şart (yarı saydam zemin gece modunda beyaza döner). */
.ogk select.sc-input {
    appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer; color-scheme: light; background-color: #ebe8fa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2350566a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center;
}
.ogk select.sc-input option { background: #ffffff; color: #16181d; }
[data-theme="dark"] .ogk select.sc-input { color-scheme: dark; background-color: #1a1a2e; color: #f1f2f7; }
[data-theme="dark"] .ogk select.sc-input option { background: #1b2029; color: #f2f4f7; }
.ogk .sc-target-fixed {
    background: var(--k-soft); border: 0; border-radius: 1rem; padding: .78rem 1rem; color: var(--k-soft-fg); font-weight: 700;
}

/* Sonuç: Mürekkep kart, turuncu sayı */
.ogk .sc-result {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    background: var(--k-ink); color: #fff; border: 0; border-radius: 1.5rem; padding: 1.4rem 1.2rem;
}
[data-theme="dark"] .ogk .sc-result { background: #0b0b14; border: 1px solid rgba(255, 255, 255, .1); }
.ogk .sc-result-label { font-size: .76rem; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255, 255, 255, .75); font-weight: 700; }
.ogk .sc-result-value { font-family: 'Oswald', sans-serif; font-size: 3.6rem; font-weight: 700; line-height: 1; color: var(--k-bright); margin: .4rem 0 .2rem; }
.ogk .sc-approx { font-size: .8rem; color: rgba(255, 255, 255, .72); }
.ogk .sc-out-of-range { font-size: .8rem; color: #ffc83d; margin-top: .3rem; }
.ogk .sc-copy {
    margin-top: 1rem; display: inline-flex; align-items: center; gap: .45rem; background: var(--k-deco); color: var(--k-on-deco);
    border: none; border-radius: 999px; padding: .62rem 1.2rem; font-family: 'Outfit', sans-serif; font-weight: 700; cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}
.ogk .sc-copy:hover { transform: translateY(-2px); filter: brightness(1.08); }
.ogk .sc-copy.copied { background: #8fd14f; color: #0f0f1a; }
.ogk .sc-anchor { display: flex; gap: .55rem; margin-top: 1.1rem; width: 100%; }
.ogk .sc-anchor-item { flex: 1; background: rgba(255, 255, 255, .08); border-radius: 1rem; padding: .7rem .4rem; }
.ogk .sc-anchor-wide { flex: 1.4; }
.ogk .sc-anchor-value { display: block; font-family: 'Oswald', sans-serif; font-size: 1.25rem; font-weight: 700; color: #fff; }
.ogk .sc-anchor-label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, .7); margin-top: .2rem; font-weight: 700; }

/* ---------- Yazı bölümleri ---------- */
.ogk .sc-article, .ogk .sch-article {
    background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 2rem; padding: clamp(1.2rem, 3.5vw, 2.2rem); margin: 0 0 1.5rem;
}
.ogk .sc-h2, .ogk .sch-h2 {
    display: inline-block; position: relative; z-index: 0; font-size: clamp(1.45rem, 2.8vw, 1.95rem); line-height: 1.12;
    margin: 1.8rem 0 .9rem; padding: 0; color: var(--k-text) !important;
}
.ogk .sc-h2::after, .ogk .sch-h2::after { content: ""; position: absolute; left: -.08em; right: -.12em; bottom: .04em; height: .3em; width: auto; background: var(--k-hl); z-index: -1; border-radius: .1em; }
.ogk .sch-article > .sch-h2:first-child, .ogk .sch-quick > .sch-h2:first-child { margin-top: 0; }
.ogk .sc-article p, .ogk .sch-article p { color: var(--k-text); line-height: 1.75; max-width: 52rem; }
.ogk .sc-article p:first-child { font-size: 1.05rem; }

/* Çift kartları: Kit gezinme hapları */
.ogk .sc-pairs, .ogk .sch-pairs { display: flex; flex-wrap: wrap; gap: .5rem; }
.ogk .sc-pair-card, .ogk a.sch-pair {
    display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.05rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
    text-decoration: none !important; background: var(--k-paper); border: 1px solid var(--k-line); color: var(--k-text) !important;
    transition: transform .15s ease, border-color .15s ease;
}
.ogk .sch-quick .sch-pair { background: var(--k-surface); }
.ogk .sc-pair-card i, .ogk .sch-pair i { color: var(--k-icon); font-size: .8em; }
.ogk a.sc-pair-card:hover, .ogk a.sch-pair:hover { border-color: var(--k-icon); transform: translateY(-2px); }
.ogk .sc-pair-card.active { background: var(--k-accent); border-color: var(--k-accent); color: var(--k-on-accent) !important; cursor: default; }
.ogk .sc-pair-card.active i { color: var(--k-on-accent); }
.ogk .sc-pair-card.active small { opacity: .85; font-weight: 500; }

/* Açıklamalı bağlantı listesi */
.ogk .sc-related { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; max-width: 52rem; }
.ogk .sc-related li { padding: .85rem 1.1rem; color: var(--k-muted); background: var(--k-paper); border: 0; border-radius: 1.2rem; line-height: 1.5; }
.ogk .sc-related li a { color: var(--k-icon) !important; font-weight: 700; text-decoration: none; }
.ogk .sc-related li a:hover { text-decoration: underline; }
.ogk .sc-article .ogk-faq { max-width: 52rem; }

@media (max-width: 720px) {
    .ogk .sc-tool { grid-template-columns: minmax(0, 1fr); }
    .ogk .sc-result-value { font-size: 3rem; }
}
@media (max-width: 575.98px) {
    .ogk .sc-article, .ogk .sch-article, .ogk a.sch-primary { border-radius: 1.4rem; }
    .ogk .sc-field-row { flex-direction: column; gap: 0; }
    .ogk .sc-field-row .sc-field { margin-bottom: 1rem; }
    .ogk .sch-primary-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ogk a.sch-primary:hover, .ogk .sc-copy:hover, .ogk a.sc-pair-card:hover, .ogk a.sch-pair:hover { transform: none; }
}