/* Stil dosyaları burada @import ile değil, sayfa düzeninde tek tek bağlanır.
   @import edilen dosyanın adresine sürüm eklenemez; ana dosya değişse bile
   tarayıcı içeriye alınanların eski kopyasını kullanmayı sürdürür. Bağlantılar:
   app/layout/header.php ve app/auth/layout.php. */

@font-face {
    font-family: "Haskoy";
    src: url("../fonts/Haskoy-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 800;
}

@font-face {
    font-family: "Haskoy";
    src: url("../fonts/Haskoy-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: "Haskoy";
    src: url("../fonts/Haskoy-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "Haskoy";
    src: url("../fonts/Haskoy-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Haskoy";
    src: url("../fonts/Haskoy-Light.woff2") format("woff2");
    font-style: normal;
    font-weight: 300;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

*:focus { box-shadow: none !important; }
:focus-visible { outline: none !important; }

html {
    color-scheme: light;
    background: var(--color-background);
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--color-text);
    background: var(--color-background);
    font-family: var(--font-family-base);
    font-size: 14px;
    line-height: var(--line-height-base);
    /* `ordn` (ordinal) **açılmaz.** Yazı tipi bu özellikle rakamın ardındaki
       harfi sıra imine çeviriyor: "Auto1OfferLimit2000" ekranda
       "Auto1ºfferLimit2000" olarak çiziliyordu. Kod ve ad alanlarında rakam-harf
       komşuluğu sık ve özelliğin arayüzde bir karşılığı yok. */
}

/* Bootstrap'in kendi değişkenleri tema tokenlarına bağlanır. Hazır bileşenler
   (düğme, girdi, rozet) kendi renk ölçeğini getirirse arayüz iki ayrı gri
   ailesine bölünür; köprü burada kurulur ve iki tema da tek yerden beslenir. */
:root {
    /* Sidebar sütununun tek genişlik kaynağı: marka bloğu ve içerik kayması
       da buradan okur, üçü ayrı ayrı güncellenince kolon çizgisi kayıyordu. */
    --sidebar-width: 18rem;
    --bs-body-color: var(--color-text);
    /* Sayfa zemini değil yüzey rengi: Bootstrap girdilerin arka planını da bu
       değişkenden okur, sayfa grisine bağlanırsa bütün form alanları dolgulu
       görünür. Sayfa zeminini body kuralı verir. */
    --bs-body-bg: var(--color-surface);
    --bs-secondary-bg: var(--color-surface-muted);
    --bs-tertiary-bg: var(--color-surface-muted);
    --bs-emphasis-color: var(--color-text);
    --bs-secondary-color: var(--color-text-muted);
    --bs-tertiary-color: var(--color-text-subtle);
    --bs-border-color: var(--color-border-strong);
    --bs-border-color-translucent: var(--color-border);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-pill: var(--radius-pill);
    --bs-link-color: var(--color-link);
    --bs-link-hover-color: var(--color-primary-hover);
}

.app-shell {
    min-height: 100vh;
}

.app-navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1040;
    display: flex;
    align-items: stretch;
    min-height: 4rem;
    /* Sol boşluk marka bloğunun içindedir: blok sidebar sütununu tam
       kaplamalı ki sağ kenarındaki çizgi sidebar kenarıyla hizalansın. */
    padding: 0 1rem 0 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}


.app-navbar-start,
.app-navbar-actions,
.app-context {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* Marka bloğu sidebar genişliğindedir; kapatma düğmesi sağ kenarında, yani
   kapattığı sütunun tam üstünde durur. */
.app-navbar-start {
    width: var(--sidebar-width);
    flex: 0 0 auto;
    justify-content: space-between;
    padding: 0 0.75rem 0 1rem;
    border-right: 1px solid var(--color-border);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-text);
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

.app-brand:hover {
    color: var(--color-text);
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    color: var(--color-on-primary);
    background: var(--color-primary);
}

/* Fotoğrafı olan kullanıcıda daire baş harf değil resim taşır; kırpma
   daireye uyar, oran bozulmaz. */
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Marka işareti bir görseldir; kutu yalnızca ölçüyü ve karanlık temada gereken
   tabanı verir. */
.app-brand-mark,
.auth-brand-mark {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 0.1875rem;
    object-fit: contain;
    background: var(--brand-plate);
    border-radius: var(--radius-md);
}

.app-brand-mark {
    width: 2rem;
    height: 2rem;
}

.app-context {
    flex: 0 1 auto;
    padding-left: 2rem;
}

/* Üst çubuktaki ikon düğmeleri (kapatma, modüller, tema, bildirim) birer
   araçtır, sayfanın eylemi değil. Çerçeve taşımazlar; yalnızca üzerine
   gelindiğinde yüzey alırlar. */
.app-navbar .btn-icon {
    color: var(--color-text-muted);
    background: transparent;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
}



/* Açık durum yalnızca bir katman açan düğmeler içindir. Sidebar düğmesinin
   aria-expanded değeri sidebar'ın kendisini anlatır ve normalde de açıktır;
   kapsam dışında bırakılmazsa düğme sürekli seçili görünür. */
.app-navbar .btn-icon:hover,
.app-navbar .btn-icon:focus-visible,
.app-navbar .btn-icon[aria-expanded="true"]:not(.sidebar-toggle) {
    color: var(--color-text);
    background: var(--color-surface-muted);
    border-color: transparent;
}

/* align-items: üst çubuk marka bloğunun tam boy çizgisi için stretch; arama
   kutusu bunu devralırsa çubuğun altına taşar, kendi hizasını verir. */
.app-navbar-search {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 1.25rem;
}

/* Oturum menüsü: kimlik düğmesi ve altında açılan profil/çıkış listesi. */
.user-menu {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    color: var(--color-text);
}

.user-menu-trigger {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    max-width: 14rem;
    min-width: 0;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    color: var(--color-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
}

.user-menu-trigger:hover,
.user-menu-trigger[aria-expanded="true"] {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
}

.user-menu-caret {
    color: var(--color-text-muted);
}

.user-menu-identity {
    min-width: 0;
    text-align: left;
}

.user-menu-identity strong,
.user-menu-identity small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-identity small {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 400;
}

.user-menu-identity strong {
    font-size: 0.8125rem;
    font-weight: 600;
}

.user-menu-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1070;
    width: 15rem;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-floating);
}

.user-menu-popover-head {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.user-menu-item {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
    color: var(--color-text);
    font-size: 0.875rem;
    text-decoration: none;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

.user-menu-item .ui-icon {
    color: var(--color-text-muted);
}

.app-navbar-actions {
    justify-content: flex-end;
}

.user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.app-body {
    display: flex;
    min-height: 100vh;
    padding-top: 4rem;
}

.app-sidebar {
    position: fixed;
    top: 4rem;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
}

/* `hidden` niteliği menüde tek başına işe yaramaz: `.sidebar-link` ve
   `.sidebar-sublink` gibi kurallar `display: flex` yazıyor ve **yazar kuralı**
   tarayıcının `[hidden] { display: none }` varsayılanını her zaman ezer. Süzgeç
   satırları gizliyor sanılıp hiçbir şey kaybolmuyordu; kural bu yüzden burada
   ve `!important` ile. */
.app-sidebar [hidden] {
    display: none !important;
}

/* Menü içi arama. Kutu gezinmenin **üstünde** ve sabit durur: liste kayarken
   arama satırı kaybolmamalı, otuz küsur satırlık menüde aranan şey aşağıda
   olabilir. */
.sidebar-search {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    margin: 0.625rem 0.625rem 0;
    padding: 0 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text-subtle);
}

.sidebar-search:focus-within {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
}

.sidebar-search input {
    width: 100%;
    min-width: 0;
    padding: 0.4375rem 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 0.8125rem;
}

.sidebar-search input:focus {
    outline: none;
}

/* Tarayıcının kendi temizleme düğmesi iki farklı ikon demek olurdu. */
.sidebar-search input::-webkit-search-cancel-button {
    appearance: none;
}

/* Temizleme düğmesi yalnız kutuda yazı varken görünür; boş kutuda tıklanacak
   bir şey yokken durması kafa karıştırır. */
.sidebar-search-clear {
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    line-height: 0;
}

.sidebar-searching .sidebar-search-clear {
    display: inline-flex;
}

.sidebar-search-clear:hover {
    color: var(--color-text);
}

.sidebar-search-empty {
    margin: 0;
    padding: 1rem 0.625rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-align: center;
}

.sidebar-navigation {
    flex: 1;
    padding: 0.5rem 0.625rem 0.75rem;
    overflow-y: auto;
}

/* Arama açıkken bölümler zaten sonuçla açılıyor; ok işareti "kapalı" izlenimi
   vermesin diye susar. */
.sidebar-searching .sidebar-section-chevron {
    opacity: 0.3;
}

/* Menü grubu başlığı. Gezinme tek blok halinde uzayınca göz nereye bakacağını
   kaybeder; başlıklar listeyi okunur parçalara böler ve hangi bölümde
   olunduğunu söyler. */
.sidebar-group-label {
    display: block;
    padding: 1.125rem 0.625rem 0.375rem;
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sidebar-navigation > .sidebar-group-label:first-child {
    padding-top: 0.375rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.375rem;
    padding: 0.4375rem 0.625rem;
    color: var(--color-text-muted);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md);
}

/* Seçili ve üzerine gelinen durum renkle değil yüzeyle anlatılır: renk arayüzde
   yalnızca birkaç yerde kalırsa dikkat çekmeyi sürdürür. */
.sidebar-link:hover,
.sidebar-link:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

.sidebar-link.active {
    color: var(--color-text);
    font-weight: 600;
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.sidebar-link.disabled {
    cursor: default;
    opacity: 0.55;
}

.sidebar-link.disabled:hover {
    color: var(--color-text-muted);
    background: transparent;
}

/* Alt menülü modül. `<details>` açılıp kapanmayı kendi yönetir; buradaki iş
   yalnızca yerleşim ve okun dönmesi. */
.sidebar-section-summary {
    cursor: pointer;
    list-style: none;
}

.sidebar-section-summary::-webkit-details-marker {
    display: none;
}

.sidebar-section-chevron {
    margin-left: auto;
    transition: transform 0.15s ease;
}

.sidebar-section[open] > .sidebar-section-summary .sidebar-section-chevron {
    transform: rotate(180deg);
}

/* Alt satırlar üst modülün ikonu hizasından başlar ve sol çizgiyle ona
   bağlanır: hangi modüle ait oldukları girintiden değil çizgiden okunur. */
.sidebar-section-body {
    display: flex;
    flex-direction: column;
    margin: 0.125rem 0 0.25rem 1.3rem;
    padding-left: 0.225rem;
    border-left: 1px solid var(--color-border);
}

.sidebar-sublink {
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.3125rem 0.625rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: var(--radius-md);
}

.sidebar-sublink:hover,
.sidebar-sublink:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

.sidebar-sublink.active {
    color: var(--color-text);
    font-weight: 600;
    background: var(--color-surface-muted);
}

/* İç katlama: uzun alt listeler ikinci bir <details> ile toplanır — ad
   verilmiş bölümler (İK'daki CV) ve her modülün sonundaki Tanımlar. Başlık
   alt bağlantıyla (`.sidebar-sublink`) aynı boy ve kalınlıkta durur ki liste
   iki ayrı dil konuşmasın; katlanabildiği yalnız ok işaretinden okunur. */
.sidebar-subsection-summary {
    display: flex;
    align-items: center;
    min-height: 2rem;
    margin-top: 0.125rem;
    padding: 0.3125rem 0.625rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    list-style: none;
}

.sidebar-subsection-summary::-webkit-details-marker {
    display: none;
}

.sidebar-subsection-summary:hover,
.sidebar-subsection-summary:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

.sidebar-subsection[open] > .sidebar-subsection-summary .sidebar-section-chevron {
    transform: rotate(180deg);
}

/* Üst bölümün sol çizgisi zaten aidiyeti gösteriyor; ikinci çizgi yalnız
   yarım girintiyle başlar, yoksa üçüncü seviyede satırlar daralırdı. */
.sidebar-subsection-body {
    display: flex;
    flex-direction: column;
    margin: 0 0 0.25rem 0.5rem;
    padding-left: 0.375rem;
    border-left: 1px solid var(--color-border);
}

.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.sidebar-footer strong {
    margin-left: auto;
    color: var(--color-success);
}

.system-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--color-success);
    border-radius: 50%;
}

.sidebar-backdrop {
    display: none;
}

.app-main {
    width: calc(100% - var(--sidebar-width));
    min-width: 0;
    margin-left: var(--sidebar-width);
}

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.75rem 1rem;
}

.page-title {
    margin: 0;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.page-description {
    max-width: 55rem;
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Başlığın sağındaki serbest alan. Sayfa buraya kaydın en belirleyici tek
   bilgisini koyar; ekranda ilk okunacak yerdir. */
.page-aside {
    display: flex;
    flex: 0 1 auto;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

/* Yaşam döngüsü rozeti: kaydın ne olduğunu tek bakışta söyler. "Spam", "Pasif
   Müşteri" ya da "Tedarikçi" olan bir kayıtta temsilcinin yapacağı iş baştan
   değişir, bu yüzden ekrandaki tek geniş renkli öğe budur. Renk döngü
   tanımından gelir (`--lifecycle`); zemin, kenarlık ve halka ondan türetilir. */
.page-lifecycle {
    display: inline-flex;
    gap: 0.75rem;
    align-items: center;
    min-width: 17rem;
    max-width: 24rem;
    padding: 0.5625rem 1.25rem;
    background: color-mix(in srgb, var(--lifecycle) 12%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--lifecycle) 32%, transparent);
    border-left: 4px solid var(--lifecycle);
    border-radius: var(--radius-lg);
}

.page-lifecycle-dot {
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    background: var(--lifecycle);
    border-radius: 50%;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--lifecycle) 24%, transparent);
}

.page-lifecycle-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.page-lifecycle-text small {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-lifecycle-text strong {
    overflow: hidden;
    color: color-mix(in srgb, var(--lifecycle) 88%, var(--color-text));
    font-size: 1.0625rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Dar ekranda rozet başlığın altına iner ve satırı tek başına kaplar. */
@media (max-width: 48rem) {
    .page-header {
        flex-wrap: wrap;
    }

    .page-lifecycle {
        min-width: 0;
        max-width: none;
    }
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-content {
    padding: 0 1.75rem 2rem;
}

/*
 * Ekranı boyuna dolduran sayfa gövdesi (`$pageContentClass = 'page-content-fill'`).
 *
 * Varsayılan gövde blok akışındadır ve içeriği kadar uzar; takvim gibi bir
 * ızgaranın kalan yüksekliği paylaşabilmesi için zincirin **kabuktan** aşağı
 * inmesi gerekir — bir kutu, üstündeki kutunun yüksekliğini kendisi
 * belirleyemez. `:has()` ile yalnızca isteyen sayfada kurulur; kalan bütün
 * ekranlar blok akışında bırakılır.
 */
.app-main:has(> .page-content-fill) {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 4rem);
}

.page-content-fill {
    display: flex;
    flex: 1;
    flex-direction: column;
    /* Taşan içerik dışarı sızmasın diye: flex öğesinin varsayılan alt sınırı
       `min-content`tır ve bu, iç kaydırmayı imkânsız kılar. */
    min-height: 0;
}

.page-content-fill > * {
    flex: 1;
    min-height: 0;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--color-text-muted);
    --bs-breadcrumb-item-active-color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.sidebar-toggle {
    display: inline-flex;
}

/* Geniş ekranda sidebar kapatıldığında içerik tam genişliğe yayılır. */
@media (min-width: 992px) {
    .app-sidebar {
        transition: transform 180ms ease;
    }

    .app-main {
        transition: width 180ms ease, margin-left 180ms ease;
    }

    html[data-sidebar="collapsed"] .app-sidebar {
        transform: translateX(-100%);
    }

    html[data-sidebar="collapsed"] .app-main {
        width: 100%;
        margin-left: 0;
    }

    /* Sidebar kapalıyken marka bloğu sütun genişliğini tutmaz: altında
       ayıracak bir sütun kalmadığı için çizgi de kalkar. */
    html[data-sidebar="collapsed"] .app-navbar-start {
        width: auto;
        border-right: 0;
    }
}

/* minmax(0, 1fr): grid item'ının varsayılan min-width: auto değeri, geniş grid
   tablosunun sütunu şişirip sayfayı yatay taşırmasını engeller. */
.component-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.showcase-section {
    min-width: 0;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.showcase-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.showcase-heading h2 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.showcase-heading p {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
}

.showcase-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

/* İpucu metni iki satıra taştığında gövde satır yüksekliğiyle (1.6) çiziliyor
   ve alanın altında ayrı bir paragraf gibi duruyordu. 1.2 ile satırlar
   birbirine yaklaşır, ipucu ait olduğu alanla tek blok olarak okunur. */
.form-text {
    display: block;
    margin-top: 0.375rem;
    line-height: 1.2;
    color: var(--color-text-muted);
}

@media (max-width: 991.98px) {
    .app-navbar-start {
        width: auto;
        gap: 0.25rem;
        padding-right: 0.25rem;
        border-right: 0;
    }

    .app-brand-name {
        display: none;
    }

    .app-context {
        margin-left: 0.5rem;
    }

    .app-navbar-search {
        padding: 0 0.75rem;
    }

    .app-sidebar {
        transform: translateX(-100%);
        transition: transform 180ms ease;
    }

    .app-sidebar.open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 4rem 0 0;
        z-index: 1025;
        display: block;
        background: var(--color-overlay);
        border: 0;
    }

    .app-main {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .app-navbar {
        padding-right: 0.625rem;
        padding-left: 0.625rem;
    }

    .app-navbar-search {
        padding: 0 0.5rem;
    }

    .user-menu {
        display: none;
    }

    .page-header {
        align-items: stretch;
        flex-direction: column;
        padding: 1rem;
    }

    .page-content {
        padding: 0 1rem 1.5rem;
    }

    .showcase-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

a {
    color: var(--color-link);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-md);
}

/* Birincil düğme tema tokenından beslenir; Bootstrap'in kendi mavisi
   kullanılmaz. */
.btn-primary {
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-color: var(--color-on-primary);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}

/* İkincil eylem çerçeveli ve nötrdür: sayfada tek bir renkli düğme kalırsa
   hangisinin ana eylem olduğu tartışmasızdır. */
.btn-light {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-surface);
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-surface-muted);
    --bs-btn-hover-border-color: var(--color-border-strong);
    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: var(--color-surface-muted);
    --bs-btn-active-border-color: var(--color-border-strong);
    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-bg: var(--color-surface);
    --bs-btn-disabled-border-color: var(--color-border);
}

.form-control,
.form-select {
    font-size: 0.875rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
}

.form-switch { display: flex; align-items: center; gap: 5px; padding-left: 0; }
.form-switch .form-check-input { width: 32px; height: 17px; margin: 0; }
.form-switch .form-check-label { line-height: 1.3; }

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   Oturum: firma göstergesi, çıkış düğmesi ve oturum ekranları
   ========================================================================== */

.app-company {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    line-height: 1.2;
    text-decoration: none;
}

.app-company-label {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.app-company strong {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-company-switchable:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

/* Oturum ekranları: giriş, parola belirleme, firma seçimi ----------------- */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--color-background);
}

.auth-card {
    width: min(24rem, 100%);
    padding: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

.auth-brand-mark {
    width: 2.25rem;
    height: 2.25rem;
}

.auth-brand-name {
    font-size: 1.25rem;
    font-weight: 700;
}

.auth-title {
    margin: 0 0 0.375rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.auth-description {
    margin: 0 0 1.25rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-field .form-label {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.auth-hint {
    display: block;
    margin-top: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* Parolayı göster düğmesi alanın içinde durur; ayrı bir kutu gibi görünmez. */
.auth-password {
    position: relative;
}

.auth-password .form-control {
    padding-inline-end: 4rem;
}

.auth-password-toggle {
    position: absolute;
    inset-block: 1px;
    inset-inline-end: 1px;
    padding-inline: 0.75rem;
    border: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--color-text-muted);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
}

.auth-password-toggle:hover {
    color: var(--color-primary);
}

.auth-submit {
    margin-top: 0.25rem;
    padding-block: 0.5rem;
    font-weight: 600;
}

.auth-company-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.auth-company {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    text-align: start;
}

.auth-company:hover {
    border-color: var(--color-primary);
    background: var(--color-surface-muted);
}

.auth-company-name {
    font-weight: 600;
}

.auth-company-code {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.auth-logout {
    display: inline-block;
    margin-top: 1.25rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.auth-card .alert {
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
}

/* Giriş yolu sekmeleri, kod alanı ve iki adımlı doğrulama --------------- */

.auth-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.auth-tab {
    flex: 1;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.auth-tab.active {
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.auth-code {
    font-size: 1.125rem;
    letter-spacing: 0.35em;
    text-align: center;
}

.auth-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8125rem;
}

.auth-card-wide {
    width: min(30rem, 100%);
}

/* Proje referans sayfası galeriyle künyeyi yan yana koyar ve oturumsuz
   kartın 24rem'ine sığmaz.
   Kural burada durur, `components.css`te değil: `.auth-card` genişliği
   `width` ile veriyor ve main.css components'ten SONRA yükleniyor —
   components'e yazılan `max-width` hiç uygulanmıyordu, sayfa telefon
   genişliğinde kalıyordu. */
.public-card-wide {
    width: min(76rem, 100%);
    max-width: none;
}

.auth-status {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.auth-status-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.auth-status small {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.auth-danger {
    color: var(--color-danger);
}

/* Karekod her iki temada da okunabilir olmalı: koyu temada beyaz zemin kalır. */
.auth-qr {
    display: inline-flex;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: #ffffff;
}

.auth-qr svg {
    display: block;
    width: 13.75rem;
    height: 13.75rem;
}

.auth-secret {
    display: block;
    margin: 0.5rem 0 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
}

.auth-recovery {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-warning-soft);
}

.auth-recovery p {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.8125rem;
}

.auth-recovery ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem 1rem;
    margin: 0;
    padding-inline-start: 1.25rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.875rem;
}

/* ==========================================================================
   Profil ekranı
   ========================================================================== */

.profile-layout {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Kimlik kartı.
   Üstte kurumsal şerit, altında kimlik ve kapsam bilgisi. Şerit markanın
   rengini taşır; kart gövdesi panelin geri kalanıyla aynı yüzeydedir. */
.profile-hero {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    overflow: hidden;
}

.profile-hero-cover {
    height: 5.5rem;
    background:
        radial-gradient(circle at 88% -40%, rgb(255 255 255 / 22%) 0%, transparent 60%),
        linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}

.profile-hero-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.5rem 1.25rem;
}

/* Yalnızca avatar şeridin üzerine taşar; ad ve rozetler kart yüzeyinde
   kalmalıdır, aksi halde renkli zemin üzerinde okunmaz. */
.profile-hero-identity {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    min-width: 0;
}

.profile-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    margin-top: -3.25rem;
    overflow: hidden;
    border: 3px solid var(--color-surface);
    border-radius: 50%;
    color: var(--color-on-primary);
    background: var(--color-primary);
    box-shadow: var(--shadow-sm);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Yükleme ve kaldırma düğmeleri fotoğrafın alt şeridinde durur; yalnızca
   üzerine gelince ya da klavye odağı içerideyken görünür. */
.profile-avatar-actions {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 0.1875rem;
    justify-content: center;
    padding: 0.125rem;
    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.profile-avatar:hover .profile-avatar-actions,
.profile-avatar:focus-within .profile-avatar-actions {
    opacity: 1;
}

.profile-avatar-actions .btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
}

.profile-hero-copy {
    padding-bottom: 0.125rem;
    min-width: 0;
}

.profile-hero-copy h2 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.profile-hero-copy p {
    margin: 0.125rem 0 0.625rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.profile-hero-side {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.125rem;
}

.profile-hero-action {
    font-size: 0.8125rem;
    font-weight: 600;
}

.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-badge-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentcolor;
}

.profile-badge-success {
    color: var(--color-success);
    background: var(--color-success-soft);
}

.profile-badge-muted {
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
}

/* Kapsam bilgileri: dikey ayraçlarla ayrılmış künye şeridi. */
.profile-hero-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-muted);
}

.profile-hero-facts > div {
    padding: 0.875rem 1.5rem;
    border-inline-start: 1px solid var(--color-border);
}

.profile-hero-facts > div:first-child {
    border-inline-start: 0;
}

.profile-hero-facts dt,
.profile-facts dt {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-hero-facts dd,
.profile-facts dd {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
}

@media (max-width: 767px) {
    .profile-hero-facts > div {
        border-inline-start: 0;
        border-top: 1px solid var(--color-border);
    }

    .profile-hero-facts > div:first-child {
        border-top: 0;
    }
}

/* Sekmeler */
.profile-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.profile-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
}

.profile-tab.active {
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.profile-grid-single {
    grid-template-columns: 1fr;
}

/* Az içerikli kart tam satıra yayılmaz; sola yaslı, okunur genişlikte durur. */
.profile-card-narrow {
    max-width: 36rem;
}

.profile-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    overflow: hidden;
}

.profile-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.profile-card-header h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
}

.profile-card-header p {
    margin: 0.125rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.profile-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.profile-card-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-muted);
}

.profile-card-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.25rem;
}

.profile-field .form-label {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.profile-field small {
    display: block;
    margin-top: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.profile-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
}

.profile-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    margin: 0;
}

.profile-note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.profile-danger {
    color: var(--color-danger);
}

.profile-setup {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

/* Karekod her iki temada da okunabilir olmalı. */
.profile-qr {
    display: inline-flex;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: #ffffff;
}

.profile-qr svg {
    display: block;
    width: 11.5rem;
    height: 11.5rem;
}

.profile-secret {
    align-self: stretch;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
}

.profile-code {
    letter-spacing: 0.35em;
    text-align: center;
}

.profile-recovery {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-warning-soft);
}

.profile-recovery p {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.8125rem;
}

.profile-recovery ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.25rem 1rem;
    margin: 0 0 0.75rem;
    padding-inline-start: 1.25rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.875rem;
}

.profile-activity {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-activity li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.profile-activity-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
}

.profile-activity-mark.is-success {
    color: var(--color-success);
    background: var(--color-success-soft);
}

.profile-activity-mark.is-failure {
    color: var(--color-danger);
    background: var(--color-danger-soft, rgb(198 40 40 / 12%));
}

.profile-activity-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-activity-copy strong {
    font-size: 0.8125rem;
    font-weight: 600;
}

.profile-activity-copy small {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}