/* ═══════════════════════════════════════════════════════════════════
   MILAGRON UI - BİLEŞENLER
   ───────────────────────────────────────────────────────────────────
   Buton, form, tablo, etiket, rozet, uyarı, sekme ve sayfalama.
   Sınıf adları eski temayla birebir aynı; yalnızca görünüm yenilendi.
   Ek olarak panelde çok kullanılan ama hiçbir global dosyada tanımlı
   olmayan sınıflar (.btn, .badge, .stat-box, .formInput) buraya
   taşındı: bunlar bugüne kadar her sayfada ayrı ayrı tanımlanıyordu.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   BUTONLAR
   Panelde çıplak <button> etiketi de dolu buton görünür (eski temanın
   davranışı). Bu korunuyor, aksi halde yüzlerce yerde buton kaybolur.
   ═══════════════════════════════════════════════════════════════════ */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-width: 3.6rem;
    margin: 0;
    padding: .8rem 1.4rem;
    font-family: var(--mg-font);
    font-size: var(--mg-text-md);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -.006em;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--mg-radius-md);
    background: var(--mg-primary);
    color: var(--mg-primary-fg);
    fill: var(--mg-primary-fg);
    box-shadow: var(--mg-shadow-xs);
    outline: 0;
    user-select: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--mg-transition), border-color var(--mg-transition),
        box-shadow var(--mg-transition), color var(--mg-transition), transform var(--mg-transition);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    background: var(--mg-primary-hover);
    color: var(--mg-primary-fg);
    fill: var(--mg-primary-fg);
    text-decoration: none;
}

.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
    background: var(--mg-primary-active);
    transform: translateY(.5px);
    box-shadow: none;
}

.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="button"]:focus-visible {
    box-shadow: var(--mg-ring);
}

.button:disabled,
button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="button"]:disabled,
.button.disabled,
button.disabled {
    cursor: not-allowed;
    opacity: .5;
    box-shadow: none;
    transform: none;
}

/* ── İkincil buton ──────────────────────────────────────────────── */
.button.secondary,
button.secondary,
input[type="submit"].secondary,
input[type="reset"].secondary,
input[type="button"].secondary {
    background: var(--mg-surface);
    color: var(--mg-text-secondary);
    fill: var(--mg-text-secondary);
    border-color: var(--mg-border-strong);
}

.button.secondary:hover,
button.secondary:hover,
input[type="button"].secondary:hover {
    background: var(--mg-surface-hover);
    color: var(--mg-text);
    border-color: var(--mg-border-strong);
}

.button.secondary:active,
button.secondary:active,
input[type="button"].secondary:active {
    background: var(--mg-surface-3);
}

/* ── Uyarı / yıkıcı buton ───────────────────────────────────────── */
.button.warning,
button.warning,
input[type="button"].warning,
.button.danger,
button.danger {
    background: var(--mg-danger-solid);
    color: #fff;
    fill: #fff;
    border-color: transparent;
}

.button.warning:hover,
button.warning:hover,
input[type="button"].warning:hover,
.button.danger:hover,
button.danger:hover {
    background: var(--mg-danger-text);
    color: #fff;
}

.button.warning:focus-visible,
button.warning:focus-visible,
.button.danger:focus-visible,
button.danger:focus-visible {
    box-shadow: var(--mg-ring-danger);
}

/* ── Bağlantı görünümlü buton ───────────────────────────────────── */
.button.link,
button.link,
input[type="button"].link {
    background: transparent;
    color: var(--mg-accent);
    fill: var(--mg-accent);
    border-color: transparent;
    box-shadow: none;
    padding-left: .4rem;
    padding-right: .4rem;
}

.button.link:hover,
button.link:hover,
input[type="button"].link:hover {
    background: transparent;
    color: var(--mg-accent-600);
    text-decoration: underline;
}

/* ── Boyut varyantları ──────────────────────────────────────────── */
.button.small,
button.small,
.btn-sm {
    padding: .5rem 1rem;
    font-size: var(--mg-text-sm);
    border-radius: var(--mg-radius-sm);
}

