﻿/* ==========================================================================
   Fakir Admin Paneli - Ana Sayfa
   Metronic teması üzerine ince bir katman. Tümü .fk-dash altında kapsanmıştır.
   Renk yalnızca anlam taşıdığı yerde kullanılır (artış/azalış, sipariş durumu).
   ========================================================================== */

.fk-dash {
    --fk-border: #e6e8ec;
    --fk-line: #f2f3f5;
    --fk-text: #181c32;
    --fk-body: #4b5675;
    --fk-muted: #99a1b7;
    --fk-accent: #1b84ff;
}

/* ---------------------------------------------------------------- Kart */

.fk-card {
    background: #fff;
    border: 1px solid var(--fk-border);
    border-radius: 6px;
    height: 100%;
}

.fk-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--fk-line);
}

.fk-card__title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--fk-text);
    margin: 0;
}

.fk-card__hint {
    display: block;
    font-size: .75rem;
    color: var(--fk-muted);
    margin-top: .2rem;
}

.fk-card__body {
    padding: 1.25rem;
}

.fk-link {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--fk-accent);
    text-decoration: none;
    white-space: nowrap;
}

.fk-link:hover {
    color: var(--fk-accent);
    text-decoration: underline;
}

/* Grafik açıklaması */

.fk-keys {
    display: flex;
    gap: 1rem;
}

.fk-key {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    color: var(--fk-body);
}

.fk-key > i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

/* ----------------------------------------------------------- KPI kartı */

.fk-stat {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
}

.fk-stat__label {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    color: var(--fk-muted);
}

.fk-stat__value {
    display: block;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--fk-text);
    margin-top: .35rem;
}

.fk-stat__unit {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--fk-muted);
    margin-left: .25rem;
}

.fk-stat__trend {
    display: block;
    font-size: .75rem;
    margin-top: .5rem;
}

.fk-stat__trend > span + span {
    margin-left: .3rem;
}

.fk-stat__spark {
    width: 96px;
    flex: 0 0 96px;
    margin-bottom: -.25rem;
}

.fk-dash .fk-up   { color: #17c653; font-weight: 600; }
.fk-dash .fk-down { color: #f1416c; font-weight: 600; }

/* --------------------------------------------------------- Özet rakamlar */

.fk-figures {
    display: flex;
    gap: 2.5rem;
    padding-bottom: 1.25rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--fk-line);
}

.fk-figures__label {
    display: block;
    font-size: .75rem;
    color: var(--fk-muted);
}

.fk-figures__value {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fk-text);
    margin-top: .2rem;
}

/* --------------------------------------------------------------- Tablo */

.fk-table {
    width: 100%;
    margin: 0;
}

.fk-table th {
    font-size: .75rem;
    font-weight: 500;
    color: var(--fk-muted);
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--fk-line);
    white-space: nowrap;
}

.fk-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--fk-line);
    font-size: .8125rem;
    color: var(--fk-body);
    vertical-align: middle;
}

.fk-table tbody tr:last-child td {
    border-bottom: 0;
}

.fk-table tbody tr:hover {
    background: #fafbfc;
}

.fk-table th:first-child,
.fk-table td:first-child {
    padding-left: 1.25rem;
}

.fk-table th:last-child,
.fk-table td:last-child {
    padding-right: 1.25rem;
}

/* ------------------------------------------------------- Kategori listesi */

.fk-legend {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fk-line);
}

.fk-legend__row {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8125rem;
    padding: .4rem 0;
}

.fk-legend__row > i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex: 0 0 8px;
}

.fk-legend__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--fk-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fk-legend__value {
    font-weight: 600;
    color: var(--fk-text);
    white-space: nowrap;
}

.fk-legend__share {
    width: 34px;
    text-align: right;
    color: var(--fk-muted);
}

/* -------------------------------------------------------- Ürün listesi */

.fk-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.fk-item + .fk-item {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fk-line);
}

.fk-item__rank {
    font-size: .75rem;
    font-weight: 600;
    color: var(--fk-muted);
    width: 16px;
    flex: 0 0 16px;
    text-align: right;
    padding-top: .1rem;
}

.fk-item__main {
    flex: 1 1 auto;
}

