@charset "UTF-8";
.ts-navbar .btn { white-space: nowrap; }
/* ==========================================================================
   TestSro — tema katmanı
   Bootstrap 5.3 üzerine binen, tek dosyalık ve kendi kendine yeten tasarım.
   Harici font / CDN kullanılmaz; tipografi sistem yığınından gelir.
   Palet: obsidyen + antika altın + ölçülü kızıl.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tasarım değişkenleri
   -------------------------------------------------------------------------- */
:root {
    /* Yüzeyler */
    --ts-void: #07080b;
    --ts-obsidian: #0b0d12;
    --ts-surface: #11141b;
    --ts-surface-2: #161a23;
    --ts-surface-3: #1d222d;

    /* Altın */
    --ts-gold: #c9a227;
    --ts-gold-soft: #e0c97a;
    --ts-gold-bright: #f0dda3;
    --ts-gold-deep: #8a6d1f;

    /* Kızıl (ölçülü, yalnızca vurgu) */
    --ts-crimson: #a5342c;
    --ts-crimson-soft: #d0685d;

    /* Metin */
    --ts-ink: #ece7dd;
    --ts-ink-muted: #a9a294;
    --ts-ink-faint: #8a8478;

    /* Çizgiler */
    --ts-line: #2a3040;
    --ts-line-soft: #1e2330;
    --ts-line-gold: rgba(201, 162, 39, .34);

    /* Durum */
    --ts-ok: #58a06a;
    --ts-warn: #c99a2a;
    --ts-err: #c85a50;

    /* Tipografi */
    --ts-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Noto Serif", "Times New Roman", serif;
    --ts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --ts-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

    /* Ölçü */
    --ts-radius: 4px;
    --ts-radius-lg: 6px;
    --ts-shadow: 0 18px 44px rgba(0, 0, 0, .46);
    --ts-shadow-soft: 0 10px 26px rgba(0, 0, 0, .32);
    --ts-ring: 0 0 0 2px var(--ts-obsidian), 0 0 0 4px var(--ts-gold-soft);
}

/* --------------------------------------------------------------------------
   2. Bootstrap değişken eşlemesi
   Tema tek renk şemasında (koyu) çalışır; açık/koyu ayrımı yapılmaz.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme],
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    color-scheme: dark;

    --bs-body-bg: var(--ts-obsidian);
    --bs-body-bg-rgb: 11, 13, 18;
    --bs-body-color: var(--ts-ink);
    --bs-body-color-rgb: 236, 231, 221;
    --bs-body-font-family: var(--ts-sans);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.65;

    --bs-emphasis-color: #fbf7ef;
    --bs-emphasis-color-rgb: 251, 247, 239;
    --bs-secondary-color: var(--ts-ink-muted);
    --bs-secondary-color-rgb: 169, 162, 148;
    --bs-tertiary-color: var(--ts-ink-faint);

    --bs-secondary-bg: var(--ts-surface-2);
    --bs-secondary-bg-rgb: 22, 26, 35;
    --bs-tertiary-bg: var(--ts-surface);
    --bs-tertiary-bg-rgb: 17, 20, 27;

    --bs-border-color: var(--ts-line);
    --bs-border-color-translucent: rgba(255, 255, 255, .08);

    --bs-primary: var(--ts-gold);
    --bs-primary-rgb: 201, 162, 39;
    --bs-primary-text-emphasis: var(--ts-gold-soft);
    --bs-primary-bg-subtle: rgba(201, 162, 39, .12);
    --bs-primary-border-subtle: var(--ts-line-gold);

    --bs-danger: var(--ts-err);
    --bs-danger-rgb: 200, 90, 80;
    --bs-danger-text-emphasis: #e29a92;
    --bs-danger-bg-subtle: rgba(165, 52, 44, .16);
    --bs-danger-border-subtle: rgba(165, 52, 44, .4);

    --bs-success: var(--ts-ok);
    --bs-success-rgb: 88, 160, 106;
    --bs-success-text-emphasis: #8fc79d;
    --bs-success-bg-subtle: rgba(88, 160, 106, .14);
    --bs-success-border-subtle: rgba(88, 160, 106, .36);

    --bs-warning: var(--ts-warn);
    --bs-warning-rgb: 201, 154, 42;
    --bs-warning-text-emphasis: var(--ts-gold-soft);
    --bs-warning-bg-subtle: rgba(201, 154, 42, .14);
    --bs-warning-border-subtle: rgba(201, 154, 42, .36);

    --bs-info: #5b8fa8;
    --bs-info-rgb: 91, 143, 168;
    --bs-info-text-emphasis: #9cc2d4;
    --bs-info-bg-subtle: rgba(91, 143, 168, .14);
    --bs-info-border-subtle: rgba(91, 143, 168, .36);

    --bs-dark: var(--ts-void);
    --bs-dark-rgb: 7, 8, 11;
    --bs-light: var(--ts-surface-3);
    --bs-light-rgb: 29, 34, 45;

    --bs-link-color: var(--ts-gold-soft);
    --bs-link-color-rgb: 224, 201, 122;
    --bs-link-hover-color: var(--ts-gold-bright);
    --bs-link-hover-color-rgb: 240, 221, 163;

    --bs-heading-color: #fbf7ef;
    --bs-code-color: var(--ts-gold-soft);
    --bs-highlight-bg: rgba(201, 162, 39, .22);
    --bs-border-radius: var(--ts-radius);
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: var(--ts-radius-lg);
}

/* --------------------------------------------------------------------------
   3. Temel
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--ts-obsidian);
    background-image:
        radial-gradient(1100px 520px at 50% -240px, rgba(201, 162, 39, .07), transparent 68%),
        linear-gradient(180deg, #090a0e 0%, var(--ts-obsidian) 420px);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--ts-ink);
    font-family: var(--ts-sans);
    letter-spacing: .005em;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--ts-serif);
    font-weight: 600;
    letter-spacing: -.012em;
    color: #fbf7ef;
}

h1, .h1 { line-height: 1.16; }
h2, .h2 { line-height: 1.22; }

p { color: var(--ts-ink); }

a {
    text-underline-offset: .22em;
    text-decoration-thickness: 1px;
}

hr {
    border-color: var(--ts-line);
    opacity: 1;
}

::selection {
    background: rgba(201, 162, 39, .3);
    color: #fff;
}

/* Odak halkası — klavye erişimi için her yerde görünür */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ts-ring);
    border-radius: var(--ts-radius);
}

