body {
    font-family: 'Outfit', sans-serif;
}

/* Arka plan animasyonu */
.bg-size-400 {
    background-size: 400% 400%;
}

@keyframes bgShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animate-bgShift {
    animation: bgShift 12s ease-in-out infinite;
}

/* FadeIn animasyonu */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.delay-100 {
    animation-delay: 0.1s !important;
}

.delay-200 {
    animation-delay: 0.2s !important;
}

.delay-300 {
    animation-delay: 0.3s !important;
}

.delay-400 {
    animation-delay: 0.4s !important;
}

.delay-500 {
    animation-delay: 0.5s !important;
}

.delay-600 {
    animation-delay: 0.6s !important;
}

#loginPanel {
    transition: transform 0.3s ease-in-out;
}

body {
    --sb-track-color: #1e293b;
    --sb-thumb-color: #31467f;
    --sb-size: 17px;
}

    body::-webkit-scrollbar {
        width: var(--sb-size)
    }

    body::-webkit-scrollbar-track {
        background: var(--sb-track-color);
        border-radius: 1px;
    }

    body::-webkit-scrollbar-thumb {
        background: var(--sb-thumb-color);
        border-radius: 1px;
    }

@supports not selector(::-webkit-scrollbar) {
    body {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}:root{
  --pp-fg:#0f172a; --pp-muted:#64748b; --pp-border:#e2e8f0; --pp-focus:#0f172a;
  --pp-bg:#ffffff; --pp-err:#dc2626; --pp-ring:rgba(15,23,42,.10);
}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";}
.pp-label{display:block;margin-bottom:.375rem;font-size:.875rem;font-weight:600;color:var(--pp-fg);}
.pp-input,.pp-select,.pp-textarea{
  width:100%;background:var(--pp-bg);color:var(--pp-fg);
  border:1px solid var(--pp-border);border-radius:.75rem;padding:.625rem .875rem;
}
.pp-input::placeholder,.pp-textarea::placeholder{color:#94a3b8;}
.pp-input:focus,.pp-select:focus,.pp-textarea:focus{
  outline:none;border-color:var(--pp-focus);box-shadow:0 0 0 .25rem var(--pp-ring);
}
.pp-error{margin-top:.25rem;font-size:.75rem;color:var(--pp-err);}
.pp-help{margin-top:.25rem;font-size:.75rem;color:var(--pp-muted);}
.pp-row{display:grid;gap:1.25rem;}
@media(min-width:768px){.pp-row.pp-2{grid-template-columns:repeat(2,minmax(0,1fr));}}
.pp-card{border:1px solid var(--pp-border);border-radius:1rem;background:#fff;overflow:hidden;}
.pp-card-h{border-bottom:1px solid var(--pp-border);padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;}
.pp-card-b{padding:1.5rem;}
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:.75rem;padding:.625rem 1rem;font-weight:700;}
.btn-outline{border:1px solid var(--pp-border);background:#fff;color:#0f172a;}
.btn-primary{background:#0f172a;color:#fff;}
.sticky-bar{border:1px solid var(--pp-border);background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(10px);border-radius:1rem;box-shadow:0 8px 24px rgba(2,6,23,.06);}
.badge-switch{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--pp-border);
  border-radius:.75rem;padding:.375rem .75rem;font-size:.75rem;font-weight:600;background:#f8fafc;}
.badge-switch[data-on="true"]{background:#ecfdf5;border-color:#bbf7d0;color:#065f46;}
.badge-switch[data-on="false"]{background:#f1f5f9;border-color:#e2e8f0;color:#334155;}
:root {
    --pp-fg: #0f172a;
    --pp-muted: #64748b;
    --pp-border: #e2e8f0;
    --pp-focus: #0f172a;
    --pp-bg: #ffffff;
    --pp-err: #dc2626;
    --pp-ring: rgba(15,23,42,.10);
}

body {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

.pp-label {
    display: block;
    margin-bottom: .375rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pp-fg);
}

.pp-input, .pp-select, .pp-textarea {
    width: 100%;
    background: var(--pp-bg);
    color: var(--pp-fg);
    border: 1px solid var(--pp-border);
    border-radius: .75rem;
    padding: .625rem .875rem;
}

    .pp-input::placeholder, .pp-textarea::placeholder {
        color: #94a3b8;
    }

    .pp-input:focus, .pp-select:focus, .pp-textarea:focus {
        outline: none;
        border-color: var(--pp-focus);
        box-shadow: 0 0 0 .25rem var(--pp-ring);
    }

.pp-error {
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--pp-err);
}

.pp-help {
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--pp-muted);
}

.pp-row {
    display: grid;
    gap: 1.25rem;
}

@media(min-width:768px) {
    .pp-row.pp-2 {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

.pp-card {
    border: 1px solid var(--pp-border);
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
}

.pp-card-h {
    border-bottom: 1px solid var(--pp-border);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pp-card-b {
    padding: 1.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: .75rem;
    padding: .625rem 1rem;
    font-weight: 700;
}

.btn-outline {
    border: 1px solid var(--pp-border);
    background: #fff;
    color: #0f172a;
}

.btn-primary {
    background: #0f172a;
    color: #fff;
}

.sticky-bar {
    border: 1px solid var(--pp-border);
    background: rgba(255,255,255,.95);
    backdrop-filter: saturate(180%) blur(10px);
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(2,6,23,.06);
}

.badge-switch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--pp-border);
    border-radius: .75rem;
    padding: .375rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    background: #f8fafc;
}

    .badge-switch[data-on="true"] {
        background: #ecfdf5;
        border-color: #bbf7d0;
        color: #065f46;
    }

    .badge-switch[data-on="false"] {
        background: #f1f5f9;
        border-color: #e2e8f0;
        color: #334155;
    }
/* =================== THEME: BLUE =================== */
.pp-theme-blue {
    --pp-brand-50: #eff6ff;
    --pp-brand-100: #dbeafe;
    --pp-brand-200: #bfdbfe;
    --pp-brand-300: #93c5fd;
    --pp-brand-400: #60a5fa;
    --pp-brand-500: #3b82f6;
    --pp-brand-600: #2563eb;
    --pp-brand-700: #1d4ed8;
    --pp-border: #e5e7eb;
    --pp-border-2: #eef2f7;
    --pp-bg: #ffffff;
    --pp-muted: #f8fafc;
    --pp-text: #0f172a;
    --pp-text-2: #475569;
}

/* kart yükseltme */
.pp-elevated {
    box-shadow: 0 6px 24px rgba(2, 6, 23, .06), 0 2px 8px rgba(2, 6, 23, .04);
    border-radius: 14px;
    overflow: hidden;
}

/* =================== TABLE: MODERN LOOK =================== */
.pp-table--modern thead th {
    background: linear-gradient(180deg, var(--pp-brand-50), #fff);
    color: #0f172a;
    border-bottom: 1px solid var(--pp-brand-100);
}

/* sticky header + cam efekti */
.pp-table-wrap.pp-table--frost thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    backdrop-filter: saturate(1.2) blur(4px);
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.86)), linear-gradient(180deg, var(--pp-brand-50), #fff);
}

/* satır hover: sol şerit + hafif parıltı */
.pp-table--modern tbody tr {
    position: relative;
    transition: background .15s ease, transform .05s ease;
}

    .pp-table--modern tbody tr::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0;
        background: linear-gradient(180deg, var(--pp-brand-400), var(--pp-brand-600));
        transition: width .15s ease;
    }

    .pp-table--modern tbody tr:hover {
        background: rgba(37, 99, 235, .06);
    }

        .pp-table--modern tbody tr:hover::before {
            width: 4px;
        }

/* zebra + dense ile iyi gider */
.pp-table--modern.pp-table--zebra tbody tr:nth-child(odd) td {
    background: linear-gradient(0deg, #fff, #fff), linear-gradient(90deg, rgba(59,130,246,.04), transparent);
}

/* hücreler */
.pp-table--modern tbody td {
    border-bottom: 1px dashed var(--pp-border-2);
}

/* işlemler (ghost brand) */
.pp-action.brand {
    border-color: var(--pp-brand-200);
}

    .pp-action.brand:hover {
        background: var(--pp-brand-50);
        color: var(--pp-brand-700);
    }

/* durum chipleri (brand varyantı) */
.pp-chip.brand {
    background: var(--pp-brand-50);
    border-color: var(--pp-brand-200);
    color: var(--pp-brand-700);
}

/* pager: brand dokunuşları */
.pp-pager a {
    border-color: var(--pp-brand-200);
}

    .pp-pager a:not(.is-disabled):hover {
        background: var(--pp-brand-50);
        color: var(--pp-brand-700);
        border-color: var(--pp-brand-300);
    }

/* responsive stack başlık rengi */
@media (max-width:640px) {
    .pp-table--stack tbody td::before {
        color: var(--pp-brand-700);
    }
}
@media (max-width: 768px) {
    .sticky-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white; /* Arka plan rengi */
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Alt bar için gölge */
    }
}

/* Mobil cihazlarda üst alanı optimize et */
@media (max-width: 480px) {
    .pp-card-h h4 {
        font-size: 1rem; /* Başlık boyutunu küçült */
    }

    .pp-row {
        flex-direction: column; /* Dikey hizalama */
    }

    .sticky-bar {
        font-size: 12px; /* Küçük cihazlar için font boyutu */
    }
}