.fk-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    font-size: .8125rem;
}

.fk-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--fk-line);
    overflow: hidden;
    margin-top: .5rem;
}

.fk-bar > span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--fk-accent);
}

/* ----------------------------------------------------------- Yardımcılar */

.fk-dash .fk-strong {
    font-weight: 600;
    color: var(--fk-text);
}

.fk-dash .fk-muted {
    font-size: .75rem;
    color: var(--fk-muted);
}

.fk-dash .fk-num {
    font-variant-numeric: tabular-nums;
}

.fk-dash .min-w-0 {
    min-width: 0;
}

@media (max-width: 575.98px) {
    .fk-stat__spark { display: none; }
    .fk-figures     { gap: 1.5rem; }
}

/* ==========================================================================
   Liste sayfaları (.fk-page)
   Users, Products, Orders … gibi tablo tabanlı ekranlarda ortak kullanılır.
   Mevcut .raw-scrollable-table davranışını (sabit kolonlar, mobil kart
   görünümü) bozmadan yalnızca görsel katmanı değiştirir.
   Not: custom.css layout'ta main.css'ten SONRA yüklendiği için tüm kurallar
   .fk-page ile özgülleştirilmiştir.
   ========================================================================== */

.fk-page {
    --fk-border: #e7e9ee;
    --fk-line: #f0f2f5;
    --fk-text: #101828;
    --fk-body: #475467;
    --fk-muted: #98a2b3;
    --fk-accent: #1b84ff;
    --fk-surface: #f7f8fa;
}

.fk-panel {
    background: #fff;
    border: 1px solid var(--fk-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
                0 16px 32px -28px rgba(16, 24, 40, .45);
}

/* ---------------------------------------------------------- Kart başlığı */

.fk-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--fk-line);
}

.fk-panel__heading {
    min-width: 0;
}

.fk-page .fk-panel__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--fk-text);
}

.fk-panel__desc {
    display: block;
    margin-top: .2rem;
    font-size: .8125rem;
    color: var(--fk-muted);
}

.fk-panel__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ----------------------------------------------------------- Araç çubuğu */

.fk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--fk-line);
    background: #fcfcfd;
}

.fk-toolbar__left,
.fk-toolbar__right {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.fk-toolbar__right {
    flex: 1 1 auto;
    justify-content: flex-end;
}

/* jQuery slideToggle bu bloğa display:block yazar; flex öğesi olarak sorunsuz. */
.fk-page .fk-toolbar__search {
    flex: 0 1 340px;
    min-width: 0;
    /* custom.css'teki .raw-table-filter-toggle-block margin'ini sifirla */
    margin-bottom: 0;
}

/* Segment (sekme) grubu */

/* .nav sinifi da tasidigi icin (custom.js'in aktif sekme kodu icin gerekli)
   kurallar .fk-page ile ozgullestirildi. */
.fk-page .fk-seg {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 3px;
    margin: 0;
    background: var(--fk-surface);
    border: 1px solid var(--fk-border);
    border-radius: 10px;
}

.fk-page .fk-seg__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border-radius: 7px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--fk-muted);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.fk-page .fk-seg__btn:hover {
    color: var(--fk-body);
}

.fk-page .fk-seg__btn.active {
    color: var(--fk-accent);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1),
                0 1px 3px rgba(16, 24, 40, .06);
}

.fk-seg__count {
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    padding: .2rem .4rem;
    border-radius: 5px;
    color: var(--fk-muted);
    background: rgba(16, 24, 40, .05);
    font-variant-numeric: tabular-nums;
}

.fk-page .fk-seg__btn.active .fk-seg__count {
    color: var(--fk-accent);
    background: rgba(27, 132, 255, .1);
}

/* Butonlar */

.fk-page .fk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 38px;
    padding: 0 .9rem;
    border-radius: 9px;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.fk-page .fk-btn--ghost {
    color: var(--fk-body);
    background: #fff;
    border: 1px solid var(--fk-border);
}

.fk-page .fk-btn--ghost:hover {
    color: var(--fk-text);
    background: var(--fk-surface);
}

.fk-page .fk-btn--primary {
    color: #fff;
    background: var(--fk-accent);
    border: 1px solid var(--fk-accent);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08),
                0 6px 14px -8px rgba(27, 132, 255, .8);
}