/* İçeriğe atla bağlantısı */
.ts-skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    padding: .65rem 1.1rem;
    background: var(--ts-gold);
    color: #14100a;
    font-weight: 700;
    border-radius: var(--ts-radius);
    transition: top .15s ease-out;
}

.ts-skip:focus {
    top: 1rem;
    color: #14100a;
}

/* --------------------------------------------------------------------------
   4. Tipografik yardımcılar
   -------------------------------------------------------------------------- */
.ts-eyebrow {
    display: inline-block;
    font-family: var(--ts-sans);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ts-gold-soft);
    margin-bottom: .85rem;
}

.ts-lede {
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--ts-ink-muted);
    max-width: 62ch;
}

.ts-muted { color: var(--ts-ink-muted) !important; }
.ts-faint { color: var(--ts-ink-faint) !important; }
.ts-serif { font-family: var(--ts-serif); }
.ts-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Altın filigran çizgi */
.ts-rule {
    width: 132px;
    height: 1px;
    border: 0;
    margin: 1.25rem 0;
    background: linear-gradient(90deg, var(--ts-gold) 0%, rgba(201, 162, 39, .12) 100%);
    opacity: 1;
}

.ts-rule--center { margin-left: auto; margin-right: auto; }

/* Bölüm başlığı */
.ts-section {
    padding: clamp(3rem, 6vw, 5.25rem) 0;
    position: relative;
}

.ts-section + .ts-section { padding-top: 0; }

.ts-section--alt {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .018) 18%, rgba(255, 255, 255, .018) 82%, transparent);
}

.ts-section-head {
    max-width: 62ch;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.ts-section-head h2 {
    font-size: clamp(1.6rem, 3.1vw, 2.3rem);
    margin: 0 0 .65rem;
}

.ts-section-head p {
    margin: 0;
    color: var(--ts-ink-muted);
}

.ts-section-head--between {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   5. Kelime markası (TestSro)
   -------------------------------------------------------------------------- */
.ts-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: .06em;
    font-family: var(--ts-serif);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .012em;
    text-decoration: none;
    white-space: nowrap;
}

.ts-wordmark:hover,
.ts-wordmark:focus { text-decoration: none; }

.ts-wordmark__a {
    color: #fbf7ef;
}

.ts-wordmark__b {
    color: var(--ts-gold);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .74em;
}

.ts-wordmark--nav { font-size: 1.6rem; }

.ts-wordmark--hero {
    font-size: clamp(3.1rem, 11vw, 6.75rem);
    letter-spacing: -.015em;
    text-shadow: 0 14px 44px rgba(0, 0, 0, .6);
}

.ts-wordmark--hero .ts-wordmark__b {
    font-size: .52em;
    letter-spacing: .13em;
    position: relative;
    top: -.12em;
}

.ts-wordmark--footer { font-size: 1.5rem; }

/* Marka rozeti / süs */
.ts-mark {
    display: inline-block;
    vertical-align: middle;
    color: var(--ts-gold);
    flex: none;
    margin-right: .5rem;
    align-self: center;
}

/* --------------------------------------------------------------------------
   6. Başlık ve gezinme
   -------------------------------------------------------------------------- */
.ts-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(9, 11, 15, .9);
    border-bottom: 1px solid var(--ts-line-soft);
    backdrop-filter: blur(10px);
}

.ts-header::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ts-line-gold) 22%, var(--ts-line-gold) 78%, transparent);
}

.ts-header.is-stuck {
    background: rgba(7, 8, 11, .97);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .44);
}

.ts-navbar {
    padding: .5rem 0;
    --bs-navbar-color: var(--ts-ink-muted);
    --bs-navbar-hover-color: var(--ts-gold-soft);
    --bs-navbar-active-color: var(--ts-gold-bright);
    --bs-navbar-toggler-border-color: var(--ts-line);
    --bs-navbar-toggler-focus-width: 0;
}

.ts-navbar .navbar-brand {
    padding: .35rem 0;
    margin-right: 2rem;
    align-items: center;
}

.ts-navbar .nav-link {
    position: relative;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .085em;
    text-transform: uppercase;
    padding: .7rem .9rem;
    color: var(--ts-ink-muted);
    transition: color .16s ease-out;
}

.ts-navbar .nav-link:hover,
.ts-navbar .nav-link:focus { color: var(--ts-gold-soft); }

.ts-navbar .nav-link.active { color: var(--ts-gold-bright); }

.ts-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .34rem;
    height: 1px;
    background: var(--ts-gold);
}

.ts-navbar .dropdown-toggle::after {
    margin-left: .42em;
    opacity: .6;
    vertical-align: .12em;
}

.ts-navbar .navbar-toggler {
    padding: .45rem .6rem;
    border-radius: var(--ts-radius);
    color: var(--ts-gold-soft);
    border-color: var(--ts-line);
}

.ts-navbar .navbar-toggler:focus-visible { box-shadow: var(--ts-ring); }

