/* SK Servis — tasarım sistemi
   Bootstrap 5 üzerine modern SaaS görünümü, mobil öncelikli, dark/light tema. */

:root {
    --sk-brand: #2563eb;
    --sk-brand-rgb: 37, 99, 235;
    --sk-brand-dark: #1d4ed8;
    --sk-purple: #7c3aed;
    --sk-purple-rgb: 124, 58, 237;

    --sk-radius-sm: 12px;
    --sk-radius: 18px;
    --sk-radius-lg: 26px;

    --sk-nav-height: 68px;
    --sk-header-height: 60px;

    /*
       Alt kenar güvenli boşluğu.

       İşletim sistemi ekranın en alt bandındaki dokunuşları kendi
       hareketi sayıyor ve alt menü tam dibe oturduğunda kullanıcı menüye
       basmak isterken uygulamadan çıkıyordu. İki platformda da oluyor
       ama sebepleri farklı:

       - Android: jest çubuğu için env() 0 döner, yani "boşluk yok" der;
         oysa o bandı yine kendine ayırıyor. Taban değer bu yüzden şart.
       - iPhone: env() ana ekran çubuğu için ~34px döner ama dokunuş hafif
         bir yukarı kayma içeriyorsa iOS onu "ana ekrana dön" hareketi
         sayabiliyor. Payı biraz artırmak buna alan bırakıyor.

       Bu yüzden env değerine hem taban hem sabit bir ek konur. Menü
       çubuğunun kendisi yine dibe kadar uzanır — yalnızca basılabilir
       alan yukarı çekilir, ekranda boşluk görünmez.

       Yetmezse tek yapılacak buradaki 10px'i büyütmek.
    */
    --sk-safe-bottom: calc(max(env(safe-area-inset-bottom), 6px) + 10px);

    --sk-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tema değişkenleri: açık */
[data-bs-theme='light'] {
    --sk-bg: #f1f5f9;
    --sk-bg-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(37, 99, 235, 0.14), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(124, 58, 237, 0.1), transparent 55%);
    --sk-surface: #ffffff;
    --sk-surface-2: #f8fafc;
    --sk-glass: rgba(255, 255, 255, 0.72);
    --sk-glass-border: rgba(255, 255, 255, 0.9);
    --sk-border: rgba(15, 23, 42, 0.08);
    --sk-text: #0f172a;
    --sk-text-muted: #64748b;
    --sk-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --sk-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
}

/* Tema değişkenleri: koyu */
[data-bs-theme='dark'] {
    --sk-bg: #0b1120;
    --sk-bg-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(37, 99, 235, 0.22), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(124, 58, 237, 0.16), transparent 55%);
    --sk-surface: #131c31;
    --sk-surface-2: #0f172a;
    --sk-glass: rgba(19, 28, 49, 0.72);
    --sk-glass-border: rgba(148, 163, 184, 0.16);
    --sk-border: rgba(148, 163, 184, 0.16);
    --sk-text: #e2e8f0;
    --sk-text-muted: #94a3b8;
    --sk-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --sk-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
}

body {
    background-color: var(--sk-bg);
    background-image: var(--sk-bg-gradient);
    background-attachment: fixed;
    color: var(--sk-text);
    font-family: 'Segoe UI', system-ui, -apple-system, 'Inter', sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

/* iOS'ta tam ekran (standalone) modda güvenli alanlar */
.sk-app {
    padding-bottom: calc(var(--sk-nav-height) + var(--sk-safe-bottom) + 12px);
}

/* ---------- Kartlar ---------- */
.sk-card {
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow);
    transition: transform var(--sk-transition), box-shadow var(--sk-transition);
}

.sk-card-glass {
    background: var(--sk-glass);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--sk-glass-border);
    border-radius: var(--sk-radius-lg);
    box-shadow: var(--sk-shadow-lg);
}

a.sk-card:hover,
.sk-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--sk-shadow-lg);
}

/* ---------- Üst başlık ---------- */
.sk-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--sk-glass);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--sk-border);
    padding-top: env(safe-area-inset-top);
}

.sk-header-inner {
    height: var(--sk-header-height);
}

.sk-logo {
    height: 34px;
    width: auto;
}

