/* ==========================================================================
   SZUTEST Kamuya Açık Portal — Tasarım Sistemi
   Bootstrap 5.3 üzerine kurulu; jQuery bağımlılığı yoktur.

   Tema dili **Industry** tasarım sistemidir
   (kaynak: `SZUTEST portal modern tasarım/_ds/industry-<kimlik>/styles.css`):
   açık teknik zemin, tek vurgu rengi olarak çelik mavisi, Barlow Condensed
   başlıklar + Barlow gövde metni, kare köşeler, ince (hairline) çerçeveler.

   Palet (Industry):
     zemin #f2f2f3 · yüzey #e9e9ea · metin #1d1f20 · vurgu #5980a6

   ⚠️ Tasarım sisteminin blueprint "registration mark" (köşe +) işaretleri ve
   `.blueprint` / `.corner` sınıfları **projeye taşınmaz** (2026-10-01 kararı):
   çerçeveler ince çizgi olarak kalır, köşelere + çizilmez.
   ========================================================================== */

:root {
    /* ------------------------------------- Industry tasarım token'ları ---- */
    --color-bg: #f2f2f3;
    --color-surface: #e9e9ea;
    --color-text: #1d1f20;
    --color-accent: #5980a6;
    --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

    --color-neutral-100: #f5f5f8;
    --color-neutral-200: #e7e7ea;
    --color-neutral-300: #d4d4d7;
    --color-neutral-400: #b7b7ba;
    --color-neutral-500: #98989b;
    --color-neutral-600: #7a7a7d;
    --color-neutral-700: #5d5d60;
    --color-neutral-800: #424244;
    --color-neutral-900: #2b2b2d;

    --color-accent-100: #eef6ff;
    --color-accent-200: #d6ebff;
    --color-accent-300: #b5d9fd;
    --color-accent-400: #94bce3;
    --color-accent-500: #749dc4;
    --color-accent-600: #597ea3;
    --color-accent-700: #416180;
    --color-accent-800: #2c455d;
    --color-accent-900: #1d2d3d;

    --font-heading: "Barlow Condensed", system-ui, sans-serif;
    --font-heading-weight: 600;
    --font-body: "Barlow", system-ui, sans-serif;

    --space-1: 3.4px;
    --space-2: 6.8px;
    --space-3: 10.2px;
    --space-4: 13.6px;
    --space-6: 20.4px;
    --space-8: 27.2px;

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 7px;

    --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
    --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

    /* ---------------------------------------------- Bootstrap tema eşlemesi */
    /* Vurgu: Industry çelik mavisi · ikincil: nötr 700 */
    --bs-primary: #5980a6;
    --bs-primary-rgb: 89, 128, 166;
    --bs-secondary: #5d5d60;
    --bs-secondary-rgb: 93, 93, 96;

    /* Durum renkleri anlamsaldır (dekoratif değil) — sonuç bildirimi için korunur */
    --bs-success: #019953;
    --bs-success-rgb: 1, 153, 83;
    --bs-info: #416180;
    --bs-info-rgb: 65, 97, 128;
    --bs-warning: #e2c701;
    --bs-warning-rgb: 226, 199, 1;
    --bs-danger: #f00003;
    --bs-danger-rgb: 240, 0, 3;
    --bs-light: #e7e7ea;
    --bs-light-rgb: 231, 231, 234;
    --bs-dark: #1d1f20;
    --bs-dark-rgb: 29, 31, 32;

    --bs-body-font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-bg);
    --bs-heading-color: var(--color-text);
    --bs-headings-font-weight: var(--font-heading-weight);
    --bs-link-color: var(--color-accent-700);
    --bs-link-color-rgb: 65, 97, 128;
    --bs-link-hover-color: var(--color-accent-900);

    /* Industry: kare köşeler — Bootstrap yarıçaplarının tamamı sıfırlanır */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-pill: 0;
    --bs-border-radius-xxl: 0;
    --bs-btn-border-radius: 0;
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-modal-border-radius: 0;
    --bs-badge-border-radius: 0;
    --bs-dropdown-border-radius: 0;
    --bs-accordion-border-radius: 0;

    /* Industry gölgeleri — zemine göre ayarlı, mürekkep tonlu */
    --bs-box-shadow-sm: var(--shadow-sm);
    --bs-box-shadow: var(--shadow-md);
    --bs-box-shadow-lg: var(--shadow-lg);

    --bs-transition-base: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
    --bs-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;

    /* Zemin ve yüzeyler */
    --bs-tertiary-bg: var(--color-surface);
    --bs-secondary-bg: var(--color-neutral-200);
    --bs-border-color: var(--color-divider);

    /* ---------------------------------------------------- Portal kısayolları */
    --szu-primary: var(--color-accent);
    --szu-primary-dark: var(--color-accent-800);
    --szu-primary-light: var(--color-accent-100);
    --szu-primary-soft: var(--color-accent-200);
    --szu-accent: var(--color-accent);
    --szu-ink: var(--color-text);
    --szu-muted: var(--color-neutral-700);
    --szu-border: var(--color-divider);
    --szu-surface: var(--color-bg);
    --szu-surface-alt: var(--color-surface);
    --szu-success: var(--bs-success);
    --szu-warning: var(--bs-warning);
    --szu-danger: var(--bs-danger);

    /* ⚠️ Modül başına renk kodu (eski --szu-c1 … --szu-c7) KALDIRILDI:
       Industry mono bir palettir, kartlar tek vurgu rengini paylaşır. */
    --szu-mod: var(--color-accent);

    --szu-radius: 0;
    --szu-radius-sm: 0;
    --szu-shadow: var(--shadow-sm);
    --szu-shadow-hover: var(--shadow-md);
}

