/* ============================================================
   Asansis Portal — Design System
   Premium, ferah, mobil-öncelikli
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root {
    /* Brand */
    --color-ink:        #0A1628;   /* deep navy — primary text & brand */
    --color-ink-soft:   #1E293B;
    --color-accent:     #0066FF;   /* signature blue */
    --color-accent-hi:  #0052CC;
    --color-accent-lo:  #E6F0FF;

    /* Neutrals */
    --color-bg:         #FFFFFF;
    --color-surface:    #FAFBFC;
    --color-surface-2:  #F4F6F8;
    --color-border:     #E5E7EB;
    --color-border-soft:#F1F3F5;

    /* Text */
    --color-text:       #0F172A;
    --color-text-soft:  #475569;
    --color-text-mute:  #94A3B8;

    /* Semantic */
    --color-success:    #10B981;
    --color-warning:    #F59E0B;
    --color-danger:     #EF4444;

    /* Spacing — 4px base */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;

    /* Shadows — subtle, Apple-vari */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.12), 0 8px 24px rgba(15, 23, 42, 0.06);

    /* Type */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration: 280ms;

    /* Layout */
    --max-w-content: 1200px;
    --max-w-narrow: 640px;

    /* Surface tokens — cards/lists hep bunları kullanır, dark mode'da kolayca flip olur */
    --card-bg:           #FFFFFF;
    --card-grad:         linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
    --card-border:       #CBD5E1;
    --card-border-soft:  #E5E7EB;
    --card-highlight:    rgba(255, 255, 255, 0.95);
    --card-shadow-soft:  rgba(15, 23, 42, 0.04);
    --card-shadow-base:  rgba(15, 23, 42, 0.06);
    --card-shadow-hover: rgba(15, 23, 42, 0.08);
    --input-border:      #CBD5E1;
    --input-bg:          #FFFFFF;
    --modal-backdrop:    rgba(10, 22, 40, 0.55);

    /* Skeleton shimmer */
    --skel-from: #F4F6F8;
    --skel-via:  #ECEFF3;

    /* Brand fill — button/badge dolgu (her iki temada da koyu lacivert tonunda kalır) */
    --brand-fill:        #0A1628;
    --brand-fill-hover:  #1E293B;
    --brand-fill-fg:     #FFFFFF;

    /* Bakım takvimi "yapıldı" rengi */
    --month-done-bg:     #ECFDF5;
    --month-done-fg:     #047857;
    --month-done-border: #A7F3D0;

    /* Canvas/çizim alanı stroke rengi */
    --sig-stroke:        #0A1628;
}

/* ---------- DARK MODE ---------- */
[data-theme="dark"] {
    /* Neutrals — page surfaces flip */
    --color-bg:         #0E1117;
    --color-surface:    #161A23;
    --color-surface-2:  #1F2330;
    --color-border:     #2A2F3D;
    --color-border-soft:#1F2330;

    /* Text */
    --color-text:       #E5E7EB;
    --color-text-soft:  #9CA3AF;
    --color-text-mute:  #6B7280;

    /* Ink = en yüksek kontrast text — dark mode'da neredeyse beyaz */
    --color-ink:        #F1F5F9;
    --color-ink-soft:   #CBD5E1;

    /* Accent light tint — dark mode'da hafif mavi parlak şeffaf */
    --color-accent-lo:  rgba(0, 102, 255, 0.18);

    /* Surface tokens flip */
    --card-bg:           #161A23;
    --card-grad:         linear-gradient(180deg, #181C26 0%, #14171F 100%);
    --card-border:       #2A2F3D;
    --card-border-soft:  #1F2330;
    --card-highlight:    rgba(255, 255, 255, 0.04);
    --card-shadow-soft:  rgba(0, 0, 0, 0.30);
    --card-shadow-base:  rgba(0, 0, 0, 0.40);
    --card-shadow-hover: rgba(0, 0, 0, 0.50);

    --input-border:      #2A2F3D;
    --input-bg:          #161A23;

    --modal-backdrop:    rgba(0, 0, 0, 0.65);

    /* Shadows daha derin (dark üzerinde more visible) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.60), 0 8px 24px rgba(0, 0, 0, 0.35);

    /* Skeleton shimmer için dark variants */
    --skel-from: #1A1E2A;
    --skel-via:  #232838;

    /* Brand fill dark — accent mavisi (lacivert dark zeminde kaybolur) */
    --brand-fill:        var(--color-accent);
    --brand-fill-hover:  var(--color-accent-hi);
    --brand-fill-fg:     #FFFFFF;

    /* Bakım takvimi yeşil ton — dark mode'a uygun */
    --month-done-bg:     rgba(16, 185, 129, 0.15);
    --month-done-fg:     #34D399;
    --month-done-border: rgba(16, 185, 129, 0.35);

    --sig-stroke:        #F1F5F9;
}

/* Tema geçişinde anlık değişim olmasın — yumuşak ve renkli/yazı değil sadece */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* ---------- 2. Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-surface);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    margin: 0;
}

p { margin: 0; }

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--duration) var(--ease-out);
}
a:hover { color: var(--color-accent-hi); }

