/* Ana sayfa — Tailwind yerine özel stiller. Kapsam: body.page-home */

.page-home {
    --color-background: #f9f9ff;
    --color-on-surface: #111c2d;
    --color-on-surface-variant: #424753;
    --color-primary: #0051a9;
    --color-on-primary: #ffffff;
    --color-primary-container: #1869d1;
    --color-on-primary-container: #e9eeff;
    --color-surface: #f9f9ff;
    --color-surface-container-low: #f0f3ff;
    --color-surface-container: #e7eeff;
    --color-outline-variant: #c2c6d5;
    --color-inverse-surface: #263143;
    --color-on-tertiary: #ffffff;
    --color-outline: #727784;
    --color-secondary: #b71411;
    --color-accent-warm: #b93838;
    --color-accent-warm-hover: #9c2f2f;
    --color-on-accent-warm: #ffffff;

    --radius-sm: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-slide: 12px;

    --space-xs: 0.25rem;
    --space-sm: 0.75rem;
    --space-md: 1.5rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --gutter: clamp(1rem, 3vw, 2rem);
    --container-max: min(1440px, 100%);

    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --text-label: 0.875rem;
    --text-body: 1rem;
    --text-body-lg: 1.125rem;
    --text-headline-md: 1.5rem;
    --text-headline-lg: 2rem;
    --text-display: clamp(2rem, 5vw, 3rem);
    --shadow-ambient: 0 4px 12px rgba(30, 41, 59, 0.05);
    --shadow-ambient-hover: 0 8px 24px rgba(30, 41, 59, 0.08);
    --transition: 0.2s ease;
}

.page-home {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.5;
    color: var(--color-on-surface);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
}

.page-home .p-home__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.page-home .p-home__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
}

.page-home .p-home__container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-right: var(--gutter);
    padding-left: var(--gutter);
}

.page-home .p-home__container--narrow-center {
    text-align: center;
}

.page-home .p-home__hero-wrap {
    width: 100%;
    padding: 0;
    background-color: transparent;
}

.page-home .p-home__hero-inner {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.page-home .p-home__slider {
    position: relative;
    width: 100%;
    height: 540px;
    overflow: hidden;
    border-radius: 0 0 var(--radius-slide) var(--radius-slide);
    box-shadow: none;
}

.page-home .p-home__slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    color: #fff;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
    transform: translateY(-50%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.page-home .p-home__slider-arrow:hover {
    background-color: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}

.page-home .p-home__slider-arrow:active {
    transform: translateY(-50%) scale(0.96);
}

.page-home .p-home__slider-arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.page-home .p-home__slider-arrow--prev {
    left: var(--space-sm);
}

.page-home .p-home__slider-arrow--next {
    right: var(--space-sm);
}

.page-home .p-home__slider-arrow-icon {
    display: flex;
    width: 1.375rem;
    height: 1.375rem;
}

.page-home .p-home__slider-arrow-icon svg {
    width: 100%;
    height: 100%;
}

.page-home .p-home__slider-dots {
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background-color: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.page-home .p-home__slider-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.38);
    border: none;
    border-radius: 999px;
    transition:
        width 0.25s ease,
        background-color var(--transition),
        opacity var(--transition);
}

.page-home .p-home__slider-dot:hover {
    background-color: rgba(255, 255, 255, 0.72);
}

.page-home .p-home__slider-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.page-home .p-home__slider-dot--active {
    width: 1.625rem;
    background-color: #fff;
    opacity: 1;
}

.page-home .p-home__slider-track {
    display: flex;
    width: calc(var(--home-hero-count, 1) * 100%);
    height: 100%;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .page-home .p-home__slider-track {
        transition: none;
    }

    .page-home .p-home__slider-dot {
        transition: none;
    }

    .page-home .p-home__slider-arrow:active {
        transform: translateY(-50%);
    }
}

.page-home .p-home__slide {
    position: relative;
    flex: 0 0 calc(100% / var(--home-hero-count, 1));
    height: 100%;
    flex-shrink: 0;
}

.page-home .p-home__slide-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-home .p-home__slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--space-md);
    text-align: center;
    color: var(--color-on-primary);
    background: rgba(0, 0, 0, 0.5);
}

.page-home .p-home__slide-title {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-display);
    font-weight: 700;
    line-height: 1.2;
}

.page-home .p-home__slide-text {
    max-width: 37.5rem;
    margin: 0 0 var(--space-md);
    font-size: var(--text-body-lg);
    line-height: 1.5;
}

.page-home .p-home__slide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: var(--text-label);
    font-weight: 500;
    color: var(--color-on-accent-warm);
    text-decoration: none;
    background-color: var(--color-accent-warm);
    border-radius: var(--radius-lg);
    transition:
        background-color var(--transition),
        transform var(--transition);
}

.page-home .p-home__slide-btn-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
}

.page-home .p-home__slide-btn:hover {
    background-color: var(--color-accent-warm-hover);
    transform: scale(1.05);
}