.fk-page .fk-btn--primary:hover {
    color: #fff;
    background: #0b6fdc;
    border-color: #0b6fdc;
}

/* Arama kutusu */

.fk-search {
    position: relative;
}

.fk-search > i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fk-muted);
    pointer-events: none;
}

.fk-page .fk-search .form-control {
    height: 38px;
    padding: 0 .9rem 0 2.45rem;
    font-size: .8125rem;
    color: var(--fk-text);
    background: var(--fk-surface);
    border: 1px solid var(--fk-border);
    border-radius: 9px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.fk-page .fk-search .form-control::placeholder {
    color: var(--fk-muted);
}

.fk-page .fk-search .form-control:focus {
    background: #fff;
    border-color: #a9cfff;
    box-shadow: 0 0 0 3px rgba(27, 132, 255, .14);
}

/* ------------------------------------------------------------------ Tablo */

.raw-scrollable-table.fk-list thead th,
.fk-page .raw-scrollable-table thead th {
    padding: .75rem 1.25rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #5b6b85;
    background: #f4f7fc;
    border-bottom: 2px solid #e2e9f3;
}

.raw-scrollable-table.fk-list td,
.fk-page .raw-scrollable-table td {
    padding: .8rem 1.25rem;
    font-size: .8125rem;
    color: var(--fk-body);
    border-bottom: 1px solid var(--fk-line);
}

.raw-scrollable-table.fk-list tbody tr:last-child td,
.fk-page .raw-scrollable-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Sabit kolonlar satırın zemini ile aynı renkte olmalı */
.raw-scrollable-table.fk-list tbody .fixed,
.fk-page .raw-scrollable-table tbody .fixed {
    background-color: #fff;
}

/* Seritli satirlar - sabit kolonlar da ayni zemini almali */
.raw-scrollable-table.fk-list tbody tr:nth-child(even) td,
.fk-page .raw-scrollable-table tbody tr:nth-child(even) td,
.raw-scrollable-table.fk-list tbody tr:nth-child(even) td.fixed,
.fk-page .raw-scrollable-table tbody tr:nth-child(even) td.fixed {
    background-color: #fbfcfe;
}

/* Hover: seritli kuralla ayni ozgullukte, bu yuzden ondan SONRA gelmeli */
.raw-scrollable-table.fk-list tbody tr:hover td,
.fk-page .raw-scrollable-table tbody tr:hover td,
.raw-scrollable-table.fk-list tbody tr:hover td.fixed,
.fk-page .raw-scrollable-table tbody tr:hover td.fixed {
    background-color: #eff6ff;
}

.fk-list__soft,
.fk-page .fk-list__soft {
    color: var(--fk-muted);
}

.fk-num,
.fk-page .fk-num {
    font-variant-numeric: tabular-nums;
}

/* Yatay kaydırmada sabit kolonların kenar gölgesi */
@media (min-width: 1024px) {
    .raw-scrollable-table.fk-list .fixed.left,
    .fk-page .raw-scrollable-table .fixed.left {
        box-shadow: 8px 0 10px -10px rgba(16, 24, 40, .35);
    }

    .raw-scrollable-table.fk-list .fixed.right,
    .fk-page .raw-scrollable-table .fixed.right {
        box-shadow: -8px 0 10px -10px rgba(16, 24, 40, .35);
    }

    /* Yan yana duran sabit kolonlar arasında gölge tekrarlanmasın */
    .raw-scrollable-table.fk-list .fixed.right + .fixed.right,
    .fk-page .raw-scrollable-table .fixed.right + .fixed.right {
        box-shadow: none;
    }
}

/* --------------------------------------------------- Ad + baş harf rozeti */

.fk-user {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.fk-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #1b6fd0;
    background: #eaf3ff;
    box-shadow: inset 0 0 0 1px #d3e6ff;
}

.fk-user__name {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--fk-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kullanıcı adı etiketi */
.fk-tag {
    display: inline-block;
    padding: .2rem .45rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: #3f5f86;
    background: #f0f5fc;
    box-shadow: inset 0 0 0 1px #dbe6f4;
}

/* ------------------------------------------------------------ Durum rozeti */

.fk-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

.fk-status__dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
}

.fk-status--on {
    color: #067647;
    background: #ecfdf3;
    box-shadow: inset 0 0 0 1px #abefc6;
}

.fk-status--off {
    color: #b42318;
    background: #fef3f2;
    box-shadow: inset 0 0 0 1px #fecdca;
}

.fk-status--info {
    color: #175cd3;
    background: #eff8ff;
    box-shadow: inset 0 0 0 1px #b2ddff;
}

.fk-status--warn {
    color: #b54708;
    background: #fffaeb;
    box-shadow: inset 0 0 0 1px #fedf89;
}

.fk-status--muted {
    color: #475467;
    background: #f2f4f7;
    box-shadow: inset 0 0 0 1px #e4e7ec;
}

/* ----------------------------------------------------------- İşlem butonu */

.fk-act,
.fk-page .fk-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--fk-muted);
    text-decoration: none;
    border: 1px solid transparent;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.fk-page .fk-act:hover,
