:root {
    --primary-blue: #4285F4; /* Google Blue */
    --primary-green: #34A853; /* Google Green */
    --dark-blue: #1A73E8;   /* Darker blue for hover/active */
    --dark-green: #1E8E3E;  /* Darker green for hover/active */
    --light-gray: #f8f9fa;  /* Very light gray for general backgrounds */
    --medium-gray: #e0e0e0; /* Medium gray for borders and subtle elements */
    --text-dark: #212529;   /* Dark text for readability */
    --text-light: #ffffff;  /* Light text for dark backgrounds */
    --accent-color: #FBBC04; /* Google Yellow for subtle accents */
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Subtle shadow */
}

/* Message Styles */
.success-message {
    color: var(--dark-green);
    background-color: #e6ffed; /* Light green background */
    border: 1px solid var(--primary-green);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}

.error-message {
    color: #721c24; /* Dark red text */
    background-color: #f8d7da; /* Light red background */
    border: 1px solid #f5c6cb; /* Red border */
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}

/* General styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    background-color: var(--light-gray);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

main {
    max-width: 100%;
    overflow-x: auto;
}

/* Footer */
footer {
    background-color: var(--dark-blue);
    color: var(--text-light);
    padding: 1rem 2rem;
    text-align: center;
    box-shadow: var(--box-shadow);
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer a {
    color: var(--text-light);
    text-decoration: underline;
}

footer a:hover {
    color: var(--accent-color);
}

footer h1 {
    margin: 0;
    font-size: 1.5rem;
    padding: 0;
}

/* Navigation */
nav {
    background-color: var(--primary-blue);
    box-shadow: var(--box-shadow);
    z-index: 1000;
}

.nav-logo {
    padding: 1.5rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
}

.nav-logo a {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-logo a:hover {
    background-color: transparent;
    color: var(--accent-color);
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    position: relative;
}

nav a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: block;
}

nav a:hover {
    color: var(--accent-color);
    background-color: rgba(255, 255, 255, 0.1);
}

nav a.active,
.dropbtn.active {
    color: var(--accent-color) !important;
    background-color: rgba(255, 255, 255, 0.15);
    border-left: 4px solid var(--accent-color);
}
.dropdown-content a.active, .dropdown-content-submenu a.active {
    border-left: none;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown styles */
.dropdown .dropbtn {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown .dropbtn::after {
    content: '▼';
    font-size: 0.7em;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.dropdown.show-dropdown > .dropbtn::after {
    transform: rotate(180deg);
}

.dropdown-content {
    background-color: rgba(255, 255, 255, 0.05);
    min-width: 100%;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, max-height 0.3s ease;
}

.dropdown.show-dropdown > .dropdown-content {
    opacity: 1;
    visibility: visible;
    max-height: 1000px; /* Büyük bir değer vererek içeriğin sığmasını sağlıyoruz */
}

.dropdown-content a {
    color: var(--text-light);
    padding: 10px 20px 10px 40px;
    font-size: 0.9rem;
}

.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Sub-menu styles */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropbtn-submenu {
    padding-left: 40px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-submenu .dropbtn-submenu::after {
    content: '▼';
    font-size: 0.7em;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.dropdown-submenu.show-dropdown .dropbtn-submenu::after {
    transform: rotate(180deg);
}

.dropdown-submenu .dropdown-content-submenu {
    background-color: rgba(0, 0, 0, 0.1);
    display: none; /* KESİN GİZLEME */
}

.dropdown-submenu.show-dropdown > .dropdown-content-submenu {
    display: block; /* KESİN GÖSTERME */
}

.dropdown-content-submenu a {
    padding-left: 60px !important;
}

/* Desktop Sidebar */
@media (min-width: 1025px) {
    nav {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 250px;
        padding: 2rem 0;
        overflow-y: auto; /* Enable vertical scrolling */
        scrollbar-width: thin; /* Thin scrollbar for Firefox */
    }

    /* Custom scrollbar for Chrome, Safari and Edge */
    nav::-webkit-scrollbar {
        width: 6px;
    }

    nav::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
    }

    nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
    }

    nav ul {
        display: flex;
        flex-direction: column;
    }

    nav a {
        padding: 12px 20px;
    }
    
    /* Dropdown Hover Desteği Kaldırıldı - Artık Sadece Tıklama İle Açılır */
    /* .dropdown:hover > .dropdown-content {
        opacity: 1;
        visibility: visible;
        max-height: 1000px;
    } */
    .dropdown.show-dropdown > .dropbtn::after {
        transform: rotate(180deg);
    }

    /* .dropdown-submenu:hover > .dropdown-content-submenu {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
    } */
    .dropdown-submenu.show-dropdown > .dropbtn-submenu::after {
        transform: rotate(180deg);
    }

    /* Only apply margin if nav exists on page */
    nav ~ main {
        margin-left: 250px;
        min-height: calc(100vh - 100px);
    }

    nav ~ footer {
        margin-left: 250px;
    }

    .nav-toggle {
        display: none;
    }
}

/* Mobile Top Bar with Hamburger */
@media (max-width: 1024px) {
    nav {
        position: sticky;
        top: 0;
        padding: 0.5rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 60px;
    }

    .nav-logo {
        padding: 0;
        margin: 0;
        border-bottom: none;
        text-align: left;
    }

    .nav-logo a {
        font-size: 1.1rem;
    }

    .nav-toggle {
        display: block;
        z-index: 1001;
        margin: 0;
    }

    /* Hamburger to X Animation */
    .nav-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-links {
        display: flex;
        position: fixed;
        top: 60px; /* Below the top bar */
        right: -100%; /* Hidden off-screen on the right by default */
        bottom: 0;
        width: 250px;
        background-color: var(--primary-blue);
        flex-direction: column;
        padding: 1rem 0;
        box-shadow: -2px 0 6px rgba(0,0,0,0.1);
        overflow-y: auto;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
    }

    .nav-links.active {
        right: 0; /* Slide in from right */
    }

    nav a {
        padding: 12px 20px;
    }

    main {
        padding: 1rem;
        margin-left: 0 !important; /* Mobile'da margin-left'i sıfırla */
    }

    footer {
        flex-direction: column;
        padding: 1.5rem;
        text-align: center;
        margin-left: 0 !important; /* Mobile'da margin-left'i sıfırla */
    }

    /* Responsive Table Styles (Card-like layout) */
    table, thead, tbody, th, td, tr, table[style*="width"] {
        display: block !important;
        width: 100% !important;
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin-bottom: 1rem;
        border: 1px solid var(--medium-gray);
        border-radius: 8px;
        background-color: var(--text-light);
        box-shadow: var(--box-shadow);
        overflow: hidden;
    }

    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
        text-align: right !important;
        min-height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        font-size: 0.95rem !important;
    }

    td:last-child {
        border-bottom: none;
    }

    td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        text-align: left;
        color: var(--primary-blue);
    }
    
    /* Force tables inside system admin, logs, and tickets to drop inline widths */
    table[style*="width:100%"], table[style*="width: 100%"] {
        width: 100% !important;
        display: block !important;
    }

    /* Forms on Mobile */
    form {
        padding: 1.5rem 1rem;
    }

    .brand-input-group,
    .model-input-group,
    .color-input-group,
    .memory-input-group,
    .status-input-group {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions input, 
    .form-actions button, 
    .form-actions a {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Global Responsive Helpers to prevent overflows */
    .table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1.5rem;
    }

    /* Inline flex wrappers standardizing on mobile - Excluding nav to keep logo/hamburger horizontal */
    div[style*="display:flex"]:not(nav):not(.nav-logo):not(.nav-toggle), 
    div[style*="display: flex"]:not(nav):not(.nav-logo):not(.nav-toggle) {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    div[style*="display:flex"]:not(nav) > div, 
    div[style*="display: flex"]:not(nav) > div {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Absolute fix for the hamburger menu */
    nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        background-color: var(--primary-blue) !important;
    }
    .nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 30px !important;
        height: 21px !important;
        cursor: pointer !important;
        z-index: 1005 !important;
    }
    .nav-toggle .bar {
        width: 100% !important;
        height: 3px !important;
        background-color: #ffffff !important;
        margin: 0 !important;
        transition: 0.4s !important;
        display: block !important;
    }
}

/* Global Hamburger Menu Icon Colors override */
.nav-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: #ffffff !important;
    margin: 5px 0;
    transition: 0.4s;
    display: block;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
    background-color: var(--text-light);
    box-shadow: var(--box-shadow);
    border-radius: 8px;
    overflow: hidden;
}

table th, table td {
    padding: 1rem;
    border-bottom: 1px solid var(--medium-gray);
    text-align: left;
}

table th {
    background-color: var(--primary-blue);
    color: var(--text-light);
    font-weight: 600;
}

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

table tr:hover {
    background-color: var(--light-gray);
}

/* Forms */
form {
    margin-top: 2rem;
    background-color: var(--text-light);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}

form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-dark);
}

