/* ==========================================================================
   NSL Tekstil — site teması
   Mobil öncelikli yazıldı: temel kurallar küçük ekran içindir, büyük ekran
   düzenlemeleri min-width sorgularıyla eklenir.
   Renkler değişken olarak tanımlı; tek yerden değiştirilebilir.
   ========================================================================== */

/* Palet logodan alındı: lacivert #252f3a, taupe #aa9e91, krem #f5f1ee.
   Taupe olduğu gibi yazıda kullanılınca okunmuyor; metin ve butonlar için
   koyulaştırılmış hâli (--accent), koyu zeminler için açık hâli
   (--accent-light) tutuluyor. */
:root {
    --ink: #1e2833;
    --ink-soft: #35414f;
    /* Beyaz ve krem zeminde en az 4.5:1 kontrast (WCAG AA); eski #78828e okunaklık testinden geçmiyordu. */
    --muted: #5f6873;
    --line: #e4dfd6;
    --line-soft: #f1ede6;
    --paper: #ffffff;
    --sand: #f6f3ee;
    --sand-deep: #ebe6dc;

    --accent: #7a6a58;
    --accent-dark: #5f5244;
    --accent-soft: #efe9e0;
    --accent-light: #b3a289;

    --radius: 2px;
    --radius-lg: 4px;

    --shadow-sm: 0 1px 2px rgba(30, 40, 51, .06);
    --shadow: 0 12px 32px -12px rgba(30, 40, 51, .18);
    --shadow-lg: 0 28px 60px -24px rgba(30, 40, 51, .28);

    --header-h: 68px;
    --ease: cubic-bezier(.22, .61, .36, 1);

    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "AmpersandFix", "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Playfair Display'in "&" işareti fazla süslü duruyor ("Triko & Kazak" gibi
   kategori adlarında göze batıyordu). unicode-range yalnızca bu karakteri
   kapsadığı için başlıkların geri kalanı Playfair olarak kalır; sadece "&"
   sistemin sade yazı tipinden çizilir. */
@font-face {
    font-family: "AmpersandFix";
    src: local("Segoe UI"), local("Helvetica Neue"), local("Helvetica"), local("Arial");
    unicode-range: U+0026;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

::selection {
    background: var(--accent-light);
    color: var(--ink);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    cursor: pointer;
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.01em;
}

h1, h2 {
    font-family: var(--font-display);
    font-weight: 400;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); }

/* 320px'lik telefonlarda "Sürdürülebilirlik" gibi tek uzun kelime sığmıyordu. */
@media (max-width: 359px) {
    h1 { font-size: 1.75rem; }
}

h1, h2, h3 { overflow-wrap: break-word; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Klavye ile gezinenler için görünür odak halkası. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--ink);
    color: #fff;
    padding: .75rem 1.25rem;
}

.skip-link:focus {
    left: 0;
}

/* ---------- Yerleşim ---------- */

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow {
    max-width: 860px;
}

.section {
    padding: clamp(3.5rem, 8vw, 7rem) 0;
}

.section--sand { background: var(--sand); }
.section--ink { background: var(--ink); color: #cdd2d9; }
.section--ink h2, .section--ink h3 { color: #fff; }

/* Koyu bantta açık tonlar; koyu zemin için tanımlı renkler burada okunmuyordu. */
.section--ink .eyebrow,
.section--ink .process__item::before { color: var(--accent-light); }
.section--ink .process__text { color: rgba(255, 255, 255, .72); }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.section-head {
    max-width: 620px;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.eyebrow {
    display: inline-block;
    margin-bottom: .9rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
}

.section-head p {
    color: var(--muted);
    font-size: 1.02rem;
}

.section-actions {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}

/* ---------- Butonlar ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .9rem 1.7rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--accent);
    color: #fff;
}

.btn--primary:hover { background: var(--accent-dark); }

.btn--dark {
    background: var(--ink);
    color: #fff;
}

.btn--dark:hover { background: #101922; }

.btn--outline {
    border-color: var(--line);
    color: var(--ink);
}

.btn--outline:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}

.btn--light {
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.btn--light:hover {
    background: #fff;
    color: var(--ink);
}

.btn--block { width: 100%; }
.btn--sm { padding: .65rem 1.15rem; font-size: .78rem; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
}

.link-arrow svg { transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Başlık / menü ---------- */

.header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

/* Ana sayfada başlık, slaytın üzerinde saydam durur. */
.header--overlay {
    background: transparent;
    border-bottom-color: transparent;
}

.header--overlay .header__link,
.header--overlay .header__toggle,
.header--overlay .lang__btn {
    color: #fff;
}

.header--overlay .header__logo-dark { display: none; }
.header--overlay .header__logo-light { display: block; }

.header--scrolled {
    background: var(--paper);
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-sm);
}

.header--scrolled .header__link,
.header--scrolled .header__toggle,
.header--scrolled .lang__btn {
    color: var(--ink);
}

.header--scrolled .header__logo-dark { display: block; }
.header--scrolled .header__logo-light { display: none; }

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
}

.header__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header__logo {
    max-height: 48px;
    width: auto;
}

.header__logo-light { display: none; }

/* Slaytın üzerindeyken logo açık renk olduğu için, açık renkli bir
   fotoğrafa denk geldiğinde kaybolmasın diye hafif gölge veriliyor. */
.header--overlay .header__logo-light {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)) drop-shadow(0 3px 14px rgba(0, 0, 0, .4));
}

