/* ============================================================
   Şerif Teknik Yalıtım — Ana Tasarım Sistemi
   Referans: stitch_ai_tasarım_örnekleri/DESIGN.md
   Font: Inter (Google Fonts)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
    /* ========================================================
       MARKA PALETİ — 4 renk, başkası yok.
       Beyaz · Koyu Lacivert · Siyah · Metalik Gri
       ======================================================== */
    --navy:                  #0d1b33;   /* MARKA — lacivert */
    --navy-deep:             #081221;
    --navy-soft:             #1b2c4a;
    --ink:                   #14161a;   /* siyah — başlıklar */
    --metal:                 #6b7686;   /* metalik gri — ikincil metin */
    --metal-light:           #9aa4b2;
    --metal-line:            #e5e8ed;   /* metalik saç teli çizgi */

    /* --------------------------------------------------------
       YÜZEYLER — sitenin büyük çoğunluğu beyaz.
       Ayrım gölgeyle değil, ince metalik çizgiyle yapılır;
       "temiz ve pahalı" hissinin kaynağı budur.
       -------------------------------------------------------- */
    /* KADEMELER — her basamak gözle AYIRT EDİLEBİLİR olmalı.
       Önceki hâlde sayfa zemini ile kart başlığı aynı tondaydı ve
       iç içe 3 kutu aynı griyi paylaşıyordu; "renk farkı var ama ne
       anlama geldiği belli değil" hissinin sebebi buydu.
       Kural: 0=sayfa · 1=kart(beyaz) · 2=grup · 3=iç bilgi        */
    --surface:               #eef1f6;   /* 0 — sayfa zemini */
    --surface-card:          #ffffff;   /* 1 — kart, saf beyaz */
    --surface-low:           #f7f9fb;   /* 2 — kart içi şerit / grup */
    --surface-container-low: #f7f9fb;   /* 2 — aynı kademe */
    --surface-container:     #f7f9fb;   /* 2 — kart başlığı */
    --surface-inset:         #e8ecf3;   /* 3 — şirket içi / müşteriden gizli */
    --surface-dim:           #eaedf2;
    --surface-high:          #eaedf2;
    --surface-highest:       #dfe3ea;

    /* Birincil — MARKA LACİVERTİ */
    --primary:               #0d1b33;
    --primary-mid:           #1b2c4a;
    --primary-hover:         #16294a;
    --primary-light:         #e8ecf3;
    --on-primary:            #ffffff;

    /* Aksan = marka lacivertinin kendisi. İkinci bir renk yok. */
    --accent:                #0d1b33;
    --accent-bg:             #f0f3f8;

    /* İkincil */
    --secondary:             #48505e;
    --secondary-container:   #e8ecf3;

    /* Metin — 3 kademe, başka gri yok */
    --text-primary:          #14161a;   /* siyah */
    --text-secondary:        #48505e;
    --text-muted:            #6b7686;   /* metalik gri */
    --text-on-dark:          #ffffff;

    /* Kenarlık — metalik saç teli */
    --border:                #e7eaef;
    --border-strong:         #d5dae2;

    /* --------------------------------------------------------
       DURUM RENKLERİ — her biri TEK ton.
       Kural: renk DURUM bildirir, rakam bildirmez.
       -------------------------------------------------------- */
    /* Parlak "şeker" tonları değil, koyu ve ağırbaşlı tonlar.
       Doygunluğu düşük renk = kurumsal; parlak renk = ucuz. */
    --success:               #0e7c5a;
    --success-bg:            #eff8f4;
    --warning:               #b54708;
    --warning-bg:            #fdf6ec;
    --danger:                #b42318;
    --danger-bg:             #fdf3f2;
    --info:                  #0d1b33;
    --info-bg:               #f0f3f8;

    /* Radius — 12 farklı değer yerine 4 kademe.
       Rastgele köşe yarıçapı gözün fark ettiği ilk özensizliktir. */
    --radius-sm:             6px;
    --radius:                8px;
    --radius-md:             10px;
    --radius-lg:             12px;
    --radius-xl:             16px;
    --radius-full:           9999px;

    /* Boşluklar */
    --space-xs:              8px;
    --space-sm:              16px;
    --space-md:              24px;
    --space-lg:              40px;
    --space-xl:              64px;

    /* Sidebar & Topbar
       90px bir yönetim paneli için fazla yüksekti; ekranın üst
       şeridini yemek yerine içeriğe yer bırakır. */
    --sidebar-width:         0px;
    --topbar-height:         72px;

    /* Gölgeler — fısıltı seviyesinde ve lacivert tonlu.
       Kalın gölge "bootstrap" hissi verir; pahalı arayüzler
       ayrımı gölgeyle değil ince çizgiyle kurar. */
    --shadow-sm:             0 1px 2px rgba(13,27,51,0.04);
    --shadow:                0 1px 3px rgba(13,27,51,0.06), 0 1px 2px rgba(13,27,51,0.03);
    --shadow-md:             0 4px 12px rgba(13,27,51,0.07);
    --shadow-lg:             0 16px 40px rgba(13,27,51,0.12);

    /* Geçişler */
    --transition:            150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:       300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--surface);
    min-height: 100vh;
    overflow-x: hidden;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

ul, ol {
    list-style: none;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================================
   LAYOUT — Sidebar + İçerik
   ============================================================ */
.app-layout {
    display: flex;
    min-height: 100vh;
    max-width: 100vw;
}

/* ============================================================
   TOPBAR BRAND & NAV
   ============================================================ */
.topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    min-width: 0;
    flex-shrink: 1;
}

.topbar-brand-icon {
    height: var(--topbar-height);
    max-width: 210px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.topbar-brand-icon img {
    height: 100%;
    width: auto;
    max-height: var(--topbar-height);
    object-fit: contain;
}

.topbar-brand-text {
    display: flex;
    flex-direction: column;
}

.topbar-brand-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
}

.topbar-brand-sub {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.topbar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.topbar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all var(--transition);
}

.topbar-item:hover {
    background: rgba(0,0,0,0.04);
    color: var(--primary);
}

.topbar-item.active {
    background: var(--primary);
    color: #fff;
}

.topbar-item.active .nav-icon {
    opacity: 1;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 var(--space-lg);
    z-index: 90;
}

.topbar-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.topbar-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mobile-menu-btn {
    display: none;
}

.mobile-logout-link {
    display: none;
}

.topbar-search {
    flex: 1;
    max-width: 420px;
    position: relative;
}

.topbar-search input {
    width: 100%;
    height: 40px;
    padding: 0 16px 0 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface-container);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all var(--transition);
}

.topbar-search input::placeholder {
    color: var(--text-muted);
}

.topbar-search input:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--primary-light);
}

.topbar-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
}

.topbar-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--surface-container);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.topbar-icon-btn:hover {
    background: var(--surface-container-high);
    color: var(--primary);
}

.logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition);
}
.logout-btn:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
}

/* ============================================================
   ANA İÇERİK ALANI
   ============================================================ */
.main-content {
    margin-top: var(--topbar-height);
    padding: var(--space-lg);
    min-height: calc(100vh - var(--topbar-height));
    flex: 1;
    width: 100%;
    min-width: 0;
}

