/* =========================================================
   YALIN TELEKOM — YÖNETİM PANELİ
   Ortak tasarım sistemi

   Renkler logodan alınmıştır:
   lacivert #1E2250, turuncu #F48620.
   Kenar çubuğu logonun arka planıyla aynı renk olduğu için
   logo görseli kenarları belli olmadan oturur.
========================================================= */

:root {
    --navy: #1E2250;
    --navy-soft: #2A3068;
    --navy-line: rgba(255, 255, 255, .10);
    --orange: #F48620;
    --orange-dark: #DC7414;

    --ink: #172033;
    --ink-soft: #2B3350;
    --muted: #6B7488;
    --muted-light: #8B93A6;

    --line: #E1E6EF;
    --line-soft: #EDF0F6;
    --page: #F4F6FB;
    --surface: #FFFFFF;
    --surface-alt: #FAFBFD;

    --green: #15884C;
    --green-bg: #E7F8EF;
    --amber: #B0790F;
    --amber-bg: #FFF4DF;
    --red: #C62828;
    --red-bg: #FDECEC;
    --blue: #2F5FC7;
    --blue-bg: #E9EFFC;
    --violet: #6A4FD0;
    --violet-bg: #EDE9FC;

    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 4px 16px rgba(23, 32, 51, .05);
    --shadow-lg: 0 18px 44px rgba(23, 32, 51, .10);

    --sidebar-w: 262px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

/*
   Tarayıcı davranışlarını eşitleme.

   Firefox, Chrome, Safari ve Edge arasında en çok ayrışan
   noktalar: form öğelerinin yazı tipi, mobil yatay çevirmede
   metin büyütme ve dokunmatik gecikme.
*/

html {
    /* Telefon yatay tutulunca metni kendiliğinden büyütmesin. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /*
       Yatay taşmayı kes: tek bir geniş öğe tüm sayfayı
       kaydırılabilir yapıyordu.
    */
    overflow-x: hidden;
}

body {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont,
        Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--page);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/*
   Form öğeleri yazı tipini kendiliğinden devralmaz —
   Firefox'ta özellikle belirgin.
*/

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/*
   Firefox düğme ve girdilerin içine görünmez bir dolgu
   koyuyor; kaldırılmazsa aynı düğme Firefox'ta Chrome'dan
   birkaç piksel yüksek çıkıyor.
*/

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Firefox'ta geçersiz alanların kırmızı gölgesini kaldır. */

input:-moz-ui-invalid,
select:-moz-ui-invalid {
    box-shadow: none;
}

/*
   Dokunmatikte bağlantı ve düğmelere basınca çıkan gri
   parlama; iOS ve Android WebView'de görünüyor.
*/

a,
button,
.nav-item,
.btn {
    -webkit-tap-highlight-color: rgba(30, 34, 80, .12);
}

img,
svg,
video {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/*
   Uzun seri numaraları, MAC adresleri ve e-postalar dar
   ekranda kutudan taşıyordu.
*/

.cell-mono,
.cell-title,
.modal-head p {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* =========================================================
   UYGULAMA KABUĞU
========================================================= */

/*
   Mobil tarayıcılarda 100vh adres çubuğunu da sayar; sayfanın
   alt kısmı çubuğun altında kalıyor. dvh gerçek görünür
   yüksekliği verir (Firefox 101+, Safari 15.4+, Chrome 108+).
   Desteklemeyen tarayıcı ilk kuralda kalır.
*/

.app {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---------- KENAR ÇUBUĞU ---------- */

.sidebar {
    width: var(--sidebar-w);
    flex: none;
    background: var(--navy);
    color: #fff;
    padding: 24px 16px 20px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    /* Menü uzunsa kendi içinde kaysın, sayfayı uzatmasın. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.brand {
    display: block;
    padding: 4px 6px 26px;
}

.brand img {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
    margin: 0 auto;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-label {
    font-size: 10px;
    letter-spacing: 1.6px;
    font-weight: 700;
    color: #7A82AC;
    padding: 0 12px 10px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border-radius: var(--radius-sm);
    color: #C7CCE6;
    text-decoration: none;
    font-size: 14px;
    transition: background .16s, color .16s;
}

.nav-item svg {
    flex: none;
    opacity: .9;
}

.nav-item:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.nav-item.is-active {
    background: var(--orange);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(244, 134, 32, .28);
}

.nav-item.is-active svg {
    opacity: 1;
}

.sidebar-foot {
    margin-top: auto;
    padding: 18px 12px 0;
    border-top: 1px solid var(--navy-line);
}

.status {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: #C7CCE6;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #35D07F;
    box-shadow: 0 0 0 4px rgba(53, 208, 127, .16);
}

.version {
    margin-top: 11px;
    font-size: 10.5px;
    line-height: 1.6;
    color: #767EA8;
}

/* ---------- ÜST BAR ---------- */

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    gap: 18px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-title {
    flex: 1;
    min-width: 0;
}

.topbar-title h1 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--navy);
}

.topbar-title p {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 4px;
}

.nav-toggle {
    display: none;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.avatar {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.user-meta strong {
    display: block;
    font-size: 13px;
    line-height: 1.3;
}

.user-meta small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

/* ---------- İÇERİK ---------- */

.content {
    padding: 26px 32px 34px;
    flex: 1;
}

.page-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--muted-light);
}

/* =========================================================
   ÖĞELER
========================================================= */

/* ---------- KARŞILAMA KARTI ---------- */

.hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 28px 32px;
    color: #fff;
    background:
        radial-gradient(700px 400px at 8% 0%, #2C3372 0%, rgba(44, 51, 114, 0) 60%),
        radial-gradient(520px 380px at 96% 100%, rgba(244, 134, 32, .26) 0%, rgba(244, 134, 32, 0) 62%),
        var(--navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 14px 34px rgba(30, 34, 80, .18);
}

.hero-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .5;
}

.hero-text {
    position: relative;
    max-width: 620px;
}

.eyebrow {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: var(--orange);
}

.hero h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.4px;
    margin-top: 10px;
}

.hero p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #C3C8E4;
    margin-top: 9px;
}

.hero-badge {
    position: relative;
    flex: none;
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* ---------- İSTATİSTİK KARTLARI ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow);
}

