/* =============================================================
   ABOUT PAGE — Extended Glassmorphism Styles
   bilal-web-app  2026
   ============================================================= */

/* ── Section headers ──────────────────────────────────────── */
.about-section-label {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent-cyan);
    background: rgba(0,212,255,.1);
    border: 1px solid rgba(0,212,255,.25);
    border-radius: 20px;
    padding: 4px 14px;
    margin-bottom: 14px;
}

.about-section-title {
    font-family: 'Montserrat', 'Poppins', sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 800;
    color: #f8fafc;
    margin: 0 0 12px;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.about-section-divider {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent-cyan), #38bdf8);
    border-radius: 2px;
    margin: 0 0 40px;
}

/* ── Hero / Intro section ─────────────────────────────────── */
.about-hero {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 80px;
}

.about-hero-photo {
    position: relative;
}

.about-hero-photo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 20px;
    border: 2px solid rgba(0,212,255,.25);
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    display: block;
}

.about-hero-photo::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(0,212,255,.25), rgba(4,226,183,.15));
    z-index: -1;
}

.about-hero-content {}

.about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent-teal);
    background: var(--color-accent-teal-dim);
    border: 1px solid rgba(4,226,183,.25);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 20px;
}

.about-hero-badge::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-accent-teal);
    box-shadow: var(--glow-teal);
    animation: pulse-dot 2s ease-in-out infinite;
}

.about-hero-badge--closed {
    color: #f87171;
    background: rgba(248,113,113,.1);
    border-color: rgba(248,113,113,.25);
}

.about-hero-badge--closed::before {
    background: #f87171;
    box-shadow: 0 0 6px rgba(248,113,113,.6);
    animation: none;
}

.about-info-value--closed {
    color: #f87171 !important;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(.8); }
}

.about-hero-name {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 900;
    color: #f8fafc;
    margin: 0 0 6px;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.about-hero-role {
    font-size: 1rem;
    color: rgba(255,255,255,.6);
    font-family: 'Poppins', sans-serif;
    margin-bottom: 28px;
    letter-spacing: .02em;
}

.about-hero-bio {
    font-size: .975rem;
    line-height: 1.75;
    color: rgba(255,255,255,.82);
    margin-bottom: 32px;
    text-align: justify;
    hyphens: auto;
}

/* Quick stats row */
.about-stats {
    display: flex;
    gap: 28px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.about-stat {
    text-align: center;
    min-width: 72px;
}

.about-stat-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-accent-cyan);
    line-height: 1;
    display: block;
}

.about-stat-label {
    font-size: .68rem;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 4px;
    display: block;
}

/* CTA buttons */
.about-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ── Info / Quick facts section ───────────────────────────── */
.about-info-section {
    margin-bottom: 80px;
}

.about-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.about-info-card {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: blur(6px);
    transition: background .25s, border-color .25s;
}

.about-info-card:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(0,212,255,.25);
}

.about-info-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0,212,255,.2), rgba(4,226,183,.15));
    border: 1px solid rgba(0,212,255,.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.about-info-text {}

.about-info-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.42);
    display: block;
    margin-bottom: 2px;
}

.about-info-value {
    font-size: .9rem;
    color: rgba(255,255,255,.9);
    font-weight: 600;
    line-height: 1.3;
}

.about-info-value a {
    color: rgba(255,255,255,.9);
    text-decoration: none;
    transition: color .2s;
}

.about-info-value a:hover {
    color: var(--color-accent-cyan);
}

/* ── Career Timeline ──────────────────────────────────────── */
.about-timeline-section {
    margin-bottom: 80px;
}

.about-timeline {
    position: relative;
    padding-top: 10px;
}

/* Center vertical line */
.about-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(0,212,255,.6), rgba(4,226,183,.4), rgba(0,212,255,.1));
    transform: translateX(-50%);
    border-radius: 1px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 1fr 48px 1fr;
    gap: 0 0;
    margin-bottom: 48px;
    align-items: start;
}

/* Left items: content left, dot center, empty right */
.timeline-item.timeline-left .timeline-content { grid-column: 1; padding-right: 36px; }
.timeline-item.timeline-left .timeline-dot { grid-column: 2; }
.timeline-item.timeline-left .timeline-spacer { grid-column: 3; }