form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="number"],
form textarea,
form select {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid var(--medium-gray);
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

form input:focus,
form textarea:focus,
form select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.25); /* Blue focus shadow */
}

form input[type="submit"],
form input[type="button"],
.add-brand-btn {
    background-color: var(--primary-green);
    color: var(--text-light);
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    width: auto;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

form input[type="submit"]:hover,
.add-brand-btn:hover {
    background-color: var(--dark-green);
}

/* Login Page Specific Styles */
.login-wrapper {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh; /* Mobil tarayıcı adres çubuğu açılıp kapanınca zıplamasın */
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); /* Professional Deep Blue gradient */
    position: fixed; /* Ensure it covers everything */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    margin: 0 !important; /* Force remove any margins */
    /* İçerik ekrana sığmazsa (yatay telefon, klavye açıkken, hata mesajı
       eklenince) kaydırılabilsin; aksi halde form kesiliyordu. */
    overflow-y: auto;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
}

/* justify/align-center yerine margin:auto ile ortalama: içerik ekrandan
   uzunsa üst taraf kırpılmaz, kaydırarak tamamına erişilir. */
.login-container {
    margin: auto;
    width: 100%;
    box-sizing: border-box;
}

/* Kart: masaüstünde iki sütun (marka paneli + form), dar ekranda tek sütun */
.login-card {
    display: flex;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.login-brand {
    background: linear-gradient(160deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
    padding: 1.5rem;
    text-align: center;
}

.login-brand__text {
    display: none; /* Dar ekranda yer kaplamasın; masaüstünde açılır */
    margin: 0;
}

.login-form {
    padding: 2.5rem 2rem;
    width: 100%;
    text-align: center;
}

/* Yükselme efekti yalnızca fare/imleç olan cihazlarda; dokunmatikte
   "hover" takılı kalıp kartı kaymış gösteriyordu. */
@media (hover: hover) and (pointer: fine) {
    .login-card:hover {
        transform: translateY(-5px);
    }
}

.login-title {
    text-align: center;
    color: #fff;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    overflow-wrap: break-word; /* Uzun/çok satırlı site başlığı taşmasın */
}

.login-form .login-subtitle {
    text-align: center;
    color: #666;
    margin: 0 0 1.5rem;
    font-size: 1.1rem;
    font-weight: 400;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.login-error {
    margin-bottom: 1.5rem;
}

/* --- Masaüstü: iki sütunlu geniş kart --- */
@media (min-width: 900px) {
    .login-card {
        max-width: 880px;
        min-height: 480px;
    }

    .login-brand {
        flex: 0 0 42%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.9rem;
        padding: 3rem 2.5rem;
        text-align: left;
        position: relative;
    }

    /* Panelin altına yumuşak bir vurgu halkası */
    .login-brand::after {
        content: '';
        position: absolute;
        right: -70px;
        bottom: -70px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.07);
    }

    .login-brand .login-title {
        text-align: left;
        font-size: 1.9rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .login-brand__text {
        display: block;
        font-size: 0.95rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.82);
        max-width: 30ch;
    }

    .login-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem 3rem 2rem;
        text-align: left;
    }

    .login-form .login-subtitle {
        text-align: left;
        font-size: 1.35rem;
        font-weight: 600;
        color: #333;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 1.75rem;
    }

    .login-form .login-footer {
        margin-top: auto;
    }
}

/* --- Tablet ve altı: tek sütun --- */
@media (max-width: 899px) {
    .login-card {
        flex-direction: column;
    }
}

/* --- Telefon --- */
@media (max-width: 600px) {
    .login-wrapper {
        padding: 1rem 0.75rem;
    }

    .login-card {
        border-radius: 12px;
    }

    .login-brand {
        padding: 1.15rem 1.25rem;
    }

    .login-form {
        padding: 1.75rem 1.25rem;
    }

    .login-title {
        font-size: 1.25rem;
    }

    .login-form .login-subtitle {
        font-size: 1rem;
        padding-bottom: 0.85rem;
        margin-bottom: 1.25rem;
    }

    .login-form .form-group {
        margin-bottom: 1.1rem;
    }

    .login-footer {
        font-size: 0.78rem;
    }
}

/* --- Yatay telefon: dikeyde çok az yer var, boşlukları sıkıştır --- */
@media (max-height: 520px) {
    .login-brand {
        padding: 0.9rem 1.25rem;
    }

    .login-form {
        padding: 1.25rem 1.25rem;
    }

    .login-title {
        font-size: 1.1rem;
    }

    .login-form .login-subtitle {
        margin-bottom: 1rem;
        padding-bottom: 0.6rem;
    }
}

.login-form .form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.login-form label {
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 500;
    color: #555;
    font-size: 0.9rem;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 2px solid #eee;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    font-size: 1rem;
    background-color: #f9f9f9;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    outline: none;
    border-color: #2a5298;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(42, 82, 152, 0.1);
}

.login-form input[type="submit"] {
    width: 100%;
    background: linear-gradient(to right, #1e3c72, #2a5298);
    color: var(--text-light);
    padding: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 1rem;
    box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
}

.login-form input[type="submit"]:hover {
    background: linear-gradient(to right, #2a5298, #1e3c72);
    box-shadow: 0 6px 20px rgba(30, 60, 114, 0.4);
    transform: translateY(-2px);
}

.login-footer { margin-top: 20px; font-size: 0.85rem; color: #666; border-top: 1px solid #eee; padding-top: 15px; }
.login-footer a { color: var(--primary-blue); text-decoration: none; }
.login-footer a:hover { text-decoration: underline; }

/* ============================================================
   Masaüstü: sola kapanan, iğneyle sabitlenebilen sol menü
   ------------------------------------------------------------
   Varsayılan olarak menü dar bir şerit halinde kapalı durur;
   fare üzerine gelince (veya klavye odağı girince) açılır.
   Üstündeki iğneye basılınca açık sabitlenir, tercih
   localStorage'da saklanır. Mobil görünüm etkilenmez.
   ============================================================ */

/* İğne yalnızca masaüstü yerleşiminde anlamlı */
.nav-pin-wrap { display: none; }

@media (min-width: 1025px) {
    :root {
        --sidebar-width: 250px;
        --sidebar-rail: 60px;
        --sidebar-anim: 180ms ease;
        /* İçeriğin geniş ekranda ulaşabileceği en fazla genişlik. Tek yerden
           değiştirilir; daha dar/geniş istenirse yalnızca bu satır yeter. */
        --icerik-genislik: 1320px;
    }

    nav {
        width: var(--sidebar-rail);
        padding-top: 0.75rem;
        overflow-x: hidden;
        transition: width var(--sidebar-anim);
    }

    /* Fare üzerine gelince veya içeride klavye odağı varken aç */
    nav:hover,
    nav:focus-within {
        width: var(--sidebar-width);
        box-shadow: 4px 0 18px rgba(0, 0, 0, 0.22);
    }

    /* Sabitlenmişse her zaman açık, gölgesiz */
    html.sidebar-pinned nav {
        width: var(--sidebar-width);
        box-shadow: var(--box-shadow);
    }

    /* İçerik kapalı genişliğe hizalanır: menü açılıp kapanırken
       sayfa içeriği yerinden oynamaz, menü üstüne biner.

       Sol boşluk ÜÇ DURUMA göre değişiyor (şerit / sabitlenmiş / gizli) ve
       aşağıdaki içerik genişliği hesabının da aynı değere ihtiyacı var. Bu
       yüzden değer --sol-bosluk değişkeninde tutuluyor ve iki yerde birden
       kullanılıyor; ayrı ayrı yazılsaydı biri değişince öteki unutulurdu. */
    nav ~ main,
    nav ~ footer {
        --sol-bosluk: var(--sidebar-rail);
        margin-left: var(--sol-bosluk);
        transition: margin-left var(--sidebar-anim);
    }
    html.sidebar-pinned nav ~ main,
    html.sidebar-pinned nav ~ footer {
        --sol-bosluk: var(--sidebar-width);
    }

    /* SOL MENÜ TAMAMEN KAPALI: panodaki "Sol menü açılsın" anahtarı kapalıyken
       menü hiç görünmez ve içerik kenardan başlar. Yalnızca masaüstünde
       anlamlı; mobil/tablette menü zaten hamburger'in arkasında.
       Bu blok, "sabitle" (iğne) kuralından SONRA gelmek zorunda: seçici
       ağırlıkları eşit olduğundan, önce yazılırsa iğne işaretliyken
       margin-left yeniden 250px'e dönüyor ve içerik sola genişlemiyordu.
       0px (0 değil) yazılı, çünkü değer calc() içinde de kullanılıyor.

       Menü SOL ŞERİT olmaktan çıkıp MOBİLDEKİ GİBİ ÜST ÇUBUĞA dönüşüyor:
       başlık solda, hamburger sağda, bağlantılar sağdan kayan panelde.
       Önce nav tamamen gizleniyordu; menüye dönmenin tek yolu panodaki
       anahtar ve "Ana Menü" düğmesiydi. Aşağıdaki kurallar 1024px altındaki
       mobil bloğun aynısı — hamburger'i açıp kapatan betik zaten ekran
       genişliğine bakmıyor, bu yüzden JS tarafında değişiklik gerekmedi. */
    html.sol-menu-kapali nav {
        position: sticky;
        top: 0;
        left: auto;
        right: auto;
        bottom: auto;
        width: auto;
        min-height: 60px;
        padding: 0.5rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: visible;
    }
    /* Şerit halindeyken metinler saydamdı (60px'e sığmıyordu); üst çubukta
       yer var, geri getiriliyor. */
    html.sol-menu-kapali .nav-logo,
    html.sol-menu-kapali .nav-links {
        opacity: 1;
    }
    html.sol-menu-kapali .nav-logo {
        padding: 0;
        margin: 0;
        border-bottom: none;
        text-align: left;
        white-space: normal;
    }
    html.sol-menu-kapali .nav-logo a {
        font-size: 1.1rem;
    }
    html.sol-menu-kapali .nav-toggle {
        display: block;
        z-index: 1001;
        margin: 0;
    }
    /* Bağlantı listesi sağdan kayan panel. */
    html.sol-menu-kapali .nav-links {
        display: flex;
        position: fixed;
        top: 60px;
        right: -100%;
        bottom: 0;
        width: 250px;
        background-color: var(--primary-blue);
        flex-direction: column;
        padding: 1rem 0;
        box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
    }
    html.sol-menu-kapali .nav-links.active {
        right: 0;
    }
    /* Üst çubukta "sabitle" iğnesi anlamsız: sabitlenecek şerit yok. */
    html.sol-menu-kapali .nav-pin-wrap {
        display: none;
    }
    html.sol-menu-kapali nav ~ main,
    html.sol-menu-kapali nav ~ footer {
        --sol-bosluk: 0px;
    }

    /* İÇERİK GENİŞLİĞİ: masaüstünde sayfa sağa sola sınırsız yayılmasın.
       max-width + otomatik kenar boşluğu BURADA İŞE YARAMAZ, çünkü sol
       boşluk menü için harcanıyor (margin-left) ve kalan alan kendiliğinden
       ortalanmıyor. Bunun yerine yan dolgular büyütülüyor: içerik
       --icerik-genislik'i aşmıyor, artan yer dolguya gidiyor ve sütun menüden
       ARTA KALAN alana göre ortalanıyor (bu yüzden --sol-bosluk çıkarılıyor;
       çıkarılmasaydı menü sabitliyken sütun sağa kayar ve daralırdı).
       Yüzde dolgu kapsayan bloğa (body = ekran genişliği) göre çözülür.
       Dar ekranda max() 1.25rem'i seçer, yani normal kenar boşluğu kalır.
       Masaüstünde <main>'in hiç dolgusu yoktu, içerik kenara yapışıyordu;
       bu kural onu da düzeltiyor. */
    nav ~ main {
        box-sizing: border-box;
        padding-left:  max(1.25rem, calc((100% - var(--sol-bosluk) - var(--icerik-genislik)) / 2));
        padding-right: max(1.25rem, calc((100% - var(--sol-bosluk) - var(--icerik-genislik)) / 2));
        /* Üstte de boşluk: sayfa başlıkları ("Randevular", "03.09.2026 —
           0 kayıt") ekranın en üstüne yapışıyordu. Menü kapalıyken üst çubuk
           akışta olduğu için ondan sonra, menü açıkken (nav sabit) doğrudan
           pencerenin tepesinden başlıyordu; iki durumda da nefes payı yoktu.
           Alt boşluk footer'a yaklaşmayı engelliyor. */
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    /* Kapalıyken yazılar görünmesin (şeride sığmaz, taşar) */
    nav .nav-logo,
    nav .nav-links {
        opacity: 0;
        white-space: nowrap;
        transition: opacity 120ms ease;
    }
    nav:hover .nav-logo,
    nav:hover .nav-links,
    nav:focus-within .nav-logo,
    nav:focus-within .nav-links,
    html.sidebar-pinned .nav-logo,
    html.sidebar-pinned .nav-links {
        opacity: 1;
    }

    /* Başlık çok satırlı olabiliyor. Menü kapalıyken (60px şerit) sarma
       kapalı kalır: metin görünmez ama yer kaplayıp menüyü aşağı iterdi.
       Menü açıldığında sarmaya izin verilir. */
    nav:hover .nav-logo,
    nav:focus-within .nav-logo,
    html.sidebar-pinned .nav-logo {
        white-space: normal;
    }

    /* --- İğne düğmesi --- */
    .nav-pin-wrap {
        display: flex;
        justify-content: center;
        padding: 0 12px 4px;
        transition: justify-content var(--sidebar-anim);
    }
    nav:hover .nav-pin-wrap,
    nav:focus-within .nav-pin-wrap,
    html.sidebar-pinned .nav-pin-wrap {
        justify-content: flex-end;
    }

    .nav-pin {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: rgba(255, 255, 255, 0.65);
        cursor: pointer;
        transition: background-color 140ms ease, color 140ms ease;
    }
    .nav-pin svg {
        width: 18px;
        height: 18px;
        /* Sabitlenmemişken iğne yatık durur: "takılı değil" işareti */
        transform: rotate(45deg);
        transition: transform var(--sidebar-anim);
    }
    .nav-pin:hover {
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
    }
    .nav-pin:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    /* Sabitlenmiş durum: iğne dik ve vurgulu */
    html.sidebar-pinned .nav-pin {
        color: #fff;
        background: rgba(255, 255, 255, 0.18);
    }
    html.sidebar-pinned .nav-pin svg {
        transform: rotate(0deg);
    }
}

/* Hareket azaltma tercihi olan kullanıcılar için geçişleri kapat */
@media (prefers-reduced-motion: reduce) {
    nav,
    nav ~ main,
    nav ~ footer,
    .nav-pin svg,
    nav .nav-logo,
    nav .nav-links {
        transition: none;
    }
}

/* ============================================================
   Güzellik Merkezi modülü arayüzü
   ------------------------------------------------------------
   Tüm sınıflar "ui-" önekli ve .ui-page altında kapsanmış durumda;
   telefon/destek modüllerinin görünümü etkilenmez. Durum renkleri
   her zaman metin etiketi + simge ile birlikte kullanılır, renk tek
   başına anlam taşımaz.
   ============================================================ */
.ui-page {
    --ui-accent: #c2185b;
    --ui-accent-dark: #9c1249;
    --ui-accent-soft: #fdeef4;
    --ui-ink: #1f2430;
    --ui-ink-soft: #5b6472;
    --ui-line: #e6e8ee;
    --ui-surface: #ffffff;
    --ui-radius: 12px;
    --ui-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px rgba(16, 24, 40, 0.06);

    color: var(--ui-ink);
}

/* --- Sayfa başlığı --- */
.ui-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ui-line);
}

.ui-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ui-ink);
}

.ui-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.1em;
    margin-right: 0.6rem;
    vertical-align: -0.15em;
    border-radius: 2px;
    background: var(--ui-accent);
}