/* ------------------------------------------------------------- Temel tipografi */

html {
    font-size: 15px;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--szu-ink);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    letter-spacing: 0.01em;
}

/* Industry etkileşim durumları: tarayıcı varsayılanı değil, vurgu rengi halkası */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

::selection {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

a {
    color: var(--bs-link-color);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--bs-link-hover-color);
}

/* Yardımcı yazı boyutları (szu-vink ile aynı isimler) */
.fs-7 {
    font-size: 15px;
}

.fs-8 {
    font-size: 14px;
}

.fs-9 {
    font-size: 12px;
}

/* --------------------------------------------------------------- İkonlar
   SVG'ler boyutsuz bırakılırsa tarayıcı 300×150 px varsayılanını uygular;
   bu yüzden tüm simgeler `.szu-icon` sarmalayıcısıyla boyutlandırılır. */

.szu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    line-height: 0;
}

.szu-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Industry: simge çizgileri ince (Lucide kalınlığı 1.5). SVG üzerindeki
   `stroke-width` sunum özniteliğini CSS bildirimi ezer → tek yerden yönetilir. */
.szu-icon svg path,
.szu-icon svg circle,
.szu-icon svg rect,
.szu-icon svg line,
.szu-icon svg polyline {
    stroke-width: 1.5;
}

/* ------------------------------------------------- Bootstrap bileşen rötuşları */

/* Industry: düğmeler kare ve ince çerçevelidir; "kalkma" animasyonu YOK —
   yalnızca zemin/kenarlık tonu değişir (vurgu rampasından bir adım). */
.btn {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.btn-primary {
    --bs-btn-color: var(--color-bg);
    --bs-btn-hover-color: var(--color-bg);
    --bs-btn-active-color: var(--color-bg);
    --bs-btn-disabled-color: var(--color-bg);
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-bg: var(--color-accent-600);
    --bs-btn-hover-border-color: var(--color-accent-600);
    --bs-btn-active-bg: var(--color-accent-700);
    --bs-btn-active-border-color: var(--color-accent-700);
    --bs-btn-disabled-bg: var(--color-accent);
    --bs-btn-disabled-border-color: var(--color-accent);
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-text);
    --bs-btn-border-color: var(--color-divider);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-text) 7%, transparent);
    --bs-btn-hover-border-color: var(--color-accent);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-text) 14%, transparent);
    --bs-btn-active-border-color: var(--color-accent);
    --bs-btn-active-color: var(--color-text);
}

.card {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

a .card:hover,
.card-hover:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-100);
}

.table {
    --bs-table-hover-bg: var(--bs-tertiary-bg);
}

.table > thead > tr > th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--bs-secondary);
    border-bottom-width: 2px;
    white-space: nowrap;
}

.table-responsive {
    border-radius: var(--bs-border-radius);
}

/* Industry: odak göstergesi parıltı (glow) değil, 2px vurgu çerçevesidir */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent);
    box-shadow: none;
    outline: 2px solid var(--color-accent);
    outline-offset: 0;
}

.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.nav-link {
    border-radius: 0;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.nav-link:hover:not(.active) {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--szu-border);
    --bs-nav-tabs-link-active-border-color: var(--szu-border) var(--szu-border) var(--szu-surface);
    --bs-nav-link-color: var(--szu-primary);
    --bs-nav-link-hover-color: var(--color-accent-700);
}

