/* dijitalcozum-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.dd-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;
}

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

/* Typography Utility */
.dd-display-hero { font-family: var(--font-heading); font-size: 2.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--color-primary); }
@media (min-width: 768px) { .dd-display-hero { font-size: 5rem; letter-spacing: -0.04em; } }
.dd-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) { .dd-headline-lg { font-size: 3.5rem; letter-spacing: -0.03em; } }
.dd-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) { .dd-headline-md { font-size: 2.25rem; letter-spacing: -0.02em; } }
.dd-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); }
.dd-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); }
.dd-body-md { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; line-height: 1.6; color: var(--color-on-surface-variant); }
.dd-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); }
.dd-label-md { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; }
.dd-label-sm { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }

/* Colors */
.dd-text-primary { color: var(--color-primary); }
.dd-text-secondary { color: var(--color-secondary); }
.dd-text-on-surface-variant { color: var(--color-on-surface-variant); }
.dd-text-outline { color: var(--color-outline); }
.dd-text-on-primary { color: var(--color-on-primary); }
.dd-text-secondary-fixed { color: var(--color-secondary-fixed); }
.dd-text-surface-container-low { color: var(--color-surface-container-low); }
.dd-bg-surface { background-color: var(--color-surface); }
.dd-bg-surface-lowest { background-color: var(--color-surface-container-lowest); }
.dd-bg-surface-low { background-color: var(--color-surface-container-low); }
.dd-bg-primary { background-color: var(--color-primary); }

/* Common Elements */
.dd-badge-pulse {
    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-high);
    width: fit-content;
}
.dd-dot-pulse { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--color-secondary); animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Hero Section */
.dd-hero-section { padding-top: var(--space-xl); padding-bottom: var(--space-lg); background-color: var(--color-surface); }
.dd-hero-breadcrumb { display: flex; align-items: center; gap: 0.25rem; color: var(--color-on-surface-variant); text-transform: uppercase; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.08em; }
.dd-hero-breadcrumb a { text-decoration: none; color: inherit; transition: color 0.2s; }
.dd-hero-breadcrumb a:hover { color: var(--color-primary); }
.dd-hero-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: flex-end; margin-top: var(--space-xs); }
@media (min-width: 1024px) { .dd-hero-grid { grid-template-columns: repeat(12, 1fr); } }
.dd-hero-title-col { display: flex; flex-direction: column; gap: var(--space-sm); }
@media (min-width: 1024px) { .dd-hero-title-col { grid-column: span 8; } }
.dd-hero-desc-col { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xs); }
@media (min-width: 1024px) { .dd-hero-desc-col { grid-column: span 4; } }
.dd-metadata-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); padding: var(--space-lg); margin-top: var(--space-md); background-color: var(--color-surface-container-lowest); border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
@media (min-width: 768px) { .dd-metadata-strip { grid-template-columns: repeat(4, 1fr); } }
.dd-metadata-item { display: flex; flex-direction: column; }
.dd-metadata-item span:first-child { color: var(--color-outline); margin-bottom: 0.125rem; }

