/* ==========================================================================
   Skeleton Loader Component — shimmer placeholder, 2026 stili
   Spinner yerine içerik şeklini önceden gösterir, algılanan hız 30-40% artar.
   ========================================================================== */

.dp-skel {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #f1f5f9 0%,
        #e2e8f0 50%,
        #f1f5f9 100%
    );
    background-size: 200% 100%;
    border-radius: 6px;
    animation: dpSkelShimmer 1.6s ease-in-out infinite;
    user-select: none;
    color: transparent;
}

@keyframes dpSkelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Variants — sıkça ihtiyaç duyulan boyutlar */
.dp-skel--text     { display: block; height: 0.9rem; width: 100%; margin: 4px 0; }
.dp-skel--title    { display: block; height: 1.4rem; width: 60%; margin: 6px 0 10px; }
.dp-skel--subtitle { display: block; height: 0.8rem; width: 40%; margin: 4px 0 8px; }
.dp-skel--avatar   { width: 48px; height: 48px; border-radius: 50%; }
.dp-skel--avatar-sm{ width: 32px; height: 32px; border-radius: 50%; }
.dp-skel--avatar-lg{ width: 80px; height: 80px; border-radius: 50%; }
.dp-skel--btn      { height: 2.25rem; width: 5rem; border-radius: var(--radius-2026-btn, 14px); }
.dp-skel--card     { height: 200px; width: 100%; border-radius: var(--radius-2026, 20px); }
.dp-skel--thumb    { height: 90px; width: 100%; border-radius: var(--radius-2026, 20px); }
.dp-skel--badge    { height: 1.2rem; width: 4rem; border-radius: var(--radius-2026-btn, 14px); }
.dp-skel--w-90 { width: 90%; }
.dp-skel--w-80 { width: 80%; }
.dp-skel--w-75 { width: 75%; }
.dp-skel--w-5rem { width: 5rem; }

/* Card composition: tipik liste kartı görüntüsü */
.dp-skel-card {
    background: var(--bs-body-bg, #ffffff);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-2026, 20px);
    padding: 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.dp-skel-card__body {
    flex: 1;
    min-width: 0;
}

.dp-skel-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Dark mode */
html[data-theme='dark'] .dp-skel {
    background: linear-gradient(
        90deg,
        #1e293b 0%,
        #334155 50%,
        #1e293b 100%
    );
    background-size: 200% 100%;
}

html[data-theme='dark'] .dp-skel-card {
    background: #23313b;
    border-color: #334155;
}

/* Reduced-motion: animation kapatılır */
@media (prefers-reduced-motion: reduce) {
    .dp-skel {
        animation: none;
        background: #e2e8f0;
    }
    html[data-theme='dark'] .dp-skel {
        background: #334155;
    }
}

/* ─────────────────────────────────────────────
   Skeleton Grid — liste/grid placeholder'ı
   HTMX swap ya da ilk yükleme sırasında kullanılır.
   ───────────────────────────────────────────── */
.dp-skel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin: 0.5rem 0;
}
.dp-skel-grid__item {
    background: var(--bs-body-bg, #ffffff);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-2026, 20px);
    padding: 14px;
    box-shadow: var(--shadow-soft, 0 12px 36px rgba(15, 23, 42, 0.03));
}
.dp-skel-grid__row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.6rem;
}
html[data-theme='dark'] .dp-skel-grid__item {
    background: #23313b;
    border-color: #334155;
}

/* ─────────────────────────────────────────────
   HTMX Indicator Behavior (htmx 1.x convention)
   `.dp-skel-grid` default hidden; htmx, request başladığında
   indicator elemanına `.htmx-request` ekler.
   ───────────────────────────────────────────── */
.dp-skel-grid.htmx-indicator {
    display: none;
}
.htmx-request.dp-skel-grid.htmx-indicator,
.htmx-request > .dp-skel-grid.htmx-indicator,
.htmx-request .dp-skel-grid.htmx-indicator {
    display: grid;
}

/* Pastel production pass: shared skeleton placeholders */
.dp-skel {
    background: linear-gradient(
        90deg,
        #f8fcff 0%,
        #e8f4ff 50%,
        #f8fcff 100%
    );
    background-size: 200% 100%;
    border-radius: 8px;
}

.dp-skel--btn,
.dp-skel--badge,
.dp-skel--card,
.dp-skel--thumb,
.dp-skel-card,
.dp-skel-grid__item {
    border-radius: 8px;
}

.dp-skel-card,
.dp-skel-grid__item {
    background: #ffffff;
    border-color: rgba(137, 172, 195, 0.28);
    box-shadow: 0 10px 24px rgba(31, 78, 107, 0.05);
}

@media (prefers-reduced-motion: reduce) {
    .dp-skel {
        background: #e8f4ff;
    }
}