/* ----------------------------------------------------------------- Hero */

/* Industry: hero bir kart değil tipografi bloğudur — kicker + büyük sıkıştırılmış
   başlık + paragraflar; zemin ve çerçeve yok. Ana sayfada hızlı sorgulama
   formu ile yan yana iki kolonlu bir ızgarada durur. */

.szu-home-intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 56px;
    align-items: start;
    padding: 56px 0 48px;
}

.szu-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.szu-kicker {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-accent-700);
}

.szu-hero h1 {
    margin: 0;
    font-size: clamp(38px, 5.2vw, 72px);
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--color-text);
}

.szu-hero p {
    margin: 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* ------------------------------------------------ Hızlı sorgulama (ana sayfa) */

.szu-quick {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    background: transparent;
    border: 1px solid var(--color-divider);
}

.szu-quick-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-divider);
}

.szu-quick-head h2 {
    margin: 0;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.szu-quick-count {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    font-variant-numeric: tabular-nums;
}

.szu-quick-note {
    margin: 0;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    background: var(--color-accent-100);
    color: var(--color-accent-900);
}

/* Modüle göre değişen hızlı sorgu alanları (yalnızca seçili grup görünür) */
.szu-quick-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.szu-quick-fields[hidden] {
    display: none;
}

/* Etiket + alan ikilisi (hızlı sorgulama ve form alanlarının ortak kabı) */
.szu-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.szu-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* ---------------------------------------------------- Bölüm başlığı (kicker) */

.szu-section {
    padding: 8px 0 56px;
}

.szu-section-rule {
    height: 1px;
    margin: 0 0 36px;
    background: var(--color-divider);
}

@media (max-width: 575.98px) {
    .szu-home-intro {
        gap: 32px;
        padding: 32px 0 28px;
    }

    .szu-hero h1 {
        font-size: 34px;
    }
}

/* ---------------------------------------------------------------- Header */

/* Industry: açık zemin, ince alt çizgi, mürekkep rengi metin. */
.szu-header {
    background: var(--color-bg);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-divider);
}

.szu-header-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.szu-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.szu-brand:hover {
    color: var(--color-accent-700);
}

/* Marka rozeti: 22×22 kare, ince vurgu çerçevesi (tasarım sistemindeki S plakası) */
.szu-brand-badge {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 1px solid var(--color-accent);
    color: var(--color-accent-700);
    font-size: 12px;
    line-height: 1;
}

.szu-nav {
    display: flex;
    align-items: center;
}

.szu-nav .nav {
    gap: var(--space-2);
}

.szu-nav .nav-link {
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
    font-size: 14px;
    font-weight: 500;
    padding: 6px 10px;
    border-bottom: 2px solid transparent;
}

.szu-nav .nav-link:hover {
    color: var(--color-accent-700);
    background: transparent;
    border-bottom-color: var(--color-accent-300);
}

.szu-nav .nav-link.active {
    color: var(--color-accent-700);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
}

.szu-nav .nav-link .szu-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.3rem;
    vertical-align: -0.15rem;
}

/* --------------------------------------------- Dil değiştirici (TR/EN)
   Tasarımdaki `.seg` (segmented control) görünümü: kare, ince çerçeveli,
   seçili olan vurgu dolgusu ile işaretlenir. */

.szu-lang {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--color-divider);
}

.szu-lang form {
    display: inline-flex;
}

.szu-lang form + form {
    border-left: 1px solid var(--color-divider);
}

.szu-lang-btn {
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: var(--font-heading-weight);
    letter-spacing: 0.02em;
    padding: 7px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.szu-lang-btn:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-text);
}

.szu-lang-btn.is-active {
    background: var(--color-accent);
    color: var(--color-bg);
    cursor: default;
}

/* --------------------------------------------------------- Sayfa başlığı */

.szu-page-head {
    padding: 34px 0 20px;
}

.szu-page-head h1 {
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--color-text);
    margin: 0;
}

/* ----------------------------------------------------------- Kart yapısı */

/* Industry: kartlar dolu yüzey değil, ince çizgiyle çizilmiş tel kafes
   nesneleridir — şeffaf zemin, hairline çerçeve, gölge yok. */
.szu-card {
    background: transparent;
    border: 1px solid var(--szu-border);
    box-shadow: none;
}

.szu-card-pad {
    padding: 24px 26px;
}

.szu-main {
    flex: 1 0 auto;
    padding: 0 0 56px;
}