.page-header {
    margin-bottom: var(--space-lg);
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.page-subtitle {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ============================================================
   KARTLAR & GRID
   ============================================================ */
.dashboard-grid, .form-page-grid {
    display: grid;
    /* min(400px, 100%): dar ekranda sütun taban genişliği viewport'u aşmasın */
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: var(--space-md);
    align-items: start;
}

/* Şablon malzeme satırı alan etiketleri: masaüstünde üstteki başlık şeridi
   sütunları zaten açıkladığı için gizlidir, mobilde görünür hale gelir. */
.tpl-mat-field label { display: none; }

/* Cari sayfası profil üst bilgisi (ünvan · yevmiye · telefon).
   Her bilgi ayrı bir öğe olduğu için satır sonunda ortasından bölünmez. */
.cari-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 6px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.cari-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* Öğeler arasına ince ayraç */
.cari-meta > span + span::before {
    content: "";
    width: 1px;
    height: 12px;
    background: var(--border-strong);
    margin-right: 10px;
}

/* Grid/flex öğeleri varsayılan olarak içeriklerinin altına küçülmez;
   bu da dar ekranda yatay taşmaya yol açar. */
.dashboard-grid > *,
.form-page-grid > *,
.cari-layout > *,
.entity-grid > *,
.trash-grid > *,
.partners-grid > * {
    min-width: 0;
}

.card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-body {
    padding: var(--space-md);
    flex: 1;
}

.card-header {
    padding: 18px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    border-bottom: 1px solid var(--border) !important;
    /* Başlık şeridi gövdeden hafifçe ayrılır; böylece bir bölümün nerede
       başladığı renk kullanmadan, sadece yüzey farkıyla anlaşılır. */
    background: var(--surface-low) !important;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* ============================================================
   STATİSTİK KARTLARI (Dashboard)
   ============================================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.stat-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow var(--transition), transform var(--transition);
}

.stat-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.stat-card.dark {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stat-card.dark .stat-label {
    color: rgba(255,255,255,0.55);
}

.stat-icon {
    width: 36px;
    height: 36px;
    background: var(--surface);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-mid);
}

.stat-card.dark .stat-icon {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.stat-card.dark .stat-value {
    color: #fff;
}

.stat-trend {
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.trend-up   { color: var(--success); }
.trend-down { color: var(--danger); }
.stat-card.dark .stat-trend { color: rgba(255,255,255,0.55); }

/* ============================================================
   BUTONLAR
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), box-shadow var(--transition),
                transform var(--transition);
    white-space: nowrap;
    line-height: 1;
    text-decoration: none;
    outline: none;
}

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

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.btn-secondary {
    background: var(--surface-card);
    color: var(--text-primary);
    border-color: var(--border);
}

.btn-secondary:hover {
    background: var(--surface-high);
    border-color: var(--border-strong);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--surface-high);
    color: var(--text-primary);
}

.btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

.btn-success:hover {
    background: #047857;
    box-shadow: 0 4px 12px rgba(5,150,105,0.25);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.btn-danger:hover {
    background: #b91c1c;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.8125rem;
}

.btn-lg {
    padding: 13px 28px;
    font-size: 1rem;
}

.btn-icon {
    padding: 9px;
    border-radius: var(--radius);
}

/* ============================================================
   TABLOLAR
   ============================================================ */
.table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-card);
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    padding: 14px 20px;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    background: var(--surface-low);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

thead th.sortable {
    cursor: pointer;
    user-select: none;
}

thead th.sortable:hover {
    color: var(--text-primary);
}

tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}

tbody tr:last-child {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--surface-low);
    cursor: pointer;
}

tbody td {
    padding: 18px 20px;
    font-size: 0.9375rem;
    color: var(--text-primary);
    vertical-align: middle;
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 1;
}

/* ============================================================
   DURUM BADGELERİ
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge-active    { background: var(--info-bg);    color: var(--info); }
.badge-draft     { background: var(--warning-bg); color: var(--warning); }
.badge-completed { background: var(--success-bg); color: var(--success); }
.badge-cancelled { background: var(--danger-bg);  color: var(--danger); }

.badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ============================================================
   FORM ELEMENTLERİ
   ============================================================ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.form-control {
    height: 48px;
    padding: 0 16px;
    background: var(--surface-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    width: 100%;
}

.form-control:focus {
    border-color: var(--primary-mid);
    box-shadow: 0 0 0 3px rgba(30,41,59,0.08);
}

.form-control::placeholder {
    color: var(--text-muted);
}

textarea.form-control {
    height: auto;
    padding: 12px 16px;
    resize: vertical;
    min-height: 100px;
}

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%2375777d' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: var(--space-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(16px) scale(0.98);
    transition: transform var(--transition-slow);
}

.modal-overlay.open .modal {
    transform: translateY(0) scale(1);
}

.modal-lg { max-width: 720px; }
.modal-xl { max-width: 900px; }

.modal-header {
    padding: var(--space-md) var(--space-md) 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    cursor: pointer;
    color: var(--text-muted);
    background: transparent;
    border: none;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
}

.modal-close:hover {
    background: var(--surface-high);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--space-md);
}

.modal-footer {
    padding: 0 var(--space-md) var(--space-md);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
}

/* ============================================================
   SEKMELER (Tabs)
   ============================================================ */
.tabs {
    display: flex;
    gap: 2px;
    background: var(--surface-container);
    border-radius: var(--radius-lg);
    padding: 4px;
    margin-bottom: var(--space-md);
}

.tab-item {
    flex: 1;
    padding: 9px 16px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}

.tab-item.active {
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ============================================================
   GÜNÜN İŞLERİ (Dashboard Event List)
   ============================================================ */
.event-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.event-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition), transform var(--transition);
    cursor: pointer;
}

.event-item:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.event-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 8px 6px;
    text-align: center;
}

.event-date-day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.event-date-month {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-top: 2px;
}

.event-info {
    flex: 1;
    overflow: hidden;
}

.event-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.event-type-santiye {
    background: var(--primary);
    color: #fff;
}

.event-type-kesif {
    background: var(--secondary-container);
    color: var(--secondary);
}

.event-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.event-time {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.event-location {
    font-size: 0.8125rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   TAKVİM
   ============================================================ */
.calendar-wrapper {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
}

/* FullCalendar özelleştirme */
.fc {
    font-family: 'Inter', sans-serif;
}

.fc .fc-toolbar-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.fc .fc-button {
    background: var(--surface-card);
    border: 1.5px solid var(--border);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 7px 14px;
    border-radius: var(--radius);
    transition: background var(--transition);
}

.fc .fc-button:hover {
    background: var(--surface-high);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.fc .fc-col-header-cell-cushion {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 0;
}

.fc .fc-daygrid-day-number {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 8px;
}

/* Liste görünümünde etkinlik <tr> olduğu için koyu zemin uygulanmamalı;
   aksi halde koyu metin koyu zemin üzerine düşüp okunmaz hale gelir. */
.fc .fc-event:not(.fc-list-event) {
    border-radius: 6px;
    border: none;
    padding: 3px 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--primary);
}

.fc .fc-event:not(.fc-list-event):hover {
    opacity: 0.88;
}

/* Yukarıdaki kural etkinliğe koyu bir zemin veriyor ama YAZI RENGİNİ
   belirtmiyordu. FullCalendar'ın "nokta" biçimindeki etkinlikleri
   (fc-daygrid-dot-event) beyaz zemin varsaydığı için koyu yazı
   kullanır — koyu zeminle birleşince yazı okunmaz hale geliyordu.
   Takvim artık eventDisplay:'block' ile nokta biçimi üretmiyor
   (bkz. takvim.php), bu kural yine de güvenlik ağı olarak durur. */
.fc .fc-event:not(.fc-list-event),
.fc .fc-event:not(.fc-list-event) .fc-event-title,
.fc .fc-event:not(.fc-list-event) .fc-event-time {
    color: #ffffff;
}

/* Nokta biçimi çıkarsa: işaretçi zeminde kaybolmasın */
.fc .fc-daygrid-dot-event .fc-daygrid-event-dot {
    border-color: #ffffff;
}

/* ---------- Liste (agenda) görünümü ---------- */
.fc .fc-list-event {
    background: transparent;
    cursor: pointer;
}

.fc .fc-list-event td {
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 0.875rem;
    vertical-align: middle;
}

.fc .fc-list-event:hover td {
    background: var(--surface-low);
}

.fc .fc-list-event-title a {
    color: var(--text-primary);
    font-weight: 600;
}

.fc .fc-list-event-time {
    color: var(--text-muted);
    white-space: nowrap;
}

.fc .fc-list-day-cushion {
    background: var(--surface-container);
    color: var(--text-primary);
    font-weight: 700;
}

.fc td, .fc th {
    border-color: var(--border);
}

/* ============================================================
   FİLTRE ALANI
   ============================================================ */
.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--surface-low);
    border-bottom: 1px solid var(--border);
}