.stat-icon {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.is-blue   { background: var(--blue-bg);   color: var(--blue); }
.stat-icon.is-green  { background: var(--green-bg);  color: var(--green); }
.stat-icon.is-amber  { background: var(--amber-bg);  color: var(--amber); }
.stat-icon.is-violet { background: var(--violet-bg); color: var(--violet); }

.stat-label {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

.stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.5px;
    margin-top: 4px;
}

/* ---------- BÖLÜM BAŞLIĞI ---------- */

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 28px 0 14px;
}

.section-head h2 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.section-head p {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 5px;
}

.section-actions {
    display: flex;
    gap: 9px;
    flex: none;
}

/* ---------- KART / PANEL ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card + .card {
    margin-top: 20px;
}

.card-head {
    padding: 20px 22px;
    border-bottom: 1px solid var(--line-soft);
}

.card-head h2 {
    font-size: 16px;
    font-weight: 700;
}

.card-head p {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 5px;
}

.card-body {
    padding: 22px;
}

/* ---------- TABLO ---------- */

.table-wrap {
    position: relative;
    overflow-x: auto;
    /* iOS'ta atlamalı kaydırma yerine akıcı kaydırma. */
    -webkit-overflow-scrolling: touch;
}

/*
   border-collapse: collapse ile position: sticky birlikte
   çalışmıyor — Firefox ve Chrome'da başlığın kenarlığı yerinde
   kalıyor. separate + border-spacing 0 kullanıp kenarlığı
   kutu gölgesiyle çiziyoruz; görünüm aynı, davranış doğru.
*/

table.data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 720px;
}

table.data th,
table.data td {
    padding: 13px 16px;
    text-align: left;
    box-shadow: inset 0 -1px 0 var(--line-soft);
    white-space: nowrap;
}

table.data th {
    background: var(--surface-alt);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1;
}

table.data td {
    font-size: 13.5px;
}

/*
   Üzerine gelme yalnızca fareli cihazlarda. Dokunmatikte
   :hover bir kez tetiklenip satırda takılı kalıyor.
*/

@media (hover: hover) {
    table.data tbody tr:hover {
        background: var(--surface-alt);
    }
}