/* Main Showcase Image */
.dd-showcase-section { padding: var(--space-xl) 0; background-color: var(--color-surface); width: 100%; }
.dd-showcase-wrap { position: relative; width: 100%; border-radius: 1rem; overflow: hidden; background-color: var(--color-surface-container-low); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.dd-showcase-inner { position: relative; width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dd-showcase-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease-out; }
.dd-showcase-wrap:hover .dd-showcase-img { transform: scale(1.02); }
.dd-showcase-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent, transparent); }
.dd-showcase-tag { position: absolute; bottom: var(--space-lg); left: var(--space-lg); right: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
@media (min-width: 768px) { .dd-showcase-tag { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.dd-showcase-tag-title { color: var(--color-on-primary); display: flex; flex-direction: column; }
.dd-showcase-tag-badge { display: flex; align-items: center; gap: 0.25rem; background-color: rgba(255,255,255,0.9); backdrop-filter: blur(12px); padding: 0.5rem 1rem; border-radius: 0.5rem; color: var(--color-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

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

/* Packaging / Story Section */
.dd-story-section { padding: var(--space-3xl) 0; background-color: var(--color-surface); }
.dd-story-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) { .dd-story-grid { grid-template-columns: repeat(2, 1fr); } }
.dd-story-content { display: flex; flex-direction: column; gap: var(--space-sm); }
@media (min-width: 1024px) { .dd-story-content { padding-right: var(--space-2xl); } }
.dd-story-list { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); border-top: 1px solid var(--color-outline-variant); padding-top: var(--space-md); }
.dd-story-list-item { display: flex; justify-content: space-between; align-items: center; }
.dd-story-visuals { position: relative; width: 100%; aspect-ratio: 1/1; }
.dd-story-img-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.dd-story-img-sec { position: absolute; bottom: -2rem; right: -2rem; width: 40%; aspect-ratio: 3/4; object-fit: cover; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border: 4px solid var(--color-surface); display: none; }
@media (min-width: 768px) { .dd-story-img-sec { display: block; } }

/* Design System Section */
.dd-design-section { padding: var(--space-2xl) 0; background-color: var(--color-surface-container-lowest); }
.dd-design-header { text-align: center; max-width: 32rem; margin: 0 auto var(--space-2xl); display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.dd-design-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 1024px) { .dd-design-grid { grid-template-columns: repeat(12, 1fr); } }
.dd-design-color-card { padding: var(--space-xl); border-radius: 1rem; background-color: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-xl); grid-column: span 1; }
@media (min-width: 1024px) { .dd-design-color-card { grid-column: span 7; } }
.dd-color-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-top: var(--space-md); }
.dd-color-box { padding: var(--space-md); border-radius: 0.5rem; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1/1; }
.dd-color-box:nth-child(1) { background-color: #133a28; color: white; }
.dd-color-box:nth-child(2) { background-color: #f4ede1; color: #133a28; }
.dd-color-box:nth-child(3) { background-color: #1a1a1a; color: white; }

.dd-design-typo-card { padding: var(--space-xl); border-radius: 1rem; background-color: var(--color-primary); color: var(--color-on-primary); display: flex; flex-direction: column; gap: var(--space-xl); justify-content: space-between; grid-column: span 1; position: relative; overflow: hidden; }
@media (min-width: 1024px) { .dd-design-typo-card { grid-column: span 5; } }
.dd-typo-specimen { font-size: 5rem; line-height: 1; font-family: var(--font-heading); color: rgba(255,255,255,0.1); position: absolute; right: -1rem; bottom: -1rem; }
.dd-typo-letters { font-size: 1.5rem; font-family: var(--font-heading); font-weight: 500; letter-spacing: 0.1em; color: var(--color-on-primary); }

/* Social Media Launch Layout */
.dd-social-section { padding: var(--space-3xl) 0; background-color: var(--color-surface); }
.dd-social-header { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--space-2xl); }
.dd-social-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 768px) { .dd-social-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dd-social-grid { grid-template-columns: repeat(12, 1fr); } }

/* Social Cards */
.dd-social-card { background-color: var(--color-surface-container-lowest); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 1rem; }
.dd-social-card-img { width: 100%; border-radius: 0.5rem; overflow: hidden; background-color: var(--color-surface-container); }
.dd-social-card-img img { width: 100%; height: 100%; object-fit: cover; }
.dd-social-col-left { grid-column: span 1; display: flex; flex-direction: column; gap: var(--space-md); }
@media (min-width: 1024px) { .dd-social-col-left { grid-column: span 5; } }
.dd-social-col-right { grid-column: span 1; display: flex; flex-direction: column; gap: var(--space-md); }
@media (min-width: 1024px) { .dd-social-col-right { grid-column: span 7; } }
.dd-social-row { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 768px) { .dd-social-row { grid-template-columns: repeat(2, 1fr); } }

.dd-social-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; }
.dd-bg-pink { background-color: var(--color-secondary-fixed); color: var(--color-secondary); }
.dd-bg-blue { background-color: #dce9ff; color: #0b1c30; }
.dd-bg-gray { background-color: #e5eeff; color: #45464d; }
.dd-bg-purple { background-color: #e9ddff; color: #23005c; }

/* Next Project CTA */
.dd-next-section { padding: var(--space-3xl) 0; }
.dd-next-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) { .dd-next-box { padding: var(--space-2xl); flex-direction: row; align-items: center; justify-content: space-between; } }
.dd-next-info { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 32rem; }
.dd-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.dd-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; }
.dd-btn-outline { background-color: var(--color-surface-container-low); color: var(--color-primary); }
.dd-btn-outline:hover { background-color: var(--color-surface-container-high); }
.dd-btn-primary { background-color: var(--color-primary); color: var(--color-on-primary); }
.dd-btn-primary:hover { background-color: #565e74; box-shadow: 0 12px 32px -8px rgba(236,72,153,0.2); }