/* Right items: empty left, dot center, content right */
.timeline-item.timeline-right .timeline-spacer { grid-column: 1; }
.timeline-item.timeline-right .timeline-dot { grid-column: 2; }
.timeline-item.timeline-right .timeline-content { grid-column: 3; padding-left: 36px; }

/* Education items always right */
.timeline-item.timeline-edu .timeline-spacer { grid-column: 1; }
.timeline-item.timeline-edu .timeline-dot { grid-column: 2; }
.timeline-item.timeline-edu .timeline-content { grid-column: 3; padding-left: 36px; }

.timeline-dot {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20px;
    position: relative;
    z-index: 1;
}

.timeline-dot-inner {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-cyan), #38bdf8);
    box-shadow: 0 0 16px rgba(0,212,255,.6);
    border: 2px solid rgba(255,255,255,.15);
    flex-shrink: 0;
}

.timeline-item.timeline-edu .timeline-dot-inner {
    background: linear-gradient(135deg, var(--color-accent-teal), var(--color-accent-cyan));
    box-shadow: var(--glow-teal);
}

.timeline-content {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    padding: 24px 28px;
    backdrop-filter: blur(8px);
    transition: background .25s, border-color .25s, transform .25s;
}

.timeline-content:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(0,212,255,.25);
    transform: translateY(-2px);
}

.timeline-period {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent-cyan);
    margin-bottom: 8px;
    display: block;
}

.timeline-item.timeline-edu .timeline-period {
    color: var(--color-accent-teal);
}

.timeline-role {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 4px;
    line-height: 1.2;
}

.timeline-company {
    font-size: .85rem;
    color: rgba(255,255,255,.55);
    font-weight: 500;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeline-company-badge {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(0,212,255,.12);
    border: 1px solid rgba(0,212,255,.2);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--color-accent-cyan);
}

.timeline-desc {
    font-size: .875rem;
    line-height: 1.65;
    color: rgba(255,255,255,.7);
    margin: 0;
    text-align: justify;
    hyphens: auto;
}

/* ── Skills / Tech Stack ──────────────────────────────────── */
.about-skills-section {
    margin-bottom: 40px;
}

.about-skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.about-skill-card {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    padding: 24px 26px;
    backdrop-filter: blur(6px);
    transition: background .25s, border-color .25s;
}

.about-skill-card:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(0,212,255,.25);
}

.about-skill-category {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.about-skill-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.about-skill-icon.icon-backend  { background: linear-gradient(135deg, var(--color-accent-cyan-dim), var(--color-accent-purple-dim)); }
.about-skill-icon.icon-devops   { background: linear-gradient(135deg, rgba(251,146,60,.15), rgba(239,68,68,.12)); }
.about-skill-icon.icon-db       { background: linear-gradient(135deg, rgba(52,211,153,.15), rgba(4,226,183,.12)); }
.about-skill-icon.icon-tools    { background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(245,158,11,.1)); }

.about-skill-category-name {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.75);
}

.about-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.about-skill-tag {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    padding: 3px 10px;
    transition: background .2s, border-color .2s, color .2s;
}

.about-skill-tag:hover {
    background: rgba(0,212,255,.15);
    border-color: rgba(0,212,255,.3);
    color: var(--color-text-link);
}

/* ── Bottom CTA ───────────────────────────────────────────── */
.about-bottom-cta {
    text-align: center;
    padding: 48px 24px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    backdrop-filter: blur(6px);
}

.about-bottom-cta h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 10px;
}

