/* website-detay.css - argeart.com.tr */

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

:root {
    --color-primary: #000000;
    --color-secondary: #b4136d;
    --color-surface: #f8f9ff;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #eff4ff;
    --color-surface-container: #e5eeff;
    --color-surface-container-high: #dce9ff;
    --color-surface-container-highest: #d3e4fe;
    --color-on-surface: #0b1c30;
    --color-on-surface-variant: #45464d;
    --color-on-primary: #ffffff;
    --color-outline: #76777d;
    --color-outline-variant: #c6c6cd;
    --color-secondary-fixed-dim: #ffb0cd;
    --color-secondary-fixed: #ffd9e4;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    --font-heading: 'Syne', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
}

body.wd-page {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection {
    background-color: var(--color-secondary-fixed);
    color: #3e0022;
}

.wd-container {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Typography Utility */
.wd-headline-lg { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-primary); }
@media (min-width: 768px) { .wd-headline-lg { font-size: 3.5rem; letter-spacing: -0.03em; } }
.wd-headline-md { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-primary); }
@media (min-width: 768px) { .wd-headline-md { font-size: 2.25rem; letter-spacing: -0.02em; } }
.wd-headline-sm { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-primary); }
.wd-body-lg { font-family: var(--font-body); font-size: 1.125rem; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: var(--color-on-surface-variant); }
.wd-body-md { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; line-height: 1.6; color: var(--color-on-surface-variant); }
.wd-body-sm { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.01em; color: var(--color-on-surface-variant); }
.wd-label-md { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; }
.wd-label-sm { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }

.wd-text-primary { color: var(--color-primary); }
.wd-text-secondary { color: var(--color-secondary); }
.wd-text-on-surface { color: var(--color-on-surface); }
.wd-text-on-surface-variant { color: var(--color-on-surface-variant); }
.wd-text-outline { color: var(--color-outline); }

/* Common Elements */
.wd-badge-status {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-container-low);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.wd-dot-ping { position: relative; width: 0.5rem; height: 0.5rem; }
.wd-dot-ping::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background-color: var(--color-secondary); animation: wd-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }
.wd-dot-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background-color: var(--color-secondary); }
@keyframes wd-ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* Hero Section */
.wd-hero { padding-top: var(--space-xl); padding-bottom: var(--space-lg); }
.wd-hero-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.wd-breadcrumb-nav { display: flex; align-items: center; gap: 0.25rem; color: var(--color-on-surface-variant); }
.wd-breadcrumb-nav a { text-decoration: none; color: inherit; transition: color 0.2s; }
.wd-breadcrumb-nav a:hover { color: var(--color-primary); }
.wd-hero-content { display: flex; flex-direction: column; gap: var(--space-md); max-width: 64rem; margin-bottom: var(--space-2xl); }
.wd-metadata-strip { background-color: var(--color-surface-container-lowest); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: 0 12px 32px -8px rgba(236,72,153,0.06), 0 4px 16px -4px rgba(139,92,246,0.04); }
.wd-metadata-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); align-items: center; }
@media (min-width: 640px) { .wd-metadata-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .wd-metadata-grid { grid-template-columns: repeat(5, 1fr); } }
.wd-metadata-item { display: flex; flex-direction: column; gap: 0.25rem; }
.wd-metadata-item .wd-label-sm { color: var(--color-outline); }
.wd-metadata-item .wd-body-md { color: var(--color-primary); font-weight: 500; }

/* Mockup Presentation */
.wd-mockup-section { padding: var(--space-lg) 0; }
.wd-mockup-frame { background-color: var(--color-surface-container-lowest); border-radius: 1rem; box-shadow: 0 24px 64px -16px rgba(11,28,48,0.08), 0 8px 24px -8px rgba(236,72,153,0.08); padding: 0.75rem; overflow: hidden; }
@media (min-width: 768px) { .wd-mockup-frame { padding: 1.5rem; } }
.wd-browser-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; margin-bottom: 1rem; background-color: var(--color-surface-container-lowest); }
.wd-browser-dots { display: flex; align-items: center; gap: 0.5rem; }
.wd-browser-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.wd-browser-dot:nth-child(1) { background-color: rgba(186,26,26,0.4); }
.wd-browser-dot:nth-child(2) { background-color: rgba(180,19,109,0.3); }
.wd-browser-dot:nth-child(3) { background-color: rgba(86,94,116,0.3); }
.wd-browser-url { display: none; align-items: center; gap: 0.5rem; padding: 0.375rem 1.5rem; border-radius: var(--radius-full); background-color: var(--color-surface-container-low); color: var(--color-on-surface-variant); font-size: 0.875rem; }
@media (min-width: 640px) { .wd-browser-url { display: flex; } }
.wd-browser-actions { display: flex; align-items: center; gap: 0.5rem; color: var(--color-on-surface-variant); }
.wd-mockup-canvas { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--color-surface-container); }
@media (min-width: 768px) { .wd-mockup-canvas { aspect-ratio: 21/10; } }
.wd-mockup-canvas img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.wd-mockup-canvas img:hover { transform: scale(1.015); }
.wd-floating-badge { position: absolute; bottom: 1.5rem; right: 1.5rem; display: none; align-items: center; gap: 0.5rem; padding: 0.25rem 1rem; border-radius: var(--radius-full); background-color: rgba(255,255,255,0.9); backdrop-filter: blur(12px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
@media (min-width: 768px) { .wd-floating-badge { display: flex; } }
.wd-floating-badge::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--color-secondary); }

