/* Ortak kart bileşeni — bkz. UI_STANDARDS.md §1 */
.app-card {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 27, 61, 0.08), 0 1px 2px rgba(15, 27, 61, 0.06);
    padding: 24px;
    border: 1px solid #EEF1F6;
}
.app-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.app-table-row:hover {
    background-color: #F8F9FC;
}

/* Form sayfaları — ortalanmış düzen — bkz. UI_STANDARDS.md §2 */
.app-form-wrapper {
    display: flex;
    justify-content: center;
}
.app-form-card {
    width: 100%;
    max-width: 720px;
    margin-top: 8px;
}
.app-form-card.app-form-card-wide {
    max-width: none;
}

/* Çok alanlı formlarda mantıksal bölüm gruplama — bkz. UI_STANDARDS.md §2 */
.app-form-section {
    margin-bottom: 24px;
}
.app-form-section:last-child {
    margin-bottom: 0;
}
.app-form-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 14px;
    padding-bottom: 8px;
    padding-left: 10px;
    border-left: 3px solid var(--fd-teal);
    border-bottom: 1px solid #EEF1F6;
}

/* Form input / textarea — bkz. UI_STANDARDS.md §9 */
.form-control,
textarea.form-control {
    background-color: #FBFCFE;
    border: 1px solid #D8DEE9;
    border-radius: 9px;
    padding: 10px 13px;
    font-size: 14px;
    color: #1F2937;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:hover:not(:disabled):not(:focus):not([readonly]) {
    border-color: #B9C3D6;
}
.form-control:focus {
    background-color: #FFFFFF;
    border-color: #14B8A6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
    outline: none;
}
.form-control:disabled,
.form-control[readonly] {
    background-color: #EEF1F6;
    color: #6B7280;
    background-image: url("/images/icons/lock.svg");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 13px;
    padding-left: 34px;
    cursor: not-allowed;
}

/* Sunucu tarafı/istemci tarafı doğrulama hatası — jQuery unobtrusive
   validation bu sınıfları otomatik ekler/kaldırır, ek JS gerekmez. */
.form-control.input-validation-error,
.form-select.input-validation-error {
    border-color: #DC2626;
}
.field-validation-error {
    display: block;
    color: #DC2626;
    font-size: 12.5px;
    margin-top: 4px;
}

/* Boolean alanlar — native checkbox yerine iOS tarzı switch görünümü.
   Yalnızca tekil boolean toggle'lar için (İki Faktörlü Doğrulama gibi);
   çoklu seçim grupları .app-chip-input kullanır, bundan etkilenmez. */
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
    min-height: 0;
}
.form-check .form-check-label {
    margin-bottom: 0;
}
.form-check-input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 22px;
    margin: 0;
    flex: 0 0 auto;
    border-radius: 999px;
    background-color: #D8DEE9;
    border: none;
    position: relative;
    cursor: pointer;
    transition: background-color .18s ease;
}
.form-check-input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 27, 61, .25);
    transition: transform .18s ease;
}
.form-check-input[type="checkbox"]:checked {
    background-color: #14B8A6;
}
.form-check-input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}
.form-check-input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .25);
}
.form-check-input[type="checkbox"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Çoklu seçim "chip" grubu — ör. Ambalaj Tipi. Native checkbox görsel
   olarak gizlenir, bitişik <label> pill/rozet olarak stillendirilir. */
.app-chip-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.app-chip-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.app-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #D8DEE9;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: #4B5568;
    background: #FFFFFF;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.app-chip::before {
    content: '';
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid #C7CEDA;
    background: #FFFFFF;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.app-chip:hover {
    border-color: #B9C2D4;
}
.app-chip-input:focus-visible + .app-chip {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}
.app-chip-input:checked + .app-chip {
    border-color: #14B8A6;
    background-color: #E6F7F5;
    color: #0F766E;
}
.app-chip-input:checked + .app-chip::before {
    border-color: #14B8A6;
    background-color: #14B8A6;
    box-shadow: inset 0 0 0 3px #E6F7F5;
}
.app-chip-divider {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9AA3B5;
    padding: 0 4px;
}
.app-chip-karisik {
    border-style: dashed;
}
.app-chip-input:checked + .app-chip-karisik {
    border-style: solid;
}