.header__wordmark {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: .02em;
    color: inherit;
}

.header__wordmark span { color: var(--accent); }

.header__nav { display: none; }

.header__link {
    position: relative;
    padding: .35rem 0;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ink);
    transition: color .2s var(--ease);
}

.header__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width .3s var(--ease);
}

.header__link:hover::after,
.header__link.is-active::after {
    width: 100%;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
}

/* Dil değiştirici */
.lang {
    display: flex;
    align-items: center;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    overflow: hidden;
    opacity: .85;
}

.lang__btn {
    padding: .3rem .55rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--ink);
    background: none;
    border: 0;
    text-transform: uppercase;
}

.lang__btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Mobil menü — tam ekran açılır */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 20px 2.5rem;
    background: var(--paper);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .38s var(--ease), visibility .38s;
    overflow-y: auto;
}

.mobile-nav.is-open {
    transform: translateX(0);
    visibility: visible;
}

.mobile-nav__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--header-h) - 1.25rem);
    margin-bottom: 1.5rem;
}

.mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav__list a {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink);
}

.mobile-nav__foot {
    margin-top: auto;
    padding-top: 2rem;
    display: grid;
    gap: .5rem;
    font-size: .95rem;
}

.mobile-nav__foot a { color: var(--muted); }

body.is-locked { overflow: hidden; }

/* ---------- Slayt ---------- */

.hero {
    position: relative;
    min-height: max(440px, 62vh);
    min-height: max(440px, 62svh);
    display: grid;
    background: var(--ink);
    isolation: isolate;
}

/* Slaytlar aynı ızgara hücresine üst üste konur; böylece panelden uzun metin
   girildiğinde bant en uzun slayt kadar uzar, metin alttaki bölüme taşmaz. */
.hero__slide {
    grid-area: 1 / 1;
    position: relative;
    display: grid;
    opacity: 0;
    transition: opacity 1s var(--ease);
    pointer-events: none;
}

.hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 8s linear;
}

.hero__slide.is-active .hero__media img { transform: scale(1); }

.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 12, 16, .55) 0%, rgba(10, 12, 16, .3) 40%, rgba(10, 12, 16, .82) 100%);
}

.hero__body {
    position: relative;
    z-index: 2;
    align-self: end;
    width: 100%;
    padding-bottom: clamp(3rem, 8vw, 6rem);
    padding-top: calc(var(--header-h) + 3rem);
    color: #fff;
}

.hero__text { max-width: 720px; }

.hero__title {
    color: #fff;
    margin-bottom: 1rem;
}

.hero__subtitle {
    max-width: 540px;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    color: rgba(255, 255, 255, .82);
    margin-bottom: 2rem;
}

/* Alt metin panelden HTML olarak gelebilir. */
.hero__subtitle p { margin: 0 0 .6em; }
.hero__subtitle > :last-child { margin-bottom: 0; }
.hero__subtitle a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero__subtitle strong { color: #fff; }

.hero__dots {
    position: absolute;
    left: 20px;
    bottom: calc(clamp(1.25rem, 3vw, 2rem) - 10px);
    z-index: 3;
    display: flex;
    gap: .5rem;
}

/* Çizgi 3px ama dokunma alanı 24px; telefonda parmakla tutturulabilsin. */
.hero__dot {
    position: relative;
    width: 28px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.hero__dot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    background: rgba(255, 255, 255, .35);
    transition: background-color .3s var(--ease);
}

.hero__dot.is-active::before { background: #fff; }

/* Slayt yoksa sade bir başlık bandı gösterilir. */
.page-hero {
    position: relative;
    padding: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) 0 clamp(2.5rem, 5vw, 4rem);
    background: var(--sand);
    border-bottom: 1px solid var(--line);
}

/* Kategori sayfasında başlığın altındaki açıklama (panelden HTML olarak gelir). */
.page-hero__intro {
    max-width: 640px;
    margin-top: 1rem;
}

.page-hero__intro strong { color: var(--ink); }

.page-hero--image {
    background: var(--ink);
    border-bottom: 0;
}

.page-hero--image .page-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.page-hero--image .page-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .45;
}

.page-hero--image .container { position: relative; z-index: 2; }
.page-hero--image h1 { color: #fff; }
.page-hero--image .breadcrumb, .page-hero--image .breadcrumb a { color: rgba(255, 255, 255, .7); }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    font-size: .8rem;
    color: var(--muted);
}

.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-hidden] { opacity: .5; }

/* ---------- Kartlar ---------- */

.grid {
    display: grid;
    gap: 1.25rem;
}

/* Izgara öğeleri varsayılan olarak içeriklerinden dar olamaz; tek satıra
   zorlanan bir metin sütunu şişirip sütunları eşitsiz yapıyordu. */
.grid > * { min-width: 0; }

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }

/* Sütun sayısı kart adedine göre view tarafında hesaplanıp değişken olarak
   veriliyor; burada sadece kırılım başına hangi değişkenin okunacağı yazılı. */
.grid--balanced { grid-template-columns: 1fr; }

.card-category {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--sand-deep);
    aspect-ratio: 3 / 4;
}

.card-category img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}

.card-category:hover img { transform: scale(1.05); }