.button.large,
button.large,
.btn-lg {
    padding: 1.1rem 2rem;
    font-size: var(--mg-text-lg);
    border-radius: var(--mg-radius-lg);
}

/* ═══════════════════════════════════════════════════════════════════
   .btn AİLESİ
   Panelde 185 yerde kullanılıyor, bugüne kadar her sayfa kendi
   tanımını yazıyordu. Artık tek kaynak burası.
   ═══════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: .8rem 1.4rem;
    font-family: var(--mg-font);
    font-size: var(--mg-text-md);
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--mg-radius-md);
    background: var(--mg-primary);
    color: var(--mg-primary-fg);
    box-shadow: var(--mg-shadow-xs);
    transition: background var(--mg-transition), border-color var(--mg-transition),
        box-shadow var(--mg-transition), color var(--mg-transition);
}

.btn:hover {
    background: var(--mg-primary-hover);
    color: var(--mg-primary-fg);
    text-decoration: none;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--mg-ring);
}

.btn.disabled,
.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-primary {
    background: var(--mg-primary);
    color: var(--mg-primary-fg);
    border-color: transparent;
}

.btn-primary:hover {
    background: var(--mg-primary-hover);
    color: var(--mg-primary-fg);
}

.btn-secondary {
    background: var(--mg-surface);
    color: var(--mg-text-secondary);
    border-color: var(--mg-border-strong);
}

.btn-secondary:hover {
    background: var(--mg-surface-hover);
    color: var(--mg-text);
}

.btn-outline {
    background: transparent;
    color: var(--mg-text-secondary);
    border-color: var(--mg-border-strong);
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--mg-surface-hover);
    color: var(--mg-text);
}

.btn-ghost {
    background: transparent;
    color: var(--mg-text-secondary);
    border-color: transparent;
    box-shadow: none;
}

.btn-ghost:hover {
    background: var(--mg-surface-3);
    color: var(--mg-text);
}

.btn-danger {
    background: var(--mg-danger-solid);
    color: #fff;
}

.btn-danger:hover {
    background: var(--mg-danger-text);
    color: #fff;
}

.btn-success {
    background: var(--mg-success-solid);
    color: #fff;
}

.btn-success:hover {
    background: var(--mg-success-text);
    color: #fff;
}

.btn-warning {
    background: var(--mg-warning-solid);
    color: #fff;
}

.btn-warning:hover {
    background: var(--mg-warning-text);
    color: #fff;
}

/* Çerçevesiz, yalnız ikon taşıyan buton (panelde rawBtn adıyla geçer) */
.rawBtn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: .4rem !important;
    color: var(--mg-text-muted) !important;
    border-radius: var(--mg-radius-sm) !important;
    cursor: pointer;
}

.rawBtn:hover {
    background: var(--mg-surface-3) !important;
    color: var(--mg-text) !important;
}

/* ── Buton grubu ────────────────────────────────────────────────── */
.button-group {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
}

.button-group.attached {
    gap: 0;
}

.button-group.attached button,
.button-group.attached .button {
    border-radius: 0;
    margin-left: -1px;
}

.button-group.attached button:first-child,
.button-group.attached .button:first-child {
    border-top-left-radius: var(--mg-radius-md);
    border-bottom-left-radius: var(--mg-radius-md);
    margin-left: 0;
}

.button-group.attached button:last-child,
.button-group.attached .button:last-child {
    border-top-right-radius: var(--mg-radius-md);
    border-bottom-right-radius: var(--mg-radius-md);
}

/* ═══════════════════════════════════════════════════════════════════
   FORMLAR
   Ölçüler (padding, font-size) eski temayla aynı bırakıldı ki mevcut
   form düzenleri kaymasın. Değişen: renk, kenarlık, odak halkası.
   ═══════════════════════════════════════════════════════════════════ */