/* Doluluk/seviye göstergesi ("meter") — ör. DİM cihazı doluluk oranı.
   Etiket her zaman çubuğun DIŞINDA gösterilir (dolum düşükken içeride
   okunaksız kalmasın diye), track rengi seviyeyle eşleşir ki 0%'da bile
   durum görünür kalsın. Renkler mevcut fd-badge durum paletiyle eşleşir. */
.app-meter {
    display: flex;
    align-items: center;
    gap: 10px;
}
.app-meter-track {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: #EEF1F6;
    overflow: hidden;
}
.app-meter-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease;
}
.app-meter-label {
    flex: 0 0 auto;
    min-width: 38px;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 600;
    color: #52514e;
}
.app-meter--good .app-meter-track { background: #E3F9ED; }
.app-meter--good .app-meter-fill { background: #1A9D5C; }
.app-meter--warning .app-meter-track { background: #FFF4E0; }
.app-meter--warning .app-meter-fill { background: #C67C05; }
.app-meter--critical .app-meter-track { background: #FDEAEA; }
.app-meter--critical .app-meter-fill { background: #D0342C; }

/* Sayfa başlığı / geri dönüş linki — artık app-header içinde render edilir,
   bkz. UI_STANDARDS.md §6 ve §8 */
.app-page-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    min-width: 0;
}
.app-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    margin-bottom: 6px;
}
.app-back-link:hover {
    color: var(--fd-teal);
}
.app-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a2340;
    margin: 0;
}

/* Operasyonlar Hub sayfası — bkz. operasyonlar_tasarim_onerisi.html mockup.
   --fd-navy/--fd-teal/--fd-bg zaten :root'ta tanımlı (site.css), burada yalnızca
   mockup'ta olup mevcut temada karşılığı olmayan tonlar --op- önekiyle eklenir. */
:root {
    --op-navy-2: #16244D;
    --op-teal-soft: #E6F7F5;
    --op-blue: #3B82F6;
    --op-blue-soft: #EAF1FE;
    --op-amber: #F59E0B;
    --op-amber-soft: #FEF3E2;
    --op-ink: #111827;
    --op-ink-2: #6B7280;
    --op-line: #E8ECF3;
    --op-green: #1A9D5C;
    --op-red: #D0342C;
    --op-orange: #C67C05;
    --op-gray: #9CA3AF;
}

.op-hub .summary-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, var(--fd-navy) 0%, var(--op-navy-2) 100%);
    color: #DCE4F5;
    border-radius: 12px;
    padding: 11px 18px;
    margin: 22px 0 26px;
    font-size: 13.5px;
}
.op-hub .summary-strip .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fd-teal);
    flex: none;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .18);
}
.op-hub .summary-strip b {
    color: #fff;
    font-weight: 600;
}
.op-hub .summary-strip .spacer {
    flex: 1;
}
.op-hub .summary-strip a {
    color: var(--fd-teal);
    text-decoration: none;
    font-weight: 600;
}

.op-hub .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.op-hub .mod {
    background: #fff;
    border: 1px solid var(--op-line);
    border-radius: 16px;
    padding: 24px 24px 20px;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.op-hub .mod:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 27, 61, .10);
}
.op-hub .mod:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .35), 0 12px 28px rgba(15, 27, 61, .10);
}
.op-hub .mod::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--mod-color);
    opacity: .9;
}
.op-hub .mod-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.op-hub .mod-ico {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mod-soft);
    color: var(--mod-color);
}
.op-hub .mod-ico svg {
    width: 23px;
    height: 23px;
}
.op-hub .mod-title {
    font-size: 16.5px;
    font-weight: 700;
}
.op-hub .mod-desc {
    font-size: 13px;
    color: var(--op-ink-2);
    margin-top: 2px;
}

