/**
 * Hanisin Design System — Apple iOS kalitesinde Light Premium
 */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #f2f2f7;
    --surface: #ffffff;
    --surface-2: #f9f9fb;
    --fill-secondary: #e5e5ea;
    --separator: rgba(60, 60, 67, 0.12);
    --border: rgba(60, 60, 67, 0.11);
    --text: #1d1d1f;
    --text-secondary: #3a3a3c;
    --text-muted: #6e6e73;
    --text-tertiary: #8a8a8f;
    --primary: #c9a227;
    --primary-hover: #b8922a;
    --primary-soft: rgba(201, 162, 39, 0.11);
    --primary-glow: rgba(201, 162, 39, 0.2);
    --primary-text: #3d2e00;
    --accent-light: #dbb84a;
    --accent-deep: #9a7718;
    --gold-50: #faf6eb;
    --gold-700: #7a6118;
    --musician-accent: #bf5af2;
    --musician-soft: rgba(191, 90, 242, 0.1);
    --venue-accent: #ff9f0a;
    --venue-soft: rgba(255, 159, 10, 0.1);
    --success: #34c759;
    --success-soft: rgba(52, 199, 89, 0.12);
    --error: #ff3b30;
    --error-soft: rgba(255, 59, 48, 0.1);
    /* Durum rozetleri — tema-duyarlı (light varsayılan) */
    --badge-warn-text: #7a6118;
    --badge-warn-bg: rgba(234, 179, 8, 0.14);
    --badge-success-text: #15803d;
    --badge-success-bg: rgba(34, 197, 94, 0.12);
    --badge-danger-text: #b91c1c;
    --badge-danger-bg: rgba(239, 68, 68, 0.1);
    --radius-sm: 10px;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.05);
    --glass: rgba(255, 255, 255, 0.78);
    --glass-heavy: rgba(255, 255, 255, 0.92);
    --glass-blur: 20px;
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;

    /* —— Tip ölçeği (tek kaynak) —— */
    --fs-2xs: 0.6875rem;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.875rem;

    /* —— Yazı ağırlıkları (sakin, tutarlı) —— */
    --fw-regular: 450;
    --fw-medium: 550;
    --fw-semibold: 650;
    --fw-bold: 750;

    /* —— Boşluk ölçeği —— */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;

    /* —— Hareket —— */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur: 0.2s;

    color-scheme: light;
}

/* —— Dark tema (data-theme="dark" ile etkin; toggle + no-flash script tarafından set edilir) —— */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0d12;
    --surface: #151821;
    --surface-2: #1c2029;
    --fill-secondary: #262b36;
    --fill-tertiary: #1c2029;
    --separator: rgba(255, 255, 255, 0.09);
    --border: rgba(255, 255, 255, 0.10);
    --text: #f4f4f7;
    --text-secondary: #d6d6db;
    --text-muted: #9a9aa3;
    --text-tertiary: #6e6e77;
    --primary-soft: rgba(201, 162, 39, 0.16);
    --primary-glow: rgba(201, 162, 39, 0.28);
    --primary-text: #1a1408;
    --gold-50: rgba(201, 162, 39, 0.12);
    --gold-700: #e4c873;
    --musician-soft: rgba(191, 90, 242, 0.16);
    --venue-soft: rgba(255, 159, 10, 0.16);
    --success-soft: rgba(52, 199, 89, 0.16);
    --error-soft: rgba(255, 59, 48, 0.16);
    --glass: rgba(18, 20, 26, 0.78);
    --glass-heavy: rgba(21, 24, 33, 0.92);
    --badge-warn-text: #fcd34d;
    --badge-warn-bg: rgba(234, 179, 8, 0.18);
    --badge-success-text: #86efac;
    --badge-success-bg: rgba(34, 197, 94, 0.18);
    --badge-danger-text: #fca5a5;
    --badge-danger-bg: rgba(239, 68, 68, 0.18);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.45);
}

html {
    font-size: 16px;
    overflow-x: clip;
    background-color: var(--bg) !important;
}

body {
    font-family: var(--font);
    background-color: var(--bg) !important;
    color: var(--text);
    min-height: 100vh;
    line-height: 1.47;
    overflow-x: clip;
    letter-spacing: -0.01em;
}

.app-layout, .app-main { max-width: 100%; overflow-x: clip; }
img { max-width: 100%; height: auto; }

/* Klavye odak halkası — erişilebilirlik (fare tıklamasında görünmez) */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* Alerts */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.alert-error {
    background: var(--error-soft);
    border: 1px solid rgba(255, 59, 48, 0.18);
    color: #c41e16;
}
.alert-success {
    background: var(--success-soft);
    border: 1px solid rgba(52, 199, 89, 0.2);
    color: #248a3d;
}

/* Buttons — iOS kompakt */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.7rem 1.1rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
    text-decoration: none;
    letter-spacing: -0.01em;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
    background: linear-gradient(180deg, var(--accent-light) 0%, var(--primary) 100%);
    color: var(--primary-text);
    box-shadow: 0 2px 8px var(--primary-glow), var(--shadow-xs);
}
.btn-primary:hover {
    background: linear-gradient(180deg, #e4c255 0%, var(--primary-hover) 100%);
    box-shadow: 0 4px 14px var(--primary-glow);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--surface-2); }