.ui-subtitle {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    color: var(--ui-ink-soft);
}

.ui-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* --- Düğmeler --- */
.ui-page .ui-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ui-page .ui-btn--primary {
    background: var(--ui-accent);
    color: #fff;
}
.ui-page .ui-btn--primary:hover {
    background: var(--ui-accent-dark);
}

.ui-page .ui-btn--ghost {
    background: var(--ui-surface);
    border-color: var(--ui-line);
    color: var(--ui-ink);
}
.ui-page .ui-btn--ghost:hover {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}

.ui-page .ui-btn--danger {
    background: transparent;
    border-color: #f0d2d2;
    color: #a82f2f;
}
.ui-page .ui-btn--danger:hover {
    background: #fbe9e9;
}

.ui-page .ui-btn:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

/* Tablo satırlarındaki kompakt buton */
.ui-page .ui-btn--sm {
    padding: 0.32rem 0.7rem;
    font-size: 0.85rem;
    border-radius: 6px;
}

/* --- Tablo satırı aksiyonları ---
   Formlar buton sarmaladığı için varsayılan blok/inline karışımı
   aralıkları bozuyordu; burada hepsi tek bir esnek satıra hizalanır. */
.ui-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.ui-page .ui-row-actions form {
    display: inline-flex;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

/* --- Satır çark menüsü (⚙) ---
   <details> ile. Menü AKIŞ DIŞI (position: fixed): açılınca satır uzamaz,
   yandaki düğmeler kaymaz. absolute DEĞİL — .ui-table-wrap masaüstünde
   overflow-x: auto, absolute kutu son satırlarda kırpılırdı; fixed taşmaya
   takılmaz. Konumu (⚙'un altı, sağa hizalı; aşağı sığmazsa üstü)
   appointment_gear.php'deki küçük betik hesaplıyor. */
.ui-gear {
    position: relative;
    display: inline-block;
}
.ui-gear > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.ui-gear > summary::-webkit-details-marker { display: none; }
.ui-gear[open] > summary {
    background: var(--ui-accent-soft);
    color: var(--ui-accent-dark);
}
.ui-gear__menu {
    position: fixed;
    z-index: 1000;
    min-width: 220px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
    padding: 0.25rem;
    text-align: left;
}
.ui-page .ui-gear__menu form {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}
.ui-gear__menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--ui-ink);
    cursor: pointer;
    white-space: nowrap;
}
.ui-gear__menu button:hover,
.ui-gear__menu button:focus-visible { background: var(--ui-accent-soft); color: var(--ui-accent-dark); outline: none; }