/*
 * Geri düğmesi.
 *
 * Uygulama tam ekran çalıştığı için tarayıcının geri tuşu yok. Bu düğme
 * her ekranda aynı yerde durur; parmakla ıskalanmasın diye dokunma alanı
 * 44px (Apple'ın önerdiği en küçük ölçü), çerçevesi de basılabilir bir şey
 * olduğunu belli eder.
 */
.sk-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    /* Görsel kutu 40px; dokunma alanı görünmez kenarla 44px'e tamamlanır. */
    margin: -2px;
    border: 1px solid var(--sk-border);
    border-radius: 50%;
    color: var(--sk-text);
    text-decoration: none;
    font-size: 1.15rem;
    line-height: 1;
    background: var(--sk-surface);
    transition: background-color .15s ease, transform .15s ease;
}

/*
 * :focus-visible ayrı yazılır. Eski Safari (iOS 15.4 öncesi) bu seçiciyi
 * tanımıyor ve aynı kümede yazılırsa kuralın tamamını atıyor — iPhone 12
 * ve 13'te düğmenin basıldığı belli olmazdı.
 */
.sk-back-btn:hover {
    color: var(--sk-text);
    background: var(--sk-surface-2);
}

.sk-back-btn:focus-visible {
    color: var(--sk-text);
    background: var(--sk-surface-2);
}

.sk-back-btn:active {
    transform: scale(.92);
}

/*
 * Logonun tema sürümleri.
 *
 * Logolar beyaz zemine göre tasarlanır; siyah yazı koyu temada kaybolur.
 * İki sürüm birden basılır ve tema hangisinin görüneceğini belirler —
 * böylece tema düğmesine basıldığında yeni bir istek beklemeden anında
 * değişir. Koyu sürüm yükleme anında sunucuda üretilir.
 */
.sk-logo-dark {
    display: none;
}

[data-bs-theme='dark'] .sk-logo-light {
    display: none;
}

[data-bs-theme='dark'] .sk-logo-dark {
    display: inline-block;
}

/* ---------- Alt navigasyon (tek elle kullanım) ---------- */
.sk-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    align-items: stretch;
    height: calc(var(--sk-nav-height) + var(--sk-safe-bottom));
    padding-bottom: var(--sk-safe-bottom);
    background: var(--sk-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--sk-border);
}

.sk-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--sk-text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    transition: color var(--sk-transition);
}

.sk-nav-item i {
    font-size: 1.35rem;
    line-height: 1;
}

.sk-nav-item.active {
    color: var(--sk-brand);
}

.sk-nav-item:active {
    transform: scale(0.94);
}

/* Ortadaki "Yeni Servis" butonu */
.sk-nav-fab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: -18px 6px 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sk-brand), var(--sk-purple));
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(var(--sk-brand-rgb), 0.45);
    transition: transform var(--sk-transition);
}

.sk-nav-fab:active {
    transform: scale(0.92);
}

.sk-nav-fab:hover {
    color: #fff;
}

/* ---------- Butonlar: mobilde büyük dokunma alanı ---------- */
.btn {
    border-radius: var(--sk-radius-sm);
    font-weight: 500;
}

.btn-lg,
.sk-btn-touch {
    min-height: 52px;
    border-radius: var(--sk-radius-sm);
    font-size: 1rem;
}

.btn-brand {
    background: linear-gradient(135deg, var(--sk-brand), var(--sk-brand-dark));
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--sk-brand-rgb), 0.35);
}

.btn-brand:hover,
.btn-brand:focus {
    color: #fff;
    filter: brightness(1.06);
}

.btn-brand:active {
    transform: scale(0.98);
}

/* ---------- Formlar ---------- */
.form-control,
.form-select {
    border-radius: var(--sk-radius-sm);
    background-color: var(--sk-surface-2);
    border-color: var(--sk-border);
    color: var(--sk-text);
    min-height: 48px;
    /* iOS'ta odaklanınca ekranın zoom yapmasını engeller */
    font-size: 16px;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--sk-surface);
    border-color: var(--sk-brand);
    box-shadow: 0 0 0 4px rgba(var(--sk-brand-rgb), 0.14);
}

textarea.form-control {
    min-height: 96px;
}

.form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sk-text-muted);
    margin-bottom: 0.35rem;
}