.card-category::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(10, 12, 16, .78) 100%);
}

.card-category__body {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 1.25rem;
    color: #fff;
}

.card-category__title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    line-height: 1.2;
}

.card-category__count {
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
}

.card-product {
    display: flex;
    flex-direction: column;
    /* Kartlar bir sarmalayıcının içinde duruyor; kendi doğal yükseklikleriyle
       kalırlarsa aynı satırdaki kartlar farklı boyda görünüyor. */
    height: 100%;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}

.card-product:hover {
    border-color: var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.card-product__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--sand);
}

.card-product__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}

.card-product:hover .card-product__media img { transform: scale(1.04); }

.card-product__body {
    padding: 1rem 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1;
}

.card-product__cat {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    /* Uzun kategori adı ikinci satıra taşıp kartı büyütmesin. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-product__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);

    /* Ürün adı kartın boyunu belirlemesin: uzun adlar iki satırda kesilir,
       kısa adlarda da iki satırlık yer ayrılır. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.card-product__meta {
    margin-top: auto;
    padding-top: .6rem;
    font-size: .82rem;
    color: var(--muted);
    /* Kumaş bilgisi tek satırda kalsın; dar kartlarda iki satıra taşıyıp
       kartı büyütüyordu. Tamamı ürün detayında zaten görünüyor. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, var(--sand), var(--sand) 10px, var(--sand-deep) 10px, var(--sand-deep) 20px);
    color: var(--muted);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---------- Rakamlar ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.stat {
    padding: 1.75rem 1.25rem;
    background: var(--paper);
    text-align: center;
}

.section--ink .stats { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .12); }
.section--ink .stat { background: var(--ink); }

.stat__value {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1;
    color: var(--accent);
}

.stat__label {
    margin-top: .5rem;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.section--ink .stat__value { color: var(--accent-light); }
.section--ink .stat__label { color: rgba(255, 255, 255, .6); }

/* ---------- Hizmetler ---------- */

.service-card {
    padding: 1.75rem 1.5rem;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    height: 100%;
    transition: border-color .3s var(--ease), transform .3s var(--ease);
}

.service-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}

.service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.service-card h3 { margin-bottom: .4rem; }

/* Açıklama panelden HTML olarak giriliyor: <p>, <br>, <ul> gibi etiketler
   kart tipografisine uysun diye stil kapsayıcıya veriliyor. */
.service-card__text {
    font-size: .92rem;
    color: var(--muted);
}

.service-card__text > :first-child { margin-top: 0; }
.service-card__text > :last-child { margin-bottom: 0; }
.service-card__text p { margin-bottom: .6rem; }
.service-card__text ul, .service-card__text ol { margin-bottom: .6rem; padding-left: 1.15rem; }
.service-card__text li { margin-bottom: .3rem; }
.service-card__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Süreç ---------- */

.process {
    counter-reset: step;
    display: grid;
    gap: 1.5rem;
}

.process__item {
    position: relative;
    padding-left: 3.5rem;
    counter-increment: step;
}

.process__item::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -.2rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--accent);
}

.process__item h3 { font-size: 1.05rem; margin-bottom: .25rem; }

/* Adım açıklaması panelden HTML olarak giriliyor. */
.process__text { font-size: .9rem; color: var(--muted); }
.process__text > :first-child { margin-top: 0; }
.process__text > :last-child { margin-bottom: 0; }
.process__text p { margin-bottom: .6rem; }
.process__text ul, .process__text ol { margin-bottom: .6rem; padding-left: 1.15rem; }
.process__text li { margin-bottom: .3rem; }
.process__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Logo şeridi ---------- */

.logo-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.logo-strip__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 1.25rem;
    background: var(--paper);
}

.logo-strip__item img {
    max-height: 46px;
    width: auto;
    filter: grayscale(1);
    opacity: .62;
    transition: filter .3s var(--ease), opacity .3s var(--ease);
}

.logo-strip__item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* Ortalanmış logo dizisi (ana sayfadaki sertifika ve çözüm ortağı logoları,
   Sürdürülebilirlik sayfasındaki sertifikalar).
   Grid yerine flex: sayı az olduğunda kutular sola yaslanıp gri boş hücre
   bırakmak yerine ortada yan yana durur; sığmayanlar alt satıra geçip yine
   ortalanır. Kutu, zemin ve kenarlık yok; logolar renkli ve büyük. */
.logo-strip--centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    background: none;
    border: 0;
}

.logo-strip--centered .logo-strip__item {
    flex: 0 1 200px;
    min-height: 0;
    padding: .5rem;
    background: none;
}

.logo-strip--centered .logo-strip__item img {
    max-height: 120px;
    max-width: 100%;
    filter: none;
    opacity: 1;
}

/* ---------- Metin + görsel bloğu ---------- */

.split {
    display: grid;
    gap: 2rem;
    align-items: center;
}

/* Görsel yüklenmemiş tanıtım bloğu. İki sütunluk düzende metin sol yarıda
   kalıp sağ yarıyı boş bırakıyordu; görsel yokken blok tek sütuna iner,
   sayfanın ortasına yerleşir ve satırları da ortalanır. */
.split--centered {
    justify-items: center;
    text-align: center;
}

.split--centered > * {
    max-width: 760px;
}

.split__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.rich-text {
    font-size: 1.02rem;
    color: var(--ink-soft);
}