label {
    display: block;
    color: var(--mg-text-secondary);
    font-size: var(--mg-text-base);
    font-weight: 500;
    margin-bottom: .5rem;
}

label .label-cta {
    float: right;
    font-weight: 400;
    color: var(--mg-accent);
}

fieldset {
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-lg);
    padding: 1.6rem;
    margin: 0 0 2rem;
}

legend {
    padding: 0 .8rem;
    font-weight: 600;
    color: var(--mg-text);
}

input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .825rem 1.5rem;
    font-family: var(--mg-font);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--mg-text);
    background-color: var(--mg-surface-2);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-md);
    transition: border-color var(--mg-transition), box-shadow var(--mg-transition),
        background-color var(--mg-transition);
    -webkit-appearance: none;
    appearance: none;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover {
    border-color: var(--mg-border-strong);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
    outline: none;
    background-color: var(--mg-surface);
    border-color: var(--mg-accent);
    box-shadow: var(--mg-ring);
}

input:disabled,
textarea:disabled,
select:disabled,
input[readonly],
textarea[readonly] {
    background-color: var(--mg-surface-3);
    color: var(--mg-text-muted);
    cursor: not-allowed;
    border-color: var(--mg-border-subtle);
}

textarea {
    min-height: 9rem;
    resize: vertical;
    line-height: 1.6;
}

/* Açılır liste oku (appearance:none sonrası elle çizilir) */
select {
    padding-right: 3.6rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    cursor: pointer;
}

:root[data-theme="dark"] select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d97a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

select[multiple] {
    background-image: none;
    padding-right: 1.5rem;
    min-height: 12rem;
}

::placeholder {
    color: var(--mg-text-subtle);
    opacity: 1;
}

/* ── Onay kutusu ve radyo ───────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
    position: relative;
    display: inline-block;
    width: 1.7rem;
    height: 1.7rem;
    margin: 0 .6rem 0 0;
    padding: 0;
    vertical-align: text-bottom;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border-strong);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--mg-transition), border-color var(--mg-transition),
        box-shadow var(--mg-transition);
}

input[type="checkbox"] {
    border-radius: var(--mg-radius-xs);
}

input[type="radio"] {
    border-radius: var(--mg-radius-full);
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: var(--mg-accent);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: var(--mg-ring);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: var(--mg-accent);
    border-color: var(--mg-accent);
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── Panelde kullanılan form sarmalayıcıları ────────────────────── */
.formInput {
    margin-top: 10px;
}

.field {
    margin-bottom: 1.6rem;
}

/* Hata durumu */
.error label,
label.error {
    color: var(--mg-danger-text);
}

.error input[type="text"],
.error input[type="email"],
.error input[type="number"],
.error input[type="password"],
.error textarea,
.error select,
input.error,
select.error,
textarea.error {
    border-color: var(--mg-danger-solid);
    background-color: var(--mg-danger-bg);
}

.error input:focus,
.error select:focus,
.error textarea:focus,
input.error:focus {
    border-color: var(--mg-danger-solid);
    box-shadow: var(--mg-ring-danger);
}

/* ── Girdi grubu (metin kutusu + bitişik buton) ─────────────────── */
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group input,
.input-group select {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .append,
.input-group button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
    flex: 0 0 auto;
}

.input-group .append {
    display: inline-flex;
    align-items: center;
    padding: 0 1.4rem;
    background: var(--mg-surface-3);
    border: 1px solid var(--mg-border);
    color: var(--mg-text-muted);
    font-size: var(--mg-text-base);
    border-radius: 0 var(--mg-radius-md) var(--mg-radius-md) 0;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLOLAR
   Hücre dolgusu eski temayla aynı (1.2rem 1.5rem); satır ayrımı
   zebra yerine ince çizgiyle yapılıyor, başlık satırı sabitlenebilir.
   ═══════════════════════════════════════════════════════════════════ */
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: var(--mg-text-base);
}