/* ---------- Rozetler ---------- */
.sk-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.sk-badge-primary { background: rgba(37, 99, 235, 0.14); color: #2563eb; }
.sk-badge-info { background: rgba(6, 182, 212, 0.16); color: #0891b2; }
.sk-badge-warning { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.sk-badge-purple { background: rgba(124, 58, 237, 0.16); color: #7c3aed; }
.sk-badge-success { background: rgba(16, 185, 129, 0.16); color: #059669; }
.sk-badge-secondary { background: rgba(100, 116, 139, 0.16); color: #64748b; }
.sk-badge-danger { background: rgba(239, 68, 68, 0.16); color: #dc2626; }

[data-bs-theme='dark'] .sk-badge-primary { color: #93c5fd; }
[data-bs-theme='dark'] .sk-badge-info { color: #67e8f9; }
[data-bs-theme='dark'] .sk-badge-warning { color: #fcd34d; }
[data-bs-theme='dark'] .sk-badge-purple { color: #c4b5fd; }
[data-bs-theme='dark'] .sk-badge-success { color: #6ee7b7; }
[data-bs-theme='dark'] .sk-badge-secondary { color: #cbd5e1; }
[data-bs-theme='dark'] .sk-badge-danger { color: #fca5a5; }

/* ---------- Yardımcılar ---------- */
.sk-muted {
    color: var(--sk-text-muted);
}

.sk-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sk-divider {
    height: 1px;
    background: var(--sk-border);
    border: 0;
    opacity: 1;
}

/* Metni tek satırda kısaltır */
.sk-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Geniş tablolar mobilde yatay kaysın, sayfa gövdesi kaymasın */
.sk-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Çevrim dışı uyarı şeridi ---------- */
.sk-offline-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1080;
    display: none;
    padding: calc(env(safe-area-inset-top) + 0.45rem) 0.75rem 0.45rem;
    background: #b45309;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}

body.sk-is-offline .sk-offline-bar {
    display: block;
}

/* ---------- Bekleyen (çevrim dışı) kayıt şeridi ---------- */
.sk-queue-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--sk-nav-height) + var(--sk-safe-bottom));
    z-index: 1075;
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: #1d4ed8;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
}

body.sk-has-queue .sk-queue-bar {
    display: flex;
}

.sk-queue-bar button {
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.sk-queue-bar button:disabled {
    opacity: 0.6;
}

/* Masaüstünde alt menü yok; şerit ekranın dibine oturur */
@media (min-width: 992px) {
    .sk-queue-bar {
        bottom: 0;
    }
}

/* ---------- Sayfa geçiş göstergesi ---------- */
.sk-progress {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1090;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--sk-brand), var(--sk-purple));
    opacity: 0;
    transition: width 200ms ease-out, opacity 200ms ease-out;
}

.sk-progress.sk-progress-active {
    opacity: 1;
}

/* ---------- Fotoğraf büyütme (lightbox) ---------- */
.sk-lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* inset kısayolu eski Safari'de (iOS 14) yok; uzun yazım her yerde çalışır. */
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    /* Tarayıcı çubuklarının altında kalmasın */
    padding: env(safe-area-inset-top) 0 var(--sk-safe-bottom);
}

.sk-lightbox.sk-open {
    display: flex;
}

.sk-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Parmakla yakınlaştırmaya izin ver */
    touch-action: pinch-zoom;
}

.sk-lightbox-close,
.sk-lightbox-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}

.sk-lightbox-close {
    top: calc(env(safe-area-inset-top) + 0.75rem);
    right: 0.75rem;
}

.sk-lightbox-prev { left: 0.75rem; }
.sk-lightbox-next { right: 0.75rem; }

.sk-lightbox-counter {
    position: absolute;
    bottom: calc(var(--sk-safe-bottom) + 1rem);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
}

/* Tıklanabilir küçük görseller */
.sk-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--sk-radius-sm);
    cursor: zoom-in;
}

/* ---------- Yükleme ilerlemesi ---------- */
.sk-upload-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* inset kısayolu eski Safari'de (iOS 14) yok; uzun yazım her yerde çalışır. */
    inset: 0;
    z-index: 1095;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.sk-upload-overlay.sk-open {
    display: flex;
}

.sk-upload-box {
    width: 100%;
    max-width: 320px;
    padding: 1.25rem;
    border-radius: var(--sk-radius);
    background: var(--sk-surface);
    text-align: center;
}

.sk-upload-track {
    height: 8px;
    margin: 0.75rem 0 0.5rem;
    border-radius: 999px;
    background: var(--sk-surface-2);
    overflow: hidden;
}

.sk-upload-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sk-brand), var(--sk-purple));
    transition: width 150ms linear;
}

/* ---------- Hareket duyarlılığı ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Alt bilgi (footer) ---------- */
.sk-footer {
    border-top: 1px solid var(--sk-border);
    margin-top: 2rem;
    padding: 1.25rem 0;
    text-align: center;
    color: var(--sk-text-muted);
    font-size: 0.78rem;
}

/* Alt bilgi sessiz durmalı; bağlantı yalnızca üzerine gelince belirginleşir. */
.sk-footer a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--sk-border);
}