button { font-family: inherit; cursor: pointer; }

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

::selection { background: var(--color-accent-lo); color: var(--color-ink); }

/* ---------- 3. Type Scale ---------- */
.t-hero {
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
.t-display {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 650;
    letter-spacing: -0.025em;
}
.t-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.t-subtitle { font-size: 1.125rem; font-weight: 500; color: var(--color-text-soft); }
.t-body { font-size: 1rem; line-height: 1.65; color: var(--color-text-soft); }
.t-small { font-size: 0.875rem; color: var(--color-text-soft); }
.t-tiny { font-size: 0.75rem; color: var(--color-text-mute); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

.t-mute { color: var(--color-text-mute); }

/* ---------- 4. Layout primitives ---------- */
.container {
    width: 100%;
    max-width: var(--max-w-content);
    margin-inline: auto;
    padding-inline: var(--space-6);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-10); } }

.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.stack-sm  { --stack-gap: var(--space-2); }
.stack-md  { --stack-gap: var(--space-4); }
.stack-lg  { --stack-gap: var(--space-6); }
.stack-xl  { --stack-gap: var(--space-10); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-3)); align-items: center; }

.grid {
    display: grid;
    gap: var(--grid-gap, var(--space-6));
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* ---------- 5. Components ---------- */
/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    padding: 14px 22px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--duration) var(--ease-out);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    min-height: 48px;
}
.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.btn-primary {
    background: var(--brand-fill);
    color: var(--brand-fill-fg);
}
.btn-primary:hover {
    background: var(--brand-fill-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--brand-fill-fg);
}
.btn-accent {
    background: var(--color-accent);
    color: #fff;
}
.btn-accent:hover {
    background: var(--color-accent-hi);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.25);
    color: #fff;
}
.btn-ghost {
    background: transparent;
    color: var(--color-ink);
    border-color: var(--color-border);
}
.btn-ghost:hover {
    background: var(--color-surface);
    color: var(--color-ink);
    border-color: var(--color-text-mute);
}
.btn-quiet {
    background: transparent;
    color: var(--color-text-soft);
    padding: 12px 16px;
    min-height: 44px;
}
.btn-quiet:hover { color: var(--color-ink); background: var(--color-surface); }
.btn-block { width: 100%; }
.btn-lg { padding: 18px 28px; min-height: 56px; font-size: 1rem; }
.btn-sm { padding: 10px 14px; min-height: 38px; font-size: 0.875rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* Inputs */
.field { display: block; }
.field-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-soft);
    margin-bottom: var(--space-2);
}
.input {
    appearance: none;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    padding: 14px 16px;
    color: var(--color-text);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out);
    min-height: 48px;
}
.input::placeholder { color: var(--color-text-mute); }
.input:hover { border-color: var(--color-text-mute); }
.input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.12);
}
.input-mono {
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Card */
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: box-shadow var(--duration) var(--ease-out),
                transform var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease-out);
}
.card-hover:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: transparent;
}
.card-flush { padding: 0; overflow: hidden; }
.card-quiet { background: var(--color-surface); border-color: transparent; }

/* Surface */
.surface {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--color-surface-2);
    color: var(--color-text-soft);
}
.badge-accent { background: var(--color-accent-lo); color: var(--color-accent-hi); }
.badge-success { background: #ECFDF5; color: #047857; }
.badge-warning { background: #FFFBEB; color: #B45309; }
.badge-danger { background: #FEF2F2; color: #B91C1C; }
.badge-ink { background: var(--brand-fill); color: var(--brand-fill-fg); }

/* Divider */
.divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-mute);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* Alert / Notice */
.notice {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    color: var(--color-text-soft);
    font-size: 0.9375rem;
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.notice-danger { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.notice-success { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.notice-warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.notice-title { font-weight: 650; margin-bottom: 4px; }
.notice-text { font-size: 0.875rem; line-height: 1.5; }
[data-theme="dark"] .notice-danger  { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.30); color: #FCA5A5; }
[data-theme="dark"] .notice-success { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.30); color: #6EE7B7; }
[data-theme="dark"] .notice-warn    { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.30); color: #FCD34D; }

/* Icon */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    stroke-width: 1.75;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    background: var(--color-ink);
    color: #fff;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    z-index: 9999;
    transition: top var(--duration) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* ---------- 6. Utilities ---------- */
.u-center { text-align: center; }
.u-muted { color: var(--color-text-soft); }
.u-mute { color: var(--color-text-mute); }
.u-ink { color: var(--color-ink); }
.u-accent { color: var(--color-accent); }
.u-block { display: block; }
.u-hide { display: none !important; }

@media (min-width: 768px) {
    .u-hide-md\+ { display: none !important; }
}
@media (max-width: 767px) {
    .u-hide-sm { display: none !important; }
}

/* ---------- 7. Motion ---------- */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.anim-in { animation: fade-in 600ms var(--ease-out) both; }
.anim-in-1 { animation-delay: 60ms; }
.anim-in-2 { animation-delay: 140ms; }
.anim-in-3 { animation-delay: 240ms; }
.anim-in-4 { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}