table th {
    padding: 1.1rem 1.5rem;
    text-align: left;
    font-weight: 600;
    font-size: var(--mg-text-sm);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mg-text-muted);
    background: var(--mg-surface-2);
    border-bottom: 1px solid var(--mg-border);
    white-space: nowrap;
}

table th:first-child {
    border-top-left-radius: var(--mg-radius-md);
}

table th:last-child {
    border-top-right-radius: var(--mg-radius-md);
}

table th:hover {
    cursor: pointer;
}

table th:empty:hover {
    cursor: default;
}

table td {
    padding: 1.2rem 1.5rem;
    text-align: left;
    color: var(--mg-text-secondary);
    border-bottom: 1px solid var(--mg-border-subtle);
    vertical-align: middle;
}

table tbody tr {
    transition: background var(--mg-transition);
}

table tbody tr:hover {
    background: var(--mg-surface-2);
}

table tbody tr:last-child td {
    border-bottom: 0;
}

/* Eski temanın zebra deseni bilinçli olarak kaldırıldı: ince çizgi
   yoğun tablolarda daha okunur. İhtiyaç olan tabloda .striped ile
   geri getirilebilir. */
table.striped tbody tr:nth-child(odd) {
    background: var(--mg-surface-2);
}

table.summary th {
    text-transform: none;
    font-size: var(--mg-text-base);
}

table.summary tr td:first-child {
    font-weight: 500;
    color: var(--mg-text);
}

/* ═══════════════════════════════════════════════════════════════════
   ETİKET (.tag) ve ROZET (.badge)
   ═══════════════════════════════════════════════════════════════════ */
.tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: var(--mg-radius-full);
    margin-right: .5rem;
    margin-bottom: 5px;
    vertical-align: middle;
    line-height: 18px;
    padding: 2px 10px;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
    background: var(--mg-surface-3);
    color: var(--mg-text-secondary);
    border: 1px solid transparent;
}

.tag.blue {
    background-color: var(--mg-info-bg);
    color: var(--mg-info-text);
    border-color: var(--mg-info-border);
}

.tag.green {
    background-color: var(--mg-success-bg);
    color: var(--mg-success-text);
    border-color: var(--mg-success-border);
}

.tag.yellow,
.tag.orange {
    background-color: var(--mg-warning-bg);
    color: var(--mg-warning-text);
    border-color: var(--mg-warning-border);
}

.tag.red {
    background-color: var(--mg-danger-bg);
    color: var(--mg-danger-text);
    border-color: var(--mg-danger-border);
}

.tag.grey {
    background-color: var(--mg-surface-3);
    color: var(--mg-text-muted);
    border-color: var(--mg-border);
}

/* Bekleyen durum: eski temada SVG saat ikonu vardı, yerine noktalı
   gösterge kullanılıyor (ikon dosyasına bağımlılık kalmıyor). */
.tag.pending::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.tag.collapsable a,
.tag.remove a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: .3rem;
    border-radius: 50%;
    color: inherit;
    opacity: .6;
    font-size: 14px;
    line-height: 1;
}

.tag.collapsable a::before,
.tag.remove a::before {
    content: "\00d7";
}

.tag.collapsable a:hover,
.tag.remove a:hover {
    opacity: 1;
    background: rgba(0, 0, 0, .08);
}