.sk-footer a:hover,
.sk-footer a:focus-visible {
    color: var(--sk-brand);
    border-bottom-color: currentColor;
}

.sk-footer-legal {
    max-width: 720px;
    margin: 0.4rem auto 0;
    font-size: 0.72rem;
    line-height: 1.6;
    opacity: 0.85;
}

/* Masaüstünde alt navigasyonu gizleyip içeriği ortalar */
@media (min-width: 992px) {
    .sk-bottom-nav {
        display: none;
    }

    .sk-app {
        padding-bottom: 2rem;
    }
}

/* ---------- Mobil yan menü ---------- */
/* Alt navigasyona 4 modül sığıyor; geri kalanına buradan ulaşılır. */
.sk-side-menu {
    /* Bootstrap genişliği kendi değişkeninden okur; özgüllük savaşına
       girmeden onu değiştiririz. Sağda bir şerit kalsın ki menünün üstünde
       sayfa olduğu görünsün ve dışına dokunup kapatmak kolay olsun. */
    --bs-offcanvas-width: min(84vw, 320px);
    background: var(--sk-surface);
    border-right: 1px solid var(--sk-border);
}

.sk-side-menu .offcanvas-header {
    border-bottom: 1px solid var(--sk-border);
    padding-top: calc(env(safe-area-inset-top) + 0.75rem);
}

.sk-side-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: var(--sk-surface-2);
    border-bottom: 1px solid var(--sk-border);
}

.sk-side-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(135deg, var(--sk-brand), var(--sk-purple));
}

.sk-side-heading {
    padding: 0.9rem 1rem 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sk-text-muted);
}

.sk-side-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    /* Parmakla rahat basılacak yükseklik. */
    padding: 0.8rem 1rem;
    color: var(--sk-text);
    text-decoration: none;
    font-weight: 500;
    text-align: left;
    border-left: 3px solid transparent;
    transition: background var(--sk-transition), color var(--sk-transition);
}

.sk-side-link i {
    font-size: 1.2rem;
    line-height: 1;
    width: 1.4rem;
    text-align: center;
    color: var(--sk-text-muted);
}

.sk-side-link:active {
    background: var(--sk-surface-2);
}

.sk-side-link.active {
    color: var(--sk-brand);
    border-left-color: var(--sk-brand);
    background: rgba(var(--sk-brand-rgb), 0.08);
}

.sk-side-link.active i {
    color: var(--sk-brand);
}

.sk-side-link.text-danger i {
    color: inherit;
}

.sk-side-footer {
    border-top: 1px solid var(--sk-border);
    padding-bottom: var(--sk-safe-bottom);
}

/* ---------- Panel hızlı işlem butonları ---------- */
/* Sahada en sık kullanılan işler; parmakla rahat basılacak boyutta. */
.sk-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
    min-height: 104px;
    padding: 1rem 0.5rem;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--sk-text);
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow);
    transition: transform var(--sk-transition), box-shadow var(--sk-transition);
}

.sk-action-btn:hover {
    color: var(--sk-text);
    transform: translateY(-2px);
    box-shadow: var(--sk-shadow-lg);
}

.sk-action-btn:active {
    transform: scale(0.97);
}

/* İkon rozeti modülün rengini taşır (sk-badge-* sınıflarıyla ortak). */
.sk-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.35rem;
}

/* İlk buton günün başlangıç işi: marka rengiyle öne çıkar. */
.sk-action-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--sk-brand), var(--sk-purple));
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(var(--sk-brand-rgb), 0.35);
}

.sk-action-primary:hover {
    color: #fff;
}

.sk-action-primary .sk-action-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