table.data tbody tr:last-child td {
    box-shadow: none;
}

.cell-title {
    font-weight: 600;
}

.cell-sub {
    font-size: 11px;
    color: var(--muted-light);
    margin-top: 3px;
}

.cell-mono {
    font-family: "Consolas", "SF Mono", Menlo, monospace;
    font-size: 12.5px;
}

.cell-vendor {
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: .4px;
    color: var(--muted);
    font-weight: 600;
}

/* ---------- ROZETLER ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.badge--online,
.badge--approved { background: var(--green-bg); color: var(--green); }
.badge--pending  { background: var(--amber-bg); color: var(--amber); }
.badge--rejected { background: var(--red-bg);   color: var(--red); }
.badge--offline,
.badge--default  { background: #EEF1F6;         color: var(--muted); }

/* ---------- SİNYAL ---------- */

.signal--good   { color: var(--green); font-weight: 600; }
.signal--warn   { color: var(--amber); font-weight: 600; }
.signal--danger { color: var(--red);   font-weight: 600; }

/* ---------- BUTONLAR ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
    white-space: nowrap;
}

.btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 8px 18px rgba(244, 134, 32, .26);
}

.btn--primary:hover:not(:disabled) {
    background: var(--orange-dark);
}

.btn--outline {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink-soft);
}

.btn--outline:hover:not(:disabled) {
    border-color: var(--navy);
    color: var(--navy);
}

.btn--sm {
    padding: 7px 11px;
    font-size: 12px;
    border-radius: 8px;
}

.btn--approve {
    background: var(--green-bg);
    color: var(--green);
}

.btn--approve:hover:not(:disabled) {
    background: #D8F2E4;
}

.btn--reject {
    background: var(--red-bg);
    color: var(--red);
}

.btn--reject:hover:not(:disabled) {
    background: #FBDCDC;
}

.btn--quiet {
    background: transparent;
    border-color: var(--line);
    color: var(--muted);
}

.btn--quiet:hover:not(:disabled) {
    border-color: var(--red);
    color: var(--red);
}

.row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ---------- DURUM EKRANLARI ---------- */

.state {
    padding: 54px 24px;
    text-align: center;
}

.state-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--line-soft);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.state h3 {
    font-size: 15.5px;
    font-weight: 700;
}

.state p {
    font-size: 13px;
    color: var(--muted);
    margin-top: 7px;
    line-height: 1.6;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.state--error {
    color: var(--red);
}

.state--error .state-icon {
    background: var(--red-bg);
    color: var(--red);
}

.spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid var(--line);
    border-top-color: var(--orange);
    margin: 0 auto 14px;
    animation: spin .7s linear infinite;
}

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

/* ---------- FORM ---------- */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.field.is-full {
    grid-column: 1 / -1;
}

.field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 7px;
}

.field .req {
    color: var(--orange);
}

.field input,
.field select {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    outline: none;
    transition: border-color .16s, box-shadow .16s, background .16s;
}

.field input::placeholder {
    color: #A9B1C2;
}

/*
   Açılır listeyi tarayıcılar arasında eşitle. Firefox kendi
   okunu ve iç dolgusunu koyuyor, Safari yuvarlak köşe ekliyor;
   ikisini de kapatıp oku kendimiz çiziyoruz.
*/

.field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B7488' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}

/* Firefox açılır listesinin kendi satırları beyaz olsun. */

.field select option {
    background: var(--surface);
    color: var(--ink);
}

/*
   background-color kullanılıyor: kısayol "background" olsaydı
   açılır listenin ok görselini de sıfırlar, odaklanınca ok
   kaybolurdu.
*/

.field input:focus,
.field select:focus {
    border-color: var(--navy);
    background-color: var(--surface);
    box-shadow: 0 0 0 4px rgba(30, 34, 80, .09);
}

.form-msg {
    grid-column: 1 / -1;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    line-height: 1.5;
}

.form-msg.is-success {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid #C9EBD9;
}

.form-msg.is-error {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid #F6C9C9;
}