.fk-page .fk-act.show {
    color: var(--fk-accent);
    background: #fff;
    border-color: #b9d7ff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

/* ------------------------------------------------------- Boş liste durumu */

.fk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 3.5rem 1rem;
    text-align: center;
    color: var(--fk-muted);
}

.fk-empty__title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--fk-text);
    margin-top: .35rem;
}

.fk-empty__text {
    font-size: .8125rem;
}

.fk-page .fk-list__empty-row:hover td {
    background: transparent;
}

/* ------------------------------------------------------------- Alt bilgi */

.fk-panel__foot {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    padding: .85rem 1.25rem;
    border-top: 1px solid #e2e9f3;
    background: #f4f8ff;
    border-radius: 0 0 11px 11px;
    font-size: .75rem;
    color: #5b6b85;
}

.fk-panel__foot > i {
    color: var(--fk-accent);
}

.fk-panel__foot b {
    font-weight: 600;
    color: var(--fk-body);
}

/* ------------------------------------------ Mobil (kart görünümü) ayarları */

@media (max-width: 1023.98px) {
    .raw-scrollable-table.fk-list tbody tr,
    .fk-page .raw-scrollable-table tbody tr {
        padding: .65rem 0;
        border-bottom: 1px solid var(--fk-border);
    }

    .raw-scrollable-table.fk-list tbody tr:last-child,
    .fk-page .raw-scrollable-table tbody tr:last-child {
        border-bottom: 0;
    }

    .raw-scrollable-table.fk-list td,
    .fk-page .raw-scrollable-table td {
        padding: .3rem 1.25rem;
    }

    .raw-scrollable-table.fk-list td[data-content]::before,
    .fk-page .raw-scrollable-table td[data-content]::before {
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--fk-muted);
        background: transparent;
    }

    /* Satır etiketi solda, değer sağda: ad hücresi de sağa hizalansın */
    .fk-user {
        justify-content: flex-end;
    }

    .fk-avatar {
        display: none;
    }

    .fk-panel__head,
    .fk-toolbar {
        padding: .85rem 1rem;
    }

    .fk-toolbar__left,
    .fk-toolbar__right {
        flex: 1 1 100%;
    }

    .fk-toolbar__search {
        flex: 1 1 auto;
    }

    .fk-seg {
        width: 100%;
    }

    .fk-page .fk-seg__btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .fk-panel__foot {
        padding: .85rem 1rem;
    }
}

/* ---------------------------- Sekme içi alt çubuk (çok tablolu sayfalar) */

.fk-subbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--fk-line);
    background: #fcfcfd;
}

.fk-subbar .fk-toolbar__search {
    flex: 0 1 340px;
    min-width: 0;
    margin-bottom: 0;
}

/* ----------------------------------------------- Satır içi tehlike butonu */

.fk-page .fk-act--danger:hover,
.fk-page .fk-act--danger.show {
    color: #b42318;
    background: #fef3f2;
    border-color: #fecdca;
}

/* İşlem hücresindeki butonlar arası boşluk */
.fk-page .fk-act + .fk-act {
    margin-left: .35rem;
}

/* ------------------------------------------------------ Satır içi görsel */