.about-bottom-cta p {
    color: rgba(255,255,255,.6);
    font-size: .9rem;
    margin-bottom: 28px;
    line-height: 1.7;
    text-align: justify;
    hyphens: auto;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .about-hero {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about-hero-photo {
        max-width: 240px;
        margin: 0 auto;
    }

    .about-info-grid {
        grid-template-columns: 1fr;
    }

    .about-timeline::before {
        left: 20px;
        transform: none;
    }

    .timeline-item {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto;
    }

    .timeline-item.timeline-left .timeline-content,
    .timeline-item.timeline-right .timeline-content,
    .timeline-item.timeline-edu .timeline-content {
        grid-column: 2;
        grid-row: 1;
        padding-left: 20px;
        padding-right: 14px;
    }

    .timeline-item.timeline-left .timeline-dot,
    .timeline-item.timeline-right .timeline-dot,
    .timeline-item.timeline-edu .timeline-dot {
        grid-column: 1;
        grid-row: 1;
    }

    .timeline-item.timeline-left .timeline-spacer,
    .timeline-item.timeline-right .timeline-spacer,
    .timeline-item.timeline-edu .timeline-spacer {
        display: none;
    }

    .about-skills-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .about-stats { gap: 16px; }
    .about-cta { flex-direction: column; }
    .about-cta .btn-glass-primary,
    .about-cta .btn-glass-secondary { text-align: center; width: 100%; }
    .timeline-content { padding: 16px 14px; }
    .about-bottom-cta { padding: 28px 14px; }
    .about-hero { margin-bottom: 48px; }
    .about-info-section,
    .about-timeline-section,
    .about-skills-section { margin-bottom: 48px; }
    .about-hero-photo { max-width: 200px; }
}

/* ── Light theme overrides ────────────────────────────────── */

html[data-theme="light"] .about-section-label {
    color: var(--color-accent-purple);
    background: var(--color-accent-purple-dim);
    border-color: var(--color-border-accent);
}

html[data-theme="light"] .about-section-title {
    color: var(--color-text-primary);
}

html[data-theme="light"] .about-section-divider {
    background: linear-gradient(90deg, var(--color-accent-purple), var(--color-accent-cyan));
}

html[data-theme="light"] .about-hero-badge {
    color: var(--color-accent-teal);
    background: var(--color-accent-teal-dim);
    border-color: rgba(4,226,183,.3);
}

html[data-theme="light"] .about-hero-badge::before {
    background: var(--color-accent-teal);
    box-shadow: var(--glow-teal);
}

html[data-theme="light"] .about-hero-badge--closed {
    color: #e53e3e;
    background: rgba(229,62,62,.1);
    border-color: rgba(229,62,62,.3);
}

html[data-theme="light"] .about-hero-badge--closed::before {
    background: #e53e3e;
    box-shadow: 0 0 6px rgba(229,62,62,.5);
    animation: none;
}

html[data-theme="light"] .about-hero-name {
    color: var(--color-text-primary);
}

html[data-theme="light"] .about-hero-role {
    color: var(--color-text-secondary);
}

html[data-theme="light"] .about-hero-bio {
    color: var(--color-text-primary);
}

html[data-theme="light"] .about-stat-num {
    color: var(--color-accent-cyan);
}

html[data-theme="light"] .about-stat-label {
    color: var(--color-text-muted);
}

html[data-theme="light"] .about-info-card {
    background: var(--color-glass-surface);
    border-color: var(--color-border-default);
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .about-info-card:hover {
    background: #ffffff;
    border-color: var(--color-border-accent);
}

html[data-theme="light"] .about-info-icon {
    background: linear-gradient(135deg, var(--color-accent-purple-dim), var(--color-accent-cyan-dim));
    border-color: var(--color-border-accent);
}

html[data-theme="light"] .about-info-label {
    color: var(--color-accent-purple);
}

html[data-theme="light"] .about-info-value {
    color: var(--color-text-primary);
}

html[data-theme="light"] .about-info-value--closed {
    color: #e53e3e !important;
}

html[data-theme="light"] .about-info-value a {
    color: var(--color-text-link);
}

html[data-theme="light"] .about-hero-photo::after {
    background: linear-gradient(135deg, var(--color-accent-purple-dim), var(--color-accent-cyan-dim));
}

/* Timeline — light */
html[data-theme="light"] .about-timeline::before {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent-purple) 50%, transparent), color-mix(in srgb, var(--color-accent-cyan) 35%, transparent), color-mix(in srgb, var(--color-accent-purple) 8%, transparent));
}