.form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ---------- ODAK ----------

   Kademeli yaklaşım: önce her odakta halka çiziyoruz, sonra
   :focus-visible'ı anlayan tarayıcılarda fare tıklamasında
   kaldırıyoruz.

   Tersi sırada yazılırsa (:focus-visible'ı destekleyene halka,
   desteklemeyene hiçbir şey) eski Safari ve Firefox'ta klavye
   odağı hiç görünmüyor. Buradaki sıralamada ise desteklemeyen
   tarayıcı halkayı her zaman gösteriyor — fazladan görünür
   olması, hiç görünmemesinden iyi.
*/

.btn:focus,
.nav-item:focus,
.nav-toggle:focus,
.modal-close:focus,
.field input:focus,
.field select:focus {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.btn:focus:not(:focus-visible),
.nav-item:focus:not(:focus-visible),
.nav-toggle:focus:not(:focus-visible),
.modal-close:focus:not(:focus-visible),
.field input:focus:not(:focus-visible),
.field select:focus:not(:focus-visible) {
    outline: none;
}

.btn:focus-visible,
.nav-item:focus-visible,
.nav-toggle:focus-visible,
.modal-close:focus-visible,
.field input:focus-visible,
.field select:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* =========================================================
   MODAL
========================================================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 19, 45, .55);
    overflow-y: auto;
}

.modal-box {
    width: 100%;
    max-width: 620px;
    background: var(--surface);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    margin: auto;
    overflow: hidden;
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line-soft);
}

.modal-head h2 {
    font-size: 17px;
    font-weight: 700;
}

.modal-head p {
    font-size: 12px;
    color: var(--muted);
    margin-top: 5px;
    font-family: "Consolas", "SF Mono", Menlo, monospace;
    word-break: break-all;
}

.modal-close {
    flex: none;
    border: 0;
    background: var(--line-soft);
    color: var(--muted);
    width: 32px;
    height: 32px;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: #E3E7F0;
    color: var(--ink);
}

.modal-body {
    padding: 20px 22px 24px;
}

.modal-section + .modal-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line-soft);
}

.modal-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.modal-section-head h3 {
    font-size: 14.5px;
    font-weight: 700;
}

/* İşlem sonucu bildirimi */

.notice {
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.notice.is-success {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid #C9EBD9;
}

.notice.is-queued {
    background: var(--amber-bg);
    color: var(--amber);
    border: 1px solid #F2DDB4;
}

.notice.is-error {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid #F6C9C9;
}

/* =========================================================
   MOBİL
========================================================= */

.backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 19, 45, .5);
    z-index: 40;
}

.backdrop.is-open {
    display: block;
}

