/* =========================================================================
   Viart CRM · "Cupertino" Premium UI Theme
   Apple HIG esintili: glassmorphism, yumusak derinlik, akici yay hareketleri.
   Yalnizca gorsel katman — hicbir arka plan / veri mantigi degismez.
   Filament v3 (.fi-*) siniflarini hedefler. Build gerektirmez.
   ========================================================================= */

:root {
    /* Yaylanma hissi veren yumusatma egrisi (spring-like) */
    --cup-ease: cubic-bezier(0.25, 1, 0.5, 1);
    --cup-ease-fast: cubic-bezier(0.3, 1.2, 0.5, 1);
    --cup-dur: 0.4s;

    /* Squircle kose yaricaplari */
    --cup-radius-lg: 16px;   /* kart, modal, dropdown */
    --cup-radius-md: 12px;   /* buton, input */
    --cup-radius-sm: 10px;

    /* Yumusak, genis yayilan golgeler */
    --cup-shadow-sm: 0 4px 16px -6px rgba(17, 24, 39, 0.10);
    --cup-shadow: 0 10px 40px -10px rgba(17, 24, 39, 0.10);
    --cup-shadow-lg: 0 24px 60px -18px rgba(17, 24, 39, 0.18);

    /* Buzlu cam (frosted glass) */
    --cup-glass-bg: rgba(255, 255, 255, 0.72);
    --cup-glass-border: rgba(255, 255, 255, 0.55);
    --cup-hairline: rgba(17, 24, 39, 0.07);
    --cup-hover: rgba(17, 24, 39, 0.035);

    /* Sabit oge (topbar/sidebar) icin KATI arka plan — blur yok, kaydirma akici. */
    --cup-solid-bg: #f6f7f9;
}

.dark {
    --cup-shadow-sm: 0 4px 16px -6px rgba(0, 0, 0, 0.5);
    --cup-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.55);
    --cup-shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.65);

    --cup-glass-bg: rgba(24, 24, 27, 0.68);
    --cup-glass-border: rgba(255, 255, 255, 0.08);
    --cup-hairline: rgba(255, 255, 255, 0.08);
    --cup-hover: rgba(255, 255, 255, 0.05);

    --cup-solid-bg: #16181d;
}

/* -------------------------------------------------------------------------
   1) Tipografi — San Francisco / system-ui
   ------------------------------------------------------------------------- */
html,
body,
.fi-body,
.fi-panel {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.011em;
}

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    letter-spacing: -0.021em;
    font-weight: 600;
}

/* Global gecis kolaylastirici — sadece etkilesim ozellikleri */
.fi-btn,
.fi-input,
.fi-select-input,
.fi-ta-row,
.fi-dropdown-list-item,
.fi-sidebar-item-button,
.fi-tabs-item,
.fi-badge,
.fi-link,
.fi-ta-header-cell {
    transition: background-color var(--cup-dur) var(--cup-ease),
        border-color var(--cup-dur) var(--cup-ease),
        box-shadow var(--cup-dur) var(--cup-ease),
        color var(--cup-dur) var(--cup-ease),
        transform var(--cup-dur) var(--cup-ease) !important;
}

/* -------------------------------------------------------------------------
   2) Glassmorphism — sidebar, topbar, sabit basliklar
   ------------------------------------------------------------------------- */
/* Topbar/sidebar: KATI arka plan. backdrop-filter kaldirildi cunku bu ogeler
   her zaman ekranda ve kaydirma sirasinda her karede yeniden bulaniklastirma
   ciddi kasmaya yol aciyordu. */
.fi-sidebar,
.fi-sidebar-header,
.fi-topbar > nav,
.fi-topbar {
    background: var(--cup-solid-bg) !important;
    border-color: var(--cup-hairline) !important;
}

.fi-topbar > nav {
    box-shadow: 0 1px 0 0 var(--cup-hairline);
}

.fi-sidebar {
    border-right: 1px solid var(--cup-hairline) !important;
}

/* Sidebar nav ogeleri: yumusak, kapsulvari hover/aktif */
.fi-sidebar-item-button {
    border-radius: var(--cup-radius-md) !important;
    margin-block: 2px;
    padding-block: 0.55rem !important;
}

.fi-sidebar-item-button:hover {
    background: var(--cup-hover) !important;
}

.fi-sidebar-item-active > .fi-sidebar-item-button {
    background: rgba(99, 102, 241, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18);
}

/* -------------------------------------------------------------------------
   3) Kartlar / bolumler (sections) — nefes alan bosluk + yumusak golge
   ------------------------------------------------------------------------- */
.fi-section,
.fi-wi,
.fi-fo-section,
.fi-ta-ctn,
.fi-modal-window,
.fi-dropdown-panel {
    border-radius: var(--cup-radius-lg) !important;
    border: 1px solid var(--cup-hairline) !important;
    box-shadow: var(--cup-shadow) !important;
}