.op-hub .mod-count {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 6px 0 12px;
}
.op-hub .mod-count .n {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
}
.op-hub .mod-count .lbl {
    font-size: 13px;
    color: var(--op-ink-2);
}

.op-hub .dist {
    height: 7px;
    border-radius: 99px;
    overflow: hidden;
    display: flex;
    background: #EEF1F6;
    margin-bottom: 10px;
}
.op-hub .dist span {
    height: 100%;
}
.op-hub .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12.5px;
    color: var(--op-ink-2);
    margin-bottom: 18px;
}
.op-hub .chips i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: 1px;
    font-style: normal;
}
.op-hub .dist-bos {
    font-size: 12.5px;
    color: var(--op-ink-2);
    margin-bottom: 18px;
}

.op-hub .mod-foot {
    margin-top: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    border-top: 1px solid var(--op-line);
    padding-top: 15px;
}
.op-hub .btn-manage {
    background: var(--mod-color);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    transition: filter .15s ease;
}
.op-hub .btn-manage:hover {
    filter: brightness(1.07);
    color: #fff;
}
.op-hub .btn-new {
    background: #fff;
    color: var(--op-ink);
    border: 1px solid var(--op-line);
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 15px;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.op-hub .btn-new:hover {
    border-color: var(--mod-color);
    color: var(--mod-color);
}
.op-hub .foot-note {
    margin-left: auto;
    font-size: 12px;
    color: var(--op-ink-2);
}

.op-hub .mod.users {
    --mod-color: var(--fd-teal);
    --mod-soft: var(--op-teal-soft);
}
.op-hub .mod.horeka {
    --mod-color: var(--op-blue);
    --mod-soft: var(--op-blue-soft);
}
.op-hub .mod.arac {
    --mod-color: var(--op-amber);
    --mod-soft: var(--op-amber-soft);
}

@media (max-width: 1100px) {
    .op-hub .grid {
        grid-template-columns: 1fr;
    }
}

/* Son İşlemler listesi — Operasyonlar hub'ındaki özet şeridinden açılan modal içeriği. */
.op-son-islem-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}
.op-son-islem {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--op-line);
}
.op-son-islem:last-child {
    border-bottom: none;
}
.op-son-islem-ikon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.op-son-islem-metin {
    flex: 1 1 auto;
    min-width: 0;
}
.op-son-islem-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}
.op-son-islem-baslik a {
    color: var(--op-ink);
    text-decoration: none;
}
.op-son-islem-baslik a:hover {
    color: var(--fd-teal);
    text-decoration: underline;
}
.op-son-islem-tip {
    font-size: 11px;
    font-weight: 600;
    color: var(--op-ink-2);
    background: #EEF1F6;
    border-radius: 999px;
    padding: 2px 9px;
    flex: none;
}
.op-son-islem-alt {
    font-size: 12.5px;
    color: var(--op-ink-2);
    margin-top: 2px;
}
.op-son-islem-tarih {
    font-size: 12px;
    color: var(--op-ink-2);
    flex: none;
    white-space: nowrap;
    padding-top: 2px;
}

/* ===================================================================
   Butonlar — bkz. UI_STANDARDS.md §9. Bootstrap'ın varsayılan mavi
   .btn-primary/.btn-outline-primary sınıfları burada marka rengine
   (teal/lacivert) geçirilir, böylece mevcut TÜM view'lardaki butonlar
   tek satır değişiklik gerekmeden yeni paleti alır.
   =================================================================== */