.ts-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23e0c97a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.dropdown-menu {
    --bs-dropdown-bg: var(--ts-surface-2);
    --bs-dropdown-border-color: var(--ts-line);
    --bs-dropdown-link-color: var(--ts-ink);
    --bs-dropdown-link-hover-bg: rgba(201, 162, 39, .12);
    --bs-dropdown-link-hover-color: var(--ts-gold-bright);
    --bs-dropdown-link-active-bg: rgba(201, 162, 39, .18);
    --bs-dropdown-link-active-color: var(--ts-gold-bright);
    --bs-dropdown-divider-bg: var(--ts-line);
    --bs-dropdown-padding-y: .4rem;
    --bs-dropdown-item-padding-y: .48rem;
    box-shadow: var(--ts-shadow-soft);
    border-radius: var(--ts-radius);
}

.dropdown-item {
    font-size: .92rem;
}

/* Kapalı test rozeti */
.ts-phase {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .24rem .6rem;
    font-family: var(--ts-sans);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ts-gold-soft);
    border: 1px solid var(--ts-line-gold);
    border-radius: 999px;
    background: rgba(201, 162, 39, .07);
    white-space: nowrap;
}

.ts-phase__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ts-gold);
    flex: none;
}

/* Hesap düğmesi (kullanıcı) */
.ts-account-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ts-ink) !important;
    text-transform: none !important;
}

.ts-avatar {
    border-radius: 50%;
    border: 1px solid var(--ts-line-gold);
    background: var(--ts-surface-3);
    flex: none;
}

/* --------------------------------------------------------------------------
   7. Düğmeler
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-family: var(--ts-sans);
    --bs-btn-font-weight: 650;
    --bs-btn-border-radius: var(--ts-radius);
    --bs-btn-focus-box-shadow: none;
    letter-spacing: .05em;
    transition: background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out, transform .16s ease-out;
}

.btn:focus-visible { box-shadow: var(--ts-ring); }

.btn-primary {
    --bs-btn-color: #14100a;
    --bs-btn-bg: var(--ts-gold);
    --bs-btn-border-color: var(--ts-gold);
    --bs-btn-hover-color: #14100a;
    --bs-btn-hover-bg: var(--ts-gold-soft);
    --bs-btn-hover-border-color: var(--ts-gold-soft);
    --bs-btn-active-color: #14100a;
    --bs-btn-active-bg: var(--ts-gold-bright);
    --bs-btn-active-border-color: var(--ts-gold-bright);
    --bs-btn-disabled-color: #2b2416;
    --bs-btn-disabled-bg: var(--ts-gold-deep);
    --bs-btn-disabled-border-color: var(--ts-gold-deep);
}

.btn-outline-primary {
    --bs-btn-color: var(--ts-gold-soft);
    --bs-btn-border-color: var(--ts-line-gold);
    --bs-btn-hover-color: var(--ts-gold-bright);
    --bs-btn-hover-bg: rgba(201, 162, 39, .12);
    --bs-btn-hover-border-color: var(--ts-gold);
    --bs-btn-active-color: #14100a;
    --bs-btn-active-bg: var(--ts-gold);
    --bs-btn-active-border-color: var(--ts-gold);
    --bs-btn-disabled-color: var(--ts-ink-faint);
    --bs-btn-disabled-border-color: var(--ts-line);
}

.btn-secondary {
    --bs-btn-color: var(--ts-ink);
    --bs-btn-bg: var(--ts-surface-3);
    --bs-btn-border-color: var(--ts-line);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #262c39;
    --bs-btn-hover-border-color: #333b4c;
    --bs-btn-active-bg: #2b3240;
    --bs-btn-active-border-color: #3a4353;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ts-crimson);
    --bs-btn-border-color: var(--ts-crimson);
    --bs-btn-hover-bg: #b93d34;
    --bs-btn-hover-border-color: #b93d34;
}

.btn-link {
    --bs-btn-color: var(--ts-gold-soft);
    --bs-btn-hover-color: var(--ts-gold-bright);
    text-decoration: none;
}

.btn-link:hover { text-decoration: underline; }

/* Kahraman eylem düğmesi */
.ts-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .92rem 1.85rem;
    font-size: .93rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: var(--ts-radius);
    border: 1px solid transparent;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
}

.ts-cta:hover,
.ts-cta:focus { text-decoration: none; }

.ts-cta--primary {
    background: linear-gradient(180deg, var(--ts-gold-soft), var(--ts-gold));
    border-color: var(--ts-gold-soft);
    color: #14100a;
    box-shadow: 0 10px 26px rgba(201, 162, 39, .2);
}

.ts-cta--primary:hover,
.ts-cta--primary:focus {
    background: linear-gradient(180deg, var(--ts-gold-bright), var(--ts-gold-soft));
    color: #14100a;
}

.ts-cta--ghost {
    background: rgba(255, 255, 255, .03);
    border-color: var(--ts-line-gold);
    color: var(--ts-gold-soft);
}

.ts-cta--ghost:hover,
.ts-cta--ghost:focus {
    background: rgba(201, 162, 39, .12);
    border-color: var(--ts-gold);
    color: var(--ts-gold-bright);
}

.ts-cta:focus-visible { box-shadow: var(--ts-ring); }

.ts-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

/* --------------------------------------------------------------------------
   8. Kahraman bölümü
   -------------------------------------------------------------------------- */
.ts-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid var(--ts-line-soft);
}

.ts-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--ts-hero-image);
    background-size: cover;
    background-position: 50% 32%;
    background-repeat: no-repeat;
    transform: scale(1.02);
}

.ts-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(7, 8, 11, .96) 0%, rgba(7, 8, 11, .86) 42%, rgba(7, 8, 11, .38) 78%, rgba(7, 8, 11, .62) 100%),
        linear-gradient(180deg, rgba(7, 8, 11, .82) 0%, transparent 34%, rgba(7, 8, 11, .92) 100%);
}

.ts-hero__inner {
    padding: clamp(3.5rem, 11vw, 8rem) 0 clamp(3rem, 7vw, 5rem);
    max-width: 44rem;
}

.ts-hero__tag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.ts-hero__title {
    margin: 0 0 1.1rem;
}