/* ── Rozet ──────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 2px 9px;
    border-radius: var(--mg-radius-full);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    background: var(--mg-surface-3);
    color: var(--mg-text-secondary);
    border: 1px solid var(--mg-border);
}

.badge-primary {
    background: var(--mg-accent-50);
    color: var(--mg-accent-700);
    border-color: var(--mg-accent-200);
}

.badge-success {
    background: var(--mg-success-bg);
    color: var(--mg-success-text);
    border-color: var(--mg-success-border);
}

.badge-danger {
    background: var(--mg-danger-bg);
    color: var(--mg-danger-text);
    border-color: var(--mg-danger-border);
}

.badge-warning {
    background: var(--mg-warning-bg);
    color: var(--mg-warning-text);
    border-color: var(--mg-warning-border);
}

.badge-info {
    background: var(--mg-info-bg);
    color: var(--mg-info-text);
    border-color: var(--mg-info-border);
}

.badge-secondary {
    background: var(--mg-surface-3);
    color: var(--mg-text-muted);
    border-color: var(--mg-border);
}

.badge-dark {
    background: var(--mg-primary);
    color: var(--mg-primary-fg);
    border-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   UYARI KUTUSU (.alert)
   ───────────────────────────────────────────────────────────────────
   Kutu kendi başına duran bir bileşendir.

   Eskiden kartın üst kenarına yapışsın diye negatif kenar boşluğu
   taşıyordu (margin: -2rem -2rem ...). Bu, kart içinde OLMAYAN her
   uyarıyı kapsayıcısının 20 piksel dışına taşırıyordu; panelde
   uyarıların çoğu doğrudan .content altında duruyor, yani kural
   azınlık için yazılmış çoğunluğu bozuyordu. Kart içindeki üç kullanım
   da zaten satır içi margin ile o davranışı iptal etmeye çalışıyordu.

   İSİM TAKMALARI: Panel iki ayrı adlandırma kullanıyor; sayfaların bir
   kısmı "alert warning", bir kısmı "alert alert-danger" yazıyor. Tema
   ikisini de tanır. Tanımasaydı 41 uyarının 28'i renksiz kalırdı ve
   düzeltmek için 41 sayfaya dokunmak gerekirdi.
   ═══════════════════════════════════════════════════════════════════ */
.alert {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    box-sizing: border-box;
    margin: 0 0 2rem;
    padding: 1.4rem 1.8rem 1.4rem 4.6rem;
    text-align: left;
    color: var(--mg-text-secondary);
    background-color: var(--mg-surface-2);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-lg);
    box-shadow: none;
}

.alert::before {
    content: "";
    position: absolute;
    left: 1.8rem;
    top: 1.6rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--mg-text-subtle);
}

