/* ============================================
   Şevval Emlak — Components
   Tekrar kullanılan UI bileşenleri.
   Tüm class'lar sv- prefix'i ile başlar.
   ============================================ */

/* ── Container ── */
.sv-container {
    width: 100%;
    max-width: var(--sv-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sv-space);
    padding-right: var(--sv-space);
}

.sv-container-sm { max-width: 800px; }
.sv-container-lg { max-width: 1400px; }
.sv-container-fluid { max-width: 100%; }

/* ── Grid ── */
.sv-grid {
    display: grid;
    gap: var(--sv-space-lg);
}

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

/* Auto-fit grid: min 280px kartlar, otomatik sığdır */
.sv-grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 992px) {
    .sv-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .sv-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .sv-grid-2 { grid-template-columns: 1fr; }
    .sv-grid-3 { grid-template-columns: 1fr; }
    .sv-grid-4 { grid-template-columns: 1fr; }
}

/* ── Flex Yardımcıları ── */
.sv-flex       { display: flex; }
.sv-flex-col   { display: flex; flex-direction: column; }
.sv-flex-wrap  { flex-wrap: wrap; }
.sv-flex-center { display: flex; align-items: center; justify-content: center; }
.sv-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sv-gap-sm     { gap: var(--sv-space-sm); }
.sv-gap        { gap: var(--sv-space); }
.sv-gap-lg     { gap: var(--sv-space-lg); }

/* ── Card ── */
.sv-card {
    background: var(--sv-bg);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-sm);
    border: var(--sv-border-light);
    overflow: hidden;
    transition: box-shadow var(--sv-ease), transform var(--sv-ease);
}

.sv-card:hover {
    box-shadow: var(--sv-shadow-md);
}

.sv-card-body {
    padding: var(--sv-space-lg);
}

.sv-card-header {
    padding: var(--sv-space) var(--sv-space-lg);
    border-bottom: var(--sv-border-light);
    font-weight: var(--sv-weight-semi);
}

.sv-card-footer {
    padding: var(--sv-space) var(--sv-space-lg);
    border-top: var(--sv-border-light);
    background: var(--sv-bg-light);
}

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

/* Card — Yükseltilmiş varyant */
.sv-card-elevated {
    box-shadow: var(--sv-shadow-md);
}
.sv-card-elevated:hover {
    box-shadow: var(--sv-shadow-lg);
    transform: translateY(-2px);
}

/* Card — Mavi arka plan */
.sv-card-blue {
    background: var(--sv-bg-blue);
    color: var(--sv-text-white);
    border: none;
}

/* ── Button ── */
.sv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sv-space-sm);
    padding: 10px 24px;
    font-family: var(--sv-font);
    font-size: var(--sv-text-sm);
    font-weight: var(--sv-weight-semi);
    line-height: 1.4;
    border: 2px solid transparent;
    border-radius: var(--sv-radius-sm);
    cursor: pointer;
    transition: all var(--sv-ease);
    text-decoration: none;
    white-space: nowrap;
}

.sv-btn:focus-visible {
    outline: 2px solid var(--sv-primary);
    outline-offset: 2px;
}

/* Primary */
.sv-btn-primary {
    background: var(--sv-primary);
    color: var(--sv-text-white);
}
.sv-btn-primary:hover {
    background: var(--sv-primary-dark);
    color: var(--sv-text-white);
}

/* Success (WhatsApp-yeşil) */
.sv-btn-success {
    background: var(--sv-success);
    color: var(--sv-text-white);
}
.sv-btn-success:hover {
    background: var(--sv-success-dark);
    color: var(--sv-text-white);
}

/* Danger */
.sv-btn-danger {
    background: var(--sv-danger);
    color: var(--sv-text-white);
}
.sv-btn-danger:hover {
    background: #c0392b;
    color: var(--sv-text-white);
}

/* Outline */
.sv-btn-outline {
    background: transparent;
    border-color: var(--sv-primary);
    color: var(--sv-primary);
}
.sv-btn-outline:hover {
    background: var(--sv-primary);
    color: var(--sv-text-white);
}

/* Ghost */
.sv-btn-ghost {
    background: transparent;
    color: var(--sv-primary);
}
.sv-btn-ghost:hover {
    background: var(--sv-bg-gray);
}