.ts-hero__sub {
    font-family: var(--ts-serif);
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    font-style: italic;
    color: var(--ts-gold-soft);
    margin: 0 0 .9rem;
    letter-spacing: .01em;
}

.ts-hero__text {
    font-size: 1.05rem;
    line-height: 1.72;
    color: #d3cdc2;
    max-width: 54ch;
    margin: 0 0 2rem;
}

.ts-hero__note {
    margin-top: 1.35rem;
    font-size: .85rem;
    color: var(--ts-ink-faint);
    max-width: 48ch;
}

/* Kahraman altındaki canlı şerit */
.ts-strip {
    border-top: 1px solid var(--ts-line-soft);
    border-bottom: 1px solid var(--ts-line-soft);
    background: rgba(255, 255, 255, .02);
}

.ts-strip__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-strip__item {
    flex: 1 1 13rem;
    padding: 1.1rem 1.35rem;
    border-right: 1px solid var(--ts-line-soft);
}

.ts-strip__item:last-child { border-right: 0; }

.ts-strip__label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ts-ink-faint);
    margin-bottom: .3rem;
}

.ts-strip__value {
    display: block;
    font-family: var(--ts-serif);
    font-size: 1.22rem;
    color: #fbf7ef;
    font-variant-numeric: tabular-nums;
}

.ts-strip__value--gold { color: var(--ts-gold-soft); }

/* --------------------------------------------------------------------------
   9. Panel / kart
   -------------------------------------------------------------------------- */
.card {
    --bs-card-bg: var(--ts-surface);
    --bs-card-border-color: var(--ts-line);
    --bs-card-border-radius: var(--ts-radius-lg);
    --bs-card-inner-border-radius: var(--ts-radius);
    --bs-card-cap-bg: rgba(255, 255, 255, .025);
    --bs-card-cap-color: var(--ts-gold-soft);
    --bs-card-color: var(--ts-ink);
    --bs-card-spacer-y: 1.35rem;
    --bs-card-spacer-x: 1.45rem;
    box-shadow: none;
}

.card-header {
    font-family: var(--ts-sans);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    border-bottom-color: var(--ts-line);
    padding: .8rem 1.45rem;
}

.card-title {
    font-family: var(--ts-serif);
}

.card.shadow-sm { box-shadow: var(--ts-shadow-soft) !important; }

/* Özel panel: kartlardan daha sakin, kenar vurgusu altın */
.ts-panel {
    position: relative;
    background: var(--ts-surface);
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-lg);
    padding: clamp(1.25rem, 2.6vw, 1.85rem);
}

.ts-panel--quiet {
    background: rgba(255, 255, 255, .022);
}

.ts-panel__title {
    font-family: var(--ts-serif);
    font-size: 1.12rem;
    margin: 0 0 .55rem;
    color: #fbf7ef;
}

.ts-panel__text {
    margin: 0;
    color: var(--ts-ink-muted);
    font-size: .95rem;
}

/* Kılavuz adımları */
.ts-steps {
    counter-reset: ts-step;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-step {
    counter-increment: ts-step;
    position: relative;
    padding: 1.5rem 1.35rem 1.4rem;
    background: rgba(255, 255, 255, .022);
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-lg);
}

.ts-step::before {
    content: counter(ts-step, decimal-leading-zero);
    display: block;
    font-family: var(--ts-serif);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ts-gold);
    margin-bottom: .85rem;
    letter-spacing: .02em;
}

.ts-step h3 {
    font-size: 1.05rem;
    margin: 0 0 .45rem;
}

.ts-step p {
    margin: 0;
    font-size: .93rem;
    color: var(--ts-ink-muted);
}

.ts-step__action {
    display: inline-block;
    margin-top: .9rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ts-gold-soft);
    text-decoration: none;
}

.ts-step__action:hover { color: var(--ts-gold-bright); text-decoration: underline; }

/* Kısayol kartları */
.ts-links {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.ts-link-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.2rem 1.25rem;
    background: var(--ts-surface);
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color .16s ease-out, background-color .16s ease-out;
}

.ts-link-card:hover,
.ts-link-card:focus-visible {
    border-color: var(--ts-line-gold);
    background: var(--ts-surface-2);
    text-decoration: none;
    color: inherit;
}

.ts-link-card__icon {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--ts-gold);
    border: 1px solid var(--ts-line-gold);
    border-radius: var(--ts-radius);
    background: rgba(201, 162, 39, .07);
}

.ts-link-card__title {
    font-family: var(--ts-serif);
    font-size: 1.02rem;
    color: #fbf7ef;
    margin: 0 0 .25rem;
}

.ts-link-card__text {
    margin: 0;
    font-size: .88rem;
    color: var(--ts-ink-muted);
}

/* Haber kartı */
.ts-news {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.ts-news-card {
    display: flex;
    flex-direction: column;
    background: var(--ts-surface);
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-lg);
    overflow: hidden;
    height: 100%;
}

.ts-news-card__media {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--ts-line);
    background: var(--ts-surface-2);
}

.ts-news-card__body {
    padding: 1.2rem 1.3rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.ts-news-card__meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .7rem;
    font-size: .76rem;
    color: var(--ts-ink-faint);
    letter-spacing: .04em;
}

.ts-news-card__title {
    font-size: 1.08rem;
    line-height: 1.35;
    margin: 0 0 .5rem;
}

.ts-news-card__title a {
    color: #fbf7ef;
    text-decoration: none;
}

.ts-news-card__title a:hover { color: var(--ts-gold-soft); }

.ts-news-card__text {
    margin: 0 0 1rem;
    font-size: .92rem;
    color: var(--ts-ink-muted);
}

.ts-news-card__more {
    margin-top: auto;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ts-gold-soft);
    text-decoration: none;
}

.ts-news-card__more:hover { color: var(--ts-gold-bright); text-decoration: underline; }