/* Ana sayfadaki tanıtım blokları da panelden HTML olarak geliyor; paragraf ve
   listelerin aralığı bölüm tipografisine göre ayarlanıyor. */
.section-text > :first-child { margin-top: 0; }
.section-text > :last-child { margin-bottom: 0; }
.section-text p { margin-bottom: .9rem; }
.section-text ul, .section-text ol { margin-bottom: .9rem; padding-left: 1.25rem; }
.section-text li { margin-bottom: .4rem; }
.section-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.rich-text h2, .rich-text h3 { margin-top: 1.8em; }
.rich-text h2:first-child, .rich-text h3:first-child { margin-top: 0; }
.rich-text ul, .rich-text ol { padding-left: 1.25rem; }
.rich-text li { margin-bottom: .45rem; }
.rich-text img { margin: 1.5rem 0; }
.rich-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Ürün listesi ----------
   Site sourcing tanıtımı yapıyor, satış değil: ürünler vitrin kartları yerine
   tam genişlikte satırlar hâlinde duruyor. Görsel ile metin yan yana, satırlar
   sırayla bir sağa bir sola yerleşiyor. */

.product-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-bottom: 1.25rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    border-bottom: 1px solid var(--line);
}

.product-filter__cats {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
}

.product-filter__cats a {
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: .2rem;
    border-bottom: 1px solid transparent;
    transition: color .2s var(--ease), border-color .2s var(--ease);
}

.product-filter__cats a:hover { color: var(--ink); }

.product-filter__cats a.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.product-filter__search {
    display: flex;
    gap: .5rem;
    flex: 0 1 280px;
}

.product-filter__search input {
    flex: 1;
    min-width: 0;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    font: inherit;
    font-size: .9rem;
    color: var(--ink);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.product-filter__search input:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.product-filter__summary {
    margin-top: -2rem;
    margin-bottom: 2.5rem;
    font-size: .86rem;
    color: var(--muted);
}

.product-filter__summary a {
    margin-left: .75rem;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.product-rows {
    display: grid;
    gap: clamp(3rem, 7vw, 5.5rem);
}

.product-row {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    /* Kategori bağlantısıyla (#triko) gelindiğinde satır sabit başlığın altında kalmasın. */
    scroll-margin-top: calc(var(--header-h) + 24px);
}

.product-row__media {
    position: relative;
    overflow: hidden;
    background: var(--sand-deep);
}

/* Ana sayfadaki kategori kartlarıyla (.card-category) aynı 3:4 dikey oran;
   aynı fotoğraf iki yerde de aynı kırpılır. Burada sadece daha büyük görünür. */
.product-row__media img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.product-row:hover .product-row__media img { transform: scale(1.03); }

/* Görseli olmayan ürün: kutu boş kalmasın diye marka kısaltması yazılır. */
.product-row__media .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: .2em;
    color: var(--accent-light);
}

.product-row__body h2 {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    margin-bottom: .6rem;
}

.product-row__text {
    color: var(--muted);
    margin-bottom: 1.25rem;
}

.product-row__text > :first-child { margin-top: 0; }
.product-row__text > :last-child { margin-bottom: 0; }
.product-row__text p { margin-bottom: .7rem; }
.product-row__text ul, .product-row__text ol { margin-bottom: .7rem; padding-left: 1.25rem; }

/* Kod / kumaş / renk: iki sütunlu ince bir künye. */
.product-row__specs {
    margin: 0 0 1.5rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem 1.25rem;
    font-size: .88rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.product-row__specs dt {
    color: var(--muted);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    align-self: center;
}

.product-row__specs dd {
    margin: 0;
    color: var(--ink);
}

.catalog {
    display: grid;
    gap: 2rem;
    align-items: start;
}

.filters {
    background: var(--sand);
    border: 1px solid var(--line);
    padding: 1.25rem;
}

.filters__group + .filters__group {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.filters__title {
    margin-bottom: .75rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
}

.filters__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .1rem;
}

.filters__list a {
    display: block;
    padding: .4rem 0;
    font-size: .92rem;
    color: var(--muted);
    transition: color .2s var(--ease), padding-left .2s var(--ease);
}

.filters__list a:hover { color: var(--ink); padding-left: .25rem; }

.filters__list a.is-active {
    color: var(--accent);
    font-weight: 500;
}

.filters__list--sub {
    margin-top: .25rem;
    padding-left: .85rem;
    border-left: 1px solid var(--line);
}

.filters__search {
    display: flex;
    gap: .5rem;
}

/* Arama kutusu dar panelde daralabilmeli; yoksa tarayıcının varsayılan
   genişliği (yaklaşık 177px) butonu panelin dışına itiyor. */
.filters__search input {
    flex: 1;
    min-width: 0;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    font: inherit;
    font-size: .9rem;
    color: var(--ink);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.filters__search input:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.filters__search button { flex: 0 0 auto; }

.catalog__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    font-size: .88rem;
    color: var(--muted);
}

.filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border: 1px solid var(--line);
    background: var(--paper);
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.empty-state {
    padding: clamp(3rem, 8vw, 5rem) 1.5rem;
    text-align: center;
    border: 1px dashed var(--line);
    background: var(--sand);
}

.empty-state h3 { margin-bottom: .35rem; }
.empty-state p { color: var(--muted); }

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin-top: 3rem;
}

.pagination a,
.pagination span {
    min-width: 42px;
    padding: .55rem .75rem;
    border: 1px solid var(--line);
    text-align: center;
    font-size: .88rem;
    color: var(--ink);
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.pagination a:hover { border-color: var(--ink); }

.pagination .is-current {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.pagination .is-disabled { opacity: .4; }

/* ---------- Ürün detay ---------- */

.product-detail {
    display: grid;
    gap: 2rem;
    align-items: start;
}

.product-detail__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--sand);
}

.product-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Ürün görseli: yakınlaştırma ve büyütme ---------- */

.product-zoom {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
}

/* Yakınlaştırma, imlecin durduğu noktayı merkez alarak yapılır;
   merkez noktayı JavaScript transform-origin ile veriyor. */
.product-zoom img {
    transition: transform .35s var(--ease);
    will-change: transform;
}

.product-zoom.is-zoomed img {
    transform: scale(1.8);
    transition: transform .12s linear;
}

.product-zoom__hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transition: opacity .25s var(--ease);
}