/* Challenge Section */
.wd-challenge-section { padding: var(--space-2xl) 0; }
.wd-challenge-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 1024px) { .wd-challenge-grid { grid-template-columns: repeat(12, 1fr); } }
.wd-challenge-intro { display: flex; flex-direction: column; gap: var(--space-sm); }
@media (min-width: 1024px) { .wd-challenge-intro { grid-column: span 4; } }
.wd-challenge-line { width: 3rem; height: 0.25rem; background-color: var(--color-secondary); border-radius: var(--radius-full); margin-top: var(--space-xs); }
.wd-challenge-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 768px) { .wd-challenge-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wd-challenge-cards { grid-column: span 8; } }
.wd-challenge-card { background-color: var(--color-surface-container-lowest); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: var(--space-md); }
.wd-challenge-card-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background-color: var(--color-surface-container-high); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
.wd-challenge-card:nth-child(2) .wd-challenge-card-icon { background-color: var(--color-secondary-fixed); color: var(--color-secondary); }

/* Metrics Section */
.wd-metrics-section { background-color: var(--color-surface-container-low); padding: var(--space-2xl) 0; }
.wd-metrics-header { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-xl); }
@media (min-width: 768px) { .wd-metrics-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.wd-metrics-desc { max-width: 28rem; }
.wd-metrics-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 640px) { .wd-metrics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wd-metrics-grid { grid-template-columns: repeat(4, 1fr); } }
.wd-metric-card { background-color: var(--color-surface-container-lowest); padding: var(--space-lg); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0,0,0,0.05); display: flex; flex-direction: column; justify-content: space-between; height: 12rem; transition: all 0.3s; }
.wd-metric-card:hover { transform: translateY(-4px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
.wd-metric-top { display: flex; align-items: center; justify-content: space-between; }
.wd-metric-icon { color: var(--color-primary); }
.wd-metric-card:nth-child(1) .wd-metric-icon, .wd-metric-card:nth-child(3) .wd-metric-icon { color: var(--color-secondary); }
.wd-metric-val { font-size: 3.5rem !important; }

/* Tech Stack Section */
.wd-tech-section { padding: var(--space-2xl) 0; display: flex; flex-direction: column; gap: var(--space-2xl); }
.wd-tech-badges { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.wd-tech-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--radius-lg); background-color: var(--color-surface-container-lowest); box-shadow: 0 1px 2px rgba(0,0,0,0.05); color: var(--color-primary); }
.wd-tech-badge-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.wd-tech-badge:nth-child(odd) .wd-tech-badge-dot { background-color: var(--color-primary); }
.wd-tech-badge:nth-child(even) .wd-tech-badge-dot { background-color: var(--color-secondary); }

/* Process Pipeline */
.wd-process-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); }
.wd-process-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 768px) { .wd-process-grid { grid-template-columns: repeat(4, 1fr); } }
.wd-process-step { background-color: var(--color-surface-container-lowest); padding: var(--space-lg); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0,0,0,0.05); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-md); }
.wd-process-number { font-size: 3.5rem !important; color: var(--color-surface-container-highest); margin-top: -0.5rem; }
.wd-process-step:nth-child(3) .wd-process-number { color: var(--color-secondary-fixed-dim); }
.wd-process-content { margin-top: -1.5rem; display: flex; flex-direction: column; gap: 0.25rem; position: relative; z-index: 1; }

/* Interface Gallery */
.wd-gallery-section { padding: var(--space-lg) 0; display: flex; flex-direction: column; gap: var(--space-lg); }
.wd-gallery-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: stretch; }
@media (min-width: 1024px) { .wd-gallery-grid { grid-template-columns: repeat(12, 1fr); } }
.wd-gallery-item { background-color: var(--color-surface-container-lowest); border-radius: var(--radius-lg); box-shadow: 0 12px 32px -8px rgba(236,72,153,0.06); padding: 1rem; display: flex; flex-direction: column; gap: var(--space-md); }
@media (min-width: 768px) { .wd-gallery-item { padding: 1.5rem; } }
.wd-gallery-desktop { grid-column: span 1; }
@media (min-width: 1024px) { .wd-gallery-desktop { grid-column: span 8; } }
.wd-gallery-mobile { grid-column: span 1; justify-content: space-between; }
@media (min-width: 1024px) { .wd-gallery-mobile { grid-column: span 4; } }
.wd-gallery-header { display: flex; align-items: center; justify-content: space-between; }
.wd-gallery-canvas-desktop { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-surface-container); }
.wd-gallery-canvas-mobile { width: 100%; aspect-ratio: 9/14; border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-surface-container); margin: 0 auto; max-width: 280px; }
.wd-gallery-canvas-desktop img, .wd-gallery-canvas-mobile img { width: 100%; height: 100%; object-fit: cover; }

/* Next Project CTA */
.wd-next-project-section { padding: var(--space-3xl) 0; }
.wd-next-project-box { background-color: var(--color-surface-container-lowest); border-radius: 1rem; box-shadow: 0 16px 48px -12px rgba(11,28,48,0.06); padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-xl); align-items: flex-start; }
@media (min-width: 768px) { .wd-next-project-box { padding: var(--space-2xl); flex-direction: row; align-items: center; justify-content: space-between; } }
.wd-next-info { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 32rem; }
.wd-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.wd-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 1.5rem; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all 0.2s; cursor: pointer; border: none; }
.wd-btn-outline { background-color: var(--color-surface-container-low); color: var(--color-primary); }
.wd-btn-outline:hover { background-color: var(--color-surface-container-high); }
.wd-btn-primary { background-color: var(--color-primary); color: var(--color-on-primary); }
.wd-btn-primary:hover { background-color: #565e74; box-shadow: 0 12px 32px -8px rgba(236,72,153,0.2); }