/* Etiket */
.ts-tag {
    display: inline-block;
    padding: .18rem .5rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 2px;
    border: 1px solid var(--ts-line-gold);
    color: var(--ts-gold-soft);
    background: rgba(201, 162, 39, .08);
}

.ts-tag--update {
    border-color: rgba(91, 143, 168, .4);
    color: #9cc2d4;
    background: rgba(91, 143, 168, .1);
}

.ts-tag--event {
    border-color: rgba(88, 160, 106, .4);
    color: #8fc79d;
    background: rgba(88, 160, 106, .1);
}

/* Dürüst boş durum */
.ts-empty {
    border: 1px dashed var(--ts-line);
    border-radius: var(--ts-radius-lg);
    padding: clamp(2rem, 5vw, 3rem) 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, .015);
}

.ts-empty__icon {
    color: var(--ts-gold-deep);
    margin-bottom: .9rem;
}

.ts-empty__title {
    font-family: var(--ts-serif);
    font-size: 1.15rem;
    color: #fbf7ef;
    margin: 0 0 .4rem;
}

.ts-empty__text {
    margin: 0 auto;
    max-width: 44ch;
    color: var(--ts-ink-muted);
    font-size: .94rem;
}

/* Uyarı / bilgi kutusu */
.ts-note {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border: 1px solid var(--ts-line-gold);
    border-left-width: 3px;
    border-radius: var(--ts-radius);
    background: rgba(201, 162, 39, .06);
    color: var(--ts-ink);
    font-size: .93rem;
}

.ts-note__icon {
    flex: none;
    color: var(--ts-gold);
    margin-top: .1rem;
}

.ts-note p:last-child { margin-bottom: 0; }

.ts-note--quiet {
    border-color: var(--ts-line);
    border-left-color: var(--ts-ink-faint);
    background: rgba(255, 255, 255, .022);
    color: var(--ts-ink-muted);
}

/* --------------------------------------------------------------------------
   10. Sayfa başlığı bandı (iç sayfalar)
   -------------------------------------------------------------------------- */
.ts-page-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 4.25rem) 0;
    border-bottom: 1px solid var(--ts-line-soft);
}

/* Başlık bandından sonra gelen sayfalar kendi boşluğunu .ts-section'dan alır.
   Eski/dokunulmamış şablonlar (kart ile başlayanlar) için üst boşluk gerekir. */
.ts-content { padding-top: clamp(2rem, 4vw, 3rem); }

.ts-content > .ts-section:first-child { padding-top: 0; }
.ts-content > .ts-section:last-child { padding-bottom: 0; }

.ts-page-head__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--ts-page-image);
    background-size: cover;
    background-position: 50% 38%;
    background-repeat: no-repeat;
}

.ts-page-head__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(7, 8, 11, .95) 0%, rgba(7, 8, 11, .84) 55%, rgba(7, 8, 11, .7) 100%),
        linear-gradient(180deg, rgba(7, 8, 11, .7), rgba(7, 8, 11, .94));
}

.ts-page-head__title {
    font-size: clamp(1.75rem, 4.2vw, 2.65rem);
    margin: 0;
}

.ts-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .9rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    color: var(--ts-ink-faint);
}

.ts-crumb a {
    color: var(--ts-ink-muted);
    text-decoration: none;
}

.ts-crumb a:hover { color: var(--ts-gold-soft); }

.ts-crumb li + li::before {
    content: "/";
    margin-right: .5rem;
    color: var(--ts-line);
}

/* Ana içerik alanı */
.ts-main { flex: 1 0 auto; }

/* Yönetici tarafından girilen uzun metin (haber / bilgi sayfaları) */
.ts-prose {
    max-width: 74ch;
    font-size: 1.02rem;
    line-height: 1.78;
    color: #ddd7cc;
}

.ts-prose > :first-child { margin-top: 0; }
.ts-prose > :last-child { margin-bottom: 0; }

.ts-prose h1,
.ts-prose h2,
.ts-prose h3,
.ts-prose h4 {
    margin: 2.1rem 0 .85rem;
    line-height: 1.28;
}

.ts-prose h1 { font-size: clamp(1.6rem, 3.4vw, 2.15rem); }
.ts-prose h2 { font-size: clamp(1.35rem, 2.8vw, 1.7rem); }
.ts-prose h3 { font-size: 1.2rem; }

.ts-prose p,
.ts-prose ul,
.ts-prose ol { margin: 0 0 1.15rem; }

.ts-prose ul,
.ts-prose ol { padding-left: 1.4rem; }

.ts-prose li { margin-bottom: .4rem; }

.ts-prose li::marker { color: var(--ts-gold-deep); }

.ts-prose a { color: var(--ts-gold-soft); }

.ts-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ts-radius-lg);
    border: 1px solid var(--ts-line);
    margin: 1.25rem 0;
}

.ts-prose blockquote {
    margin: 1.5rem 0;
    padding: .35rem 0 .35rem 1.25rem;
    border-left: 2px solid var(--ts-gold-deep);
    font-family: var(--ts-serif);
    font-style: italic;
    color: var(--ts-ink-muted);
}

.ts-prose code,
.ts-prose pre {
    font-family: var(--ts-mono);
    font-size: .9em;
}

.ts-prose pre {
    padding: 1rem 1.15rem;
    background: rgba(7, 8, 11, .6);
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius);
    overflow-x: auto;
}

.ts-prose hr {
    margin: 2rem 0;
    border-color: var(--ts-line);
}

.ts-prose table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
}

.ts-prose th,
.ts-prose td {
    padding: .6rem .8rem;
    border: 1px solid var(--ts-line);
    text-align: left;
}

.ts-prose th {
    background: rgba(255, 255, 255, .03);
    color: var(--ts-gold-soft);
}

