/* Sitenin tek teması (docs/mulakat2.md §12). <body class="ds"> base.html'de sabittir;
   .ds sınıfı ortak bileşen kurallarının kapsamıdır. */

* {
    box-sizing: border-box;
}

body.ds {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

.ds h1,
.ds h2,
.ds h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.ds p {
    max-width: var(--measure);
}

.ds :focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
}

/* Gezinme çubuğu */
.ds .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--line);
}

/* Logo (§12.6): işaret + iki satırlı yazı; "Simülatörü" marka renginde */
.ds .navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
    text-decoration: none;
}

.ds .navbar__logo {
    flex: none;
    width: 36px;
    height: 36px;
}

.ds .navbar__name b {
    display: block;
    color: var(--violet);
    font-weight: 800;
}

.ds .navbar__ai {
    margin-left: 4px;
    padding: 2px 5px;
    background: var(--sun);
    border-radius: var(--radius-badge);
    color: var(--on-sun);
    font-size: 0.7rem;
    letter-spacing: 0;
    vertical-align: 2px;
}

.ds .navbar__links {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ds .navbar__links a {
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
}

.ds .navbar__links a {
    text-decoration: none;
}

.ds .navbar__links a:hover {
    color: var(--violet);
}

/* Dil düğmesi (§2.2 iki dilli arayüz): diğer dilin kodunu gösterir, POST ile çerezi değiştirir */
.ds .navbar__lang {
    display: inline;
    margin: 0;
}

.ds .navbar__lang-button {
    padding: 1px 10px;
    background: transparent;
    border: 2px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.ds .navbar__lang-button:hover {
    border-color: var(--violet);
    color: var(--violet);
}

/* Profil menüsü: sağ uçta avatar + ad; açılan kutuda hesap bilgileri, çıkış ve hesap silme.
   <details> kullanılır (JavaScript olmadan da açılır), dışarı tıklama static/js/navbar.js'de. */
.ds .profile {
    position: relative;
}

.ds .profile__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 3px var(--space-3) 3px 3px;
    border: 2px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.ds .profile__button::-webkit-details-marker {
    display: none;
}

.ds .profile__button:hover,
.ds .profile[open] .profile__button {
    border-color: var(--violet);
}

.ds .profile__avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--violet);
    border-radius: 50%;
    color: var(--on-violet);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.ds .profile__avatar--lg {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
}

.ds .profile__name {
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds .profile__chevron {
    color: var(--ink-soft);
    transition: transform 0.15s;
}

.ds .profile[open] .profile__chevron {
    transform: rotate(180deg);
}

.ds .profile__panel {
    position: absolute;
    top: calc(100% + var(--space-3));
    right: 0;
    z-index: 20;
    width: 300px;
    max-width: calc(100vw - 2 * var(--space-4));
    padding: var(--space-4);
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius-block);
    box-shadow: 0 6px 0 var(--line);
}

.ds .profile__who {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ds .profile__ident {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ds .profile__ident strong {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.2;
}

.ds .profile__email {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds .profile__facts {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
}

.ds .profile__facts > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
}

.ds .profile__facts dt {
    color: var(--ink-soft);
}

.ds .profile__facts dd {
    margin: 0;
    font-weight: 500;
    text-align: right;
}

.ds .profile__actions {
    margin-top: var(--space-2);
}

.ds .profile__actions form {
    margin: 0;
}

/* Çıkış bir POST formu olduğu için buton, menü satırı gibi görünecek şekilde sıfırlanır */
.ds .profile__item {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    border-radius: var(--radius-badge);
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ds .profile__item:hover {
    background: var(--bg);
    color: var(--violet);
}

/* Geri alınamaz işlem: menünün en altında ve sönük; üzerine gelince coral dolgu (coral üstünde koyu yazı) */
.ds .profile__item--danger {
    color: var(--ink-soft);
}

.ds .profile__item--danger:hover {
    background: var(--coral);
    color: var(--on-coral);
}

/* Dar ekranda (375px) logo ve bağlantılar sığacak şekilde küçülür; sığmazsa bağlantılar alta geçer */
@media (max-width: 480px) {
    .ds .navbar {
        padding: var(--space-3) var(--space-4);
    }

    .ds .navbar__brand {
        gap: var(--space-2);
        font-size: 0.95rem;
    }

    .ds .navbar__logo {
        width: 30px;
        height: 30px;
    }

    /* Logo + bağlantılar + dil düğmesi sığmazsa bağlantılar logonun altına, sağa hizalı geçer */
    .ds .navbar {
        flex-wrap: wrap;
        row-gap: var(--space-2);
    }

    .ds .navbar__links {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: var(--space-3);
    }

    /* Dar ekranda yalnızca avatar görünür */
    .ds .profile__name {
        display: none;
    }

    .ds .profile__button {
        padding-right: var(--space-2);
    }
}

/* Bildirim mesajları */
.ds .messages {
    max-width: 480px;
    margin: var(--space-4) auto 0;
    padding: 0;
    list-style: none;
}

.ds .messages li {
    margin-bottom: var(--space-2);
    padding: 10px var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 6px solid var(--mint);
    border-radius: var(--radius-badge);
    color: var(--ink);
}

/* Butonlar (§12.3): pill, 52px, hover'da yukarı kalkıp düz gölge belirir */
.ds .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--button-height);
    padding: 0 var(--space-8);
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ds .btn--primary {
    background: var(--violet);
    color: var(--on-violet);
}

.ds .btn--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--violet-deep);
}

.ds .btn--primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 0 0 var(--violet-deep);
}

