/* ============================================================
   DSG-Istakip — Filament admin paneli özel tema
   Tailwind build gerektirmez; CSS variables + selector override.
   Filament 3 default tema üzerine ince dokunuşlar.
   ============================================================ */

:root {
    /* Marka rengi — DSG yeşili (logo'dan) */
    --dsg-primary-50: 240 253 244;
    --dsg-primary-100: 220 252 231;
    --dsg-primary-200: 187 247 208;
    --dsg-primary-300: 134 239 172;
    --dsg-primary-400: 74 222 128;
    --dsg-primary-500: 34 197 94;
    --dsg-primary-600: 22 163 74;
    --dsg-primary-700: 21 128 61;
    --dsg-primary-800: 22 101 52;
    --dsg-primary-900: 20 83 45;
    --dsg-primary-950: 5 46 22;

    /* Yumuşak gri */
    --dsg-gray-50: 250 250 251;
    --dsg-gray-100: 244 244 246;
    --dsg-gray-200: 229 229 234;
    --dsg-gray-300: 209 209 217;
    --dsg-gray-400: 161 161 173;
    --dsg-gray-500: 113 113 128;
    --dsg-gray-600: 82 82 95;
    --dsg-gray-700: 63 63 74;
    --dsg-gray-800: 39 39 47;
    --dsg-gray-900: 23 23 28;

    /* Köşe yumuşaklığı */
    --dsg-radius-sm: 6px;
    --dsg-radius-md: 10px;
    --dsg-radius-lg: 14px;
    --dsg-radius-xl: 18px;

    /* Gölge skalası — yumuşak ve katmanlı */
    --dsg-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --dsg-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
    --dsg-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
    --dsg-shadow-lg: 0 10px 20px -4px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);

    --dsg-ring: 0 0 0 3px rgb(34 197 94 / 0.18);

    /* Font ailesi */
    --dsg-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   Genel yumuşatma — global ipuçları
   ============================================================ */

html, body {
    font-family: var(--dsg-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: rgb(250 250 251);
}

.fi-body {
    background-color: rgb(250 250 251) !important;
}

.dark .fi-body {
    background-color: rgb(15 15 20) !important;
}

/* ============================================================
   Buton — yuvarlatma + hover lift
   ============================================================ */

.fi-btn,
button.fi-btn,
a.fi-btn,
.fi-modal-actions .fi-btn,
.fi-fo-actions-ctn .fi-btn {
    border-radius: var(--dsg-radius-md) !important;
    font-weight: 500;
    letter-spacing: 0.005em;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.fi-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--dsg-shadow-sm);
}

.fi-btn:active {
    transform: translateY(0);
}

/* Primary butona DSG yeşili */
.fi-btn.fi-color-primary,
.fi-btn-color-primary,
.fi-color-primary .fi-btn {
    background-color: rgb(var(--dsg-primary-600)) !important;
}

.fi-btn.fi-color-primary:hover,
.fi-btn-color-primary:hover {
    background-color: rgb(var(--dsg-primary-700)) !important;
}

/* ============================================================
   Input / Select / Textarea — yumuşak çerçeve + focus ring
   ============================================================ */

