/* Editorial content pages: About, Blog, Support and Blog detail. */
:root {
    --content-ink: var(--color-heading, #1d2721);
    --content-muted: var(--color-text-muted, #667168);
    --content-paper: var(--color-bg-alt, #f4f5f7);
    --content-sage: var(--color-accent-soft, #e8ecf8);
    --content-line: var(--color-border, rgba(29, 39, 33, .14));
    --content-accent: var(--color-accent, #2563eb);
    /* Koyu (ink) zemin üstündeki yazı rengi: açık temada beyaz, koyu temada koyu zemin rengi. */
    --content-on-ink: var(--color-bg, #fff);
    --content-card: color-mix(in srgb, var(--color-surface, #fff) 35%, var(--color-bg, #fff));
    --content-page: color-mix(in srgb, var(--color-heading, #111) 2%, var(--color-bg, #fff));
}

html { scroll-behavior: smooth; }
.content-hub-page { background: var(--content-page); color: var(--content-ink); }
.content-hub-page main { overflow: clip; }
.content-hub-page main > .container {
    width: min(calc(100% - 40px), 1180px);
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 0;
}
.skip-link {
    position: fixed; left: 1rem; top: 1rem; z-index: 9999;
    transform: translateY(-160%); padding: .75rem 1rem; border-radius: .5rem;
    background: var(--content-ink); color: var(--content-on-ink); font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }
.content-hub-page :focus-visible { outline: 3px solid var(--content-accent); outline-offset: 3px; }
.content-hub-page .header__nav a.active { color: var(--content-accent); }

.editorial-hero {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    align-items: center; gap: clamp(2rem, 6vw, 5.5rem); padding: clamp(2.5rem, 7vw, 6rem) 0;
}
.editorial-hero--compact { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); padding-bottom: 3.5rem; }
.editorial-eyebrow {
    display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1rem;
    color: var(--content-accent); font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.editorial-eyebrow::before { content: ''; width: 2rem; height: 1px; background: currentColor; }
.editorial-title {
    max-width: 13ch; margin: 0; color: var(--content-ink); font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(2.55rem, 6vw, 5.25rem); font-weight: 500; line-height: .98; letter-spacing: -.045em;
}
.editorial-hero--compact .editorial-title { max-width: 15ch; font-size: clamp(2.5rem, 5vw, 4.5rem); }
.editorial-lead { max-width: 62ch; margin: 1.5rem 0 0; color: var(--content-muted); font-size: clamp(1.02rem, 2vw, 1.22rem); line-height: 1.75; }
.editorial-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.75rem; }
.editorial-button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.2rem;
    border: 1px solid var(--content-ink); border-radius: 999px; background: var(--content-ink); color: var(--content-on-ink); font-weight: 750;
}
.editorial-button:hover { border-color: var(--content-accent); background: var(--content-accent); color: var(--content-on-ink); }
.editorial-button--ghost { background: transparent; color: var(--content-ink); }
.editorial-button--ghost:hover { background: var(--content-paper); color: var(--content-ink); }
.editorial-visual { position: relative; min-height: 360px; }
.editorial-visual img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; border-radius: 1.5rem 1.5rem 7rem 1.5rem; box-shadow: 0 24px 65px rgba(29,39,33,.16); }
.editorial-visual__note {
    position: absolute; left: -1.5rem; bottom: 1.5rem; max-width: 230px; padding: 1rem 1.1rem;
    border: 1px solid var(--content-line); border-radius: 1rem; background: rgba(252,251,247,.94); box-shadow: 0 12px 32px rgba(29,39,33,.12);
    color: var(--content-muted); font-size: .86rem; line-height: 1.55; backdrop-filter: blur(10px);
}
.editorial-visual__note strong { display: block; margin-bottom: .15rem; color: var(--content-ink); }

.content-section { padding: clamp(3rem, 7vw, 6rem) 0; border-top: 1px solid var(--content-line); }
.content-section--tint {
    margin: clamp(1rem, 3vw, 2rem) 0;
    padding: clamp(2rem, 5vw, 4.5rem);
    border: 1px solid var(--content-line);
    border-radius: clamp(1.25rem, 3vw, 2rem);
    background: var(--content-paper);
}
.section-intro { display: grid; grid-template-columns: minmax(220px, .6fr) minmax(0, 1.4fr); gap: 2rem; margin-bottom: 2.25rem; }
.section-kicker { color: var(--content-accent); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-title { max-width: 18ch; margin: 0; color: var(--content-ink); font-family: var(--font-serif, Georgia, serif); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.section-copy { max-width: 65ch; margin: .75rem 0 0; color: var(--content-muted); line-height: 1.75; }

.principle-grid, .support-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.principle-card, .support-card {
    min-height: 220px; padding: 1.35rem; border: 1px solid var(--content-line); border-radius: 1rem; background: var(--content-card);
}
.principle-card__number { color: var(--content-accent); font-family: var(--font-serif, Georgia, serif); font-size: 1.65rem; }
.principle-card h3, .support-card h2 { margin: 2rem 0 .65rem; color: var(--content-ink); font-size: 1.08rem; }
.principle-card p, .support-card p { margin: 0; color: var(--content-muted); font-size: .92rem; line-height: 1.65; }
.support-card { display: flex; min-height: 190px; flex-direction: column; }
.support-card h2 { margin: .35rem 0 .55rem; }
.support-card__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--content-sage); color: var(--content-ink); font-weight: 800; }
.support-card__link { margin-top: auto; padding-top: 1rem; color: var(--content-accent); font-weight: 750; }

.process-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); counter-reset: process; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.process-list li {
    position: relative; min-height: 210px; padding: 1.5rem 1.5rem 1.5rem 5.25rem;
    counter-increment: process; border: 1px solid var(--content-line); border-radius: 1rem; background: color-mix(in srgb, var(--content-card) 74%, transparent);
}
.process-list li::before {
    content: '0' counter(process); position: absolute; top: 1.35rem; left: 1.35rem;
    display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border-radius: 50%;
    background: var(--content-sage); color: var(--content-ink); font-family: var(--font-serif, Georgia, serif); font-size: 1.05rem;
}
.process-list h3 { margin: 0 0 .65rem; color: var(--content-ink); font-size: 1.08rem; }
.process-list p { margin: 0; color: var(--content-muted); font-size: .93rem; line-height: 1.7; }

.trust-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 1.4rem; background: var(--content-ink); color: var(--content-on-ink); }
.trust-panel h2 { max-width: 13ch; margin: 0; color: var(--content-on-ink); font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 500; line-height: 1.1; }
.trust-list { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.trust-list li { position: relative; padding-left: 1.75rem; color: color-mix(in srgb, var(--content-on-ink) 80%, transparent); line-height: 1.6; }
.trust-list li::before { content: '✓'; position: absolute; left: 0; color: color-mix(in srgb, var(--content-accent) 55%, var(--content-on-ink)); font-weight: 900; }

.contact-panel { padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--content-line); border-radius: 1.4rem; background: var(--content-card); }
.contact-panel__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.contact-panel__head h2 { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 500; }
.contact-grid--editorial { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.contact-tile { padding: 1.15rem; border-radius: .9rem; background: var(--content-paper); }
.contact-tile span { display: block; margin-bottom: .35rem; color: var(--content-muted); font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.contact-tile a, .contact-tile p { margin: 0; overflow-wrap: anywhere; color: var(--content-ink); font-weight: 650; }
.contact-meta { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin: 1rem 0 0; color: var(--content-muted); font-size: .9rem; line-height: 1.65; }
.contact-meta strong { color: var(--content-ink); }
.store-location {
    display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 1rem;
    margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--content-line);
}
.store-location__details {
    display: flex; flex-direction: column; justify-content: center; padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: 1rem; background: var(--content-ink); color: var(--content-on-ink);
}
.store-location__details .section-kicker { margin: 0 0 .65rem; color: color-mix(in srgb, var(--content-accent) 55%, var(--content-on-ink)); }
.store-location__details h3 { margin: 0; color: var(--content-on-ink); font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 500; line-height: 1.15; }
.store-location__details p { margin: .8rem 0 0; color: color-mix(in srgb, var(--content-on-ink) 76%, transparent); line-height: 1.65; }
.store-location__details .editorial-button { align-self: flex-start; margin-top: 1.25rem; border-color: color-mix(in srgb, var(--content-on-ink) 52%, transparent); background: var(--content-on-ink); color: var(--content-ink); }
.store-location__details .editorial-button:hover { background: var(--content-paper); color: var(--content-ink); }
.store-location__map { position: relative; min-height: 360px; overflow: hidden; border: 1px solid var(--content-line); border-radius: 1rem; background: #e9ece7; }
.store-location__map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
.store-location__status {
    position: absolute; inset: 0; display: grid; min-height: 360px; place-items: center; padding: 2rem;
    background: #e9ece7; color: var(--content-muted); text-align: center; line-height: 1.65;
}
.store-location__status[hidden] { display: none; }

.blog-trust-note { align-self: end; padding: 1.3rem; border-left: 3px solid var(--content-accent); background: var(--content-paper); color: var(--content-muted); line-height: 1.65; }
.blog-trust-note strong { color: var(--content-ink); }
.blog-cats { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 2rem; }
.blog-cats a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--content-line); border-radius: 999px; color: var(--content-muted); }
.blog-cats a:hover, .blog-cats a.active { border-color: var(--content-ink); background: var(--content-ink); color: var(--content-on-ink); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
.blog-card { display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--content-line); border-radius: 1.1rem; background: var(--content-card); transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(29,39,33,.11); }
.blog-card__media { overflow: hidden; aspect-ratio: 16 / 10; background: var(--content-paper); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.025); }
.blog-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.blog-card__cat { margin-bottom: .55rem; color: var(--content-accent); font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.blog-card__title { margin: 0 0 .7rem; color: var(--content-ink); font-family: var(--font-serif, Georgia, serif); font-size: 1.3rem; font-weight: 550; line-height: 1.25; }
.blog-card__excerpt { flex: 1; margin: 0; color: var(--content-muted); font-size: .9rem; line-height: 1.65; }
.blog-card__meta { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--content-line); color: var(--content-muted); font-size: .78rem; }
.content-empty { padding: 3rem 1.5rem; border: 1px dashed var(--content-line); border-radius: 1rem; text-align: center; }
.content-empty h2 { margin: 0 0 .5rem; font-family: var(--font-serif, Georgia, serif); }
.content-empty p { margin: 0 0 1rem; color: var(--content-muted); }
.pager { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.pager a { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--content-line); border-radius: 50%; color: var(--content-ink); }
.pager a.active { background: var(--content-ink); color: var(--content-on-ink); }

.faq-groups { display: grid; gap: 2.5rem; padding-bottom: 5rem; }
.faq-group { display: grid; grid-template-columns: minmax(190px, .45fr) minmax(0, 1.55fr); gap: 2rem; }
.faq-group__label h2 { position: sticky; top: 7rem; margin: 0; color: var(--content-ink); font-family: var(--font-serif, Georgia, serif); font-size: 1.6rem; font-weight: 500; }
.faq-list { border-top: 1px solid var(--content-line); }
.faq-item { border-bottom: 1px solid var(--content-line); }
.faq-q { display: flex; width: 100%; min-height: 64px; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border: 0; background: transparent; color: var(--content-ink); text-align: left; font-size: 1rem; font-weight: 750; cursor: pointer; }
.faq-q svg { width: 20px; min-width: 20px; transition: transform .2s ease; }
.faq-q[aria-expanded='true'] svg { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; }
.faq-a > div { overflow: hidden; }
.faq-q[aria-expanded='true'] + .faq-a { grid-template-rows: 1fr; }
.faq-a__inner { padding: 0 2.25rem 1.15rem 0; color: var(--content-muted); line-height: 1.75; }
.faq-a__inner a { color: var(--content-accent); text-decoration: underline; text-underline-offset: 3px; }

.article-shell { max-width: 830px; margin: 0 auto; padding: 2rem 0 5rem; }
.article-shell .breadcrumb { margin-bottom: 1.5rem; }
.article__cover { width: 100%; aspect-ratio: 16 / 8.5; margin-bottom: 2rem; object-fit: cover; border-radius: 1.2rem; }
.article__cat { color: var(--content-accent); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.article h1 { margin: .55rem 0 .8rem; color: var(--content-ink); font-family: var(--font-serif, Georgia, serif); font-size: clamp(2.2rem, 5vw, 4.15rem); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; }
.article__dek { margin: 0 0 1rem; color: var(--content-muted); font-size: 1.1rem; line-height: 1.7; }
.article__meta { margin-bottom: 2rem; padding: 1rem 0; border-block: 1px solid var(--content-line); color: var(--content-muted); font-size: .86rem; }
.article__body { color: var(--color-text, #344038); font-size: 1.04rem; line-height: 1.88; }
.article__body p, .article__body ul, .article__body ol { margin: 0 0 1.25rem; }
.article__body h2, .article__body h3 { margin: 2.25rem 0 .8rem; color: var(--content-ink); font-family: var(--font-serif, Georgia, serif); line-height: 1.2; }
.article__body h2 { font-size: 1.75rem; }.article__body h3 { font-size: 1.35rem; }
.article__body li { margin-bottom: .45rem; }
.article__body blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--content-accent); background: var(--content-paper); }
.article__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.article__tags a { padding: .4rem .8rem; border: 1px solid var(--content-line); border-radius: 999px; color: var(--content-muted); font-size: .8rem; }
.related-section { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--content-line); }
.related-section h2 { margin: 0 0 1rem; font-family: var(--font-serif, Georgia, serif); font-size: 1.7rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.related-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: .75rem; }
.related-card span { display: block; margin-top: .55rem; color: var(--content-ink); font-weight: 700; line-height: 1.35; }

@media (max-width: 960px) {
    .editorial-hero, .editorial-hero--compact { grid-template-columns: 1fr; }
    .editorial-visual { min-height: 300px; }
    .principle-grid, .support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .editorial-hero { padding-top: 2rem; }
    .editorial-title { font-size: clamp(2.55rem, 13vw, 4rem); }
    .editorial-visual__note { left: .8rem; bottom: .8rem; }
    .section-intro, .trust-panel, .faq-group, .store-location { grid-template-columns: 1fr; }
    .faq-group__label h2 { position: static; }
    .contact-grid--editorial { grid-template-columns: 1fr; }
    .contact-panel__head { align-items: start; flex-direction: column; }
    .related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .principle-grid, .support-grid, .process-list, .blog-grid { grid-template-columns: 1fr; }
    .principle-card { min-height: 190px; }
    .editorial-actions .editorial-button { width: 100%; }
    .article__body { font-size: 1rem; }
    .content-hub-page main > .container { width: min(calc(100% - 28px), 1180px); }
    .content-section--tint { padding-inline: 1rem; }
    .process-list li { min-height: 0; padding: 4.75rem 1.2rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}