.page-home .p-home__slide-btn:focus-visible {
    outline: 2px solid var(--color-on-accent-warm);
    outline-offset: 3px;
}

.page-home .p-home__section {
    width: 100%;
    padding: var(--space-xl) var(--gutter);
}

.page-home .p-home__section--services {
    background-color: var(--color-background);
}

.page-home .p-home__section--trust {
    background-color: var(--color-surface-container);
}

.page-home .p-home__section--brands {
    background-color: var(--color-background);
}

.page-home .p-home__section-head {
    margin-bottom: var(--space-lg);
    text-align: center;
}

.page-home .p-home__section-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-headline-lg);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-on-surface);
}

.page-home .p-home__section-lead {
    margin: 0;
    font-size: var(--text-body);
    color: var(--color-on-surface-variant);
}

.page-home .p-home__service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.page-home .p-home__service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    text-align: center;
    cursor: pointer;
    background-color: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-ambient);
    transition:
        box-shadow var(--transition),
        transform var(--transition);
}

.page-home .p-home__service-card:hover {
    box-shadow: var(--shadow-ambient-hover);
    transform: translateY(-2px);
}

.page-home .p-home__service-card:focus-within {
    box-shadow: var(--shadow-ambient-hover);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.page-home .p-home__service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--space-sm);
    color: var(--color-on-primary-container);
    background-color: var(--color-primary-container);
    border-radius: 9999px;
}

.page-home .p-home__icon-fill {
    width: 2rem;
    height: 2rem;
}

.page-home .p-home__service-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-headline-md);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-on-surface);
}

.page-home .p-home__service-text {
    flex-grow: 1;
    margin: 0 0 var(--space-sm);
    font-size: var(--text-body);
    color: var(--color-on-surface-variant);
}

.page-home .p-home__service-link {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    font-size: var(--text-label);
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
}

.page-home .p-home__service-link:hover {
    text-decoration: underline;
}

.page-home .p-home__icon-arrow {
    margin-left: 0.25rem;
    width: 1rem;
    height: 1rem;
}

.page-home .p-home__trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.page-home .p-home__trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.page-home .p-home__trust-icon {
    margin-bottom: var(--space-sm);
    width: 3rem;
    height: 3rem;
    color: var(--color-primary);
}

.page-home .p-home__trust-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-headline-md);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-on-surface);
}

.page-home .p-home__trust-text {
    margin: 0;
    font-size: var(--text-body);
    color: var(--color-on-surface-variant);
}

.page-home .p-home__brands-heading {
    margin: 0 0 var(--space-md);
    font-size: var(--text-headline-md);
    font-weight: 600;
    color: var(--color-on-surface-variant);
}

.page-home .p-home__brands-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    opacity: 0.6;
    filter: grayscale(1);
    transition:
        filter 0.3s ease,
        opacity 0.3s ease;
}

.page-home .p-home__brands-row:hover {
    opacity: 1;
    filter: grayscale(0);
}

@media (prefers-reduced-motion: reduce) {
    .page-home .p-home__brands-row {
        filter: none;
        opacity: 1;
    }
}

.page-home .p-home__brand {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-on-surface);
}

.page-home .p-home__brand--samsung {
    letter-spacing: -0.04em;
}

.page-home .p-home__brand--lg {
    letter-spacing: 0.15em;
    color: var(--color-secondary);
}

.page-home .p-home__brand--bosch {
    font-style: italic;
}

.page-home .p-home__brand--beko {
    letter-spacing: 0;
}

.page-home .p-home__brand--arcelik {
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .page-home .p-home__service-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .page-home .p-home__trust-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .page-home .p-home__slider {
        height: 440px;
    }

    .page-home .p-home__slide-title {
        font-size: 2rem;
    }

    .page-home .p-home__slide-text {
        font-size: 1rem;
    }
}

@media (min-width: 768px) {
    .page-home .p-home__slider {
        height: 600px;
    }
}

/* Header'a daha yakın, full-bleed hero */
.page-home .p-home__main {
    padding-top: 0.25rem;
}

/* body.page-contact + page-home: üst padding sıfırlanmamalı — fixed header (.p-contact__top-nav) için
   _contact.css'teki padding-top korunmalı; aksi halde hero/slider header'ın altında kalır. */

.page-home.page-contact .p-contact__main {
    padding: 0;
    gap: 0;
    max-width: 100%;
}

/* --- Dinamik bloklar: SSS özeti --- */
.page-home .p-home__section--faq {
    background-color: var(--color-surface-container);
}

.page-home .p-home__faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 42rem;
    margin-inline: auto;
}

.page-home .p-home__faq-item {
    padding: 0;
    overflow: hidden;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-ambient);
}

.page-home .p-home__faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md);
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-on-surface);
    list-style: none;
    cursor: pointer;
}

.page-home .p-home__faq-item summary::-webkit-details-marker {
    display: none;
}

.page-home .p-home__faq-item summary i {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary);
    transition: transform var(--transition);
}