.fi-input,
.fi-select-input,
.fi-textarea,
input[type="text"].fi-input,
input[type="email"].fi-input,
input[type="number"].fi-input,
input[type="password"].fi-input,
input[type="search"].fi-input,
input[type="tel"].fi-input,
input[type="url"].fi-input,
input[type="date"].fi-input,
input[type="datetime-local"].fi-input,
input[type="time"].fi-input,
textarea.fi-input,
select.fi-select-input,
.fi-input-wrp {
    border-radius: var(--dsg-radius-md) !important;
    border-color: rgb(var(--dsg-gray-200)) !important;
    background-color: white !important;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.fi-input:hover,
.fi-select-input:hover,
.fi-textarea:hover,
.fi-input-wrp:hover {
    border-color: rgb(var(--dsg-gray-300)) !important;
}

.fi-input:focus,
.fi-select-input:focus,
.fi-textarea:focus,
.fi-input-wrp:focus-within {
    border-color: rgb(var(--dsg-primary-500)) !important;
    box-shadow: var(--dsg-ring) !important;
    outline: none !important;
}

/* Disabled input görünümü daha sakin */
.fi-input:disabled,
.fi-select-input:disabled,
.fi-textarea:disabled {
    background-color: rgb(var(--dsg-gray-50)) !important;
    color: rgb(var(--dsg-gray-500)) !important;
    cursor: not-allowed;
}

/* Dark mode input override */
.dark .fi-input,
.dark .fi-select-input,
.dark .fi-textarea,
.dark .fi-input-wrp {
    background-color: rgb(28 28 35) !important;
    border-color: rgb(55 55 65) !important;
    color: rgb(225 225 232) !important;
}

/* ============================================================
   Checkbox + Radio — kareler yumuşak
   ============================================================ */

.fi-checkbox-input,
.fi-radio-input,
input[type="checkbox"].fi-checkbox-input,
input[type="radio"].fi-radio-input {
    border-radius: 5px !important;
    border-width: 1.5px !important;
    border-color: rgb(var(--dsg-gray-300)) !important;
    transition: background-color .12s ease, border-color .12s ease;
}

input[type="radio"].fi-radio-input {
    border-radius: 50% !important;
}

.fi-checkbox-input:checked,
.fi-radio-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: rgb(var(--dsg-primary-600)) !important;
    border-color: rgb(var(--dsg-primary-600)) !important;
}

.fi-checkbox-input:focus,
.fi-radio-input:focus {
    box-shadow: var(--dsg-ring) !important;
    outline: none !important;
}

/* ============================================================
   Tablolar — daha kibar
   ============================================================ */

.fi-ta,
.fi-ta-table,
.fi-ta-ctn {
    border-radius: var(--dsg-radius-lg) !important;
    overflow: hidden;
}

.fi-ta-ctn {
    box-shadow: var(--dsg-shadow-sm);
    border: 1px solid rgb(var(--dsg-gray-100));
}

.dark .fi-ta-ctn {
    border-color: rgb(40 40 50);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4);
}

/* Tablo başlığı */
.fi-ta-header-cell {
    background-color: rgb(var(--dsg-gray-50)) !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    color: rgb(var(--dsg-gray-700)) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}

.dark .fi-ta-header-cell {
    background-color: rgb(28 28 35) !important;
    color: rgb(180 180 195) !important;
}

/* Tablo satır hover — yumuşak vurgu */
.fi-ta-row {
    transition: background-color .12s ease;
}

.fi-ta-row:hover {
    background-color: rgb(var(--dsg-gray-50)) !important;
}

.dark .fi-ta-row:hover {
    background-color: rgb(28 28 35) !important;
}

/* Tablo hücre dikey hizalama */
.fi-ta-cell {
    vertical-align: middle !important;
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
}

/* Sayfalama */
.fi-pagination {
    border-radius: var(--dsg-radius-md);
}

/* ============================================================
   Kartlar / Sectionlar — kibar yumuşatma
   ============================================================ */

.fi-section,
.fi-section-content-ctn,
.fi-fo-section,
.fi-wi {
    border-radius: var(--dsg-radius-lg) !important;
    box-shadow: var(--dsg-shadow-sm) !important;
    border: 1px solid rgb(var(--dsg-gray-100)) !important;
    transition: box-shadow .15s ease;
}

.fi-section:hover,
.fi-fo-section:hover {
    box-shadow: var(--dsg-shadow-md) !important;
}

.dark .fi-section,
.dark .fi-section-content-ctn,
.dark .fi-fo-section,
.dark .fi-wi {
    border-color: rgb(40 40 50) !important;
}

/* Section başlığı */
.fi-section-header,
.fi-fo-section-header {
    padding: 1.1rem 1.25rem !important;
    border-bottom: 1px solid rgb(var(--dsg-gray-100));
}

.fi-section-header-heading,
.fi-fo-section-header-heading {
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: rgb(var(--dsg-gray-800)) !important;
    letter-spacing: -0.005em;
}