.fk-thumb,
.fk-page .fk-thumb {
    height: 40px;
    width: auto;
    max-width: 150px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--fk-border);
    background: var(--fk-surface);
}

/* --------------------------------------- Satır içi durum anahtarı (switch) */

.fk-page .form-check.form-switch .form-check-input {
    cursor: pointer;
}

/* ---------------------------------------- Sekme panellerinde tablo kenarı */

.fk-page .tab-pane > .table-responsive {
    border-top: 0;
}

/* ==========================================================================
   Detay / form sayfalari
   Sekmeli detay ekranlarinda bolumlenmis alan izgarasi.
   ========================================================================== */

.fk-form {
    padding: 1.5rem 1.5rem 1.85rem;
}

.fk-form__section + .fk-form__section {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--fk-line);
}

.fk-page .fk-form__section-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.15rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fk-text);
}

.fk-page .fk-form__section-title::before {
    content: "";
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--fk-accent);
}

.fk-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 1.75rem;
}

.fk-field--wide {
    grid-column: span 2;
}

.fk-field {
    min-width: 0;
}

label.fk-field__label {
    display: block;
    margin-bottom: .35rem;
    font-size: .78125rem;
    font-weight: 500;
    color: #667085;
}

label.fk-field__label.required::after {
    content: "*";
    margin-left: .2rem;
    color: #f1416c;
}

.fk-input.form-control,
.fk-input.form-select {
    height: 42px;
    padding: 0 .9rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--fk-text);
    background: #f9fafb;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.fk-input.form-control::placeholder {
    color: #c2c7d0;
    font-weight: 400;
}

.fk-input.form-control:hover,
.fk-input.form-select:hover {
    border-color: #d5d9e0;
}

.fk-input.form-control:focus,
.fk-input.form-select:focus {
    background: #fff;
    border-color: #a9cfff;
    box-shadow: 0 0 0 3px rgba(27, 132, 255, .14);
}

/* Cok satirli alanlar sabit yukseklik almamali */
textarea.fk-input.form-control {
    height: auto;
    min-height: 110px;
    padding: .7rem .9rem;
    line-height: 1.5;
}

/* Modal ve yan panellerde alanlar arasi ritim */
.modal .fk-field__label,
.app-main .fk-field__label {
    letter-spacing: 0;
}