.product-zoom.is-zoomed .product-zoom__hint { opacity: 0; }

/* Dokunmatik cihazlarda "üzerine gelme" yok; orada yalnızca tıklayınca büyür. */
@media (hover: none) {
    .product-zoom { cursor: pointer; }
    .product-zoom.is-zoomed img { transform: none; }
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(10, 12, 16, .92);
    cursor: zoom-out;
}

.lightbox[hidden] { display: none; }

/* Tam ekranda da tıklayarak yakınlaştırılabilir; imleç büyüteç olur. */
.lightbox__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform .25s var(--ease);
}

.lightbox__image.is-zoomed {
    transform: scale(1.8);
    cursor: zoom-out;
    transition: transform .12s linear;
}

.lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .2s var(--ease);
}

.lightbox__close:hover { background: rgba(255, 255, 255, .14); }

.product-detail__code {
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

.spec-table {
    width: 100%;
    margin: 1.75rem 0;
    border-collapse: collapse;
    font-size: .95rem;
}

.spec-table th,
.spec-table td {
    padding: .8rem .25rem;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}

.spec-table th {
    width: 40%;
    font-weight: 500;
    color: var(--muted);
}

.spec-table td { color: var(--ink); }

/* ---------- Formlar ---------- */

.form-grid {
    display: grid;
    gap: 1rem;
}

.field label {
    display: block;
    margin-bottom: .4rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    font: inherit;
    font-size: .95rem;
    color: var(--ink);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field textarea {
    min-height: 130px;
    resize: vertical;
}

/* Satır boşluğu 0: etiket ile kutu arasındaki mesafeyi diğer alanlarda olduğu
   gibi yalnızca etiketin kendi alt boşluğu belirlesin. Aksi halde telefon alanı
   yanındaki alandan bir tık aşağıda başlıyor. */
.field--phone {
    display: grid;
    grid-template-columns: 118px 1fr;
    column-gap: .5rem;
    row-gap: 0;
}

.field--phone label,
.field--phone .field__error { grid-column: 1 / -1; }

.field__error {
    display: block;
    margin-top: .35rem;
    font-size: .8rem;
    color: #b3261e;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: #b3261e;
}

/* Bot tuzağı — ekranda hiç görünmez ama ekran okuyucudan da gizlenir. */
.honeypot {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.form-note {
    font-size: .82rem;
    color: var(--muted);
}

.alert {
    padding: 1rem 1.15rem;
    border-left: 3px solid;
    background: var(--sand);
    font-size: .95rem;
}

.alert--success {
    border-color: #2e7d55;
    background: #eef7f1;
    color: #1e5c3d;
}

.alert--error {
    border-color: #b3261e;
    background: #fdeeed;
    color: #8c1d18;
}

/* ---------- İletişim ---------- */

.contact-grid {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

.contact-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.contact-list__item {
    display: flex;
    gap: .9rem;
}

.contact-list__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.contact-list__label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.contact-list__value { color: var(--ink); }

.map-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--sand);
    overflow: hidden;
}

.map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- CTA bandı ---------- */

.cta {
    position: relative;
    padding: clamp(3rem, 7vw, 5.5rem) 0;
    background: var(--ink);
    color: #fff;
    text-align: center;
}

.cta h2 { color: #fff; }
.cta p { max-width: 560px; margin: 0 auto 2rem; color: rgba(255, 255, 255, .72); }

/* ---------- Footer ---------- */

.footer {
    padding: clamp(3rem, 6vw, 4.5rem) 0 0;
    /* Logodaki "TEKSTİL" yazısını çevreleyen ince taupe çizginin karşılığı. */
    border-top: 2px solid var(--accent);
    background: var(--ink);
    color: rgba(255, 255, 255, .66);
    font-size: .92rem;
}

.footer a { color: rgba(255, 255, 255, .66); transition: color .2s var(--ease); }
.footer a:hover { color: #fff; }

.footer__grid {
    display: grid;
    gap: 2.25rem;
    padding-bottom: 2.5rem;
}

.footer__title {
    margin-bottom: 1rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
}

.footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
}

.footer__brand-text {
    max-width: 320px;
    margin-top: 1rem;
}

.footer__logo { max-height: 48px; margin-bottom: 1rem; }

.footer__social {
    display: flex;
    gap: .6rem;
    margin-top: 1.25rem;
}

.footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
}

.footer__social a:hover {
    background: var(--accent-light);
    border-color: var(--accent-light);
    color: var(--ink);
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .82rem;
}

/* WhatsApp düğmesi */
.whatsapp-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: var(--shadow);
    transition: transform .25s var(--ease);
}

.whatsapp-fab:hover { transform: scale(1.06); }

/* ---------- Talep formu arka planı ----------
   Panelden (Site Ayarları → Görünüm) verilir. Arka plan seçilmediyse bu sınıf
   hiç basılmaz ve form sayfanın kendi zemininde kalır. */

/* Arka plan bölümün tamamına, kenardan kenara uygulanır. */
.form-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Görsel kullanıldığında yazılar okunur kalsın diye açık bir perde.
   Düşürülürse fotoğraf daha çok görünür ama yazılar zorlaşır. */
.form-bg--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .75);
}