/* ---------- Uygulamaya çevirme şeridi ---------- */
/* Alt navigasyonun üstünde durur; onu örtmemeli. */
.sk-install-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--sk-nav-height) + var(--sk-safe-bottom) + 12px);
    z-index: 1035;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--sk-radius);
    color: #fff;
    background: linear-gradient(135deg, var(--sk-brand), var(--sk-purple));
    box-shadow: 0 12px 32px rgba(var(--sk-brand-rgb), 0.4);
    animation: sk-install-in 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sk-install-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Giriş ekranında alt navigasyon yok. */
.sk-install-bar-low {
    bottom: calc(var(--sk-safe-bottom) + 12px);
}

/* Masaüstünde alt navigasyon yok; şerit köşede durur. */
@media (min-width: 992px) {
    .sk-install-bar {
        left: auto;
        right: 20px;
        bottom: 20px;
        max-width: 420px;
    }
}

.sk-install-steps {
    padding-left: 1.1rem;
    margin-bottom: 0.75rem;
}

.sk-install-steps li {
    margin-bottom: 0.55rem;
    line-height: 1.5;
}

/* Uygulama içinde kurulum bağlantısı anlamsız. */
.sk-installed [data-sk-install],
.sk-installed [data-sk-install-section] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .sk-install-bar { animation: none; }
}

/* =====================================================================
   Buton biçiminde seçim (açılır liste yerine)

   Sahada iş telefondan yapılıyor: açılır liste her seferinde aç-kaydır-seç
   demek. Seçenekler ekranda dururken tek dokunuş yeter ve mevcut seçim
   listeyi açmadan görünür. Altta normal radio düğmeleri var; görünüm
   değişti, davranış değil.
   ===================================================================== */
.sk-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Eşit genişlikte ızgara — kısa ve sayıca az seçenekler için. */
.sk-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* Radio görünmez ama odaklanabilir kalır: klavye ve ekran okuyucu çalışır.
   Bootstrap'in .btn-check yöntemi — opacity:0 bazı tarayıcılarda öğeyi
   erişilebilirlik ağacından düşürebildiği için kırpma kullanılır. */
.sk-choice-input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.sk-choice-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Parmakla rahat basılsın: 44px dokunma hedefi. */
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-sm);
    background: var(--sk-surface);
    color: var(--sk-text);
    font-size: 0.9rem;
    line-height: 1.25;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--sk-transition), background var(--sk-transition),
                box-shadow var(--sk-transition);
}

.sk-choice-option i {
    font-size: 1rem;
    flex: none;
}

.sk-choice-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sk-choice-title {
    font-weight: 500;
}

.sk-choice-hint {
    font-size: 0.75rem;
    color: var(--sk-text-muted);
}

.sk-choice-option:hover {
    border-color: rgba(var(--sk-brand-rgb), 0.45);
}

/* Seçili: renk tek başına ayırt edici değil, çerçeve ve gölge de değişir. */
.sk-choice-input:checked + .sk-choice-option {
    border-color: var(--sk-brand);
    background: rgba(var(--sk-brand-rgb), 0.1);
    color: var(--sk-brand-dark);
    box-shadow: inset 0 0 0 1px var(--sk-brand);
}

.sk-choice-input:checked + .sk-choice-option .sk-choice-hint {
    color: inherit;
    opacity: 0.75;
}

/* Koyu temada marka mavisinin koyu tonu okunmaz; açık tona geçilir. */
[data-bs-theme='dark'] .sk-choice-input:checked + .sk-choice-option {
    color: #bfdbfe;
    background: rgba(var(--sk-brand-rgb), 0.22);
}

.sk-choice-input:focus-visible + .sk-choice-option {
    outline: 2px solid var(--sk-brand);
    outline-offset: 2px;
}