/* --- Kartlar --- */
.ui-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.ui-card__title {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-ink);
}

/* --- Formlar: genel form stillerini bu kapsamda sıfırla --- */
.ui-page form.ui-form {
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

.ui-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
}

.ui-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ui-field--wide {
    grid-column: 1 / -1;
}

.ui-page .ui-field label {
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ui-ink-soft);
}

.ui-page .ui-field input[type="text"],
.ui-page .ui-field input[type="number"],
.ui-page .ui-field input[type="date"],
.ui-page .ui-field input[type="datetime-local"],
.ui-page .ui-field input[type="search"],
.ui-page .ui-field select,
.ui-page .ui-field textarea {
    width: 100%;
    margin: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--ui-ink);
    background: var(--ui-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui-page .ui-field input:focus,
.ui-page .ui-field select:focus,
.ui-page .ui-field textarea:focus {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.12);
}

.ui-field__hint {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--ui-ink-soft);
}

/* Radyo / onay kutusu grupları */
.ui-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0.5rem 0.1rem;
}

.ui-page .ui-choices label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ui-ink);
    cursor: pointer;
}

.ui-page .ui-choices input {
    margin: 0;
    cursor: pointer;
}

.ui-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ui-line);
}

/* --- Filtre çubuğu --- */
.ui-page form.ui-filters {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: none;
}