/* Boyutlar */
.sv-btn-sm {
    padding: 6px 16px;
    font-size: var(--sv-text-xs);
}
.sv-btn-lg {
    padding: 14px 32px;
    font-size: var(--sv-text-base);
}
.sv-btn-block {
    width: 100%;
}

/* ── Badge ── */
.sv-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: var(--sv-text-xs);
    font-weight: var(--sv-weight-semi);
    border-radius: var(--sv-radius-full);
    line-height: 1.4;
}

.sv-badge-primary {
    background: rgba(0, 120, 215, 0.12);
    color: var(--sv-primary);
}
.sv-badge-success {
    background: rgba(37, 211, 102, 0.12);
    color: var(--sv-success-dark);
}
.sv-badge-danger {
    background: rgba(231, 76, 60, 0.12);
    color: var(--sv-danger);
}
.sv-badge-warning {
    background: rgba(243, 156, 18, 0.12);
    color: #d68910;
}

/* ── Form Elemanları ── */
.sv-input,
.sv-select,
.sv-textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--sv-font);
    font-size: var(--sv-text-base);
    color: var(--sv-text);
    background: var(--sv-bg);
    border: var(--sv-border);
    border-radius: var(--sv-radius-sm);
    transition: border-color var(--sv-ease-fast), box-shadow var(--sv-ease-fast);
    outline: none;
}

.sv-input:focus,
.sv-select:focus,
.sv-textarea:focus {
    border-color: var(--sv-primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 215, 0.15);
}

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

.sv-textarea {
    min-height: 120px;
    resize: vertical;
}

.sv-label {
    display: block;
    font-size: var(--sv-text-sm);
    font-weight: var(--sv-weight-medium);
    color: var(--sv-text);
    margin-bottom: var(--sv-space-xs);
}

.sv-form-group {
    margin-bottom: var(--sv-space);
}

/* ── Section Title (Bölüm Başlığı) ── */
.sv-section-title {
    font-family: var(--sv-font-heading);
    font-size: var(--sv-text-3xl);
    font-weight: var(--sv-weight-bold);
    color: var(--sv-text);
    text-align: center;
    margin-bottom: var(--sv-space-xl);
    position: relative;
    padding-bottom: var(--sv-space);
}

.sv-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--sv-primary-bg);
    border-radius: 2px;
}

.sv-section-title-white {
    color: var(--sv-text-white);
}
.sv-section-title-white::after {
    background: rgba(255,255,255,0.5);
}

.sv-section-title-left {
    text-align: left;
}
.sv-section-title-left::after {
    left: 0;
    transform: none;
}

/* ── Divider ── */
.sv-divider {
    border: none;
    border-top: var(--sv-border-light);
    margin: var(--sv-space-lg) 0;
}

/* ── Avatar ── */
.sv-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--sv-radius-full);
    object-fit: cover;
    border: 2px solid var(--sv-bg-gray);
}

.sv-avatar-sm { width: 32px; height: 32px; }
.sv-avatar-lg { width: 64px; height: 64px; }
.sv-avatar-xl { width: 96px; height: 96px; }

/* ── Spacing Utilities ── */
.sv-mt-0  { margin-top: 0; }
.sv-mt-sm { margin-top: var(--sv-space-sm); }
.sv-mt    { margin-top: var(--sv-space); }
.sv-mt-lg { margin-top: var(--sv-space-lg); }
.sv-mt-xl { margin-top: var(--sv-space-xl); }

.sv-mb-0  { margin-bottom: 0; }
.sv-mb-sm { margin-bottom: var(--sv-space-sm); }
.sv-mb    { margin-bottom: var(--sv-space); }
.sv-mb-lg { margin-bottom: var(--sv-space-lg); }
.sv-mb-xl { margin-bottom: var(--sv-space-xl); }

.sv-p-0  { padding: 0; }
.sv-p-sm { padding: var(--sv-space-sm); }
.sv-p    { padding: var(--sv-space); }
.sv-p-lg { padding: var(--sv-space-lg); }
.sv-p-xl { padding: var(--sv-space-xl); }

/* ── Gizle/Göster ── */
.sv-hidden { display: none; }

@media (max-width: 640px) {
    .sv-hide-mobile { display: none; }
}
@media (min-width: 641px) and (max-width: 992px) {
    .sv-hide-tablet { display: none; }
}
@media (min-width: 993px) {
    .sv-hide-desktop { display: none; }
}