.form-bg > * { position: relative; z-index: 1; }

/* Koyu bir renk seçildiğinde yazılar okunmaz oluyordu; renk açık mı koyu mu
   sunucuda hesaplanıp bu sınıf ekleniyor. */
.form-bg--dark,
.form-bg--dark h2,
.form-bg--dark h3,
.form-bg--dark p,
.form-bg--dark .field label,
.form-bg--dark .contact-list__value,
.form-bg--dark .contact-list__value a { color: #f2f4f6; }

.form-bg--dark .eyebrow { color: var(--accent-light); }
.form-bg--dark .contact-list__label { color: rgba(242, 244, 246, .62); }
.form-bg--dark .field__error { color: #ffa9a9; }

.form-bg--dark .contact-list__icon {
    border-color: rgba(242, 244, 246, .28);
    color: #f2f4f6;
}

.form-bg--dark .btn--outline {
    border-color: rgba(242, 244, 246, .45);
    color: #f2f4f6;
}

.form-bg--dark .btn--outline:hover {
    background: #f2f4f6;
    border-color: #f2f4f6;
    color: var(--ink);
}

/* ---------- Hata sayfası ---------- */

.error-page {
    display: grid;
    place-items: center;
    min-height: 70vh;
    padding: calc(var(--header-h) + 3rem) 0 4rem;
    text-align: center;
}

.error-page__code {
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 16vw, 9rem);
    line-height: 1;
    /* line-height 1 olduğu için rakamın altında hiç boşluk kalmıyor;
       başlıkla arasındaki mesafe buradan veriliyor. */
    margin-bottom: 1rem;
    color: var(--sand-deep);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2rem;
}

/* ---------- Hakkımızda ----------
   Solda metin, sağda eğik kesimli görsel paneli: sağ üstte krem zeminli logo,
   sağ altta lacivert zeminli slogan. Altında hizmet ikonları ve fotoğraf şeridi.
   Görsel paneli masaüstünde ekranın sağ kenarına kadar taşar; metin ise
   .container ile aynı sol hizadan başlar (--about-gutter). */

.about-intro {
    --about-gutter: 24px;
    padding-top: var(--header-h);
    background: var(--sand);
}

.about-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.about-intro__text {
    padding: clamp(2.5rem, 6vw, 4rem) var(--about-gutter) 2.5rem;
}

.about-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent);
}

.about-intro__eyebrow::after {
    content: "";
    width: 56px;
    height: 1px;
    background: var(--accent-light);
}

.about-intro h1 {
    margin-bottom: 1.5rem;
    font-size: clamp(2.3rem, 4.6vw, 3.5rem);
}

.about-intro .rich-text {
    font-size: 1.02rem;
    line-height: 1.7;
}

.about-intro .rich-text p { margin-bottom: 1.35em; }

.about-intro__rule {
    display: block;
    width: 96px;
    height: 1px;
    margin-top: 2rem;
    background: var(--accent-light);
}

.about-visual {
    /* Dar ekranda yükseklik yalnızca en-boy oranından gelir. Buraya min-height
       eklenirse grid, oranı koruyabilmek için kutuyu ekrandan geniş hesaplıyor
       ve sayfa sağa taşıp beyaz bir şerit bırakıyordu. */
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ink);
}

.about-visual__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sağ üstteki krem üçgen ve logo. */
.about-visual__brand {
    position: absolute;
    top: 0;
    right: 0;
    width: 52%;
    height: 52%;
    display: flex;
    justify-content: flex-end;
    padding: 6% 7% 0 0;
    background: var(--sand);
    clip-path: polygon(24% 0, 100% 0, 100% 67%, 0 100%);
}

.about-visual__brand img {
    width: 62%;
    max-width: 240px;
    height: auto;
    align-self: flex-start;
}

/* Sağ alttaki lacivert panel ve slogan. */
.about-visual__tagline {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 66%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12% 7% 0 0;
    background: linear-gradient(160deg, rgba(30, 40, 51, .96), rgba(30, 40, 51, .82));
    clip-path: polygon(0 26%, 100% 0, 100% 100%, 34% 100%);
}

.about-visual__tagline p {
    position: relative;
    margin: 0;
    padding: 1.1rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: var(--font-display);
    font-size: clamp(.95rem, 1.8vw, 1.6rem);
    line-height: 1.3;
    color: #fff;
    text-align: right;
}