.dark .fi-section-header-heading,
.dark .fi-fo-section-header-heading {
    color: rgb(225 225 232) !important;
}

/* ============================================================
   Modal — yumuşak büyük modal
   ============================================================ */

.fi-modal-window {
    border-radius: var(--dsg-radius-xl) !important;
    box-shadow: var(--dsg-shadow-lg) !important;
}

/* ============================================================
   Badge — renkli durum etiketleri
   ============================================================ */

.fi-badge {
    border-radius: 999px !important;
    padding: 0.22rem 0.7rem !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.01em;
}

/* ============================================================
   Sidebar (sol menü) — daha temiz
   ============================================================ */

.fi-sidebar,
.fi-sidebar-nav {
    border-right: 1px solid rgb(var(--dsg-gray-100));
}

.dark .fi-sidebar,
.dark .fi-sidebar-nav {
    border-right-color: rgb(40 40 50);
}

.fi-sidebar-item a,
.fi-sidebar-nav-item {
    border-radius: var(--dsg-radius-md) !important;
    transition: background-color .12s ease;
    margin: 0.12rem 0;
}

.fi-sidebar-item.fi-active a,
.fi-sidebar-nav-item.fi-active {
    background-color: rgb(var(--dsg-primary-50)) !important;
    color: rgb(var(--dsg-primary-700)) !important;
    font-weight: 500;
}

.dark .fi-sidebar-item.fi-active a {
    background-color: rgb(20 60 35) !important;
    color: rgb(140 220 170) !important;
}

/* ============================================================
   Topbar / Header (TOP NAVIGATION modu)
   ============================================================ */

.fi-topbar {
    box-shadow: var(--dsg-shadow-sm);
    backdrop-filter: blur(10px);
    background-color: rgb(255 255 255 / 0.92) !important;
    border-bottom: 1px solid rgb(var(--dsg-gray-100));
    position: sticky;
    top: 0;
    z-index: 30;
}

.dark .fi-topbar {
    background-color: rgb(20 20 26 / 0.92) !important;
    border-bottom-color: rgb(40 40 50);
}

/* Üst navigasyon menü item'ları — yatay yerleşim için kibarlık */
.fi-topbar-item,
nav.fi-topbar-nav a,
nav.fi-topbar-nav button {
    border-radius: var(--dsg-radius-md);
    padding: 0.5rem 0.85rem !important;
    font-weight: 500;
    font-size: 0.92rem;
    color: rgb(var(--dsg-gray-700));
    transition: background-color .15s ease, color .15s ease;
    position: relative;
}

nav.fi-topbar-nav a:hover,
nav.fi-topbar-nav button:hover {
    background-color: rgb(var(--dsg-gray-100));
    color: rgb(var(--dsg-gray-900));
}

/* Active state — aktif menü item alt çizgi yerine yumuşak yeşil bg */
nav.fi-topbar-nav a.fi-active,
nav.fi-topbar-nav a[aria-current="page"],
.fi-topbar-item.fi-active {
    background-color: rgb(var(--dsg-primary-50));
    color: rgb(var(--dsg-primary-700)) !important;
}

.dark nav.fi-topbar-nav a:hover,
.dark nav.fi-topbar-nav button:hover {
    background-color: rgb(35 35 45);
    color: rgb(230 230 240);
}

.dark nav.fi-topbar-nav a.fi-active,
.dark .fi-topbar-item.fi-active {
    background-color: rgb(20 60 35);
    color: rgb(140 220 170) !important;
}

/* Dropdown navigation group — alt menü */
.fi-dropdown-list {
    border-radius: var(--dsg-radius-lg) !important;
    box-shadow: var(--dsg-shadow-lg) !important;
    border: 1px solid rgb(var(--dsg-gray-100));
    overflow: hidden;
    min-width: 220px;
}

.fi-dropdown-list-item {
    padding: 0.6rem 1rem !important;
    transition: background-color .12s ease;
}

.fi-dropdown-list-item:hover {
    background-color: rgb(var(--dsg-gray-50));
}

/* Logo / brand alanı */
.fi-logo,
.fi-topbar a[href*="/admin"]:first-child {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: rgb(var(--dsg-primary-700));
}