.filter-bar select,
.filter-bar input[type="date"],
.filter-bar input[type="text"] {
    height: 38px;
    padding: 0 12px;
    background: var(--surface-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition);
}

.filter-bar select:focus,
.filter-bar input:focus {
    border-color: var(--primary-mid);
}

/* ------------------------------------------------------------
   Proje filtre alanları (projeler.php) — sitenin geri kalanıyla
   aynı düz .filter-bar görünümü (ayrı "chip" kutuları / üst
   etiketler denenmişti, site diliyle uyuşmadığı için kaldırıldı).
   Müşteri + Durum aynı genişlikte ve yan yana; Başlangıç/Bitiş
   tarihleri de aralarındaki "–" ayracıyla tek bir grup gibi durur.
   ------------------------------------------------------------ */
.filter-field-pair {
    width: 170px;
    flex-shrink: 0;
}
.filter-date-range {
    display: flex;
    align-items: center;
    gap: 6px;
}
.filter-date-range input[type="date"] {
    width: 140px;
}
.filter-date-sep {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Arama kutusu — filtre barının ilk alanı. Diğer alanlarla aynı yükseklik
   ve kenarlıkta; yalnızca içinde bir büyüteç simgesi taşır.
   İkon .filter-search-icon SINIFIYLA hedeflenir; lucide <i> yerine <svg>
   koyduğunda kural ancak böyle geçerli kalır (bkz. projeler.php). */
.filter-search {
    position: relative;
    display: block;
    width: 240px;
    flex-shrink: 0;
}
.filter-search input[type="search"] {
    display: block;
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0 12px 0 34px;
    background: var(--surface-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    line-height: normal;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--transition);
    -webkit-appearance: none;
    appearance: none;
}
.filter-search input[type="search"]:focus {
    border-color: var(--primary-mid);
}
.filter-search input[type="search"]::-webkit-search-cancel-button,
.filter-search input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
.filter-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--text-muted);
    pointer-events: none;
}

@media (max-width: 768px) {
    .project-filter-bar {
        justify-content: center;
    }
    .project-filter-bar .filter-field-pair {
        width: calc(50% - 20px);
    }
    .filter-date-range input[type="date"] {
        width: 130px;
        font-size: 0.8125rem;
    }
    /* Mobilde arama kendi satırında tam genişlikte durur — en çok
       kullanılan alan olduğu için daraltılmaz. */
    .filter-search {
        width: 100%;
    }
}

/* ============================================================
   PROJE DETAY — SEKMELİ
   ============================================================ */
.detail-header {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detail-meta-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.detail-meta-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* ============================================================
   MALİYET / KAR TABLOSU (Gizli - sadece yönetici)
   ============================================================ */
.cost-summary {
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.cost-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.cost-item-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-bottom: 4px;
}

.cost-item-value {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.cost-item-value.profit { color: #34d399; }
.cost-item-value.loss   { color: #fca5a5; }

/* ============================================================
   DOSYA YÜKLEME
   ============================================================ */
.upload-zone {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--primary-mid);
    background: var(--primary-light);
}

.upload-zone-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-xs);
    opacity: 0.4;
}

.upload-zone-text {
    font-size: 0.9375rem;
    color: var(--text-muted);
}

.upload-zone-text strong {
    color: var(--primary-mid);
}

.file-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: var(--space-sm);
}

.file-card {
    background: var(--surface-low);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.file-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.file-card-info {
    padding: 8px 10px;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   YÜKLEME GÖSTERGESİ
   ============================================================ */
.spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   TOAST BİLDİRİMLER
   ============================================================ */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: var(--primary);
    color: #fff;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    font-size: 0.875rem;
    font-weight: 500;
    pointer-events: all;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 360px;
    animation: slideInRight 0.3s ease;
}

.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }
.toast.warning { background: var(--warning); }

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

/* ============================================================
   PDF ÖNİZLEME PANELİ
   ============================================================ */
.pdf-preview-panel {
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-md));
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.pdf-preview-header {
    padding: 14px 16px;
    background: var(--surface-low);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.pdf-preview-body {
    padding: var(--space-sm);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ============================================================
   LOGIN SAYFASI
   ============================================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    padding: var(--space-md);
}

.login-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-xl) var(--space-lg);
    width: 100%;
    max-width: 440px;
    text-align: center;
}

.login-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-lg);
}

.login-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.login-sub {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-align: left;
}