.ui-filters .ui-field {
    min-width: 150px;
}

/* Dar filtre alanı (ör. kısa bir durum listesi) */
.ui-filters .ui-field--sm {
    min-width: 0;
}

.ui-page .ui-filters .ui-field--sm select {
    width: auto;
    min-width: 120px;
}

/* Bu noktadan sonrasını sağa yasla */
.ui-filters__end {
    margin-left: auto;
}

/* --- Özet kutuları (KPI) --- */
.ui-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ui-stat {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    padding: 1.1rem 1.25rem;
}

.ui-stat__label {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ui-ink-soft);
}

.ui-stat__value {
    margin: 0.35rem 0 0;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ui-ink);
}

.ui-stat__note {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--ui-ink-soft);
}

/* --- Durum rozetleri: renk + simge + metin --- */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.ui-badge--good     { background: #e6f5e6; color: #0a7a0a; }
/* --warn: sayfaların çoğu ("İşlemde" rozeti) bu adı kullanıyordu ama tanımı
   yoktu, rozet düz gri görünüyordu. --warning'in takma adı. */
.ui-badge--warning,
.ui-badge--warn     { background: #fff6e0; color: #8a6100; }
.ui-badge--critical { background: #fbe9e9; color: #a82f2f; }
.ui-badge--neutral  { background: #eef1f5; color: #4a5568; }
.ui-badge--accent   { background: var(--ui-accent-soft); color: var(--ui-accent-dark); }

/* --- Tablolar --- */
.ui-table-wrap {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.ui-page table.ui-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: none;
    box-shadow: none;
    border-radius: 0;
    font-size: 0.93rem;
}

.ui-page table.ui-table th {
    padding: 0.75rem 1rem;
    background: #fafbfc;
    color: var(--ui-ink-soft);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    border-bottom: 1px solid var(--ui-line);
    white-space: nowrap;
}

.ui-page table.ui-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f2f4f7;
    vertical-align: middle;
}

.ui-page table.ui-table tbody tr:last-child td {
    border-bottom: none;
}

.ui-page table.ui-table tbody tr:hover {
    background: #fbfcfd;
}

/* Sütun içindeki sayılar dikeyde hizalansın */
.ui-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-muted {
    color: var(--ui-ink-soft);
}

/* --- Randevu takvimi --- */
.ui-cal-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.ui-cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    gap: 1px;
    min-width: 840px;
    background: var(--ui-line);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.ui-cal__head {
    background: #fafbfc;
    padding: 0.6rem 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-ink-soft);
}

.ui-cal__day {
    background: var(--ui-surface);
    min-height: 116px;
    padding: 0.4rem 0.45rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Önceki/sonraki aya ait dolgu hücreleri */
.ui-cal__day--out {
    background: #fbfcfd;
}

.ui-cal__day--today {
    box-shadow: inset 0 0 0 2px var(--ui-accent);
}

/* Kapalı gün (pazar). Yalnızca işaret: randevu verilmesi engellenmiş değil,
   seri randevu bu güne otomatik seans atmıyor. */
.ui-cal__day--closed {
    background: repeating-linear-gradient(
        135deg,
        #f6f7f9,
        #f6f7f9 6px,
        #eef0f4 6px,
        #eef0f4 12px
    );
}

.ui-cal__daynum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--ui-ink);
}

.ui-cal__day--out .ui-cal__daynum {
    color: #b6bcc7;
}

.ui-cal__daynum a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.ui-cal__daynum a:hover {
    color: var(--ui-accent);
    text-decoration: underline;
}

.ui-cal__count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ui-ink-soft);
    background: #eef1f5;
    border-radius: 999px;
    padding: 1px 6px;
}