.btn-google {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-google:hover { background: var(--surface-2); }

.btn-sm { padding: 0.45rem 0.85rem; font-size: 0.8125rem; width: auto; }

/* İlan grid — kompakt kimlik kartları */
.job-list, .jobs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    width: 100%;
    align-items: start;
}
@media (min-width: 640px) {
    .job-list, .jobs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .job-list, .jobs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.job-id-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 10.5rem;
    padding: 0.85rem 0.9rem 0.75rem;
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text) !important;
    box-shadow: var(--shadow-card) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}
.job-id-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.06) !important;
}
.job-id-card-static { cursor: default; }
.job-id-card-static:hover {
    transform: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.03);
}

.job-id-badge {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 1;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-pill, 999px);
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
    border: none;
}

.job-id-applied-badge {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 2;
    padding: 0.22rem 0.55rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #248a3d;
    background: var(--success-soft);
    border: 1px solid rgba(52, 199, 89, 0.35);
    border-radius: var(--radius-pill, 999px);
}

.job-id-corner-icon {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    opacity: 0.9;
}
.job-id-card--musician .job-id-corner-icon,
.job-id-card--musician .job-id-avatar-icon { color: #a855f7; }
.job-id-card--venue .job-id-corner-icon,
.job-id-card--venue .job-id-avatar-icon { color: #eab308; }

.job-id-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.15rem 0 0 0.35rem;
    padding-right: 3.5rem;
}
.job-id-avatar-ring {
    flex-shrink: 0;
    padding: 2px;
    border-radius: 50%;
    background: transparent;
}
.job-id-avatar-ring.musician-ring {
    border: 1.5px solid #a855f7;
}
.job-id-avatar-ring.venue-ring {
    border: 1.5px solid #eab308;
}
.job-id-card--musician .job-id-avatar {
    background: rgba(192, 132, 252, 0.1);
    border: none;
}
.job-id-card--venue .job-id-avatar {
    background: rgba(234, 179, 8, 0.1);
    border: none;
}
.job-id-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
}
.job-id-avatar img { width: 100%; height: 100%; object-fit: cover; }
.job-id-avatar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.job-id-identity { min-width: 0; flex: 1; }
.job-id-label, .job-id-listing-label { display: none !important; }

.job-id-venue {
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.job-id-subtitle {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}
.job-id-city {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.job-id-city svg { width: 12px; height: 12px; opacity: 0.85; color: #6e6e73; }
.job-id-listing {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--separator);
}
.job-id-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.job-id-excerpt {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.job-id-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.45rem;
}
.job-id-tags span {
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.18rem 0.45rem;
    background: #f5f5f7;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    color: var(--text);
}
.job-id-price {
    margin-top: auto;
    padding-top: 0.55rem;
    display: flex;
    justify-content: center;
}
.job-id-price-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
    padding: 0.35rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--separator);
    border-radius: var(--radius-sm);
}
.job-id-price-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.job-id-price-value {
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--text);
}

/* Rozetler */
.job-type-badge, .job-schedule-date, .job-schedule-time, .job-schedule-weekend, .job-schedule-relative {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.18rem 0.48rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--text-muted);
    background: #f5f5f7;
}
.job-schedule-weekend {
    border-color: rgba(234, 179, 8, 0.2);
    color: #7a6118;
    background: rgba(234, 179, 8, 0.08);
}

.badge-open { background: rgba(34, 197, 94, 0.1); color: #15803d; }
.badge-accepted { background: rgba(34, 197, 94, 0.1); color: #15803d; }

/* Form section label */
.form-section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* Job type picker — light */
.job-type-picker { display: flex; flex-wrap: wrap; gap: 0.45rem; width: 100%; }
.job-type-option { flex: 1 1 calc(50% - 0.5rem); min-width: 8rem; cursor: pointer; }
.job-type-option input { position: absolute; opacity: 0; pointer-events: none; }
.job-type-option-body {
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 0.75rem 0.55rem; min-height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.job-type-option-title { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.job-type-option:hover .job-type-option-body { border-color: rgba(201, 162, 39, 0.3); background: var(--gold-50, #faf6eb); }
.job-type-option input:checked + .job-type-option-body {
    border-color: rgba(201, 162, 39, 0.45);
    background: var(--primary-soft);
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.15);
}
.job-type-option input:checked + .job-type-option-body .job-type-option-title { color: var(--gold-700, #7a6118); }

@media (min-width: 640px) {
    .job-type-option { flex: 1 1 calc(33.333% - 0.35rem); }
}

.job-id-card-footer {
    display: flex; flex-wrap: wrap; gap: 0.45rem;
    margin-top: 0.65rem; padding-top: 0.65rem;
    border-top: 1px solid var(--separator);
}
.job-id-card-footer .btn { width: auto; font-size: 0.8125rem; padding: 0.4rem 0.75rem; }