.login-error {
    background: var(--danger-bg);
    color: var(--danger);
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

/* ============================================================
   AYARLAR SAYFASI
   ============================================================ */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.settings-card {
    background: var(--surface-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    text-decoration: none;
    color: inherit;
}

.settings-card:hover {
    border-color: var(--primary-mid);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.settings-card-icon {
    width: 72px;
    height: 72px;
    background: var(--surface-container);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
    transition: background var(--transition), color var(--transition);
}

.settings-card:hover .settings-card-icon {
    background: var(--primary);
    color: #fff;
}

.settings-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.settings-card-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ============================================================
   FİNANS — ÖZET KARTLAR
   ============================================================ */
.finance-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

/* ============================================================
   BOŞ DURUM (Empty State)
   ============================================================ */
.empty-state {
    padding: var(--space-xl);
    text-align: center;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
    opacity: 0.3;
}

.empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.empty-state-desc {
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ============================================================
   YARDIMCI SINIFLAR
   ============================================================ */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.gap-xs         { gap: var(--space-xs); }
.gap-sm         { gap: var(--space-sm); }
.gap-md         { gap: var(--space-md); }
.flex-1         { flex: 1; }
.flex-wrap      { flex-wrap: wrap; }
.w-full         { width: 100%; }
.mt-xs          { margin-top: var(--space-xs); }
.mt-sm          { margin-top: var(--space-sm); }
.mt-md          { margin-top: var(--space-md); }
.mt-lg          { margin-top: var(--space-lg); }
.mb-xs          { margin-bottom: var(--space-xs); }
.mb-sm          { margin-bottom: var(--space-sm); }
.mb-md          { margin-bottom: var(--space-md); }
.mb-lg          { margin-bottom: var(--space-lg); }
.text-muted     { color: var(--text-muted); }
.text-sm        { font-size: 0.875rem; }
.text-xs        { font-size: 0.75rem; }
.font-bold      { font-weight: 700; }
.font-semibold  { font-weight: 600; }
.font-medium    { font-weight: 500; }
.text-right     { text-align: right; }
.text-center    { text-align: center; }
.hidden         { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px;
    }

    .sidebar {
        transform: translateX(-260px);
        width: 260px;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .topbar {
        left: 0;
        padding: 0 var(--space-sm);
    }

    .topbar-brand-icon {
        height: 66px;
        max-width: 210px;
    }

    .topbar-brand-icon img {
        max-height: 66px;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 8px;
        margin-left: auto;
    }

    .topbar-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(251,248,250,0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transform: none;
        border-top: 1px solid var(--border);
        gap: 0;
    }
    
    .topbar-nav.active {
        display: flex;
    }

    .topbar-nav .topbar-item {
        border-radius: 6px;
        margin-bottom: 4px;
        padding: 12px 18px;
    }
    
    .topbar-actions {
        display: none !important;
    }

    .mobile-logout-link {
        display: flex !important;
        color: var(--danger) !important;
        margin-top: 8px;
        border-top: 1px solid var(--border);
        border-radius: 0 !important;
        padding-top: 16px !important;
    }

    .mobile-card-table thead {
        display: none;
    }

    .mobile-card-table,
    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td {
        display: block;
        width: 100%;
    }

    /* Tablo kart görünümüne geçince, kartları ayırt etmek için sarmalayıcıya
       hafif bir zemin rengi veriyoruz; beyaz kartlar bu zemine karşı belirginleşir. */
    .table-wrapper:has(.mobile-card-table) {
        background: var(--surface-low) !important;
        padding: var(--space-sm);
        border-radius: var(--radius-lg) !important;
        border: 1px solid var(--border) !important;
    }

    .mobile-card-table tbody {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .mobile-card-table tr {
        margin-bottom: 0;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-lg);
        background: var(--surface-card);
        padding: 0.5rem;
        box-shadow: var(--shadow-sm);
    }
    
    .mobile-card-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid var(--border);
        flex-wrap: wrap; /* İçerik taşmasını önlemek için */
        gap: 8px;
    }
    
    .mobile-card-table td.section-label-header {
        display: block;
        text-align: center;
        background: var(--surface-low);
        font-weight: bold;
    }
    
    .mobile-card-table td.section-label-header::before {
        display: none;
    }

    .mobile-card-table td.item-material-cell {
        display: block;
        text-align: left;
    }

    .mobile-card-table td.item-material-cell::before {
        display: none;
    }
    
    .mobile-card-table td:last-child {
        border-bottom: none;
    }
    
    .mobile-card-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        text-align: left;
        flex-shrink: 0;
        margin-right: 1rem;
    }

    .main-content {
        margin-left: 0;
        padding: var(--space-sm);
    }

    .stat-grid,
    .form-grid,
    .form-grid-3,
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .col-span-2, .col-span-3 {
        grid-column: span 1;
    }

    .cost-summary-grid {
        grid-template-columns: 1fr;
    }

    /* Teklif formu: sağdaki canlı PDF önizlemesi mobilde gizlenmek yerine
       forma sonra (en altta) gösterilir, sticky konumlandırma kapatılır. */
    .quote-layout {
        grid-template-columns: 1fr !important;
    }

    .pdf-preview-panel {
        position: static !important;
        top: auto !important;
        margin-top: var(--space-md);
    }

    /* Canlı PDF önizlemesi: içeriği mobile göre yeniden dizmek yerine,
       gerçek A4 tasarımını olduğu gibi koruyup küçültülmüş (uzaktan bakış)
       şekilde gösteriyoruz — tıpkı bir belge küçük resmi gibi. */
    .pdf-preview-paper {
        zoom: 0.55;
    }

    #pdfPreviewBody {
        overflow-x: auto;
    }

    /* ---------- SAYFA BAŞLIKLARI (mobil) ----------
       Başlık ile aksiyon butonu yan yana durunca başlık dar bir sütuna
       sıkışıp 4-5 satıra bölünüyordu. Mobilde buton başlığın ALTINA alınır. */
    .page-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }
    .page-header > * {
        width: 100%;
    }
    .page-header > .btn,
    .page-header > div > .btn,
    .page-header > div > a.btn {
        justify-content: center;
    }
    .page-header .page-title {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    /* Cari sayfaları: avatar ile ad/ünvan bloğu üstten hizalanır */
    .cari-header-id {
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .cari-header-id .page-subtitle {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    /* ---------- AYARLAR SAYFASI (mobil) ---------- */

    /* Modal: 24px'lik overlay dolgusu dar ekranda çok yer yiyor */
    .modal-overlay { padding: 12px !important; }
    .modal-header  { padding: 16px 16px 0 !important; }
    .modal-body    { padding: 16px !important; }
    .modal-footer  { padding: 0 16px 16px !important; }
    .modal-footer .btn { flex: 1 1 auto; justify-content: center; }

    /* Bölüm navigasyonu (Müşteriler / Şablonlar / Stok / Ustalar / Markalar / Çöp) */
    .settings-nav {
        gap: 8px !important;
        padding-bottom: 12px !important;
        margin-bottom: 18px !important;
    }
    .settings-nav .btn {
        flex: 1 1 44%;
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
        justify-content: center;
        white-space: nowrap;
    }
    .settings-nav .btn i,
    .settings-nav .btn svg {
        width: 14px !important;
        height: 14px !important;
        margin-right: 4px !important;
    }

    /* Müşteri / usta / malzeme / şablon kart ızgaraları tek sütuna iner */
    .entity-grid {
        grid-template-columns: 1fr !important;
    }

    /* Kart içindeki sabit 120px görsel sütunu dar ekranda metni eziyor */
    .entity-card-media {
        width: 92px !important;
    }
    .entity-card-media img,
    .entity-card-media > div {
        height: 118px !important;
    }

    /* Kart alt aksiyon çubukları: butonlar sığmazsa alt satıra */
    .card-footer {
        flex-wrap: wrap;
        gap: 6px !important;
    }

    /* ------------------------------------------------------------
       USTALAR ve MALZEMELER: mobilde 1 yerine 2'li ızgara.
       .entity-grid'in genel kuralı yukarıda tek sütuna zorluyordu;
       .mobile-2col sınıfı bu ikisi için onu ezer (sınıf+sınıf, tekli
       sınıftan daha spesifik olduğu için sıralamadan bağımsız kazanır).
       ------------------------------------------------------------ */
    .entity-grid.mobile-2col {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Usta kartı: yarı genişlikte yan yana (fotoğraf + metin) sığmaz;
       fotoğraf üste alınıp dikey düzene geçilir. */
    .mobile-2col .worker-card > div:nth-child(2) {
        flex-direction: column !important;
    }
    .mobile-2col .worker-card .entity-card-media {
        width: 100% !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border);
    }
    .mobile-2col .worker-card .entity-card-media img,
    .mobile-2col .worker-card .entity-card-media > div {
        height: 84px !important;
        font-size: 1.5rem !important;
    }
    .mobile-2col .worker-card > div:nth-child(2) > div:last-child {
        padding: 10px !important;
        width: 100%;
    }
    .mobile-2col .worker-card .card-title {
        font-size: 0.875rem !important;
        white-space: normal !important;
    }
    .mobile-2col .worker-card .worker-status {
        font-size: 0.6875rem !important;
        padding: 5px 10px !important;
    }
    .mobile-2col .worker-card .worker-status-when {
        display: none;   /* dar kartta yer yok; tam bilgi zaten title'da (dokununca) */
    }

    /* Her iki kart türünde alt buton satırı: 3 buton yarı genişlikte
       yan yana sığmaz — küçültülüp ortalanır, gerekirse 2. satıra sarar. */
    .mobile-2col .card-footer {
        justify-content: center !important;
        padding: 8px !important;
    }
    .mobile-2col .card-footer .btn {
        flex: 1 1 auto;
        padding: 5px 8px !important;
        font-size: 0.6875rem !important;
        white-space: nowrap;
    }

    /* Malzeme kartı: küçük avatar + metin zaten kompakt, sadece
       boşluk/punto biraz daraltılır. */
    .mobile-2col .card-body {
        padding: 10px !important;
    }
    .mobile-2col .card-body > div {
        gap: 8px !important;
    }

    /* Çözüm ortakları: tek sütunda çok seyrek duruyor, ikili ızgara */
    .partners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .partners-grid .card { padding: 12px !important; }
    .partners-grid .btn-sm {
        padding: 5px 7px !important;
        font-size: 0.6875rem !important;
    }

    /* Çöp kutusu: üç kutu alt alta */
    .trash-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Şablon düzenleme modalı — 5 sütunlu malzeme satırı mobilde kullanılamaz.
       Başlık şeridi gizlenip satır 2 sütuna indirilir; alanların kendi
       placeholder metinleri etiket görevi görür. */
    .tpl-mat-head { display: none !important; }

    .template-mat-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface-card);
    }
    .template-mat-row .tpl-mat-field:first-child { grid-column: 1 / -1; }
    .template-mat-row .btn-icon {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    /* Alan etiketleri mobilde görünür olur — değer girildikten sonra
       placeholder kaybolduğu için kutunun ne olduğu belirsizleşiyordu. */
    .tpl-mat-field label {
        display: block;
        font-size: 0.6875rem;
        font-weight: 700;
        color: var(--text-muted);
        margin-bottom: 3px;
    }

    /* ---------- ŞİRKET / FİNANS SAYFASI (mobil) ---------- */

    /* Sekme düğmeleri masaüstü için büyük tasarlanmış; dar ekranda küçültülüp
       üçü de sığacak şekilde eşit paylaştırılır (satır içi stilleri ezer). */
    .finance-tabs {
        gap: 8px !important;
        margin-bottom: 20px !important;
    }
    .finance-tabs .tab-btn {
        flex: 1 1 auto;
        padding: 9px 10px !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
        text-align: center;
        white-space: nowrap;
    }
    .finance-tabs .tab-btn i,
    .finance-tabs .tab-btn svg {
        width: 14px !important;
        height: 14px !important;
        margin-right: 4px !important;
    }

    /* Sayfa başlığındaki aksiyon butonları tam genişlikte alt alta */
    .page-header .flex.gap-xs {
        width: 100%;
    }
    .page-header .flex.gap-xs > .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .finance-stat-grid,
    .finance-analiz-grid {
        grid-template-columns: 1fr !important;
    }

    /* Sabit yükseklikli kaydırma alanları mobilde iç içe scroll yaratıyor */
    .table-responsive {
        max-height: none !important;
    }

    /* ---------- ŞANTİYE TAKVİMİ (mobil) ---------- */

    /* Filtre çipleri: üçü de ekrana sığsın diye eşit paylaşımlı ve küçük punto */
    .cal-filter-group {
        display: flex !important;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .cal-filter-group .cal-filter-btn {
        flex: 1 1 auto;
        white-space: nowrap;
        padding: 7px 6px !important;
        font-size: 0.6875rem !important;
        text-align: center;
    }

    /* "Yeni İş Planla" butonu satır başına geçtiğinde soldaki boşluk anlamsız */
    .page-header .btn-primary { margin-left: 0 !important; }

    .calendar-wrapper {
        padding: var(--space-sm);
    }

    /* FullCalendar araç çubuğu: başlık ve butonlar üst üste binmesin */
    .fc .fc-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .fc .fc-toolbar-title {
        font-size: 1rem !important;
        text-align: center;
    }
    .fc .fc-button {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
    .fc .fc-toolbar.fc-footer-toolbar {
        margin-top: 10px;
    }

    /* Ay görünümü hücreleri dar ekranda okunabilir kalsın */
    .fc .fc-daygrid-day-number { font-size: 0.8125rem; }
    .fc .fc-col-header-cell-cushion { font-size: 0.6875rem; }
    .fc .fc-daygrid-event { font-size: 0.6875rem; padding: 1px 3px; }

    /* Liste görünümü: mobilde asıl kullanılan görünüm.
       Saat sütunu ("08:00 - 00:00", "Tüm gün") gizlenir; sadece proje adı kalır. */
    .fc .fc-list-event-title { font-size: 0.9375rem; }
    .fc .fc-list-event-time { display: none !important; }

    /* Kart başlıkları: sağdaki rozet/buton grubu sola sıkıştırmasın, alt satıra düşsün */
    .card-header {
        flex-wrap: wrap !important;
        row-gap: 10px !important;
        padding: 14px 16px !important;
    }

    .card-header > div {
        flex-wrap: wrap;
    }

    /* Teklif formu alt buton çubuğu: İptal + Onaya Gönder üstte, indirme
       butonları altta, ikişerli sıralar halinde ve daha küçük boyutta */
    .quote-actions-bar {
        justify-content: center !important;
    }

    .quote-actions-secondary {
        display: contents !important;
    }

    .quote-actions-bar .btn {
        flex: 1 1 46%;
        justify-content: center;
        padding: 8px 10px !important;
        font-size: 0.8125rem !important;
        white-space: nowrap;
    }

    .btn-cancel        { order: 1; }
    .btn-submit         { order: 2; }
    .btn-download-internal { order: 3; }
    .btn-download-quote    { order: 4; }

    .detail-meta { flex-wrap: wrap; }

    .quote-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .pdf-preview-paper {
        zoom: 0.46;
    }
}

/* ============================================================
   TEKLİF KARTLARI (quote-card)
   ============================================================ */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    /* Kartlar aynı satırda EŞİT BOYDA durur (stretch). Adres bir kartta
       iki satıra düştüğünde yalnızca o kart uzayıp diğerlerinden farklı
       görünüyordu. Boşluk artık aksiyon satırının üstünde toplanır;
       butonlar tüm kartlarda aynı hizada kalır. */
    align-items: stretch;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.quote-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: box-shadow var(--transition), border-color var(--transition);
}

.quote-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--border-strong);
}

.quote-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.quote-head-main  { min-width: 0; }          /* uzun başlık taşmasın */
.quote-head-price { text-align: right; flex-shrink: 0; }



.quote-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

/* İş tipi — başlığın hemen altında, bir kademe sönük */
.quote-subtitle {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 3px;
}

/* --- Müşteri bloğu ------------------------------------------------ */
.quote-customer {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--border);
}
.quote-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.quote-avatar-initial {
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
}
.quote-customer-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quote-customer-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Künye satırları (tarih · adres · kapsam) --------------------- */
.quote-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    /* Girinti YOK: satırlar kartın sol kenarına, avatarla aynı hizada
       başlar. Önceden müşteri adının hizasına 41px girintileniyordu ama
       bu, satır başında gereksiz bir boşluk gibi görünüyordu. */
    margin-top: 10px;
}