.ui-cal__event {
    display: block;
    padding: 3px 6px;
    border-left: 3px solid #b6bcc7;
    border-radius: 4px;
    background: #f4f6f9;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--ui-ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-cal__event:hover {
    background: #e9edf3;
}

.ui-cal__event time {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-right: 3px;
}

/* Durum renkleri: her zaman simge + metinle birlikte kullanılır */
.ui-cal__event--planned   { border-left-color: #6b7686; }
.ui-cal__event--done      { border-left-color: #0ca30c; background: #eef8ee; }
.ui-cal__event--cancelled { border-left-color: #d03b3b; background: #fbeeee; text-decoration: line-through; }

.ui-cal__more {
    font-size: 0.72rem;
    color: var(--ui-ink-soft);
    text-decoration: none;
}

.ui-cal__more:hover {
    color: var(--ui-accent);
    text-decoration: underline;
}

.ui-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    color: var(--ui-ink-soft);
}

.ui-cal-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ui-cal-legend i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* --- Sayfalama --- */
.ui-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin: 0 0 1.5rem;
}

.ui-page .ui-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    background: var(--ui-surface);
    color: var(--ui-ink);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.ui-page .ui-page-link:hover {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}

.ui-page .ui-page-link.is-current {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: #fff;
    font-weight: 600;
}

/* --- Boş durum --- */
.ui-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--ui-ink-soft);
}

.ui-empty__title {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--ui-ink);
}

.ui-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* --- Bildirimler --- */
.ui-alert {
    padding: 0.85rem 1.1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
}

.ui-alert--error {
    background: #fbe9e9;
    border: 1px solid #f0d2d2;
    color: #a82f2f;
}

.ui-alert--info {
    background: var(--ui-accent-soft);
    border: 1px solid #f6d8e5;
    color: var(--ui-accent-dark);
}

/* --- Mobil --- */
@media (max-width: 1024px) {
    .ui-head {
        flex-direction: column;
        align-items: stretch;
    }

    .ui-form__footer {
        flex-direction: column;
    }

    .ui-page .ui-form__footer .ui-btn {
        width: 100%;
        justify-content: center;
    }

    /* Tablolar global kurallarla kart görünümüne dönüşüyor; sarmalayıcı
       kaydırma çubuğu bu düzende gereksiz. */
    .ui-table-wrap {
        border: none;
        box-shadow: none;
        background: none;
        overflow-x: visible;
    }

    .ui-page table.ui-table th {
        text-transform: none;
    }

    /* Kart görünümünde aksiyonlar hücreye sığmadığında düzgün sarsın */
    .ui-row-actions {
        justify-content: flex-end;
    }
}