.alert::after {
    content: "i";
    position: absolute;
    left: 1.8rem;
    top: 1.6rem;
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

/* ── Başarılı ─────────────────────────────────────────────────────── */
.alert.success,
.alert.alert-success {
    background-color: var(--mg-success-bg);
    border-color: var(--mg-success-border);
    color: var(--mg-success-text);
}

.alert.success::before,
.alert.alert-success::before {
    background: var(--mg-success-solid);
}

.alert.success::after,
.alert.alert-success::after {
    content: "13";
}

/* ── Hata ─────────────────────────────────────────────────────────── */
.alert.error,
.alert.alert-danger {
    background-color: var(--mg-danger-bg);
    border-color: var(--mg-danger-border);
    color: var(--mg-danger-text);
}

.alert.error::before,
.alert.alert-danger::before {
    background: var(--mg-danger-solid);
}

.alert.error::after,
.alert.alert-danger::after {
    content: "!";
}

/* ── Uyarı ────────────────────────────────────────────────────────── */
.alert.notice,
.alert.warning,
.alert.alert-warning {
    background-color: var(--mg-warning-bg);
    border-color: var(--mg-warning-border);
    color: var(--mg-warning-text);
}

.alert.notice::before,
.alert.warning::before,
.alert.alert-warning::before {
    background: var(--mg-warning-solid);
}

.alert.notice::after,
.alert.warning::after,
.alert.alert-warning::after {
    content: "!";
}

/* ── Bilgi ────────────────────────────────────────────────────────── */
.alert.notification,
.alert.alert-info {
    background-color: var(--mg-info-bg);
    border-color: var(--mg-info-border);
    color: var(--mg-info-text);
}

.alert.notification::before,
.alert.alert-info::before {
    background: var(--mg-info-solid);
}

.alert .close {
    position: absolute;
    right: 1.4rem;
    top: 1.2rem;
    cursor: pointer;
    opacity: .5;
    font-size: 1.8rem;
    line-height: 1;
}

.alert .close:hover {
    opacity: 1;
}

.alert dl {
    margin: 0;
}

.alert dl dt {
    font-weight: 600;
}

.alert dl dd {
    margin-left: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SEKMELER
   ═══════════════════════════════════════════════════════════════════ */
.tabs {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    border-bottom: 1px solid var(--mg-border);
    box-shadow: none;
}

.tabs li {
    flex: 0 0 auto;
    padding: 0 1.6rem;
    margin: 0;
    list-style: none;
}

.tabs li:first-child {
    padding-left: 0;
}

.tabs li a {
    display: inline-block;
    position: relative;
    font-size: var(--mg-text-md);
    font-weight: 500;
    line-height: 3.4rem;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    color: var(--mg-text-muted);
    padding-top: .3rem;
    border-bottom: 2px solid transparent;
    transition: color var(--mg-transition), border-color var(--mg-transition);
}

.tabs li a:hover {
    color: var(--mg-text);
    border-bottom-color: var(--mg-border-strong);
}

.tabs li a.active,
.tabs li.active a {
    color: var(--mg-text);
    border-bottom-color: var(--mg-primary);
}

/* Panelde bazı sayfalarda .sectionTab kalıbı var; aynı dile getiriliyor */
.sectionTab {
    cursor: pointer;
    color: var(--mg-text-muted);
    font-weight: 500;
    transition: color var(--mg-transition);
}

.sectionTab.active {
    color: var(--mg-text);
}

/* ═══════════════════════════════════════════════════════════════════
   SAYFALAMA
   ═══════════════════════════════════════════════════════════════════ */

/* Sunucu tarafli sayfalama cubugu (assets/php/lib/mg-paging.php).
   clear/width burada veriliyor cunku cubuk bir flex kutusu ve Skeleton
   kolonlari (.columns) float:left. Flex kutusu float'in yanina sikisip
   genisligi SIFIRA dusuyor, icindeki sayac ve sayfa baglantilari da
   kartin disina tasiyordu (dar ekranda olculdu: /categories 97px). */
.mg-paging,
.mg-paging-search {
    clear: both;
    width: 100%;
    box-sizing: border-box;
}

.pagination {
    width: 100%;
    text-align: center;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.pagination .button-group {
    display: inline-flex;
    margin: 0;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    height: 3.4rem;
    padding: 0 1rem;
    border-radius: var(--mg-radius-md);
    font-size: var(--mg-text-base);
    font-weight: 500;
    color: var(--mg-text-secondary);
    border: 1px solid var(--mg-border);
    background: var(--mg-surface);
    transition: background var(--mg-transition), border-color var(--mg-transition), color var(--mg-transition);
}

.pagination a:hover {
    background: var(--mg-surface-hover);
    border-color: var(--mg-border-strong);
    color: var(--mg-text);
}

.pagination .active,
.pagination a.active,
.pagination span.active {
    background: var(--mg-primary);
    border-color: var(--mg-primary);
    color: var(--mg-primary-fg);
}

.pagination .disabled {
    opacity: .45;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   İSTATİSTİK KUTUSU
   Panelde .stat-box adıyla geçiyordu, tanımı sayfa içindeydi.
   ═══════════════════════════════════════════════════════════════════ */
.stat-box {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.6rem 1.8rem;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-lg);
    box-shadow: var(--mg-shadow-xs);
}

.stat-box .stat-label {
    font-size: var(--mg-text-sm);
    font-weight: 500;
    color: var(--mg-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.stat-box .stat-value {
    font-size: var(--mg-text-3xl);
    font-weight: 600;
    line-height: 1.2;
    color: var(--mg-text);
}

/* ── Bölüm ayırıcı başlık ───────────────────────────────────────── */
.textsGroupTitle {
    font-size: var(--mg-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mg-text-subtle);
    margin-bottom: .8rem;
}

/* ── Bekleme göstergesi: blok hâlinde ───────────────────────────────
   Bir bölüm veya tablo veri beklerken kullanılır. Panelde bugüne kadar
   her sayfa /assets/images/loading.gif basıyordu; gif sabit renkli,
   temayı tanımıyor ve her sayfada farklı boyutta veriliyordu (100px,
   150px, ölçüsüz). Tek gösterge:

       <div class="mgYukleniyor">Yükleniyor...</div>

   Metin isteğe bağlı; boş bırakılırsa yalnız dönen halka görünür. */
.mgYukleniyor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 5rem 2rem;
    color: var(--mg-text-muted);
    font-size: var(--mg-text-base);
}

.mgYukleniyor::before {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 3px solid var(--mg-border);
    border-top-color: var(--mg-text-muted);
    border-radius: 50%;
    animation: mg-spin .7s linear infinite;
}

/* ── Yükleniyor göstergesi ──────────────────────────────────────── */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--mg-border);
    border-top-color: var(--mg-text-muted);
    border-radius: 50%;
    animation: mg-spin .7s linear infinite;
    display: inline-block;
}

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

/* ═══════════════════════════════════════════════════════════════════
   SİPARİŞ TABLOSU (.mgOt)
   milagron-orders-table.js tarafından çizilir. Sipariş satırları hazır
   HTML parçalarından oluşur ve yükseklikleri ürün sayısına göre değişir;
   bu yüzden satır yüksekliği hesaplanmaz, içeriğe bırakılır.
   ═══════════════════════════════════════════════════════════════════ */
/* Tabloyu taşıyan kapsayıcı. Sayfalarda genellikle flex bir <section>
   içindedir; min-width sıfırlanmazsa tablonun min-width'i kapsayıcıyı
   şişirir ve tablo yatay kaydırmak yerine sayfayı taşırır.

   --mgOt-enaz: tablonun rahat durduğu en dar genişlik. JS bunu kurulumda
   yazar ve kapsayıcı bu değerin altına inince .mgOtKart sınıfını ekler. */
.mgOtKap {
    width: 100%;
    min-width: 0;
}

.mgOt {
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-lg);
    overflow: hidden;
}

/* Yatay kaydırma yalnız EMNİYET AĞI: container query desteklemeyen eski
   tarayıcıda kart moduna geçilemez, tablo hiç değilse kaydırılabilir kalır.
   Destekleyen tarayıcıda kart modu devreye girer ve buraya hiç düşülmez.

   Not: yapışkan başlık bilerek yok. Yatay kaydırma kutusu aynı zamanda
   dikey kaydırma bağlamı sayıldığı için "position:sticky" başlığı sayfa
   yerine bu kutuya göre konumlar ve ilk satırların üstüne biner. */
.mgOtKaydir {
    overflow-x: auto;
}

.mgOtTablo {
    table-layout: fixed;
    min-width: var(--mgOt-enaz, 900px);
}

.mgOtTablo td {
    vertical-align: middle;
    word-break: break-word;
}

.mgOtOrta {
    text-align: center !important;
}

.mgOtSec {
    width: 44px;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.mgOtSec input {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--mg-primary);
}

.mgOtYok {
    color: var(--mg-text-subtle);
}

.mgOtBos td {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--mg-text-muted);
}