/* Uzun adres kartı sonsuza kadar uzatmasın: en fazla 2 satır, gerisi
   "..." ile kesilir. Tam adres, satırın title'ında (üzerine gelince). */
.quote-meta-row span:not(.is-empty),
.quote-meta-row span.is-empty {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}
.quote-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
/* lucide.createIcons() <i data-lucide> etiketini <svg> ile DEĞİŞTİRİR.
   Bu yüzden yalnızca `i` hedeflemek işe yaramaz; ikon varsayılan 24px
   boyunda kalıp satırı şişiriyordu. Her iki seçici de gerekli. */
.quote-meta-row i,
.quote-meta-row svg {
    width: 15px;
    height: 15px;
    min-width: 15px;
    flex-shrink: 0;
    margin-top: 1px;
    stroke-width: 1.8;
    color: var(--metal-light);
}
/* Girilmemiş bilgi: yer tutar ama dikkat çekmez */
.quote-meta-row .is-empty {
    color: var(--metal-light);
    font-style: italic;
}

/* --- Fiyat -------------------------------------------------------- */
.quote-price {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    white-space: nowrap;
}
.quote-price-note {
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
    margin-top: 1px;
}

/* --- Aksiyon satırı ---------------------------------------------
   Eskiden "Düzenle" bağlantısı içeriği kadar, form ise kalan tüm
   alanı kaplıyordu; ayrıca .btn-icon (9px dolgu → 34px) diğer
   butonlardan (≈38px) alçaktı. İkisi birlikte satırı kaydırıyordu. */