/* Ana içerik tam genişlikte — sidebar yok */
.fi-main {
    max-width: 100% !important;
}

.fi-main-ctn {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

@media (min-width: 1280px) {
    .fi-main-ctn {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Page header (Resource başlığı + butonlar) */
.fi-page-header,
.fi-header {
    padding-top: 1.4rem !important;
    padding-bottom: 1rem !important;
}

.fi-header-heading {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em;
}

/* ============================================================
   Resim / Avatar — yumuşatma + ince border
   ============================================================ */

img.fi-avatar,
.fi-avatar-img,
.fi-ta-image-img,
.fi-image,
img[class*="fi-ta-image"],
img[class*="rounded"] {
    border-radius: var(--dsg-radius-md);
    box-shadow: var(--dsg-shadow-xs);
}

img.fi-avatar,
.fi-avatar-img {
    border: 2px solid white;
}

.dark img.fi-avatar {
    border-color: rgb(28 28 35);
}

/* ============================================================
   Form etiketleri
   ============================================================ */

.fi-fo-field-wrp-label,
label.fi-fo-field-wrp-label,
.fi-label {
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    color: rgb(var(--dsg-gray-700)) !important;
    margin-bottom: 0.35rem !important;
}

.dark .fi-fo-field-wrp-label,
.dark .fi-label {
    color: rgb(200 200 215) !important;
}

/* Yardımcı metin */
.fi-fo-field-wrp-hint {
    font-size: 0.8rem !important;
    color: rgb(var(--dsg-gray-500)) !important;
}

/* ============================================================
   Scrollbar (Webkit) — ince ve modern
   ============================================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--dsg-gray-200));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--dsg-gray-300));
    background-clip: content-box;
}

.dark ::-webkit-scrollbar-thumb {
    background: rgb(55 55 65);
    background-clip: content-box;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgb(75 75 85);
    background-clip: content-box;
}

/* ============================================================
   Login sayfası — biraz daha hoş karşılama
   ============================================================ */

.fi-simple-layout {
    background:
        radial-gradient(at 20% 10%, rgb(var(--dsg-primary-50)), transparent 50%),
        radial-gradient(at 80% 90%, rgb(232 250 240), transparent 50%),
        rgb(250 250 251) !important;
}

.dark .fi-simple-layout {
    background:
        radial-gradient(at 20% 10%, rgb(15 35 25), transparent 50%),
        radial-gradient(at 80% 90%, rgb(10 25 18), transparent 50%),
        rgb(12 12 16) !important;
}

.fi-simple-main {
    border-radius: var(--dsg-radius-xl) !important;
    box-shadow: var(--dsg-shadow-lg) !important;
    border: 1px solid rgb(var(--dsg-gray-100));
}

.dark .fi-simple-main {
    border-color: rgb(40 40 50);
}

/* ============================================================
   File upload alanları — dropzone hissi
   ============================================================ */

.fi-fo-file-upload-dropzone,
[class*="filepond--root"],
[class*="dropzone"] {
    border-radius: var(--dsg-radius-md) !important;
    border-style: dashed !important;
    border-width: 1.5px !important;
    border-color: rgb(var(--dsg-gray-300)) !important;
    transition: border-color .15s ease, background-color .15s ease;
}

.fi-fo-file-upload-dropzone:hover {
    border-color: rgb(var(--dsg-primary-400)) !important;
    background-color: rgb(var(--dsg-primary-50)) !important;
}

/* ============================================================
   Linkler ve breadcrumb
   ============================================================ */

.fi-breadcrumbs a {
    color: rgb(var(--dsg-gray-600));
    transition: color .12s ease;
}

.fi-breadcrumbs a:hover {
    color: rgb(var(--dsg-primary-700));
}

/* ============================================================
   Animasyon — yumuşak girişler
   ============================================================ */

@keyframes dsg-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fi-section,
.fi-wi,
.fi-modal-window,
.fi-ta-ctn {
    animation: dsg-fade-in .22s ease both;
}

/* Reduced motion için saygı */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}