.ts-content { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* --------------------------------------------------------------------------
   11. Tablolar
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ts-ink);
    --bs-table-border-color: var(--ts-line-soft);
    --bs-table-striped-bg: rgba(255, 255, 255, .022);
    --bs-table-striped-color: var(--ts-ink);
    --bs-table-hover-bg: rgba(201, 162, 39, .06);
    --bs-table-hover-color: #fbf7ef;
    margin-bottom: 0;
    font-size: .93rem;
    vertical-align: middle;
}

.table > thead th,
.table > thead td {
    font-family: var(--ts-sans);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ts-gold-soft);
    background: rgba(255, 255, 255, .025);
    border-bottom: 1px solid var(--ts-line);
    padding: .78rem .9rem;
    white-space: nowrap;
}

.table > tbody > tr > th,
.table > tbody > tr > td {
    padding: .72rem .9rem;
    border-bottom-color: var(--ts-line-soft);
}

.table > tbody > tr:last-child > td,
.table > tbody > tr:last-child > th { border-bottom: 0; }

.table > tbody > tr > th {
    font-family: var(--ts-sans);
    font-weight: 600;
    color: var(--ts-ink-muted);
    white-space: nowrap;
}

.table a { text-decoration: none; }
.table a:hover { text-decoration: underline; }

.table-responsive {
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-lg);
    background: rgba(255, 255, 255, .012);
}

/* Kart içindeki tablolar çift çerçeve almasın */
.card .table-responsive,
.ts-panel .table-responsive {
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Boş satır mesajı */
.table td.text-center:only-child,
.table tbody tr td[colspan] {
    color: var(--ts-ink-muted);
    padding-top: 1.7rem;
    padding-bottom: 1.7rem;
}

/* --------------------------------------------------------------------------
   12. Formlar
   -------------------------------------------------------------------------- */
.form-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ts-ink-muted);
    margin-bottom: .45rem;
}

.form-control,
.form-select {
    background-color: rgba(7, 8, 11, .55);
    border: 1px solid var(--ts-line);
    color: var(--ts-ink);
    border-radius: var(--ts-radius);
    padding: .65rem .85rem;
    transition: border-color .16s ease-out, box-shadow .16s ease-out;
}

.form-control::placeholder { color: var(--ts-ink-faint); }

.form-control:focus,
.form-select:focus {
    background-color: rgba(7, 8, 11, .75);
    border-color: var(--ts-gold);
    color: #fbf7ef;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
    outline: none;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: rgba(255, 255, 255, .03);
    color: var(--ts-ink-faint);
}

.form-check-input {
    background-color: rgba(7, 8, 11, .6);
    border-color: var(--ts-line);
}

.form-check-input:checked {
    background-color: var(--ts-gold);
    border-color: var(--ts-gold);
}

.form-check-input:focus {
    border-color: var(--ts-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}

.form-check-label { color: var(--ts-ink-muted); }

.form-text { color: var(--ts-ink-faint); }

.input-group-text {
    background: var(--ts-surface-2);
    border-color: var(--ts-line);
    color: var(--ts-ink-muted);
}

/* Doğrulama hataları */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--ts-err);
    background-image: none;
    padding-right: .85rem;
}

.form-control.is-invalid:focus {
    border-color: var(--ts-err);
    box-shadow: 0 0 0 3px rgba(200, 90, 80, .2);
}

.invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
    display: block;
    margin-top: .4rem;
    font-size: .84rem;
    color: #e29a92;
}

.invalid-feedback strong { font-weight: 600; }

/* Hata özeti listesi */
.ts-errors {
    border: 1px solid rgba(165, 52, 44, .45);
    border-left-width: 3px;
    border-radius: var(--ts-radius);
    background: rgba(165, 52, 44, .12);
    padding: .95rem 1.1rem;
    margin-bottom: 1.35rem;
}

.ts-errors__title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e29a92;
    margin: 0 0 .45rem;
}

.ts-errors ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .9rem;
    color: #edd4d0;
}

/* --------------------------------------------------------------------------
   13. Uyarılar, rozetler, sayfalama, sekmeler
   -------------------------------------------------------------------------- */
.alert {
    --bs-alert-border-radius: var(--ts-radius);
    border-width: 1px;
    border-left-width: 3px;
    padding: .9rem 1.1rem;
    font-size: .93rem;
}

.alert-danger {
    --bs-alert-color: #edd4d0;
    --bs-alert-bg: rgba(165, 52, 44, .12);
    --bs-alert-border-color: rgba(165, 52, 44, .45);
}

.alert-success {
    --bs-alert-color: #cfe6d5;
    --bs-alert-bg: rgba(88, 160, 106, .12);
    --bs-alert-border-color: rgba(88, 160, 106, .45);
}

.alert-warning {
    --bs-alert-color: var(--ts-gold-bright);
    --bs-alert-bg: rgba(201, 154, 42, .12);
    --bs-alert-border-color: var(--ts-line-gold);
}

.alert-info {
    --bs-alert-color: #cfe0e8;
    --bs-alert-bg: rgba(91, 143, 168, .12);
    --bs-alert-border-color: rgba(91, 143, 168, .45);
}

.badge {
    font-family: var(--ts-sans);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .68rem;
    padding: .35em .6em;
    border-radius: 2px;
}

.badge.bg-warning,
.badge.text-bg-warning {
    background-color: rgba(201, 154, 42, .14) !important;
    color: var(--ts-gold-soft) !important;
    box-shadow: inset 0 0 0 1px var(--ts-line-gold);
}

.badge.bg-primary,
.badge.text-bg-primary {
    background-color: rgba(91, 143, 168, .14) !important;
    color: #9cc2d4 !important;
    box-shadow: inset 0 0 0 1px rgba(91, 143, 168, .4);
}

.badge.bg-success,
.badge.text-bg-success {
    background-color: rgba(88, 160, 106, .14) !important;
    color: #8fc79d !important;
    box-shadow: inset 0 0 0 1px rgba(88, 160, 106, .4);
}

.pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--ts-ink-muted);
    --bs-pagination-border-color: var(--ts-line);
    --bs-pagination-hover-bg: rgba(201, 162, 39, .1);
    --bs-pagination-hover-color: var(--ts-gold-bright);
    --bs-pagination-hover-border-color: var(--ts-line-gold);
    --bs-pagination-focus-bg: rgba(201, 162, 39, .12);
    --bs-pagination-focus-color: var(--ts-gold-bright);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-bg: var(--ts-gold);
    --bs-pagination-active-border-color: var(--ts-gold);
    --bs-pagination-active-color: #14100a;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--ts-ink-faint);
    --bs-pagination-disabled-border-color: var(--ts-line-soft);
    --bs-pagination-border-radius: var(--ts-radius);
    margin-top: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    gap: .25rem;
}

.pagination .page-link { font-size: .88rem; }
.pagination .page-link:focus-visible { box-shadow: var(--ts-ring); }

.nav-tabs {
    --bs-nav-tabs-border-color: var(--ts-line);
    --bs-nav-tabs-link-hover-border-color: transparent transparent var(--ts-line-gold);
    --bs-nav-tabs-link-active-color: var(--ts-gold-bright);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--ts-gold);
    --bs-nav-link-color: var(--ts-ink-muted);
    --bs-nav-link-hover-color: var(--ts-gold-soft);
    gap: .25rem;
}

.nav-tabs .nav-link {
    border-width: 0 0 2px;
    border-radius: 0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .7rem 1rem;
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--ts-radius);
    --bs-nav-pills-link-active-bg: rgba(201, 162, 39, .14);
    --bs-nav-pills-link-active-color: var(--ts-gold-bright);
    --bs-nav-link-color: var(--ts-ink-muted);
    --bs-nav-link-hover-color: var(--ts-gold-soft);
}

.nav-pills .nav-link {
    font-size: .9rem;
    font-weight: 600;
    padding: .55rem .85rem;
    border: 1px solid transparent;
}

.nav-pills .nav-link.active {
    border-color: var(--ts-line-gold);
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--ts-ink);
    --bs-list-group-border-color: var(--ts-line);
    --bs-list-group-border-radius: var(--ts-radius);
    --bs-list-group-action-hover-bg: rgba(255, 255, 255, .03);
    --bs-list-group-action-hover-color: #fbf7ef;
}

.list-group-item { font-size: .93rem; }

.progress {
    --bs-progress-bg: rgba(255, 255, 255, .06);
    --bs-progress-bar-bg: var(--ts-gold);
    --bs-progress-height: .4rem;
    --bs-progress-border-radius: 999px;
}

/* Kaydedildi bildirimi (hesap formları) */
.fade-out {
    display: inline-block;
    font-size: .88rem;
    color: var(--ts-ok);
    animation: ts-fade-out 4s ease-in forwards;
}

@keyframes ts-fade-out {
    0%, 60% { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fade-out { animation: none; opacity: 1; }
}

.spinner-border { border-width: .16em; }
.spinner-border.text-primary { color: var(--ts-gold) !important; }

.modal-content {
    background: var(--ts-surface);
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-lg);
}

.modal-header,
.modal-footer { border-color: var(--ts-line); }

.carousel-caption {
    background: linear-gradient(180deg, transparent, rgba(7, 8, 11, .85));
    padding: 2rem 1rem 1.5rem;
}

/* --------------------------------------------------------------------------
   14. Hesap paneli / kenar çubuğu
   -------------------------------------------------------------------------- */
.ts-aside { position: relative; }

.ts-aside .card,
.ts-aside aside.card { margin-bottom: 1.25rem; }

.ts-aside .card-body { padding: 1.2rem 1.3rem; }

/* Sunucu durumu kutusu */
.ts-status__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .42rem 0;
    font-size: .92rem;
    border-bottom: 1px solid var(--ts-line-soft);
}

.ts-status__row:last-of-type { border-bottom: 0; }

.ts-status__label {
    color: var(--ts-ink-muted);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
}

.ts-status__value {
    font-family: var(--ts-serif);
    font-size: 1.05rem;
    color: #fbf7ef;
    font-variant-numeric: tabular-nums;
}

/* Hesap özeti */
.ts-account-head {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ts-line);
}

.ts-account-head__hello {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ts-ink-faint);
    margin: 0 0 .25rem;
}

.ts-account-head__name {
    font-family: var(--ts-serif);
    font-size: 1.3rem;
    color: #fbf7ef;
    margin: 0;
    word-break: break-word;
}

.ts-nav-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ts-ink-faint);
    margin: 1.25rem 0 .5rem;
}

/* Karakter kartları */
.ts-chars {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.ts-char {
    text-align: center;
    padding: 1.1rem .85rem;
    background: rgba(255, 255, 255, .022);
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-lg);
}

.ts-char__portrait {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--ts-radius);
    border: 1px solid var(--ts-line-gold);
    background: var(--ts-surface-2);
    display: block;
    margin: 0 auto .7rem;
}

.ts-char__name {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--ts-serif);
    font-size: 1rem;
    color: #fbf7ef;
    text-decoration: none;
}

.ts-char__name:hover { color: var(--ts-gold-soft); }

.ts-char__meta {
    margin: .45rem 0 0;
    font-size: .82rem;
    color: var(--ts-ink-muted);
    font-variant-numeric: tabular-nums;
}

/* Kimlik doğrulama sayfaları */
.ts-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2.5rem, 7vw, 5rem) 0;
    min-height: 68vh;
}

.ts-auth__card {
    width: 100%;
    max-width: 30rem;
    background: var(--ts-surface);
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-lg);
    box-shadow: var(--ts-shadow);
    padding: clamp(1.6rem, 4vw, 2.4rem);
}

.ts-auth__head {
    text-align: center;
    margin-bottom: 1.6rem;
}

.ts-auth__title {
    font-size: 1.55rem;
    margin: .75rem 0 .4rem;
}