@media (max-width: 767.98px) {
    .fk-form {
        padding: 1.15rem 1rem .25rem;
    }

    .fk-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------- Detay başlığı kimlik rozeti */

.fk-record {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
}

.fk-avatar--lg {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 11px;
    font-size: .9375rem;
}

.fk-avatar--accent {
    color: var(--fk-accent);
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px #d3e6ff;
}

.fk-page .fk-panel__desc b {
    color: var(--fk-body);
    font-weight: 600;
}

/* Kart ile sayfa altı arasında nefes payı */
.fk-page .fk-panel {
    margin-bottom: 1.5rem;
}

/* ------------------------------------------------- Ürün detay: görsel + alanlar */

.fk-product {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
}

.fk-product__media {
    flex: 0 0 auto;
}

.fk-product__fields {
    flex: 1 1 auto;
    min-width: 0;
}

.fk-page .fk-product__media .image-input-wrapper {
    border-radius: 10px;
    border: 1px solid var(--fk-border);
    background-color: #f9fafb;
}

@media (max-width: 991.98px) {
    .fk-product {
        flex-direction: column;
        gap: 1.25rem;
    }

    .fk-product__fields {
        width: 100%;
    }

    .fk-page .fk-product__media .image-input-wrapper {
        width: 160px !important;
        height: 160px !important;
    }
}

/* ==========================================================================
   Metronic kartlari (.fk-page altinda) yeni panel goruntusune eslenir.
   Boylece OrderDetail gibi cok kartli sayfalar markup degismeden uyumlanir.
   ========================================================================== */

.fk-page .card {
    border: 1px solid var(--fk-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
                0 16px 32px -28px rgba(16, 24, 40, .45);
}

/* Yatay ic bosluk uc bolumde de ayni: baslik, govde ve alt bilgi hizali kalir.
   Metronic varsayilani 2rem/2.25rem; bunu 1.25rem'e dusurmek govdedeki
   icerigi (orn. siparis aksiyon kutucuklari) kart kenarina yapistiriyordu. */
.fk-page .card-header {
    border-bottom: 1px solid var(--fk-line);
    min-height: auto;
    padding: 1.35rem 2rem;
}

.fk-page .card-body {
    padding: 1.75rem 2rem;
}

.fk-page .card-footer {
    border-top: 1px solid var(--fk-line);
    background: #f7f8fa;
    border-radius: 0 0 11px 11px;
    padding: 1.35rem 2rem;
}

/* Ayni kartta birden fazla footer olabilir (toplamlar + aksiyonlar):
   yalnizca sonuncusu alt kose yuvarlakligini alir. */
.fk-page .card-footer:not(:last-child) {
    border-radius: 0;
}

.fk-page .card-footer + .card-footer {
    border-top: 1px solid var(--fk-line);
}

/* ==========================================================================
   Sipariş aksiyon seridi - sayfanin en ustunde, kompakt yatay dizilim
   ========================================================================== */

.fk-page .card.fk-actionbar {
    padding: .5rem;
}

.fk-page .fk-actionbar .row {
    margin: 0;
}

.fk-page .fk-actionbar [class^="col-"],
.fk-page .fk-actionbar [class*=" col-"] {
    padding-left: .25rem;
    padding-right: .25rem;
}

.fk-actionbar__item {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .65rem .85rem;
    border-radius: 9px;
    text-decoration: none;
    transition: background-color .15s ease;
}

.fk-actionbar__item:hover {
    background: #f4f7fc;
}

.fk-actionbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 9px;
    color: #1b6fd0;
    background: #eaf3ff;
}

.fk-actionbar__icon--danger { color: #b42318; background: #fef3f2; }
.fk-actionbar__icon--warn   { color: #b54708; background: #fffaeb; }
.fk-actionbar__icon--success{ color: #067647; background: #ecfdf3; }

.fk-actionbar__label {
    font-size: .8125rem;
    font-weight: 600;
    color: #344054;
    line-height: 1.35;
}

.fk-actionbar__item:hover .fk-actionbar__label {
    color: #101828;
}

/* ==========================================================================
   SweetAlert2 - varsayilan gorunum yerine panelin tasarim dili
   Renkler burada; site.js'ten inline verilmiyor (verilseydi ezilemezdi).
   ========================================================================== */

.swal2-popup {
    width: 30em;
    border-radius: 14px;
    padding: 2.25rem 2rem 1.75rem;
    box-shadow: 0 8px 12px -6px rgba(16, 24, 40, .12),
                0 32px 64px -20px rgba(16, 24, 40, .35);
    font-family: Inter, Helvetica, sans-serif;
}

.swal2-icon {
    width: 62px;
    height: 62px;
    margin: .25rem auto 1.5rem;
    border-width: 3px;
}

.swal2-icon .swal2-icon-content {
    font-size: 2.3rem;
}

/* Baslik ve metin birbirine yapisik duruyordu */
.swal2-title {
    padding: 0;
    font-size: 1.1875rem !important;
    font-weight: 600;
    line-height: 1.45;
    color: #101828;
}

.swal2-html-container {
    margin: .75rem .5rem 0 !important;
    font-size: .9375rem !important;
    line-height: 1.65;
    color: #667085;
}

.swal2-actions {
    gap: .75rem;
    margin-top: 2rem;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    height: 42px;
    min-width: 118px;
    margin: 0;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 9px;
    font-size: .9375rem;
    font-weight: 600;
    color: #fff;
    box-shadow: none;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.swal2-styled.swal2-confirm {
    background-color: #17c653;
}

.swal2-styled.swal2-confirm:hover {
    background-color: #12a544;
}

.swal2-styled.swal2-cancel {
    background-color: #f1416c;
}

.swal2-styled.swal2-cancel:hover {
    background-color: #d92c57;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(23, 198, 83, .3);
}

.swal2-styled.swal2-cancel:focus {
    box-shadow: 0 0 0 3px rgba(241, 65, 108, .3);
}

/* ==========================================================================
   Giriş ekrani (.fk-login)
   Layout = null oldugu icin bu sayfa main.css'i kendi <head>'inde yukler.
   ========================================================================== */

.fk-login {
    margin: 0;
    background: #fff;
}

.fk-login__wrap {
    display: flex;
    min-height: 100vh;
}

/* --------------------------------------------------------------- Form tarafi */

.fk-login__pane {
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.fk-login__box {
    width: 100%;
    max-width: 400px;
}

.fk-login__logo {
    height: 40px;
    width: auto;
    margin-bottom: 2.25rem;
}

.fk-login__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #101828;
}

.fk-login__subtitle {
    margin: .5rem 0 2rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: #667085;
}

.fk-login__group {
    margin-bottom: 1.1rem;
}

.fk-login__field {
    position: relative;
}

.fk-login__field > i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    pointer-events: none;
    transition: color .15s ease;
}

.fk-login__field:focus-within > i {
    color: #1b84ff;
}

.fk-login .fk-login__field .form-control {
    height: 48px;
    padding: 0 2.9rem 0 2.6rem;
    font-size: .9375rem;
}

.fk-login__eye {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #98a2b3;
    background: transparent;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.fk-login__eye:hover {
    color: #344054;
    background: #f2f4f7;
}

.fk-login__submit {
    width: 100%;
    height: 48px;
    margin-top: .75rem;
    border: 0;
    border-radius: 10px;
    font-size: .9375rem;
    font-weight: 600;
    color: #fff;
    background: #1b84ff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08),
                0 10px 20px -10px rgba(27, 132, 255, .9);
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
}

.fk-login__submit:hover {
    background: #0b6fdc;
}

.fk-login__submit:active {
    transform: translateY(1px);
}

.fk-login__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eef0f4;
    font-size: .8125rem;
}

.fk-login__lang {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #667085;
}

.fk-login__lang img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.fk-login__links {
    display: flex;
    gap: 1.25rem;
}

.fk-login__links a {
    color: #667085;
    font-weight: 500;
    text-decoration: none;
}

.fk-login__links a:hover {
    color: #1b84ff;
}

/* -------------------------------------------------------------- Marka tarafi */

.fk-login__brand {
    position: relative;
    overflow: hidden;
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #fff;
    background: linear-gradient(150deg, #0d2440 0%, #14396d 45%, #1b84ff 130%);
}

/* Yumusak isik lekeleri */
.fk-login__brand::before,
.fk-login__brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
}

.fk-login__brand::before {
    width: 460px;
    height: 460px;
    top: -180px;
    right: -160px;
}

.fk-login__brand::after {
    width: 320px;
    height: 320px;
    bottom: -140px;
    left: -110px;
    background: rgba(255, 255, 255, .04);
}

.fk-login__brand-inner {
    position: relative;
    z-index: 1;
    max-width: 460px;
    text-align: center;
}

.fk-login__brand-logo {
    height: 54px;
    width: auto;
    margin-bottom: 2.5rem;
}

.fk-login__brand-art {
    display: block;
    width: 100%;
    max-width: 380px;
    margin: 0 auto 2.5rem;
}

.fk-login__brand-title {
    margin: 0 0 .85rem;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.fk-login__brand-text {
    margin: 0 0 2rem;
    font-size: .9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
}

.fk-login__brand-list {
    display: inline-flex;
    flex-direction: column;
    gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.fk-login__brand-list li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .9);
}

.fk-login__brand-list i {
    color: #6ee7b7;
}

/* ------------------------------------------------------------------- Mobil */

@media (max-width: 991.98px) {
    .fk-login__wrap {
        flex-direction: column;
    }

    .fk-login__brand {
        order: -1;
        flex: 0 0 auto;
        padding: 2.25rem 1.5rem;
    }

    .fk-login__brand-art,
    .fk-login__brand-list {
        display: none;
    }

    .fk-login__brand-logo {
        height: 42px;
        margin-bottom: 1.25rem;
    }

    .fk-login__brand-title {
        font-size: 1.375rem;
    }

    .fk-login__brand-text {
        margin-bottom: 0;
        font-size: .875rem;
    }

    .fk-login__pane {
        flex: 1 1 auto;
        padding: 2.5rem 1.25rem;
    }

    .fk-login__logo {
        display: none;
    }
}