.fi-section {
    background: rgba(255, 255, 255, 0.6);
}
.dark .fi-section {
    background: rgba(255, 255, 255, 0.015);
}

/* Bolum ic bosluklarini genislet — icerik nefes alsin */
.fi-section-content {
    padding: 1.75rem !important;
}
.fi-section-header {
    padding: 1.5rem 1.75rem !important;
}

@media (min-width: 1024px) {
    .fi-section-content {
        padding: 2rem !important;
    }
}

/* Sayfa icerik dikey bosluklari */
.fi-page .fi-page-content,
.fi-main {
    gap: 2rem;
}
.fi-main {
    padding-block: 2rem !important;
}

/* -------------------------------------------------------------------------
   4) Form gruplari — daha genis dikey ritim, yumusak inputlar
   ------------------------------------------------------------------------- */
.fi-fo-component-ctn {
    gap: 1.5rem !important;
}

.fi-input-wrp {
    border-radius: var(--cup-radius-md) !important;
    box-shadow: var(--cup-shadow-sm) !important;
    border-color: var(--cup-hairline) !important;
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), var(--cup-shadow-sm) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    transform: translateY(-1px);
}

.fi-input {
    padding-block: 0.6rem !important;
}

.fi-fo-field-wrp-label,
.fi-fo-field-wrp .fi-fo-field-wrp-hint {
    letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
   5) Veri tablolari — dikey cizgi yok, bol padding, hafif hover
   ------------------------------------------------------------------------- */
.fi-ta {
    border-radius: var(--cup-radius-lg);
    overflow: hidden;
}

.fi-ta-table {
    border-collapse: separate;
    border-spacing: 0;
}

/* Baslik satiri: hafif, buyuk harf ferahligi */
.fi-ta-header-cell {
    background: transparent !important;
    border-bottom: 1px solid var(--cup-hairline) !important;
    padding-block: 1rem !important;
    padding-inline: 1.25rem !important;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* Hucreler: bolca padding, sadece cok hafif yatay ayirici */
.fi-ta-cell {
    border: 0 !important;
    padding-block: 1rem !important;
    padding-inline: 1.25rem !important;
}

.fi-ta-row {
    border-bottom: 1px solid var(--cup-hairline);
}
.fi-ta-row:last-child {
    border-bottom: 0;
}

/* Satir hover: cok hafif arka plan degisimi */
.fi-ta-row:hover {
    background: var(--cup-hover) !important;
}

/* Secili / aktif satir saydamlasmasin */
.fi-ta-row[class*="selected"],
.fi-ta-row:active,
.fi-ta-row:focus,
.fi-ta-row:focus-within {
    opacity: 1 !important;
    background: var(--cup-hover) !important;
}

/* Tablo checkbox seciminde saydamlasma olmasin */
.fi-ta-row * {
    opacity: inherit;
}

/* Dikey ayiricilari kesin olarak kaldir */
.fi-ta-cell + .fi-ta-cell,
.fi-ta-header-cell + .fi-ta-header-cell {
    border-left: 0 !important;
}

/* Tablo ust arac cubugu / filtreler ferah */
.fi-ta-header-toolbar {
    padding: 1.25rem 1.5rem !important;
}

/* -------------------------------------------------------------------------
   6) Butonlar — yumusak, mikro etkilesimli (tiklaninca hafif kuculur)
   ------------------------------------------------------------------------- */
.fi-btn {
    border-radius: var(--cup-radius-md) !important;
    font-weight: 590;
    box-shadow: var(--cup-shadow-sm);
    /* will-change kaldirildi: her butonu kalici GPU katmaninda tutup
       tablolarda (satir basi butonlar) bellek/kompozit yuku yaratiyordu. */
}

.fi-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--cup-shadow);
    filter: saturate(1.05);
}

.fi-btn:active {
    transform: scale(0.97);
    transition-duration: 0.09s;
    box-shadow: var(--cup-shadow-sm);
}

/* Ikon butonlar da ayni his */
.fi-icon-btn:active {
    transform: scale(0.9);
    transition: transform 0.09s var(--cup-ease);
}

/* Badge / etiketler yumusak */
.fi-badge {
    border-radius: 9999px !important;
    font-weight: 560;
}

/* -------------------------------------------------------------------------
   7) Modallar — merkezden yumusakca buyuyerek + fade ile acilir
   ------------------------------------------------------------------------- */
.fi-modal-window {
    box-shadow: var(--cup-shadow-lg) !important;
    animation: cup-modal-in 0.45s var(--cup-ease) both;
}

@keyframes cup-modal-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.965);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal arka plani (overlay) yumusak buzlu cam */
.fi-modal-close-overlay,
.fi-modal > .fi-modal-close-overlay {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: rgba(17, 24, 39, 0.25) !important;
}