.about-visual__tagline p::before,
.about-visual__tagline p::after {
    content: "";
    position: absolute;
    right: 0;
    width: 64px;
    height: 1px;
    background: rgba(255, 255, 255, .6);
}

.about-visual__tagline p::before { top: 0; }
.about-visual__tagline p::after { bottom: 0; background: var(--accent-light); }

/* Hizmet ikonları: dar ekranda iki, tablette dört, masaüstünde yedi sütun. */
.about-pillars {
    padding: clamp(2rem, 4vw, 2.75rem) 0;
    background: var(--sand);
    border-top: 1px solid var(--line);
}

/* Grid yerine flex: satır sayısı tek kaldığında (telefonda 7. ikon, tablette
   alttaki 3 ikon) son satır sola yaslanmak yerine ortalanır. */
.about-pillars__list {
    --pillar-cols: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-pillar {
    flex: 0 0 calc(100% / var(--pillar-cols));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    padding: 0 .75rem;
    text-align: center;
}

.about-pillar__icon {
    color: var(--accent);
    line-height: 0;
}

.about-pillar__icon svg {
    width: 44px;
    height: 44px;
    stroke-width: 1.1;
}

.about-pillar__label {
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
}

/* Fotoğraf şeridi. Beş görsel her ekran boyutunda eşit genişlikte yan yana
   durur; yükseklik ekran genişliğiyle birlikte ölçeklenir. */
.about-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding-bottom: 4px;
    background: var(--paper);
}

.about-strip__item {
    height: clamp(110px, 17vw, 280px);
    overflow: hidden;
    background: var(--sand-deep);
}

.about-strip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}

.about-strip__item:hover img { transform: scale(1.04); }

/* Sürdürülebilirlik: Hakkımızda düzeninin aynası. Görsel solda, eğik kenarı
   sağda; logo sol üstteki krem köşede (metin uzadıkça görsel de uzadığı için
   alt köşe ilk ekranda görünmüyordu). Dar ekranda görsel metnin üstünde durur. */
.about-visual__brand--left {
    right: auto;
    left: 0;
    justify-content: flex-start;
    padding: 6% 0 0 7%;
    clip-path: polygon(0 0, 76% 0, 100% 100%, 0 62%);
}

@media (min-width: 900px) {
    /* Uzun görselde köşe orantılı büyüyüp logoyu şişirmesin diye sabit tavan. */
    .about-visual__brand--left { height: min(52%, 340px); }
}

/* Hizmetler: her hizmet bir satır. Görsel ve metin yan yana, satırlar sırayla
   yer değiştirir; görselin metne bakan kenarı eğik kesilir. */
.service-rows {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    background: var(--paper);
}

.service-rows .section-head h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.service-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--sand);
}

.service-row + .service-row { margin-top: clamp(1.5rem, 4vw, 3rem); }

.service-row__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--sand-deep);
}

.service-row__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease);
}

.service-row:hover .service-row__media img { transform: scale(1.04); }

.service-row__body {
    padding: 1.75rem 1.5rem 2.25rem;
}

.service-row__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.service-row__num {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--accent-light);
}

.service-row__head::after {
    content: "";
    flex: 1;
    max-width: 72px;
    height: 1px;
    order: 1;
    background: var(--accent-light);
}

.service-row__icon {
    order: 2;
    color: var(--accent);
    line-height: 0;
}

.service-row__icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.2;
}

.service-row h3 {
    margin-bottom: .9rem;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    font-weight: 400;
}

.service-row__text {
    font-size: .98rem;
    line-height: 1.7;
    color: var(--ink-soft);
}

.service-row__text > :first-child { margin-top: 0; }
.service-row__text > :last-child { margin-bottom: 0; }

/* Üç ikonlu liste: dar ekranda alt alta, tablet ve üstünde yan yana. */
.about-pillars__list--3 {
    --pillar-cols: 1;
    max-width: 960px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .about-intro { --about-gutter: 32px; }
    .about-pillars__list { --pillar-cols: 4; }
    .about-pillars__list--3 { --pillar-cols: 3; }
    .about-pillars__list--3 .about-pillar + .about-pillar { border-left: 1px solid var(--line); }
}

@media (min-width: 900px) {
    .about-intro {
        /* Metin geniş ekranda .container hizasına çekilmez, sola yakın başlar;
           böylece satırlar uzar ve metin aşağı doğru fazla sarkmaz. */
        --about-gutter: clamp(48px, 7vw, 140px);
    }

    .about-intro__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .about-intro__text {
        padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1rem, 1.5vw, 1.5rem) clamp(2.5rem, 4vw, 3.5rem) var(--about-gutter);
    }

    .about-intro__text .rich-text {
        max-width: 820px;
        font-size: .98rem;
    }

    .about-visual {
        aspect-ratio: auto;
        min-height: 560px;
        /* Sol kenar eğik kesilir, metnin yanına doğru açılır. */
        clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
    }

    /* Ayna düzen: görsel solda, metin sağda ve dikeyde ortalı. */
    .about-intro--reverse .about-intro__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }

    .about-intro--reverse .about-intro__text {
        align-self: center;
        padding: clamp(2.5rem, 4vw, 3.5rem) var(--about-gutter) clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
    }

    .about-intro--reverse .about-visual {
        clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
    }

    .service-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        align-items: center;
    }

    .service-row__media {
        align-self: stretch;
        aspect-ratio: auto;
        min-height: 400px;
        clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
    }

    .service-row__body {
        padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 1.5rem);
    }

    .service-row--reverse {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .service-row--reverse .service-row__media {
        order: 2;
        clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
    }

    .service-row--reverse .service-row__body {
        padding-left: clamp(2rem, 4vw, 4rem);
        padding-right: clamp(1rem, 2vw, 1.5rem);
    }
}