@media (max-width: 1100px) {
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- TABLETTE TABLOLAR ---------- */

@media (max-width: 1000px) {

    /*
       Yatay kaydırmanın var olduğu belli olsun: sağ kenara
       kaybolan bir gölge koyuyoruz.
    */

    .table-wrap {
        background:
            linear-gradient(to right, var(--surface) 30%,
                rgba(255, 255, 255, 0)),
            linear-gradient(to right, rgba(255, 255, 255, 0),
                var(--surface) 70%) 100% 0,
            radial-gradient(farthest-side at 0 50%,
                rgba(23, 32, 51, .14), rgba(0, 0, 0, 0)),
            radial-gradient(farthest-side at 100% 50%,
                rgba(23, 32, 51, .14), rgba(0, 0, 0, 0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: var(--shadow-lg);
    }

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

    .nav-toggle {
        display: flex;
    }

    .topbar {
        padding: 14px 18px;
    }

    .topbar-title h1 {
        font-size: 18px;
    }

    .topbar-title p {
        display: none;
    }

    .user-meta {
        display: none;
    }

    .content {
        padding: 20px 18px 28px;
    }

    .hero {
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-badge {
        display: none;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-footer {
        flex-direction: column;
        gap: 6px;
    }
}

/* =========================================================
   TELEFON — TABLOLAR KART OLUR

   5 ile 12 sütun arasındaki panel tabloları dar ekranda
   yatay kaydırmayla da okunmuyor. Bu genişlikten aşağıda her
   satır bir karta, her hücre "Başlık ....... Değer" biçiminde
   bir satıra dönüşüyor.

   Başlık metni panel.js tarafından data-label olarak
   hücrelere kopyalanıyor; sayfalarda ayrıca işaretleme
   gerekmiyor.
========================================================= */

@media (max-width: 760px) {

    .table-wrap {
        overflow-x: visible;
        background: none;
    }

    table.data {
        min-width: 0;
        display: block;
    }

    table.data thead {
        /*
           Ekran okuyucudan gizlemeden görsel olarak kaldır:
           başlıklar artık her hücrenin yanında yazıyor.
        */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    table.data tbody,
    table.data tbody tr,
    table.data tbody td {
        display: block;
        width: auto;
    }

    table.data tbody tr {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        padding: 4px 14px;
        margin-bottom: 10px;
    }

    table.data tbody tr:last-child {
        margin-bottom: 0;
    }

    table.data tbody td {
        padding: 9px 0;
        box-shadow: inset 0 -1px 0 var(--line-soft);
        white-space: normal;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        text-align: right;
    }

    table.data tbody tr td:last-child {
        box-shadow: none;
    }

    /* Sütun adı solda, değer sağda. */

    table.data tbody td[data-label]::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: var(--muted-light);
    }

    /*
       İçinde düğme kümesi olan hücre (İşlem sütunu) alt alta
       daha rahat duruyor.
    */

    table.data tbody td.is-actions {
        display: block;
        text-align: left;
    }

    table.data tbody td.is-actions::before {
        display: block;
        max-width: none;
        margin-bottom: 8px;
    }

    .row-actions .btn {
        flex: 1 1 auto;
        min-width: 96px;
    }

    /* "Kayıt yok" gibi tek hücreli satırlar kart olmasın. */

    table.data tbody tr.is-message {
        border: 0;
        padding: 0;
        background: none;
    }

    table.data tbody tr.is-message td {
        display: block;
        text-align: center;
        box-shadow: none;
    }

    table.data tbody tr.is-message td::before {
        content: none;
    }
}


/* =========================================================
   TELEFON — GENEL
========================================================= */

@media (max-width: 560px) {

    .stats {
        grid-template-columns: 1fr;
    }

    .card-body {
        padding: 16px;
    }

    .card-head {
        padding: 16px;
    }

    .content {
        padding: 16px 14px 24px;
    }

    .topbar {
        padding: 12px 14px;
        gap: 12px;
    }

    .hero {
        padding: 20px 18px;
    }

    .hero h2 {
        font-size: 20px;
    }

    .modal {
        padding: 0;
        align-items: stretch;
    }

    .modal-box {
        max-width: none;
        border-radius: 0;
        min-height: 100%;
        margin: 0;
    }

    .modal-head,
    .modal-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    /*
       Alt alta gelen düğmeler tam genişlik olsun; dar ekranda
       yan yana sıkışınca isabet ettirmek zorlaşıyor.
    */

    .form-actions,
    .section-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .form-actions .btn,
    .section-actions .btn {
        width: 100%;
    }
}


/* =========================================================
   DOKUNMATİK

   Fare yerine parmakla kullanılan cihazlarda hedefler
   büyütülüyor ve iOS Safari'nin girdiye odaklanınca sayfayı
   yakınlaştırması engelleniyor (16px altındaki yazı tipi
   yakınlaştırmayı tetikliyor).
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .field input,
    .field select,
    .field textarea {
        font-size: 16px;
    }

    .btn {
        min-height: 44px;
        padding: 11px 18px;
    }

    .btn--sm {
        min-height: 38px;
        padding: 9px 14px;
        font-size: 12.5px;
    }

    .nav-item {
        padding: 14px 13px;
    }

    .modal-close {
        width: 40px;
        height: 40px;
    }

    .nav-toggle {
        width: 44px;
        height: 44px;
    }
}


/* =========================================================
   YAZDIRMA
========================================================= */

@media print {

    .sidebar,
    .nav-toggle,
    .backdrop,
    .row-actions,
    .section-actions {
        display: none !important;
    }

    .topbar {
        position: static;
    }

    .card {
        box-shadow: none;
        break-inside: avoid;
    }

    body {
        background: #fff;
    }
}


@media (prefers-reduced-motion: reduce) {

    .spinner {
        animation-duration: 2.4s;
    }

    .sidebar,
    .btn,
    .nav-item,
    .field input {
        transition: none;
    }
}