/* Üç buton alanı eşit paylaşır: Düzenle · Onayla · İptal */
.quote-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    /* auto: kart uzadığında artan boşluğu yukarı iter, butonlar dipte kalır */
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
/* Künye bloğu ile aksiyon satırı arasında en az bu kadar boşluk kalsın */
.quote-meta { margin-bottom: 16px; }

.quote-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 8px;
    font-size: 0.875rem;
}

/* İptal, geri alınamayan bir işlem olmadığı için nötr durur;
   yalnızca üzerine gelince uyarı rengine döner. */
.quote-actions .quote-cancel {
    color: var(--text-muted);
}
.quote-actions .quote-cancel:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-bg);
}

/* ============================================================
   FİNANS ÖZETİ
   ============================================================ */
.finance-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

@media (max-width: 1024px) {
    .finance-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .finance-summary {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   TAKVİM WRAPPER
   ============================================================ */
.calendar-wrapper {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.fc {
    font-family: var(--font-base);
}



.fc .fc-toolbar-title {
    font-size: 1.125rem;
    font-weight: 700;
}

.fc .fc-daygrid-event {
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.8125rem;
    cursor: pointer;
}

.fc .fc-event-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   MALİYET ÖZETİ (Proje Detay)
   ============================================================ */
.cost-summary {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.cost-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.cost-item-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}

.cost-item-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.cost-item-value.profit {
    color: var(--success);
}

.cost-item-value.loss {
    color: var(--danger);
}

/* ============================================================
   PROJE DETAY BAŞLIK
   ============================================================ */
.detail-header {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.detail-meta {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-meta-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-meta-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* ============================================================
   ETKİNLİK LİSTESİ (Dashboard)
   ============================================================ */
.event-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.event-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 16px var(--space-md);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
    color: var(--text-primary);
}

.event-item:last-child {
    border-bottom: none;
}

.event-item:hover {
    background: var(--surface-low);
}

.event-date-badge {
    width: 48px;
    text-align: center;
    flex-shrink: 0;
    background: var(--surface-container);
    border-radius: var(--radius);
    padding: 6px 4px;
}

.event-date-day {
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1;
}

.event-date-month {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.event-info {
    flex: 1;
    min-width: 0;
}

.event-type-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 9999px;
    margin-bottom: 3px;
    display: inline-block;
}

.event-type-santiye {
    background: var(--primary-light);
    color: var(--primary);
}

.event-title {
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-time {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.event-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================================
   TEKLİF FORM — PDF Önizleme Paneli
   ============================================================ */
.quote-layout > * {
    min-width: 0;
}

.pdf-preview-panel {
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-sm));
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.pdf-preview-header {
    padding: 12px var(--space-md);
    background: var(--surface-container);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.pdf-preview-body {
    padding: var(--space-sm);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ============================================================
   AYARLAR SAYFASI KARTLARI
   ============================================================ */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

@media (max-width: 640px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

.settings-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--surface-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition);
    cursor: pointer;
}

.settings-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(9, 20, 38, 0.06);
    transform: translateY(-2px);
}

.settings-card-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    background: var(--surface-container);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    transition: background var(--transition);
}

.settings-card:hover .settings-card-icon {
    background: var(--primary-light);
}

.settings-card-title {
    font-size: 1.125rem;
    font-weight: 700;
}

.settings-card-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ============================================================
   AYARLAR — Şablon Malzeme Satırı
   ============================================================ */
.template-mat-row input,
.template-mat-row select {
    height: 42px;
}

/* ============================================================
   FİLTRE ÇUBUĞU
   ============================================================ */
.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-low);
    border: 1px solid var(--border);
    border-bottom: none;
}

.filter-bar select,
.filter-bar input[type="date"] {
    height: 38px;
    font-size: 0.875rem;
    padding: 0 var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
}

/* ============================================================
   BADGE — Genişletilmiş Varianslar
   ============================================================ */
.badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.badge-dot::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-active {
    color: var(--success);
    background: var(--success-bg);
}

.badge-completed {
    color: var(--text-secondary);
    background: var(--surface-high);
}

.badge-cancelled {
    color: var(--danger);
    background: var(--danger-bg);
}

.badge-draft {
    color: var(--warning);
    background: var(--warning-bg);
}

/* ============================================================
   TOAST ANİMASYON — EK
   ============================================================ */
@keyframes slideOutRight {
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* ============================================================
   ROW AKSİYONLAR
   ============================================================ */
.row-actions {
    display: flex;
    gap: 6px;
    opacity: 1;
}

/* ============================================================
   YARDIMCI — GENEL
   ============================================================ */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-direction-col { flex-direction: column; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-muted { color: var(--text-muted); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.w-full { width: 100%; }


/* ============================================================
   SAYFALAMA
   ============================================================ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-container-low);
}

.pagination-info {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
}

.page-link:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.page-link.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    cursor: default;
}

.page-gap {
    padding: 0 2px;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .pagination {
        justify-content: center;
        padding: 12px;
    }
    .pagination-info { width: 100%; text-align: center; }
}

/* ============================================================
   TOPLU İŞLEM (Çöp Kutusu)
   ============================================================ */
.bulk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--surface-container);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.bulk-all-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.bulk-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bulk-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .bulk-toolbar { justify-content: center; }
    .bulk-actions { width: 100%; }
    .bulk-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   ÖZEL AÇILIR LİSTE (Autocomplete)
   ============================================================ */
.ac-wrap { position: relative; }

.ac-panel {
    position: fixed;
    z-index: 3000;
    max-height: 300px;
    overflow-y: auto;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: none;
}

.ac-panel.open { display: block; }

.ac-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}

.ac-item:last-child { border-bottom: none; }
.ac-item:hover,
.ac-item.active { background: var(--surface-low); }

.ac-item-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ac-item-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ac-empty {
    padding: 14px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ============================================================
   ÖZEL ONAY PENCERESİ
   ============================================================ */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 160ms ease;
}

.confirm-overlay.open { opacity: 1; }

.confirm-box {
    width: 100%;
    max-width: 420px;
    padding: 26px 24px 20px;
    text-align: center;
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transform: translateY(10px) scale(0.97);
    transition: transform 160ms ease;
}

.confirm-overlay.open .confirm-box { transform: translateY(0) scale(1); }

.confirm-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--info-bg);
    color: var(--info);
    font-size: 2rem;
    font-weight: 800;
}

.confirm-icon.danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.confirm-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.confirm-msg {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.confirm-actions {
    display: flex;
    gap: 10px;
}

.confirm-actions .btn {
    flex: 1;
    justify-content: center;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border: 1px solid var(--danger);
}

.btn-danger:hover { opacity: 0.9; }

/* ============================================================
   KURUMSAL RAFİNE KATMANI
   Pahalı görünen arayüzlerle sıradan olanları ayıran şey renk
   değil, bu ölçekteki tutarlılıktır.
   ============================================================ */

/* --- 1. RAKAM HİZALAMASI ---------------------------------------
   Orantılı rakamlarda "1" diğerlerinden dar olduğu için alt alta
   gelen tutarlar kayar. Tabular rakam hepsini eşit genişliğe
   getirir; finansal tablolar cetvelle çizilmiş gibi durur. */
.stat-value, .stat-val, .stat-trend,
.cash-table td, .report-table td, .table td,
.cost-item-value, .money, .amount, .price {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Büyük tutarlarda harf aralığını sıkmak rakamı "oyulmuş" gösterir */
.stat-value, .stat-val {
    letter-spacing: -0.025em;
    font-weight: 700;
}

/* --- 2. BAŞLIK OPTİK DÜZELTMESİ --------------------------------
   Büyük punto başlıklarda varsayılan harf aralığı fazla açıktır. */
.page-title, .card-title, .modal-title, h1, h2, h3 {
    letter-spacing: -0.018em;
}

/* --- 3. MİKRO ETİKETLER ----------------------------------------
   Küçük, aralıklı, büyük harf üst etiket kurumsal panellerin
   imzasıdır. Metalik gri ile birlikte kullanılır. */
.stat-label, .list-divider, .section-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* --- 4. ÇİZGİLER GÖLGEDEN ÖNCE GELİR ---------------------------
   Kartlar zaten 1px metalik çizgiyle ayrıldığı için ek gölgeye
   ihtiyaç yok. Gölge yalnızca gerçekten "yüzen" öğelerde
   (modal, açılır liste) kullanılır. */
.card, .stat-card, .panel-card {
    box-shadow: none;
}
.card:hover, .stat-card:hover, .panel-card:hover {
    box-shadow: var(--shadow-sm);
}
.stat-card:hover { transform: none; }

/* --- 5. TABLO BAŞLIKLARI ---------------------------------------- */
.table thead th, .report-table th {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-low);
}

/* Para sütunları sağa yaslanır — finansal tabloların değişmez kuralı */
.table td.num, .table th.num,
.report-table td.num, .report-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- 6. ODAK HALKASI --------------------------------------------
   Tarayıcı varsayılanı yerine marka lacivertiyle. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --- 7. SEÇİM RENGİ ---------------------------------------------- */
::selection {
    background: var(--primary);
    color: #fff;
}

/* ============================================================
   RAY SİSTEMİ — kutu sınırlarını renkle değil, konumla anlatır
   ------------------------------------------------------------
   Neden ray?  Başlık şeridini griye boyamak, o griyi sayfa
   zeminiyle karıştırma riski doğuruyordu. Ray ise zeminden
   bağımsızdır: nerede olursa olsun "burası bir kutunun kenarı"
   der. Kurumsal belgelerdeki antet çizgisiyle aynı mantık.

   İki tonlu ray = hiyerarşi:
     ÜST + LACİVERT ray  →  ana bölüm / kart      (en güçlü)
     SOL + METALİK ray   →  iç grup               (daha yumuşak)
     KESİKLİ metalik     →  şirket içi / gizli bilgi
   ============================================================ */

/* Ray, border-top OLARAK verilince yuvarlatılmış köşede 3px lacivertten
   1px griye geçiş yaparken çirkin bir yay çiziyor ("gülümseyen" kenar).
   Bunun yerine kutunun üstüne konumlanmış düz bir şerit kullanılır;
   overflow:hidden onu köşelere temiz şekilde kırpar. */
.card,
.panel-card,
.pdf-preview-panel,
.quote-card {
    position: relative;
    overflow: hidden;
}

.card::before,
.panel-card::before,
.pdf-preview-panel::before,
.quote-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    z-index: 1;
    pointer-events: none;
}

/* Başlık şeridi artık gövdeyle AYNI beyaz.
   Ayrım rayla ve tek bir saç teli çizgiyle kurulur — böylece
   başlık zemini sayfa zeminiyle asla karışmaz. */
.card-header,
.panel-head,
.pdf-preview-header {
    background: var(--surface-card) !important;
    border-bottom: 1px solid var(--border);
}

/* Başlık metni, ray ile aynı hizada okunsun */
.card-title,
.panel-head-title {
    color: var(--text-primary);
    font-weight: 700;
}

/* Başlıktaki ikon kutusu: beyaz zeminde kaybolmasın */
.panel-head-icon {
    background: var(--surface-low);
    border-color: var(--border);
    color: var(--primary);
}

/* --- İç grup rayı — metalik gri, daha yumuşak kademe --------- */
.group-rail {
    border-left: 3px solid var(--metal);
}

/* Ray uygulanan kutularda üst köşeler rayı kesmesin */
.card, .panel-card, .pdf-preview-panel {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

/* KPI kutucuklarında ray YOK — başlıkları olmadığı için
   ray sadece gürültü olurdu. */
.stat-card {
    border-top: 1px solid var(--border);
}

/* ============================================================
   CANLI PDF ÖNİZLEMESİ — arayüz tablo stillerinden MUAF
   ------------------------------------------------------------
   Önizleme bir BELGE'dir, bir arayüz tablosu değil. Ancak
   stil dosyasındaki genel eleman kuralları ona da uygulanıyordu:

       thead th { font-size: 0.8125rem;  padding: 14px 20px;
                  white-space: nowrap;   background: ... }
       tbody td { font-size: 0.9375rem;  padding: 18px 20px; }

   Bunlar ELEMAN üzerine yazılmış doğrudan kurallar olduğu için
   tablodaki `font-size:7.5px` MİRASINI eziyordu: başlıklar 13px,
   hücreler 15px basılıyor, nowrap yüzünden de sarmadan taşıp
   yan sütunun üstüne biniyordu. Sabit sütun genişliğine geçince
   bu çakışma gözle görülür hale geldi.

   Aşağıdaki kapsam, önizleme kağıdının içindeki tabloları bu
   kuralların tamamından ayırır; ölçüler yalnızca satır içi
   stillerden (yani gerçek PDF ile aynı değerlerden) gelir.
   ============================================================ */
.pdf-preview-paper table th,
.pdf-preview-paper table td {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    line-height: 1.35;
    color: inherit;
    background: transparent;
    white-space: normal;
    vertical-align: top;
    padding: 0;
    border-bottom: none;
}

.pdf-preview-paper tbody tr,
.pdf-preview-paper tbody tr:hover,
.pdf-preview-paper tr:hover {
    background: transparent;
    border-bottom: none;
    cursor: default;
}

/* Uzun kelimeler sabit genişlikli sütundan taşmasın */
.pdf-preview-paper table td,
.pdf-preview-paper table th {
    overflow-wrap: anywhere;
}

/* ============================================================
   USTA KARTLARI — MÜSAİTLİK DURUMU
   Kartın en üstünde durum şeridi: yeşil = müsait, kırmızı = meşgul.
   Renk yine yalnızca DURUM bildirir; kartın geri kalanı nötrdür.
   ============================================================ */
.worker-card {
    position: relative;
    overflow: hidden;
}

.worker-status {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--border);
}
.worker-status.is-free {
    background: var(--success-bg);
    color: var(--success);
}
.worker-status.is-busy {
    background: var(--danger-bg);
    color: var(--danger);
}

.worker-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* "3 gün sonra müsait" — normalde gizli, karta gelince belirir.
   Böylece sakin haldeyken şerit tek kelimeyle okunur kalır. */
.worker-status-when {
    margin-left: auto;
    font-weight: 600;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity var(--transition), transform var(--transition);
    white-space: nowrap;
}
.worker-card:hover .worker-status-when {
    opacity: 0.85;
    transform: translateX(0);
}

/* Dokunmatik cihazda hover yok — bilgi hep görünür olsun */
@media (hover: none) {
    .worker-status-when { opacity: 0.85; transform: none; }
}

/* ============================================================
   KÂRLILIK UYARISI (proje detayı)
   Renk yine yalnızca DURUM bildirir: zarar kırmızı, düşük marj
   turuncu. Kâr normalse hiçbir kutu basılmaz.
   ============================================================ */
.profit-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid transparent;
}
.profit-alert i,
.profit-alert svg {
    width: 17px;
    height: 17px;
    min-width: 17px;
    margin-top: 1px;
    flex-shrink: 0;
}
.profit-alert-title {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.35;
}
.profit-alert-text {
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0.85;
    margin-top: 2px;
}
.profit-alert.is-zarar {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}
.profit-alert.is-dusuk {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--warning);
}