@media (min-width: 1100px) {
    .about-pillars__list { --pillar-cols: 7; }
    .about-pillars__list--3 { --pillar-cols: 3; }

    .about-pillar + .about-pillar { border-left: 1px solid var(--line); }
}

/* ---------- Ana sayfa tanıtım blokları (Biz Kimiz, Sürdürülebilirlik) ----------
   İç sayfalardaki düzenin sade hâli: görsel ekran kenarına kadar uzanır ve
   metne bakan kenarı eğik kesilir; logo ve slogan yoktur. Metin, sayfadaki
   diğer bölümlerle aynı hizada (.container içerik kenarı) başlar. */

.section.feature {
    --feature-gutter: 24px;
    padding: 0;
}

.feature__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.feature__text {
    padding: clamp(3rem, 8vw, 4.5rem) var(--feature-gutter);
}

.feature__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sand-deep);
}

.feature__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.feature:hover .feature__media img { transform: scale(1.03); }

.feature__text .link-arrow { margin-top: 1.5rem; }

@media (min-width: 640px) {
    .section.feature { --feature-gutter: 32px; }
}

@media (min-width: 900px) {
    .section.feature {
        --feature-gutter: max(32px, calc((100vw - 1280px) / 2 + 32px));
    }

    .feature__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        min-height: 520px;
    }

    .feature__text {
        align-self: center;
        max-width: calc(640px + var(--feature-gutter));
        padding: clamp(3.5rem, 6vw, 5.5rem) clamp(2rem, 4vw, 4rem) clamp(3.5rem, 6vw, 5.5rem) var(--feature-gutter);
    }

    .feature__media {
        aspect-ratio: auto;
        clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    }

    .feature--reverse .feature__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    }

    .feature--reverse .feature__text {
        padding-left: clamp(2rem, 4vw, 4rem);
        padding-right: var(--feature-gutter);
    }

    .feature--reverse .feature__media {
        clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
    }
}

/* ---------- Görünüme girince beliren bloklar ---------- */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

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

    .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Büyük ekran düzenlemeleri
   ========================================================================== */

@media (min-width: 640px) {
    .container { padding: 0 32px; }
    .hero__dots { left: 32px; }
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(3, 1fr); }
    .grid--balanced { grid-template-columns: repeat(var(--cols-sm, 2), 1fr); }
    .grid--categories { grid-template-columns: repeat(var(--cols-sm, 3), 1fr); }
    .stats { grid-template-columns: repeat(4, 1fr); }
    .logo-strip { grid-template-columns: repeat(3, 1fr); }
    .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .form-grid--2 .field--full { grid-column: 1 / -1; }

    /* Tablette satır hâlâ tek sütun; dikey görsel tüm ekranı kaplıyordu. */
    .product-row__media img, .product-row__media .placeholder { aspect-ratio: 3 / 2; }
    .footer__grid { grid-template-columns: repeat(2, 1fr); }
    .process { grid-template-columns: repeat(var(--cols-sm, 2), 1fr); }
}

@media (min-width: 900px) {
    :root { --header-h: 84px; }

    /* Masaüstünde slayt metni üstte, başlığın hemen altında başlar. */
    .hero__body { align-self: start; }

    .header__nav {
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    .header__toggle { display: none; }

    .grid { gap: 1.75rem; }
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
    .grid--balanced { grid-template-columns: repeat(var(--cols-lg, 3), 1fr); }
    .grid--categories { grid-template-columns: repeat(var(--cols-lg, 4), 1fr); }

    .split--has-media { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
    .split--reverse .split__media { order: 2; }

    .catalog { grid-template-columns: 260px 1fr; gap: 3rem; }

    /* Dikey görsel yarım sütunda fazla uzuyordu; görsel sütunu biraz daha dar. */
    .product-row { grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
    .product-row__media img, .product-row__media .placeholder { aspect-ratio: 3 / 4; }
    .product-row--reverse { grid-template-columns: 1.1fr .9fr; }
    .product-row--reverse .product-row__media { order: 2; }
    .filters { position: sticky; top: calc(var(--header-h) + 24px); }
    .filters-toggle { display: none; }

    .product-detail { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
    .product-detail__media { position: sticky; top: calc(var(--header-h) + 24px); }

    .contact-grid { grid-template-columns: 1fr 1.2fr; gap: 4rem; }

    .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }

    .process { grid-template-columns: repeat(var(--cols-lg, 5), 1fr); }
    .logo-strip { grid-template-columns: repeat(5, 1fr); }

    .whatsapp-fab { right: 24px; bottom: 24px; width: 56px; height: 56px; }
}

@media (min-width: 1200px) {
    .grid--4 { gap: 2rem; }
    .hero { min-height: max(520px, 70vh); min-height: max(520px, 70svh); }
}

/* Mobilde filtre paneli açılır kutu gibi davranır. */
@media (max-width: 899px) {
    .filters {
        display: none;
    }

    .filters.is-open {
        display: block;
    }
}