/* Modül kartları (anasayfa) */
.szu-modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 24px;
}

.szu-module {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 200px;
    padding: 22px;
    background: transparent;
    border: 1px solid var(--color-divider);
    box-shadow: none;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.szu-module:hover,
.szu-module:focus-within {
    border-color: var(--color-accent);
    background: var(--color-accent-100);
}

.szu-module-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.szu-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--color-accent-700);
    background: transparent;
}

.szu-module-icon .szu-icon {
    width: 28px;
    height: 28px;
}

.szu-module-num {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    font-variant-numeric: tabular-nums;
}

.szu-module h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 21px;
    font-weight: var(--font-heading-weight);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

.szu-module p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Kart eylemi: dolu düğme değil, vurgu rengi ok bağlantısı */
.szu-module .btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-accent-700);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: var(--font-heading-weight);
    letter-spacing: 0.02em;
    text-decoration: none;
}

.szu-module .btn:hover,
.szu-module .btn:focus {
    background: transparent;
    color: var(--color-accent-900);
}

.szu-module .btn .szu-icon {
    width: 14px;
    height: 14px;
    margin: 0;
}

/* ------------------------------------------------------------- Sonuçlar */

.szu-result {
    margin-top: 34px;
}

.szu-result-title {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.szu-result-subtitle {
    font-size: 15px;
    font-weight: var(--font-heading-weight);
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    margin-bottom: var(--space-2);
}

.szu-property-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.szu-property-table th,
.szu-property-table td {
    padding: 10px 13px;
    border-bottom: 1px solid var(--color-divider);
    vertical-align: top;
}

.szu-property-table th {
    width: 34%;
    min-width: 150px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    background: transparent;
}

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

.szu-pattern {
    font-size: 11px;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    white-space: nowrap;
}

/* --------------------------------------------------------------- Sekmeler */

.szu-tabs .nav-link {
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
}

.szu-tabs .nav-link:hover {
    color: var(--color-accent-700);
    background: transparent;
}

.szu-tabs .nav-link.active {
    color: var(--color-accent-700);
    background: transparent;
    border-bottom-color: var(--color-accent);
}

.szu-tabs + .tab-content {
    padding-top: var(--space-2);
}

.tab-content > .tab-pane {
    min-height: 120px;
}

/* ---------------------------------------------------------------- Formlar */

.szu-form .form-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.szu-form .form-control,
.szu-form .form-select {
    min-height: 36px;
    border-color: var(--color-divider);
    border-radius: 0;
    background: var(--color-surface);
    padding: 6px 10px;
    font-size: 14px;
}

.szu-form .form-control:hover,
.szu-form .form-select:hover {
    border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.szu-form .form-control:focus,
.szu-form .form-select:focus {
    border-color: var(--color-accent);
    box-shadow: none;
    outline: 2px solid var(--color-accent);
    outline-offset: 0;
}

.szu-required {
    color: var(--bs-danger);
}

.szu-help {
    font-size: 12px;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* İstemci/sunucu doğrulama mesajları (ASP.NET Core data-valmsg-for span'leri) */
.szu-form [data-valmsg-for] {
    display: block;
    font-size: 12px;
    margin-top: var(--space-1);
}

.szu-form [data-valmsg-for].field-validation-valid {
    display: none;
}

.szu-form [data-valmsg-for].field-validation-error {
    display: block;
    color: var(--bs-danger);
    font-weight: 500;
}

.szu-form .form-control.is-invalid,
.szu-form .form-select.is-invalid,
.szu-form .form-control.input-validation-error,
.szu-form .form-select.input-validation-error {
    border-color: var(--bs-danger);
    background-image: none;
}

.szu-form .form-control.is-invalid:focus,
.szu-form .form-select.is-invalid:focus,
.szu-form .form-control.input-validation-error:focus,
.szu-form .form-select.input-validation-error:focus {
    border-color: var(--bs-danger);
    box-shadow: none;
    outline: 2px solid var(--bs-danger);
    outline-offset: 0;
}

/* --------------------------------------------------------------- Toast */

.szu-toasts {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(380px, calc(100vw - 2rem));
}

.szu-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 17px;
    border-radius: 0;
    background: var(--color-neutral-900);
    color: var(--color-bg);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
}

.szu-toast.is-error {
    background: var(--bs-danger);
}

.szu-toast.is-success {
    background: var(--bs-success);
}

/* ---------------------------------------------------------------- Uyarı */

.szu-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 15px 18px;
    border-radius: 0;
    border: 1px solid transparent;
    font-size: 14px;
}

.szu-alert .szu-icon {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.szu-alert-text {
    flex: 1 1 auto;
    min-width: 0;
}

.szu-alert.is-error {
    background: rgba(var(--bs-danger-rgb), 0.08);
    border-color: rgba(var(--bs-danger-rgb), 0.22);
    color: #a3080a;
}

.szu-alert.is-info {
    background: rgba(var(--bs-info-rgb), 0.08);
    border-color: rgba(var(--bs-info-rgb), 0.22);
    color: #044b9d;
}

.szu-alert.is-warning {
    background: rgba(var(--bs-warning-rgb), 0.12);
    border-color: rgba(var(--bs-warning-rgb), 0.3);
    color: #7a6803;
}

/* ------------------------------------------------------------ Intro metni */

.szu-intro {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- Adres */

.szu-address {
    font-style: normal;
    line-height: 1.7;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    font-size: 14px;
    margin-bottom: 12px;
}

.szu-contact-card h2 {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text);
    margin-bottom: 16px;
}

/* --------------------------------------------------------------- NetInfo */

.szu-netinfo {
    font-size: 11px;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    text-align: right;
    margin-top: 12px;
    margin-bottom: 0;
}

/* --------------------------------------------------------------- Yükleme */

.szu-busy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    font-size: 13px;
}

.szu-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-divider);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: szu-spin 0.7s linear infinite;
}