.page-home .p-home__faq-item[open] summary i {
    transform: rotate(180deg);
}

.page-home .p-home__faq-panel {
    padding: 0 var(--space-md) var(--space-md);
}

.page-home .p-home__faq-body {
    font-size: var(--text-body);
    color: var(--color-on-surface-variant);
}

.page-home .p-home__faq-body > p {
    margin: 0 0 var(--space-sm);
}

.page-home .p-home__faq-body > p:last-child {
    margin-bottom: 0;
}

.page-home .p-home__faq-body ul,
.page-home .p-home__faq-body ol {
    margin: 0 0 var(--space-sm);
    padding-left: 1.25rem;
}

.page-home .p-home__faq-body li {
    margin-bottom: 0.25rem;
}

.page-home .p-home__faq-body a {
    color: var(--color-primary);
    text-decoration: underline;
}

.page-home .p-home__faq-body a:hover {
    text-decoration: none;
}

.page-home .p-home__faq-body strong {
    font-weight: 600;
    color: var(--color-on-surface);
}

.page-home .p-home__faq-more {
    margin-top: var(--space-md);
    margin-bottom: 0;
    text-align: center;
}

.page-home .p-home__faq-more-link {
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.page-home .p-home__faq-more-link:hover {
    text-decoration: underline;
}

.page-home .p-home__faq-empty,
.page-home .p-home__brands-empty {
    margin: 0;
    text-align: center;
    color: var(--color-on-surface-variant);
}

/* --- İletişim özeti --- */
.page-home .p-home__section--contact-teaser {
    background-color: var(--color-background);
}

.page-home .p-home__contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.page-home .p-home__contact-secondary {
    font-size: var(--text-label);
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
}

.page-home .p-home__contact-secondary:hover {
    text-decoration: underline;
}

.page-home .p-home__contact-form-wrap {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
}

/* --- CTA bandı --- */
.page-home .p-home__section--cta-banner {
    background-color: var(--color-surface-container);
}

.page-home .p-home__cta-banner {
    position: relative;
    overflow: hidden;
    min-height: 12rem;
    padding: var(--space-xl);
    background-color: var(--color-primary);
    background-image: var(--p-home-cta-bg);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-xl);
}

.page-home .p-home__cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.35));
}

.page-home .p-home__cta-banner-inner {
    position: relative;
    z-index: 1;
    max-width: 36rem;
    margin-inline: auto;
    text-align: center;
}

.page-home .p-home__cta-banner-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-headline-lg);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.page-home .p-home__cta-banner-subtitle {
    margin: 0 0 var(--space-md);
    font-size: var(--text-body);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.page-home .p-home__cta-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--color-on-accent-warm);
    text-decoration: none;
    background-color: var(--color-accent-warm);
    border-radius: var(--radius-md);
    transition:
        background-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.page-home .p-home__cta-banner-btn:hover {
    background-color: var(--color-accent-warm-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.page-home .p-home__cta-banner-btn:focus-visible {
    outline: 2px solid var(--color-on-accent-warm);
    outline-offset: 3px;
}

/* --- Hizmet sayfaları özeti --- */
.page-home .p-home__section--service-pages {
    background-color: var(--color-background);
}

.page-home .p-home__sp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.page-home .p-home__sp-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-ambient);
    transition:
        box-shadow var(--transition),
        transform var(--transition);
}

.page-home .p-home__sp-card:hover {
    box-shadow: var(--shadow-ambient-hover);
    transform: translateY(-2px);
}

.page-home .p-home__sp-card-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-surface-container);
}

.page-home .p-home__sp-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-home .p-home__sp-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--space-md);
}

.page-home .p-home__sp-card-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-headline-md);
    font-weight: 600;
    line-height: 1.3;
}

.page-home .p-home__sp-card-title a {
    color: var(--color-on-surface);
    text-decoration: none;
}

.page-home .p-home__sp-card-title a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.page-home .p-home__sp-card-text {
    flex-grow: 1;
    margin: 0 0 var(--space-sm);
    font-size: var(--text-body);
    color: var(--color-on-surface-variant);
}

.page-home .p-home__sp-card-link {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    font-size: var(--text-label);
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
}

.page-home .p-home__sp-card-link:hover {
    text-decoration: underline;
}

.page-home .p-home__sp-empty {
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
    color: var(--color-on-surface-variant);
}

/* --- Marka logoları (veritabanı) --- */
.page-home .p-home__brands-row--logos {
    gap: var(--space-md);
}

.page-home .p-home__brand-logo {
    max-width: 8rem;
    max-height: 3rem;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition:
        filter 0.3s ease,
        opacity 0.3s ease;
}

.page-home .p-home__brands-row--logos:hover .p-home__brand-logo {
    filter: grayscale(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .page-home .p-home__faq-item summary i {
        transition: none;
    }

    .page-home .p-home__sp-card,
    .page-home .p-home__cta-banner-btn {
        transition: none;
    }
}

@media (min-width: 768px) {
    .page-home .p-home__sp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .page-home .p-home__sp-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}