.btn {
    border-radius: 9px;
    transition: all .15s ease;
}
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}
.btn:active:not(:disabled) {
    transform: translateY(0);
}
.btn-primary {
    background-color: var(--fd-teal);
    border-color: var(--fd-teal);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #0f9c8c;
    border-color: #0f9c8c;
    color: #fff;
}
.btn-outline-primary {
    color: var(--fd-teal);
    border-color: var(--fd-teal);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--fd-teal);
    border-color: var(--fd-teal);
    color: #fff;
}
.btn-outline-secondary {
    color: #4B5568;
    border-color: #D8DEE9;
    background-color: #fff;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--fd-teal);
    border-color: var(--fd-teal);
    background-color: #fff;
}
.btn-outline-danger {
    color: #DC2626;
    border-color: #DC2626;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: #DC2626;
    border-color: #DC2626;
    color: #fff;
}

/* Yeni yazılan ekranlarda kullanılacak açık isimlendirilmiş buton ailesi —
   yukarıdaki Bootstrap köprüleme kurallarıyla birebir aynı görünümü verir. */
.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease;
}
.app-btn:hover {
    transform: translateY(-1px);
}
.app-btn-sm {
    padding: 6px 11px;
    font-size: 13px;
    gap: 5px;
}
.app-btn-primary {
    background-color: var(--fd-teal);
    border-color: var(--fd-teal);
    color: #fff;
}
.app-btn-primary:hover {
    background-color: #0f9c8c;
    border-color: #0f9c8c;
    color: #fff;
}
.app-btn-secondary {
    background-color: #fff;
    border-color: #D8DEE9;
    color: #4B5568;
}
.app-btn-secondary:hover {
    border-color: var(--fd-teal);
    color: var(--fd-teal);
}
.app-btn-danger {
    background-color: #DC2626;
    border-color: #DC2626;
    color: #fff;
}
.app-btn-danger:hover {
    background-color: #B91C1C;
    border-color: #B91C1C;
    color: #fff;
}

/* AJAX işlemleri (İl/İlçe, Yeni Bölge modal vb.) için buton içi inline
   yükleniyor göstergesi. Global sayfa geçiş overlay'i (loader.css) AJAX'ta
   KULLANILMAZ, bkz. UI_STANDARDS.md §10. */
.app-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.app-btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: app-spin .7s linear infinite;
}
.app-btn-secondary.app-btn-loading::after,
.btn-outline-secondary.app-btn-loading::after {
    border-color: rgba(20, 184, 166, .25);
    border-top-color: var(--fd-teal);
}

/* ===================================================================
   Detay (Details) sayfaları — etiket/değer satırları, bkz. UI_STANDARDS.md §9
   =================================================================== */
.app-card dl.row dt {
    color: #6b7280;
    font-weight: 600;
    font-size: 13px;
    padding: 11px 0;
    border-bottom: 1px solid #F3F5F9;
}
.app-card dl.row dd {
    color: #1a2340;
    font-size: 14px;
    padding: 11px 0;
    margin-bottom: 0;
    border-bottom: 1px solid #F3F5F9;
}
.app-card dl.row dt:last-of-type,
.app-card dl.row dd:last-of-type {
    border-bottom: none;
}
.app-value-empty {
    color: #9AA3B5;
    font-style: italic;
}

/* Kart üst şeridi — form/dashboard kartlarının başlık alanına çok hafif
   bir gradyan verir (bkz. UI_STANDARDS.md §9, ADIM 2). */
.app-card-header,
.app-card > h6:first-child {
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
    margin: -24px -24px 16px -24px;
    padding: 16px 24px 12px;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #EEF1F6;
}

/* Tablo satırı hover'ında sol kenarda ince teal vurgu çizgisi belirir. */
.app-table-row {
    transition: background-color .12s ease;
}
.app-table-row:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--fd-teal);
}

/* Sayfa içeriği ilk yüklendiğinde tek seferlik giriş animasyonu. */
@keyframes app-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.app-content {
    animation: app-fade-in-up .25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    /* Global loader halkası işlevsel bir gösterge olduğu için istisnadır. */
    .app-loader-ring::after {
        animation-duration: .8s !important;
        animation-iteration-count: infinite !important;
    }
}