@keyframes szu-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------------- Footer */

.szu-footer {
    background: transparent;
    border-top: 1px solid var(--color-divider);
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    font-size: 13px;
    padding: 24px 0;
    margin-top: auto;
}

.szu-footer a {
    color: var(--color-accent-700);
    text-decoration: none;
}

.szu-footer a:hover {
    color: var(--color-accent-900);
    text-decoration: underline;
}

.szu-footer-sep {
    margin: 0 6px;
    opacity: 0.5;
}

/* --------------------------------------------------------------- Yardımcı */

.szu-hidden {
    display: none !important;
}

.szu-mono {
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------- KVKK onay/ilerleme */

/* Modal başlığındaki AJAX ilerleme satırı: düğmeleri sağa iter. */
.szu-kvkk-progress {
    margin-right: auto;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    font-size: 14px;
    text-align: left;
}

/* -------------------------------------------------- Proje zaman çizelgesi */

.szu-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 22px;
    border-left: 1px solid var(--color-divider);
}

.szu-timeline > li {
    position: relative;
    padding: 0 0 24px 18px;
}

.szu-timeline > li:last-child {
    padding-bottom: 0;
}

/* Industry: yuvarlak nokta yerine kare işaret */
.szu-timeline > li::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 5px;
    width: 9px;
    height: 9px;
    margin-left: -5px;
    border-radius: 0;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-bg);
}

.szu-timeline > li.is-success::before {
    background: var(--bs-success);
}

.szu-timeline > li.is-warning::before {
    background: var(--bs-warning);
}

.szu-timeline > li.is-danger::before {
    background: var(--bs-danger);
}

.szu-timeline > li.is-muted::before {
    background: var(--bs-secondary);
}

.szu-timeline h3 {
    font-size: 17px;
    margin: 0 0 5px;
}

.szu-timeline time {
    display: block;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    margin-bottom: 6px;
}

.szu-timeline p {
    margin: 0 0 8px;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    font-size: 14px;
}

/* ------------------------------------------------------ Veri tabloları */

.szu-table-scroll {
    overflow-x: auto;
}

.szu-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.szu-data-table th,
.szu-data-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-divider);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.szu-data-table th {
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom-width: 1px;
}

.szu-data-table tr:last-child td {
    border-bottom: 0;
}

/* ---------------------------------------------------------------- Rozet */

.szu-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
    border: 1px solid transparent;
}

.szu-chip.is-success {
    background: rgba(var(--bs-success-rgb), 0.12);
    color: #016b3a;
}

.szu-chip.is-warning {
    background: rgba(var(--bs-warning-rgb), 0.16);
    color: #7a6803;
}

/* --------------------------------------------------------- Sonuç vurgusu */

.szu-outcome {
    margin: 16px 0 0;
    padding: 11px 14px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    background: rgba(var(--bs-success-rgb), 0.1);
    color: #016b3a;
}

.szu-outcome.is-danger {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: #a3080a;
}

@media (max-width: 575.98px) {
    .szu-property-table th {
        width: 42%;
        min-width: 110px;
    }

    .szu-page-head h1 {
        font-size: 22px;
    }
}