.ts-auth__text {
    margin: 0;
    font-size: .92rem;
    color: var(--ts-ink-muted);
}

.ts-auth__foot {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--ts-line);
    text-align: center;
    font-size: .9rem;
    color: var(--ts-ink-muted);
}

.ts-auth__foot a { font-weight: 600; }

/* --------------------------------------------------------------------------
   15. İndirme sayfası
   -------------------------------------------------------------------------- */
.ts-dl {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.ts-dl-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    background: var(--ts-surface);
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-lg);
}

.ts-dl-card__icon {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ts-line-gold);
    border-radius: var(--ts-radius);
    background: rgba(201, 162, 39, .07);
    color: var(--ts-gold);
    overflow: hidden;
}

.ts-dl-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ts-dl-card__body {
    min-width: 0;
    flex: 1 1 auto;
}

.ts-dl-card__title {
    font-family: var(--ts-serif);
    font-size: 1.08rem;
    margin: 0 0 .2rem;
    color: #fbf7ef;
    word-break: break-word;
}

.ts-dl-card__text {
    margin: 0;
    font-size: .88rem;
    color: var(--ts-ink-muted);
    word-break: break-word;
}

.ts-dl-card__action { flex: none; }

/* Sıralı akış listesi */
.ts-flow {
    counter-reset: ts-flow;
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--ts-line);
}

.ts-flow li {
    counter-increment: ts-flow;
    position: relative;
    padding: 0 0 1.5rem 1.9rem;
}

.ts-flow li:last-child { padding-bottom: 0; }

.ts-flow li::before {
    content: counter(ts-flow);
    position: absolute;
    left: -.85rem;
    top: 0;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    font-family: var(--ts-serif);
    font-size: .88rem;
    color: var(--ts-gold);
    background: var(--ts-obsidian);
    border: 1px solid var(--ts-line-gold);
    border-radius: 50%;
}

.ts-flow h3 {
    font-size: 1rem;
    margin: .1rem 0 .35rem;
}

.ts-flow p {
    margin: 0;
    font-size: .93rem;
    color: var(--ts-ink-muted);
}

/* Sistem gereksinimleri tablosu ilk sütun */
.ts-req th[scope="row"],
.ts-req tbody th {
    width: 9rem;
    color: var(--ts-gold-soft);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   16. Alt bilgi
   -------------------------------------------------------------------------- */
.ts-footer {
    margin-top: auto;
    border-top: 1px solid var(--ts-line-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, .012), transparent);
    padding-top: clamp(2.5rem, 5vw, 3.75rem);
}

.ts-footer__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(16rem, 1.6fr) repeat(auto-fit, minmax(10rem, 1fr));
    padding-bottom: 2.5rem;
}

.ts-footer__about {
    max-width: 34ch;
    margin: 1rem 0 0;
    font-size: .92rem;
    color: var(--ts-ink-muted);
}

.ts-footer__title {
    font-family: var(--ts-sans);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ts-ink-faint);
    margin: 0 0 .9rem;
}

.ts-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ts-footer__list li { margin-bottom: .5rem; }

.ts-footer__list a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .92rem;
    color: var(--ts-ink-muted);
    text-decoration: none;
}

.ts-footer__list a:hover { color: var(--ts-gold-soft); }

.ts-footer__list img { max-height: 28px; width: auto; }

.ts-footer__bar {
    border-top: 1px solid var(--ts-line-soft);
    padding: 1.25rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: .84rem;
    color: var(--ts-ink-faint);
}

.ts-footer__bar a { color: var(--ts-ink-muted); text-decoration: none; }
.ts-footer__bar a:hover { color: var(--ts-gold-soft); }

/* --------------------------------------------------------------------------
   17. Duyarlılık
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ts-navbar .navbar-collapse {
        padding: .75rem 0 1rem;
        border-top: 1px solid var(--ts-line-soft);
        margin-top: .5rem;
    }

    .ts-navbar .nav-link { padding: .6rem .25rem; }

    .ts-navbar .nav-link.active::after { left: .25rem; right: auto; width: 1.6rem; }

    .ts-navbar .dropdown-menu {
        border: 0;
        background: transparent;
        box-shadow: none;
        padding-left: .9rem;
    }

    .ts-navbar .navbar-nav + .navbar-nav {
        margin-top: .75rem;
        padding-top: .75rem;
        border-top: 1px solid var(--ts-line-soft);
        gap: .5rem;
    }

    .ts-navbar .navbar-nav + .navbar-nav .btn { width: 100%; }

    .ts-hero__inner { max-width: none; }

    .ts-hero__scrim {
        background:
            linear-gradient(180deg, rgba(7, 8, 11, .82) 0%, rgba(7, 8, 11, .72) 40%, rgba(7, 8, 11, .96) 100%);
    }

    .ts-strip__item {
        flex-basis: 50%;
        border-bottom: 1px solid var(--ts-line-soft);
    }

    .ts-strip__item:nth-child(2n) { border-right: 0; }
}

@media (max-width: 575.98px) {
    .ts-cta { width: 100%; }
    .ts-cta-row { flex-direction: column; }
    .ts-strip__item { flex-basis: 100%; border-right: 0; }
    .ts-dl-card { flex-wrap: wrap; }
    .ts-dl-card__action { width: 100%; }
    .ts-dl-card__action .btn { width: 100%; }
    .ts-footer__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   18. Hareket ve yazdırma tercihleri
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .ts-hero__media { transform: none; }
}

@media (prefers-contrast: more) {
    :root,
    [data-bs-theme] {
        --ts-ink-muted: #d6d0c4;
        --ts-ink-faint: #bdb6a8;
        --ts-line: #444e61;
        --ts-line-gold: rgba(201, 162, 39, .6);
    }
}

@media print {
    .ts-header,
    .ts-footer,
    .ts-hero__media,
    .ts-page-head__media { display: none !important; }

    body { background: #fff; color: #000; }
}