/* ── Sıralama göstergesi ────────────────────────────────────────── */
.mgOtSiralanir {
    user-select: none;
}

.mgOtOk {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .6rem;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--mg-border-strong);
    opacity: .45;
}

.mgOtArtan .mgOtOk {
    opacity: 1;
    border-top: 0;
    border-bottom: 5px solid var(--mg-text);
}

.mgOtAzalan .mgOtOk {
    opacity: 1;
    border-top-color: var(--mg-text);
}

/* ── Alt şerit: kayıt sayısı, sayfalama, sayfa boyutu ───────────── */
.mgOtAlt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding: 1.2rem 1.5rem;
    border-top: 1px solid var(--mg-border);
    background: var(--mg-surface-2);
}

.mgOtAlt .pagination {
    width: auto;
    margin-top: 0;
}

.mgOtBilgi {
    font-size: var(--mg-text-sm);
    color: var(--mg-text-muted);
    white-space: nowrap;
}

.mgOtBoyut {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: var(--mg-text-sm);
    color: var(--mg-text-muted);
    white-space: nowrap;
}

.mgOtBoyut select {
    width: auto;
    min-width: 7rem;
    margin: 0;
    padding: .4rem 2.4rem .4rem .8rem;
}

@media (max-width: 900px) {
    .mgOtAlt {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .mgOtBoyut {
        justify-content: center;
    }
}

/* ── KART MODU ──────────────────────────────────────────────────────
   Kutu tabloyu taşımayacak kadar daraldığında satırlar alt alta dizilir.
   Böylece yatay kaydırma tamamen kalkar, hareket yalnız dikeyde olur.
   Başlık satırı gizlendiği için her hücrenin üstüne kolon adı yazılır
   (JS'in bastığı data-baslik). Tablo yapısı korunur, yalnız display
   değişir; JS tarafında ikinci bir çizim yolu yoktur.

   .mgOtKart sınıfını JS ekler: kapsayıcı genişliği tablonun asgari
   genişliğinin altına düştüğünde. Eşiği ekran değil KUTU genişliği
   belirler, çünkü kenar çubuğu açıkken aynı ekranda 272 piksel daha az
   yer kalır ve medya sorgusu bunu göremez. */
.mgOtKart .mgOtKaydir {
    overflow-x: visible;
}

.mgOtKart .mgOtTablo {
    display: block;
    min-width: 0;
    table-layout: auto;
}

.mgOtKart .mgOtTablo colgroup,
.mgOtKart .mgOtTablo thead {
    display: none;
}

.mgOtKart .mgOtTablo tbody {
    display: block;
}

/* Her satır bir kart. Ayrı kutu yerine ince çizgiyle bölünüyor;
   .mgOt zaten kendisi bir yüzey, iç içe kart kalabalık görünüyordu. */
.mgOtKart .mgOtTablo tbody tr {
    display: block;
    position: relative;
    padding: 1.6rem;
    border-bottom: 1px solid var(--mg-border);
}

.mgOtKart .mgOtTablo tbody tr:last-child {
    border-bottom: 0;
}

.mgOtKart .mgOtTablo td {
    display: block;
    width: auto !important;
    padding: .7rem 0;
    border-bottom: 0;
    text-align: left !important;
}

.mgOtKart .mgOtTablo td:first-of-type {
    padding-top: 0;
}

.mgOtKart .mgOtTablo td:last-child {
    padding-bottom: 0;
}

.mgOtKart .mgOtTablo td[data-baslik]::before {
    content: attr(data-baslik);
    display: block;
    margin-bottom: .5rem;
    font-size: var(--mg-text-sm);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mg-text-muted);
}

/* Kısa değerler (fiyat gibi) etiketiyle aynı satırda durur. */
.mgOtKart .mgOtTablo td.mgOtSatirIci {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
}

.mgOtKart .mgOtTablo td.mgOtSatirIci::before {
    margin-bottom: 0;
}

/* Seçim kutusu kartın sağ üst köşesine geçer; kendi satırını
   harcamasın ve başlık hizasında kalsın diye. */
.mgOtKart .mgOtTablo td.mgOtSec {
    position: absolute;
    top: 1.4rem;
    right: 1.6rem;
    width: auto !important;
    padding: 0 !important;
}

/* Parmakla dokunulacak: masaüstündeki 18 pikselden biraz büyük. */
.mgOtKart .mgOtTablo td.mgOtSec input {
    width: 20px;
    height: 20px;
}

.mgOtKart .mgOtBos td {
    text-align: center !important;
}

/* Daha da dar alanda (telefon) butonlar tam genişlik: dokunma hedefi
   büyür ve yan yana sıkışıp taşmazlar. */
.mgOtDar .mgOtTablo td .btn,
.mgOtDar .mgOtTablo td button {
    width: 100%;
}

.mgOtDar .mgOtTablo td>div {
    width: 100%;
}