.fi-modal-header {
    padding: 1.75rem 1.75rem 0.5rem !important;
}
.fi-modal-content {
    padding: 1.25rem 1.75rem !important;
}
.fi-modal-footer {
    padding: 1rem 1.75rem 1.75rem !important;
}

/* Dropdown / acilir menuler */
.fi-dropdown-panel {
    box-shadow: var(--cup-shadow-lg) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background: var(--cup-glass-bg) !important;
    animation: cup-pop-in 0.28s var(--cup-ease-fast) both;
    padding: 0.35rem !important;
}
.fi-dropdown-list-item {
    border-radius: var(--cup-radius-sm) !important;
}

@keyframes cup-pop-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* -------------------------------------------------------------------------
   8) Bildirimler (toast) — asagidan/yandan yumusakca kayar, buzlu cam
   ------------------------------------------------------------------------- */
.fi-no-notification {
    border-radius: var(--cup-radius-lg) !important;
    border: 1px solid var(--cup-glass-border) !important;
    box-shadow: var(--cup-shadow-lg) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background: var(--cup-glass-bg) !important;
    animation: cup-toast-in 0.5s var(--cup-ease) both;
}

@keyframes cup-toast-in {
    from {
        opacity: 0;
        transform: translateX(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* -------------------------------------------------------------------------
   9) Tabs, linkler, kucuk dokunuslar
   ------------------------------------------------------------------------- */
.fi-tabs {
    border-radius: 9999px !important;
    padding: 0.25rem !important;
    background: var(--cup-hover) !important;
    box-shadow: inset 0 0 0 1px var(--cup-hairline);
}
.fi-tabs-item {
    border-radius: 9999px !important;
}
.fi-tabs-item-active {
    box-shadow: var(--cup-shadow-sm);
}

/* Login karti da premium gorunsun */
.fi-simple-main {
    border-radius: var(--cup-radius-lg) !important;
    box-shadow: var(--cup-shadow-lg) !important;
    border: 1px solid var(--cup-hairline) !important;
}

/* Sayfa gecis animasyonu — icerik yumusakca belirsin */
.fi-main > * {
    animation: cup-fade-up 0.5s var(--cup-ease) both;
}
@keyframes cup-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -------------------------------------------------------------------------
   10) Erisilebilirlik — hareketi azalt tercihi
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    .fi-main > *,
    .fi-modal-window,
    .fi-dropdown-panel,
    .fi-no-notification {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* -------------------------------------------------------------------------
   11) Livewire wire:loading saydamlik duzeltmesi
   Filament, Livewire istegi sirasinda form bolumlerine / satirlara
   opacity-70 sinifi ekler. Bu, tiklama aninda saydamlasma goruntusune
   yol acar. Asagidaki kurallar bu davranisi tamamen iptal eder.
   ------------------------------------------------------------------------- */

/* Tailwind opacity utility'lerini form ve tablo iceriginde etkisiz kilir */
.fi-fo-component-ctn .opacity-70,
.fi-fo-section .opacity-70,
.fi-ta .opacity-70,
.fi-ta-row .opacity-70,
.fi-page .opacity-70 {
    opacity: 1 !important;
}

/* wire:loading attribute'u olan veya icinde bulunan form elemanlarini koru */
[wire\:loading],
[wire\:loading\.class],
[wire\:loading\.class\.add],
[wire\:loading\.class\.remove] {
    opacity: 1 !important;
}

/* Filament'in kendi loading wrapper'lari */
.fi-fo-field-wrp,
.fi-input-wrp,
.fi-select-input,
.fi-fo-component-ctn,
.fi-section-content,
.fi-ta-row,
.fi-ta-cell {
    opacity: 1 !important;
}

/* =========================================================================
   SAYDAMLIK DUZELTMESI (v4)
   backdrop-filter modal/donusturulmus ust oge icinde calismayinca acilir
   listeler yari saydam kaliyordu (arka plan gorunuyordu). Tum acilir panel,
   menu, select listesi ve modal penceresini KATI (opak) arka plana ceviririz.
   ========================================================================= */
.fi-dropdown-panel,
.fi-dropdown-list,
.fi-modal-window,
.fi-fo-select-panel,
.fi-fo-select-tree,
.fi-sr-dialog-panel,
.choices__list--dropdown,
[role="listbox"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: #ffffff !important;
}

.dark .fi-dropdown-panel,
.dark .fi-dropdown-list,
.dark .fi-modal-window,
.dark .fi-fo-select-panel,
.dark .fi-fo-select-tree,
.dark .fi-sr-dialog-panel,
.dark .choices__list--dropdown,
.dark [role="listbox"] {
    background-color: #18181b !important;
}

/* Secili/vurgulu secenek de opak kalsin */
.fi-dropdown-list-item,
.choices__item {
    background-color: transparent !important;
}