/* ============================================================
   PROJE NOTLARI (proje detayı → Notlar & Dosyalar)
   ============================================================ */
.notes-files-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
@media (max-width: 900px) {
    .notes-files-grid { grid-template-columns: 1fr; }
}

.note-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--metal);   /* iç grup rayı — künye dilimiz */
    border-radius: var(--radius);
    padding: 12px 14px;
}

/* Silme yalnızca üzerine gelince kırmızıya döner */
.note-del {
    background: none;
    border: none;
    padding: 3px 5px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    transition: color var(--transition), background var(--transition);
}
.note-del:hover {
    color: var(--danger);
    background: var(--danger-bg);
}

/* ============================================================
   AYARLAR SAYFASI — ARAMA KUTUSU
   Başlık satırındaki "+ Yeni ... Ekle" butonunun yanında (sağında)
   durur. Yazdıkça filtreleme davranışı assets/js/app.js'te.
   ============================================================ */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-search { margin: 0; }

.settings-search-field {
    position: relative;
    width: 260px;
    max-width: 100%;
}

.settings-search-field .form-control {
    padding-left: 36px;
    height: 42px;
}

.settings-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

@media (max-width: 640px) {
    /* Dar ekranda başlık satırı alt alta dizilir; arama kutusu kendi
       satırında, sayfaya YATAYDA ORTALANMIŞ ve tam genişlikte durur. */
    .page-header-actions {
        width: 100%;
        justify-content: center;
    }
    .settings-search {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .settings-search-field {
        width: 100%;
    }
}

/* Dosya galerisindeki (Dosyalar & Fotoğraflar) her fotoğrafın kendi
   indirme butonu — silme butonunun karşı köşesinde durur. */
.file-download-btn {
    position: absolute;
    bottom: 4px;
    left: 4px;
    z-index: 2;
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    text-decoration: none;
}

/* WhatsApp hatırlatma butonu: masaüstünde tam metin ("WhatsApp'tan
   Hatırlat"), mobilde CSV butonunun yanına sığması için kısaltılmış
   metin ("Hatırlat") gösterilir — ikon tek başına ne olduğu belli
   olmadığı için tamamen kaldırılmaz, sadece kısaltılır. */
.btn-wa .btn-wa-text-short { display: none; }
@media (max-width: 640px) {
    .btn-wa {
        padding: 8px 12px !important;
    }
    .btn-wa .btn-wa-text-full { display: none; }
    .btn-wa .btn-wa-text-short { display: inline; }
}

/* ------------------------------------------------------------
   Özel dosya seçme (file input) bileşeni — tarayıcı varsayılan
   görünümü (gri "Dosyaları Seç" kutusu) yerine tutarlı bir tasarım.
   assets/js/app.js içindeki enhanceFileInputs() ile her
   input[type=file] otomatik olarak bu yapıya sarılır.
   ------------------------------------------------------------ */
.file-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 160px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius, 8px);
    padding: 10px 14px;
    background: var(--surface-low);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.file-input:hover {
    border-color: var(--primary);
    background: var(--surface);
}
.file-input input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.file-input-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.file-input-text {
    min-width: 0;
    line-height: 1.35;
}
.file-input-label {
    display: block;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-primary);
}
.file-input-name {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   MOBİL DÜZELTMELERİ — 5 Ağustos 2026
   Gerçek cihazda görülen sıkışma sorunlarının çözümleri.
   ============================================================ */

@media (max-width: 768px) {

    /* --- 1) Teklif ekranı: malzeme çekmecesi başlığı ---------
       "ŞİRKET İÇİ" rozeti + uzun açıklama, başlığı üç satıra
       bölüp "Malzeme Ekle" butonunu ezik bir sütuna sıkıştırıyordu.
       Dar ekranda rozet ve uzun metin gizlenir, kısa metin görünür. */
    .mat-drawer-badge,
    .mat-drawer-note        { display: none !important; }
    .mat-drawer-note-kisa   { display: inline !important; }
    .mat-drawer-head        { gap: 8px; }
    .mat-drawer-head .btn   { flex-shrink: 0; white-space: nowrap; }

    /* --- 2) Excel'den Aktar sayfası --------------------------
       İki kart yan yana duruyordu; dar ekranda alt alta iner.
       Tablolar kendi içinde yatay kayar, sayfa gövdesi kaymaz. */
    .import-grid            { grid-template-columns: 1fr !important; }
    .import-card            { padding: 16px !important; }
    .import-tablo-sar       { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .import-tablo-sar table { min-width: 420px; }
    .import-form .btn       { width: 100%; justify-content: center; }
    .import-form .btn + .btn { margin-top: 8px; }
    .import-aksiyon         { flex-direction: column; align-items: stretch !important; }
}

/* Not: Ustalar/Taşeronlar/Ekipler ızgarasının mobil kuralları
   ayarlar.php içindeki <style> bloğunda tutulur — diğer kırılım
   noktaları (1600px, 1100px) da orada. Burada da tanımlanınca iki
   kaynak çakışıyor ve sayfa içi blok sonradan geldiği için kazanıyordu;
   kurallar tek yerde toplandı. */
}