.ds .btn--ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--ink);
}

.ds .btn--ghost:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px var(--ink), 0 4px 0 var(--ink);
}

.ds .btn:disabled {
    background: var(--line);
    color: var(--ink-soft);
    cursor: not-allowed;
}

/* Mülakat türü rengi (§12.1): kapsayıcıya type--* sınıfı verilir, içindekiler
   var(--type-color) / var(--type-ink) ile aynı rengi kullanır. */
body.ds,
.ds .type--technical { --type-color: var(--violet); --type-ink: var(--on-violet); }
.ds .type--behavioral { --type-color: var(--coral); --type-ink: var(--on-coral); }
.ds .type--mixed { --type-color: var(--sun); --type-ink: var(--on-sun); }

/* Puan aralığı rengi (§12.1): 1-4 coral, 5-7 sun, 8-10 mint. Sınıf score_band filtresinden gelir. */
.ds .band-low { --band: var(--coral); --band-ink: var(--on-coral); }
.ds .band-mid { --band: var(--sun); --band-ink: var(--on-sun); }
.ds .band-high { --band: var(--mint); --band-ink: var(--on-mint); }

/* Küçük rozetler (§12.3: 8px köşe) */
.ds .badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.ds .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-badge);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.7;
}

.ds .badge--type {
    background: var(--type-color);
    border-color: var(--type-color);
    color: var(--type-ink);
}

.ds .badge .flag {
    width: 22px;
    height: 15px;
    border-radius: 3px;
}

.ds .badges__note {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.ds .score-badge {
    display: inline-block;
    padding: 2px var(--space-3);
    background: var(--band);
    border-radius: var(--radius-badge);
    color: var(--band-ink);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
}

/* Ekran okuyucuya açık, görsel olarak gizli */
.ds .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hata bildirimi */
.ds .notice {
    padding: var(--space-4) var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 6px solid var(--coral);
    border-radius: var(--radius-block);
}

.ds .notice p {
    margin: 0;
}

.ds .site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4) var(--space-12);
    text-align: center;
    border-top: 2px solid var(--line);
}

.ds .site-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 800;
}

.ds .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-6);
}

.ds .site-footer__links a {
    color: var(--ink-soft);
    font-weight: 600;
}

.ds .site-footer__links a:hover {
    color: var(--violet);
}

.ds .site-footer__note {
    color: var(--ink-soft);
    font-size: 0.85rem;
}

/* Arka planda gönderilen formların bekleme kutusu (templates/_async_progress.html) */
.ds .async-progress {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    padding: var(--space-6) var(--space-4);
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius-block);
    text-align: center;
}

.ds .async-progress[hidden],
.ds .notice[hidden] {
    display: none;
}

.ds .async-progress__dots {
    display: inline-flex;
    gap: 6px;
}

.ds .async-progress__dots i {
    width: 10px;
    height: 10px;
    background: var(--violet);
    border-radius: var(--radius-pill);
    animation: async-pulse 1.2s ease-in-out infinite;
}

.ds .async-progress__dots i:nth-child(2) { animation-delay: 0.15s; }
.ds .async-progress__dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes async-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.ds .async-progress__step {
    margin: 0;
    font-weight: 700;
}

.ds .async-progress__meta {
    display: grid;
    gap: 2px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
    .ds *,
    .ds *::before,
    .ds *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}