.sk-choice-input:disabled + .sk-choice-option {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Şube seçimi: logo ve ünvan sığsın diye daha geniş kartlar. */
.sk-choice-branch {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.sk-choice-branch .sk-choice-option {
    align-items: center;
    padding: 0.65rem 0.85rem;
}

.sk-choice-logo {
    height: 30px;
    width: auto;
    max-width: 74px;
    object-fit: contain;
    flex: none;
}

@media (prefers-reduced-motion: reduce) {
    .sk-choice-option { transition: none; }
}

/* Tek satırda kaydırılabilir rozetler — kalem satırındaki birim gibi
   çok seçenekli ama dar alanlar için. Parmakla yana kaydırılır. */
.sk-choice-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    /* Kaydırma çubuğu mobilde yer kaplamasın. */
    scrollbar-width: thin;
}

.sk-choice-scroll .sk-choice-option {
    flex: none;
}

.sk-choice-sm .sk-choice-option {
    min-height: 38px;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
}

/* =====================================================================
   Bildirim durumu

   Sahadan gelen geri bildirim: bildirimin açık olup olmadığı belli
   olmuyordu. Simge yalnızca çan/çizgili-çan arasında değişiyor, renk hiç
   değişmiyordu. Artık açıkken yeşil ve dolu, kapalıyken sönük.
   ===================================================================== */
.sk-notify-btn {
    color: var(--sk-text-muted);
}

.sk-notify-btn i {
    transition: color var(--sk-transition);
}

.sk-notify-btn.sk-notify-on,
.sk-notify-btn.sk-notify-on i {
    color: #16a34a;
}

[data-bs-theme='dark'] .sk-notify-btn.sk-notify-on,
[data-bs-theme='dark'] .sk-notify-btn.sk-notify-on i {
    color: #4ade80;
}

/* Yan menüdeki açık/kapalı rozeti. */
.sk-notify-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--sk-border);
    color: var(--sk-text-muted);
    background: var(--sk-surface-2);
    white-space: nowrap;
}

.sk-notify-on .sk-notify-badge {
    color: #166534;
    background: rgba(22, 163, 74, 0.14);
    border-color: rgba(22, 163, 74, 0.4);
}

[data-bs-theme='dark'] .sk-notify-on .sk-notify-badge {
    color: #bbf7d0;
    background: rgba(74, 222, 128, 0.16);
    border-color: rgba(74, 222, 128, 0.35);
}

/* Başlıktaki düğmede rozete yer yok; küçük bir nokta durumu bildirir. */
.sk-notify-btn {
    position: relative;
}

.sk-notify-btn.sk-notify-on::after {
    content: '';
    position: absolute;
    top: 0.35rem;
    right: 0.3rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    border: 2px solid var(--sk-surface);
}

/* Yan menüdeki düğme rozetiyle zaten belli; nokta tekrar olur. */
.sk-side-link.sk-notify-btn::after {
    display: none;
}

/* =====================================================================
   Ayarlar sekmeleri

   Ayarlar tek sayfada uzayınca aranan şey bulunamıyordu; ekran
   kategorilere ayrıldı. Şerit dar ekranda yatay kaydırılır.
   ===================================================================== */
.sk-settings-tabs {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
}

.sk-settings-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--sk-border);
    background: var(--sk-surface);
    color: var(--sk-text-muted);
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--sk-transition), color var(--sk-transition),
                border-color var(--sk-transition);
}

.sk-settings-tab:hover {
    border-color: rgba(var(--sk-brand-rgb), 0.45);
    color: var(--sk-text);
}

.sk-settings-tab.active {
    background: linear-gradient(135deg, var(--sk-brand), var(--sk-brand-dark));
    border-color: var(--sk-brand-dark);
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--sk-brand-rgb), 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .sk-settings-tab { transition: none; }
}

/* =====================================================================
   Uyarı penceresi (yetki engeli vb.)

   Yetkisi olmayan bağlantıya tıklamak kullanıcıyı tam ekran hata
   sayfasına atıyordu; telefonda geri dönmek zordu. Artık bulunduğu
   sayfada kalır, ortada bir pencere açılır.
   ===================================================================== */
.sk-notice .modal-content {
    box-shadow: var(--sk-shadow-lg);
}

.sk-notice-icon {
    font-size: 2.4rem;
    color: var(--sk-brand);
}

/*
   Hata kodu. Aynı kod günlüğe de yazılıyor; kullanıcı okuyup ilettiğinde
   hatanın tam izini bulabiliyoruz. Yanlış okunmasın diye eşit genişlikli
   yazı tipiyle ve etiket gibi gösterilir.
*/
.sk-notice-code {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border: 1px dashed var(--sk-border);
    border-radius: var(--sk-radius-sm);
    background: var(--sk-surface-2);
    color: var(--sk-text-muted);
    font-family: 'Consolas', 'SFMono-Regular', ui-monospace, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    cursor: pointer;
}

/*
   Arka plan bulanıklaşır: uyarının okunması gerektiği belli olsun ama
   kullanıcı nerede olduğunu kaybetmesin. Bootstrap'in kendi karartması
   tek başına bunu vermiyor.
*/
.modal-backdrop.show {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop.show {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}