html[data-theme="light"] .timeline-content {
    background: var(--color-glass-surface);
    border-color: var(--color-border-default);
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .timeline-content:hover {
    background: #ffffff;
    border-color: var(--color-border-accent);
}

html[data-theme="light"] .timeline-period {
    color: var(--color-accent-purple);
}

html[data-theme="light"] .timeline-item.timeline-edu .timeline-period {
    color: var(--color-accent-teal);
}

html[data-theme="light"] .timeline-role {
    color: var(--color-text-primary);
}

html[data-theme="light"] .timeline-company {
    color: var(--color-text-secondary);
}

html[data-theme="light"] .timeline-company-badge {
    background: var(--color-accent-purple-dim);
    border-color: var(--color-border-accent);
    color: var(--color-accent-purple);
}

html[data-theme="light"] .timeline-desc {
    color: var(--color-text-primary);
}

html[data-theme="light"] .timeline-dot-inner {
    background: linear-gradient(135deg, var(--color-accent-purple), var(--color-accent-cyan));
    box-shadow: var(--shadow-purple);
}

html[data-theme="light"] .timeline-item.timeline-edu .timeline-dot-inner {
    background: linear-gradient(135deg, var(--color-accent-teal), var(--color-accent-cyan));
    box-shadow: var(--glow-teal);
}

/* Skills — light */
html[data-theme="light"] .about-skill-card {
    background: var(--color-glass-surface);
    border-color: var(--color-border-default);
}

html[data-theme="light"] .about-skill-card:hover {
    background: #ffffff;
    border-color: var(--color-border-accent);
}

html[data-theme="light"] .about-skill-category-name {
    color: var(--color-text-primary);
}

html[data-theme="light"] .about-skill-tag {
    color: var(--color-text-primary);
    background: var(--color-accent-cyan-dim);
    border-color: var(--color-border-subtle);
}

html[data-theme="light"] .about-skill-tag:hover {
    background: var(--color-accent-purple-dim);
    border-color: var(--color-border-accent);
    color: var(--color-accent-purple);
}

/* Bottom CTA — light */
html[data-theme="light"] .about-bottom-cta {
    background: var(--color-glass-surface);
    border-color: var(--color-border-default);
}

html[data-theme="light"] .about-bottom-cta h3 {
    color: var(--color-text-primary);
}

html[data-theme="light"] .about-bottom-cta p {
    color: var(--color-text-secondary);
}

/* ── RTL (Arabic) overrides ───────────────────────────────── */
[dir="rtl"] .about-hero {
    direction: rtl;
}

/* Hero metinleri — explicit sağa hizalama */
[dir="rtl"] .about-hero-name,
[dir="rtl"] .about-hero-role,
[dir="rtl"] .about-hero-bio {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .about-hero-badge {
    display: inline-flex;
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .about-hero-badge::before {
    order: 1;
    margin-left: 7px;
    margin-right: 0;
}

/* Section başlıkları */
[dir="rtl"] .about-section-label,
[dir="rtl"] .about-section-title {
    text-align: right;
    display: block;
}

[dir="rtl"] .about-section-divider {
    margin-left: auto;
    margin-right: 0;
}

[dir="rtl"] .about-stats { flex-direction: row-reverse; }
[dir="rtl"] .about-stat-num,
[dir="rtl"] .about-stat-label { text-align: right; }

[dir="rtl"] .about-cta { flex-direction: row-reverse; }

[dir="rtl"] .about-info-card { flex-direction: row-reverse; }

[dir="rtl"] .about-info-label,
[dir="rtl"] .about-info-value { text-align: right; }

/* RTL timeline: mirror the layout */
[dir="rtl"] .about-timeline::before {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

[dir="rtl"] .timeline-item.timeline-left .timeline-content { grid-column: 3; padding-left: 36px; padding-right: 0; }
[dir="rtl"] .timeline-item.timeline-left .timeline-spacer  { grid-column: 1; }

[dir="rtl"] .timeline-item.timeline-right .timeline-content { grid-column: 1; padding-right: 36px; padding-left: 0; }
[dir="rtl"] .timeline-item.timeline-right .timeline-spacer  { grid-column: 3; }

[dir="rtl"] .timeline-company { flex-direction: row-reverse; }
[dir="rtl"] .timeline-period,
[dir="rtl"] .timeline-role { text-align: right; }
[dir="rtl"] .timeline-desc { text-align: justify; }

[dir="rtl"] .about-skill-category { flex-direction: row-reverse; }
[dir="rtl"] .about-skill-tags { flex-direction: row-reverse; }

[dir="rtl"] .about-bottom-cta h3,
[dir="rtl"] .about-bottom-cta p { direction: rtl; }

/* RTL mobile */
@media (max-width: 900px) {
    [dir="rtl"] .about-timeline::before {
        left: auto;
        right: 20px;
        transform: none;
    }

    [dir="rtl"] .timeline-item.timeline-left .timeline-content,
    [dir="rtl"] .timeline-item.timeline-right .timeline-content,
    [dir="rtl"] .timeline-item.timeline-edu .timeline-content {
        grid-column: 2;
        padding-right: 24px;
        padding-left: 0;
        text-align: right;
    }
}