/* Berber Konsept · Direk (Konsept C). Kaynak: design/v3-direk/*.dc.html. Renk ve font token'ları tokens.css'te. */

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--beyaz); color: var(--lacivert); font-family: var(--font-govde); font-size: 17px; line-height: 1.5; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--kirmizi); text-underline-offset: 6px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--kirmizi); outline-offset: 3px; box-shadow: 0 0 0 3px var(--beyaz); }
input::placeholder { color: var(--soluk); opacity: 1; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.atla { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--kirmizi); color: var(--beyaz); padding: 12px 20px; font-weight: 600; }
.atla:focus { top: 16px; }
.kap { max-width: var(--kap); margin: 0 auto; padding-left: var(--kenar); padding-right: var(--kenar); }
.ik { flex: 0 0 auto; }

/* Berber direği şeridi */
.direk-serit { display: block; background-image: var(--direk); }
.direk-10 { height: 10px; }
.direk-14 { height: 14px; }
.direk-16 { height: 16px; }
.direk-24 { height: 24px; }

/* ---------- Tipografi ---------- */
.h1, .h2, .h2-43, .h3, .h3-37 { font-family: var(--font-baslik); font-weight: 800; letter-spacing: -0.01em; }
.h1 { font-size: 90px; line-height: 0.88; }
.h1-103 { font-size: 103px; line-height: 0.86; }
.h1-102 { font-size: 102px; }
.h1-76 { font-size: 76px; }
.h2 { font-size: 71px; line-height: 0.88; }
.h2-76 { font-size: 76px; }
.h2-60 { font-size: 60px; }
.h2-54 { font-size: 54px; }
.h2-43 { font-size: 43px; line-height: 0.95; }
.h3 { font-size: 30px; line-height: 1; letter-spacing: 0; }
.h3-37 { font-size: 37px; line-height: 1; letter-spacing: 0; margin-bottom: 16px; }
.vurgu { display: inline-block; background: var(--kirmizi); color: var(--beyaz); padding: 0 16px 8px; transform: rotate(-1.5deg); }
.giris { font-size: 18px; line-height: 1.5; max-width: 520px; }
.giris-soluk { color: var(--soluk-koyu); }
.giris-gri { color: var(--soluk); }
.giris-beyaz { color: var(--beyaz); }
.soluk-600 { font-weight: 600; color: var(--soluk); }
.not { margin-top: 16px; font-size: 16px; color: var(--soluk); }
.etiket-beyaz { display: inline-block; background: var(--beyaz); color: var(--lacivert); padding: 4px 16px; font-family: var(--font-baslik); font-weight: 700; font-size: 22px; line-height: 1.3; transform: rotate(-2deg); }
.etiket-25 { font-size: 25px; }
.etiket-lacivert { display: inline-block; background: var(--lacivert); color: var(--beyaz); padding: 4px 12px; font-weight: 600; font-size: 15px; }

/* ---------- Düğmeler ---------- */
.btn { height: 48px; padding: 0 20px; display: inline-flex; align-items: center; gap: 8px; border: 2px solid transparent; font-family: var(--font-baslik); font-weight: 700; font-size: 22px; line-height: 1; cursor: pointer; white-space: nowrap; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn-56 { height: 56px; padding: 0 32px; font-size: 23px; gap: 12px; }
.btn-kirmizi { background: var(--kirmizi); border-color: var(--kirmizi); color: var(--beyaz); }
.btn-lacivert { background: var(--lacivert); border-color: var(--lacivert); color: var(--beyaz); }
.btn-beyaz { background: var(--beyaz); border-color: var(--beyaz); color: var(--lacivert); }
.btn-cizgi { background: var(--beyaz); border-color: var(--lacivert); color: var(--lacivert); }
.btn-cizgi:hover { background: var(--lacivert); color: var(--beyaz); filter: none; }
.btn-beyaz-cizgi { background: transparent; border-color: var(--beyaz); color: var(--beyaz); }
.btn-beyaz-cizgi:hover { background: var(--beyaz); color: var(--lacivert); filter: none; }
.kare { width: 48px; padding: 0; justify-content: center; }
.btn-sira { display: flex; flex-wrap: wrap; gap: 16px; }
.ok-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-baslik); font-weight: 700; font-size: 22px; line-height: 1; }
.ok-link-kirmizi { color: var(--kirmizi); }

/* ---------- Header ---------- */
.ust { background: var(--beyaz); position: relative; z-index: 30; }
.ust-bar { padding-top: 16px; padding-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.logo { display: flex; flex-direction: column; gap: 4px; color: var(--lacivert); flex: 0 0 auto; }
.logo:hover { text-decoration: none; }
.logo-ust { font-family: var(--font-govde); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 0.14em; }
.logo-ad { font-family: var(--font-baslik); font-weight: 800; font-size: 37px; line-height: 0.9; letter-spacing: -0.01em; white-space: nowrap; }
.logo-ad span { color: var(--kirmizi); }
.ust-ara { flex: 1 1 auto; max-width: 480px; display: flex; }
.ust-ara input { flex: 1 1 auto; min-width: 0; height: 48px; border: 2px solid var(--lacivert); border-right: 0; border-radius: 0; background: var(--beyaz); padding: 0 16px; font: 500 17px var(--font-govde); color: var(--lacivert); -webkit-appearance: none; appearance: none; }
.ust-ara button { width: 56px; height: 48px; border: 2px solid var(--lacivert); background: var(--lacivert); color: var(--beyaz); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ust-eylem { flex: 0 0 auto; display: flex; gap: 8px; }
.menu-ac { display: none; }
.ust-nav { background: var(--lacivert); color: var(--beyaz); }
.ust-nav-liste { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; }
.ust-nav-oge { position: relative; }
.ust-nav-oge > a { display: block; padding: 16px 0; font-weight: 600; font-size: 15px; white-space: nowrap; }
.ust-nav-oge > a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--kirmizi); text-underline-offset: 6px; }
.outlet-etiket { padding: 4px 12px !important; margin: 8px 0; background: var(--kirmizi); color: var(--beyaz); font-family: var(--font-baslik); font-weight: 800 !important; font-size: 20px !important; line-height: 1.3; transform: rotate(-3deg); }
.ust-panel { position: absolute; top: 100%; left: -24px; min-width: 300px; background: var(--beyaz); color: var(--lacivert); border: 2px solid var(--lacivert); border-top: 0; padding: 12px 24px 20px; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s .15s; box-shadow: 8px 8px 0 var(--lacivert); }
.ust-nav-oge:last-child .ust-panel, .ust-nav-oge:nth-last-child(2) .ust-panel { left: auto; right: -24px; }
.alt-var:hover .ust-panel, .alt-var:focus-within .ust-panel { visibility: visible; opacity: 1; transform: none; transition: opacity .15s, transform .15s; }
.ust-panel li a { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--soluk-koyu); font-weight: 600; font-size: 16px; }
.ust-panel .adet, .adet { color: var(--soluk); font-weight: 500; }
.ust-panel-tum { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; color: var(--kirmizi); font-family: var(--font-baslik); font-weight: 700; font-size: 20px; }

/* Mobil çekmece */
.cekmece-perde { position: fixed; inset: 0; background: var(--perde); z-index: 60; }
.cekmece { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--beyaz); z-index: 61; overflow-y: auto; display: flex; flex-direction: column; }
.cekmece[hidden], .cekmece-perde[hidden] { display: none; }
.cekmece-ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; }
.logo-kucuk .logo-ad { font-size: 30px; }
.cekmece-liste { padding: 8px 16px; }
.cekmece-liste > li { border-bottom: 2px solid var(--lacivert); }
.cekmece-liste summary, .cekmece-kok { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-family: var(--font-baslik); font-weight: 800; font-size: 27px; line-height: 1; cursor: pointer; list-style: none; }
.cekmece-liste summary::-webkit-details-marker { display: none; }
.cekmece-liste details[open] summary .ik { transform: rotate(180deg); }
.cekmece-liste details ul { padding: 0 0 12px; }
.cekmece-liste details li a { display: block; padding: 8px 0 8px 16px; font-weight: 600; }
.cekmece-outlet { color: var(--kirmizi); }
.cekmece-alt { margin-top: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--zemin-gri); font-weight: 600; }
.cekmece-alt .btn { justify-content: center; }
body.cekmece-acik { overflow: hidden; }

/* ---------- Footer ---------- */
.alt { background: var(--lacivert); color: var(--beyaz); }
.alt-ic { padding-top: 64px; }
.alt-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; }
.alt-baslik { margin: 0 0 16px; font-family: var(--font-baslik); font-weight: 800; font-size: 27px; line-height: 1; }
.alt-liste { display: flex; flex-direction: column; gap: 8px; color: var(--soluk-koyu); }
.alt-liste-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.alt-btn { margin-top: 24px; padding: 0 24px; }
.alt-imza { margin-top: 64px; font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: 0.14em; }
.alt-marka { margin-top: 16px; font-family: var(--font-baslik); font-weight: 800; font-size: 136px; line-height: 0.8; letter-spacing: -0.02em; white-space: nowrap; }
.alt-dip { margin-top: 32px; border-top: 2px solid var(--beyaz); padding: 24px 0 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--soluk-koyu); }
.alt-dip-link { display: flex; gap: 24px; }

/* ---------- Bölümler ---------- */
.bolum { padding: 96px 0; }
.bolum-beyaz { background: var(--beyaz); }
.bolum-lacivert { background: var(--lacivert); color: var(--beyaz); }
.bolum-gri { background: var(--zemin-gri); }
.bolum-48-96 { padding: 48px 0 96px; }
.bolum-56-96 { padding: 56px 0 96px; }
.bolum-64-96 { padding: 64px 0 96px; }
.bolum-96-48 { padding: 96px 0 48px; }
.bolum-80 { padding-top: 80px; padding-bottom: 80px; }
.bolum-96 { padding-top: 96px; padding-bottom: 96px; }
.bolum-64 { padding-top: 64px; padding-bottom: 64px; }
.bolum-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 48px; }
.bolum-bas-sifir { margin-bottom: 0; }
.bolum-bas-h { max-width: 760px; }
.bolum-bas-yan { max-width: 380px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.bolum-bas-alt { margin-top: 24px; max-width: 560px; }
.bant-kirmizi { background: var(--kirmizi); color: var(--beyaz); }
.ikili { display: grid; gap: 64px; align-items: center; }
.ikili-13 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ikili-115 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.ikili-1-11 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
.ikili-12 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
.ikili .giris { margin-top: 24px; }
.uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }

/* ---------- Hero ---------- */
.hero { background: var(--lacivert); color: var(--beyaz); }
.hero-grid { padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: minmax(0, 1.25fr) 80px minmax(0, 1fr); gap: 32px; align-items: stretch; }
.hero-metin { display: flex; flex-direction: column; justify-content: center; gap: 48px; }
.hero-h1 { margin-top: 32px; }
.hero-h1 .vurgu { margin-top: 8px; }
.hero-giris { margin-bottom: 32px; }
.direk-dikey { display: flex; flex-direction: column; align-items: center; }
.direk-dikey span:nth-child(1), .direk-dikey span:nth-child(3) { width: 80px; height: 24px; border-radius: 12px; background: var(--beyaz); }
.direk-dikey span:nth-child(2) { flex: 1 1 auto; width: 56px; margin: -4px 0; background-image: var(--direk); box-shadow: inset 4px 0 0 var(--beyaz), inset -4px 0 0 var(--beyaz); }
.direk-dikey-buyuk span:nth-child(1), .direk-dikey-buyuk span:nth-child(3) { width: 120px; height: 32px; border-radius: 16px; background: var(--lacivert); }
.direk-dikey-buyuk span:nth-child(2) { width: 88px; box-shadow: inset 4px 0 0 var(--lacivert), inset -4px 0 0 var(--lacivert); }
.hero-gorsel { position: relative; min-height: 640px; background: var(--zemin-gri); }
.hero-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-not { position: absolute; left: -24px; bottom: 32px; max-width: 300px; background: var(--kirmizi); color: var(--beyaz); padding: 12px 24px 16px; font-family: var(--font-baslik); font-weight: 800; font-size: 29px; line-height: 1; transform: rotate(-3deg); }
.gorsel-yok { position: absolute; inset: 0; background: var(--zemin-gri); }
.gorsel-yok::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 16px; margin-top: -8px; background-image: var(--direk); opacity: .35; }

/* Tabela şeridi */
.tabela { background: var(--kirmizi); color: var(--beyaz); overflow: hidden; }
.tabela-ic { padding-top: 12px; padding-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--font-baslik); font-weight: 800; font-size: 27px; line-height: 1.1; white-space: nowrap; }
.tabela-direk { width: 56px; height: 16px; flex: 0 0 auto; background-image: var(--direk); }

/* Kategori mozaiği */
.mozaik { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 280px; gap: 16px; }
.mozaik-oge { position: relative; display: block; overflow: hidden; background: var(--zemin-gri); }
.mozaik-oge:hover { text-decoration: none; }
.mozaik-oge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mozaik-1 { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.mozaik-2 { grid-column: 8 / span 5; grid-row: 1; }
.mozaik-3 { grid-column: 8 / span 5; grid-row: 2; }
.mozaik-4 { grid-column: 1 / span 3; grid-row: 3; }
.mozaik-5 { grid-column: 4 / span 3; grid-row: 3; }
.mozaik-6 { grid-column: 7 / span 3; grid-row: 3; }
.mozaik-7 { grid-column: 10 / span 3; grid-row: 3; }
.mozaik-no { position: absolute; top: 16px; right: 16px; background: var(--lacivert); color: var(--beyaz); padding: 4px 12px; font-family: var(--font-baslik); font-weight: 800; font-size: 23px; line-height: 1.2; transform: rotate(3deg); }
.mozaik-oge:nth-child(even) .mozaik-no { transform: rotate(-3deg); }
.mozaik-ad { position: absolute; left: 16px; bottom: 32px; background: var(--beyaz); color: var(--lacivert); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.mozaik-ad-h { font-family: var(--font-baslik); font-weight: 800; font-size: 30px; line-height: 0.95; }
.mozaik-2 .mozaik-ad-h, .mozaik-3 .mozaik-ad-h { font-size: 34px; }
.mozaik-1 .mozaik-ad { padding: 16px 24px; gap: 8px; }
.mozaik-1 .mozaik-ad-h { font-size: 49px; line-height: 0.9; letter-spacing: -0.01em; }
.mozaik-git { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.mozaik-oge:hover .mozaik-git { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--kirmizi); text-underline-offset: 6px; }
.mozaik-serit { position: absolute; left: 0; right: 0; bottom: 0; }

/* Ürün rayı */
.ray-dugmeler { display: flex; gap: 8px; flex: 0 0 auto; }
.kare-btn { width: 56px; height: 56px; border: 2px solid var(--beyaz); background: transparent; color: var(--beyaz); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.kare-kirmizi { border-color: var(--kirmizi); background: var(--kirmizi); }
.ray { position: relative; overflow-x: auto; padding-bottom: 24px; scroll-snap-type: x mandatory; scrollbar-color: var(--kirmizi) transparent; }
.ray-liste { display: grid; grid-auto-flow: column; grid-auto-columns: 296px; gap: 16px; }
.ray-liste > li { scroll-snap-align: start; display: flex; }

/* ---------- Ürün kartı ---------- */
.izgara-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.izgara-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.izgara-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.izgara-3-16 { gap: 16px; }
.izgara-ust { margin-top: 32px; }
.izgara-4 > li, .izgara-5 > li, .izgara-3 > li { display: flex; }
.kart { width: 100%; background: var(--beyaz); color: var(--lacivert); display: flex; flex-direction: column; }
.kart-izgara { border: 2px solid var(--lacivert); border-bottom: 0; }
.kart-gorsel { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--zemin-gri); overflow: hidden; }
.kart-gorsel img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8%; }
.kart-etiket { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px); background: var(--lacivert); color: var(--beyaz); padding: 4px 12px; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kart-indirim { position: absolute; right: 12px; bottom: 12px; background: var(--kirmizi); color: var(--beyaz); padding: 4px 12px; font-family: var(--font-baslik); font-weight: 800; font-size: 23px; line-height: 1.1; transform: rotate(-3deg); }
.kart-govde { padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.kart-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kart-ad { font-family: var(--font-baslik); font-weight: 800; font-size: 29px; line-height: 0.95; min-width: 0; overflow-wrap: anywhere; }
.kart-ray .kart-ad { font-size: 27px; }
.kod { flex: 0 0 auto; border: 2px dashed var(--lacivert); background: var(--beyaz); padding: 2px 8px; font-family: var(--font-baslik); font-weight: 700; font-size: 18px; line-height: 1.3; white-space: nowrap; transform: rotate(-3deg); }
li:nth-child(4n+2) .kod { transform: rotate(2deg); }
li:nth-child(4n+3) .kod { transform: rotate(-2deg); }
li:nth-child(4n+4) .kod { transform: rotate(3deg); }
.kod-buyuk { position: absolute; top: 20px; right: 16px; padding: 4px 12px; font-weight: 800; font-size: 25px; line-height: 1.2; transform: rotate(3deg); }
.kart-olcu { color: var(--soluk); font-size: 15px; }
.kart-alt { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.kart-fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-family: var(--font-baslik); font-weight: 800; font-size: 27px; line-height: 1; }
.kart-fiyat del { font-weight: 600; font-size: 20px; color: var(--soluk); }
.kart-btn { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; background: var(--lacivert); color: var(--beyaz); border: 2px solid var(--lacivert); font-family: var(--font-baslik); font-weight: 700; font-size: 22px; line-height: 1; }
.kart-btn:hover { text-decoration: none; background: var(--kirmizi); border-color: var(--kirmizi); }
.kart-btn-cizgi { background: var(--beyaz); color: var(--lacivert); }
.kart-btn-cizgi:hover { color: var(--beyaz); }

/* ---------- Eylem kartları (Ara / WhatsApp) ---------- */
.eylem-kartlari { display: flex; flex-direction: column; gap: 16px; }
.eylem-kart { display: flex; align-items: center; gap: 24px; padding: 24px 32px; }
.eylem-kart:hover { text-decoration: none; filter: brightness(1.06); }
.eylem-buyuk .eylem-kart { padding: 32px 40px; }
.eylem-ara { background: var(--beyaz); color: var(--lacivert); }
.eylem-ara .ik { color: var(--kirmizi); }
.eylem-cerceve { border: 2px solid var(--lacivert); }
.eylem-wa { background: var(--lacivert); color: var(--beyaz); }
.eylem-metin { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.eylem-baslik { font-family: var(--font-baslik); font-weight: 800; font-size: 37px; line-height: 0.95; }
.eylem-buyuk .eylem-baslik { font-size: 36px; }
.eylem-alt { font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.eylem-buyuk .eylem-alt { font-size: 18px; }
.eylem-wa .eylem-alt { color: var(--soluk-koyu); }

/* Anasayfa ölçü bölümü */
.olcu-giris { margin: 32px 0 48px !important; }
.olcu-cizim { color: var(--beyaz); width: 100%; max-width: 520px; height: auto; }
.olcu-yazi { fill: var(--beyaz); font-family: var(--font-baslik); font-weight: 800; font-size: 22px; stroke: var(--kirmizi); stroke-width: 8px; paint-order: stroke; }
.olcu-etiket { fill: var(--beyaz); font-family: var(--font-baslik); font-weight: 700; font-size: 20px; }

/* Marka bölümü */
.marka-grid { display: grid; grid-template-columns: 120px minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: stretch; }
.marka-p { margin-top: 32px; max-width: 560px; }
.marka-p2 { margin-top: 16px; max-width: 560px; }
.marka-btn { margin-top: 32px; }
.adimlar { display: flex; flex-direction: column; justify-content: center; }
.adimlar .h3 { font-size: 34px; margin-bottom: 16px; }
.adimlar li { border-top: 4px solid var(--lacivert); display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 24px; align-items: center; padding: 24px 0; }
.adimlar li:last-child { border-bottom: 4px solid var(--lacivert); }
.adim-no { font-family: var(--font-baslik); font-weight: 800; font-size: 60px; line-height: 0.85; color: var(--kirmizi); }
.adim-ad { font-family: var(--font-baslik); font-weight: 800; font-size: 30px; line-height: 1; }
.adimlar p { margin-top: 8px; color: var(--soluk); }

/* ---------- Sayfa yolu ---------- */
.yol ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 600; font-size: 15px; color: var(--soluk-koyu); }
.yol [aria-current="page"] { color: var(--beyaz); }
.yol-acik { background: var(--zemin-gri); }
.yol-acik ol { padding-top: 16px; padding-bottom: 16px; color: var(--soluk); }
.yol-acik [aria-current="page"] { color: var(--lacivert); }
.yol-acik .yol-ayrac { color: var(--kirmizi); font-family: var(--font-baslik); font-weight: 800; font-size: 18px; line-height: 1; }

/* ---------- Kategori ---------- */
.bas-bant { background: var(--lacivert); color: var(--beyaz); }
.bas-bant-ic { padding-top: 32px; padding-bottom: 64px; }
.bas-bant-64 { padding-top: 64px; }
.bas-bant-56 { padding-top: 56px; padding-bottom: 72px; }
.baslik-sira { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.baslik-sira .giris { max-width: 440px; }
.sekme-izgara { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sekme { height: 100%; border: 2px solid var(--beyaz); color: var(--beyaz); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sekme:hover { background: var(--beyaz); color: var(--lacivert); text-decoration: none; }
.sekme-aktif { background: var(--beyaz); color: var(--lacivert); border-bottom: 8px solid var(--kirmizi); }
.sekme-ad { font-family: var(--font-baslik); font-weight: 800; font-size: 34px; line-height: 1; }
.sekme-yan { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; white-space: nowrap; }
.liste-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.filtre { border: 2px solid var(--lacivert); background: var(--zemin-gri); padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.f-lab { display: block; margin-bottom: 8px; padding: 0; font-family: var(--font-baslik); font-weight: 700; font-size: 20px; line-height: 1; }
.f-ctl { width: 100%; height: 48px; border: 2px solid var(--lacivert); border-radius: 0; background: var(--beyaz); padding: 0 12px; font: 500 17px var(--font-govde); color: var(--lacivert); }
select.f-ctl { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--lacivert) 50%), linear-gradient(135deg, var(--lacivert) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 15px) 50%; background-size: 7px 7px; background-repeat: no-repeat; }
.f-alan { margin: 0; padding: 0; border: 0; min-width: 0; }
.f-aralik { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.f-kutu { height: 48px; display: flex; align-items: center; gap: 12px; font-weight: 600; }
.f-kutu input { width: 24px; height: 24px; margin: 0; accent-color: var(--kirmizi); }
.filtre-temizle { margin-top: 16px; }
.filtre-temizle .ok-link { font-size: 20px; }
.bos-durum { margin-top: 32px; padding: 48px; background: var(--zemin-gri); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.bos-durum-cizgi { margin-top: 0; border: 2px solid var(--lacivert); }
.kategori-metin { margin-top: 64px; }

/* Sayfalama */
.sayfalama { margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; border-top: 4px solid var(--lacivert); padding-top: 24px; }
.sayfalama p { font-weight: 600; color: var(--soluk); }
.sayfalama-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.s-btn { min-width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 2px solid var(--lacivert); font-family: var(--font-baslik); font-weight: 800; font-size: 25px; line-height: 1; }
.s-btn:hover { text-decoration: none; background: var(--lacivert); color: var(--beyaz); }
.s-btn-genis { padding: 0 20px; }
.s-aktif { background: var(--lacivert); color: var(--beyaz); }
.s-bos { border-color: transparent; }
.s-sonraki { background: var(--kirmizi); border-color: var(--kirmizi); color: var(--beyaz); }

/* ---------- Tüm koleksiyonlar ---------- */
.koleksiyon { width: 100%; background: var(--beyaz); display: flex; flex-direction: column; border: 2px solid var(--lacivert); border-bottom: 0; }
.koleksiyon-gorsel, .koleksiyon-tipo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--zemin-gri); }
.koleksiyon-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.koleksiyon-no { position: absolute; top: 16px; right: 16px; background: var(--lacivert); color: var(--beyaz); padding: 4px 12px; font-family: var(--font-baslik); font-weight: 800; font-size: 23px; line-height: 1.2; transform: rotate(3deg); }
li:nth-child(even) .koleksiyon-no { transform: rotate(-3deg); }
.koleksiyon-tipo { background: var(--lacivert); color: var(--beyaz); display: flex; align-items: flex-end; padding: 20px 24px; }
.koleksiyon-tipo-kirmizi { background: var(--kirmizi); }
.koleksiyon-tipo:hover { text-decoration: none; }
.koleksiyon-bant { position: absolute; left: -10%; right: -10%; top: 30%; height: 84px; transform: rotate(-8deg); background-image: var(--direk); }
.koleksiyon-buyuk { position: relative; font-family: var(--font-baslik); font-weight: 800; font-size: 82px; line-height: 0.8; letter-spacing: -0.01em; }
.koleksiyon-govde { padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; }
.koleksiyon-ad { font-family: var(--font-baslik); font-weight: 800; font-size: 36px; line-height: 0.95; }
.koleksiyon-liste { display: flex; flex-direction: column; border-top: 4px solid var(--lacivert); }
.koleksiyon-liste a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--soluk); font-weight: 600; font-size: 17px; }
.koleksiyon-adet { display: flex; align-items: center; gap: 8px; color: var(--soluk); font-weight: 500; }
.koleksiyon-adet .ik { color: var(--kirmizi); }
.koleksiyon-tum { margin-top: auto; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--lacivert); color: var(--beyaz); font-family: var(--font-baslik); font-weight: 700; font-size: 22px; line-height: 1; }
.koleksiyon-tum:hover { background: var(--kirmizi); text-decoration: none; }

/* ---------- Ürün detay ---------- */
.urun-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.galeri { position: sticky; top: 16px; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: start; }
.galeri-tek { grid-template-columns: minmax(0, 1fr); }
.galeri-kucuk { display: grid; grid-auto-rows: 104px; gap: 12px; }
.galeri-kucuk button { position: relative; padding: 0; border: 0; background: var(--zemin-gri); overflow: hidden; cursor: pointer; }
.galeri-kucuk button[aria-current="true"] { outline: 4px solid var(--kirmizi); outline-offset: -4px; }
.galeri-kucuk img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8px; }
.galeri-ana { position: relative; background: var(--zemin-gri); aspect-ratio: 4 / 5; overflow: hidden; }
.galeri-ana img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 6% 6% 10%; }
.galeri-serit { position: absolute; left: 0; right: 0; bottom: 0; }
.urun-bilgi { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.urun-h1 { margin-top: 20px; overflow-wrap: anywhere; }
.urun-h1 .vurgu { padding: 0 16px 8px; }
.urun-kod { margin-top: 24px; font-size: 18px; color: var(--soluk); }
.urun-kod strong { font-family: var(--font-baslik); font-weight: 800; font-size: 22px; color: var(--lacivert); }
.urun-kisa { margin-top: 16px; }
.fiyat-kutu { border: 3px solid var(--lacivert); }
.fiyat-satir { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 24px; border-bottom: 3px solid var(--lacivert); }
.fiyat-etiket { font-family: var(--font-baslik); font-weight: 700; font-size: 23px; line-height: 1; }
.fiyat-deger { font-family: var(--font-baslik); font-weight: 800; font-size: 43px; line-height: 0.9; }
.fiyat-deger del { font-weight: 600; font-size: 25px; color: var(--soluk); }
.fiyat-yuzde { display: inline-block; background: var(--kirmizi); color: var(--beyaz); padding: 2px 8px; font-size: 22px; vertical-align: middle; transform: rotate(-3deg); }
.fiyat-eylem { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.btn-genis { height: 56px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 2px solid var(--lacivert); font-family: var(--font-baslik); font-weight: 700; font-size: 25px; line-height: 1; }
.btn-genis > span:first-child { display: flex; align-items: center; gap: 12px; }
.btn-genis:hover { text-decoration: none; }
.btn-genis-kirmizi { height: 64px; background: var(--kirmizi); border-color: var(--kirmizi); color: var(--beyaz); font-weight: 800; font-size: 27px; }
.btn-genis-kirmizi:hover { filter: brightness(1.08); }
.btn-genis-cizgi:hover { background: var(--lacivert); color: var(--beyaz); }
.btn-genis-no { font-family: var(--font-govde); font-weight: 600; font-size: 16px; }
.hazir-mesaj { margin-top: 4px; background: var(--zemin-gri); padding: 12px 16px; font-size: 15px; color: var(--soluk); }
.hazir-mesaj span { color: var(--lacivert); font-weight: 500; }
.stok { font-size: 15px; color: var(--soluk); }
.stok strong { color: var(--lacivert); }
.olculer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 4px solid var(--lacivert); border-bottom: 4px solid var(--lacivert); }
.olculer-1 { grid-template-columns: minmax(0, 1fr); }
.olculer-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.olculer > div { padding: 16px 0; }
.olculer > div + div { padding-left: 20px; border-left: 2px solid var(--lacivert); }
.olculer dt { font-weight: 600; font-size: 15px; color: var(--soluk); }
.olculer dd { font-family: var(--font-baslik); font-weight: 800; font-size: 34px; line-height: 1; }
.cizim-kutu { margin-top: 16px; background: var(--zemin-gri); padding: 16px; }
.cizim-kutu svg { width: 100%; height: auto; max-height: 300px; }
.cz-govde rect { fill: none; stroke: var(--lacivert); stroke-width: 4; }
.cz-olcu path { fill: none; stroke: var(--kirmizi); stroke-width: 3; }
.cz-yazi text { font-family: var(--font-baslik); font-weight: 800; font-size: 20px; fill: var(--lacivert); stroke: var(--zemin-gri); stroke-width: 6px; paint-order: stroke; }
.cz-yazi .cz-kucuk { font-size: 16px; font-weight: 700; }
.secenekler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.secenekler li { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: 15px; }
.secenek-kare { height: 56px; border: 2px dashed var(--lacivert); background: var(--zemin-gri); }
.secenek-yok { opacity: .5; }
.h2-60 { line-height: 0.88; }
.urun-metin { margin-top: 32px; }
.urun-metin-btn { margin-top: 32px; }
.teknik { background: var(--beyaz); }
.teknik-ic { padding: 24px 32px 16px; }
.teknik .h3-37 { margin-bottom: 8px; }
.teknik table { width: 100%; border-collapse: collapse; font-size: 17px; }
.teknik tr { border-top: 2px solid var(--lacivert); }
.teknik tr:first-child { border-top-width: 4px; }
.teknik tr:last-child { border-bottom: 4px solid var(--lacivert); }
.teknik th { text-align: left; padding: 14px 16px 14px 0; width: 40%; font-weight: 600; color: var(--soluk); vertical-align: top; }
.teknik td { padding: 14px 0; font-weight: 600; overflow-wrap: anywhere; }
.alt-cubuk { display: none; }

/* ---------- Metin (panel HTML'i) ---------- */
.metin { max-width: 680px; font-size: 18px; line-height: 1.7; }
.metin > * + * { margin-top: 1em; }
.metin h2 { margin-top: 1.6em; font-family: var(--font-baslik); font-weight: 800; font-size: 40px; line-height: 0.95; letter-spacing: -0.01em; }
.metin h3 { margin-top: 1.4em; font-family: var(--font-baslik); font-weight: 800; font-size: 28px; line-height: 1; }
.metin h2:first-child, .metin h3:first-child { margin-top: 0; }
.metin p, .metin li { color: var(--lacivert); }
.metin ul, .metin ol { padding-left: 1.4em; }
.metin ul { list-style: square; }
.metin ol { list-style: decimal; }
.metin li::marker { color: var(--kirmizi); }
.metin li + li { margin-top: .4em; }
.metin a { color: var(--kirmizi); text-decoration: underline; text-underline-offset: 4px; }
.metin strong { font-weight: 600; }
.metin blockquote { margin: 1.4em 0; padding: 16px 0; border-top: 4px solid var(--kirmizi); border-bottom: 4px solid var(--kirmizi); font-family: var(--font-baslik); font-weight: 700; font-size: 28px; line-height: 1.1; }
.metin img { height: auto; margin: 1.4em 0; }
.metin table { width: 100%; border-collapse: collapse; font-size: 16px; }
.metin th, .metin td { padding: 10px 12px 10px 0; border-top: 2px solid var(--lacivert); text-align: left; vertical-align: top; }
.metin-belge { max-width: 760px; font-size: 17px; }
.metin-belge h2 { font-size: 32px; }
.metin-belge h3 { font-size: 24px; }

/* ---------- Arama ---------- */
.arama-h1 { margin-top: 28px; overflow-wrap: anywhere; }
.arama-sayi { font-family: var(--font-baslik); font-weight: 800; font-size: 43px; line-height: 0.95; }
.buyuk-ara { margin-top: 40px; display: flex; max-width: 640px; }
.buyuk-ara input { flex: 1 1 auto; min-width: 0; height: 56px; border: 2px solid var(--beyaz); border-right: 0; border-radius: 0; background: var(--beyaz); padding: 0 20px; font: 500 19px var(--font-govde); color: var(--lacivert); -webkit-appearance: none; appearance: none; }
.buyuk-ara button { height: 56px; border: 2px solid var(--kirmizi); background: var(--kirmizi); color: var(--beyaz); display: flex; align-items: center; gap: 8px; padding: 0 28px; cursor: pointer; font-family: var(--font-baslik); font-weight: 700; font-size: 23px; line-height: 1; }
.buyuk-ara-koyu { margin-top: 0; max-width: 560px; }
.arac-cubugu { background: var(--beyaz); border-bottom: 4px solid var(--lacivert); }
.arac-ic { padding-top: 20px; padding-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.cip { height: 44px; padding: 0 16px; border: 2px solid var(--lacivert); display: flex; align-items: center; font-family: var(--font-baslik); font-weight: 700; font-size: 20px; line-height: 1; white-space: nowrap; }
.cip:hover { text-decoration: none; background: var(--zemin-gri); }
.cip-aktif, .cip-aktif:hover { background: var(--lacivert); color: var(--beyaz); }
.siralama { display: flex; align-items: center; gap: 20px; font-weight: 600; font-size: 16px; flex: 0 0 auto; }
.siralama span { color: var(--soluk); }
.siralama a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--kirmizi); text-underline-offset: 6px; }
.bos-giris { margin-top: 32px !important; }
.oneri-bas { margin: 32px 0 16px; }
.ikili-ust .oneri-bas:first-child { margin-top: 0; }
.karo-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.karo { background: var(--beyaz); display: flex; flex-direction: column; border: 2px solid var(--lacivert); height: 100%; }
.karo-ad { flex: 1 1 auto; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-baslik); font-weight: 800; font-size: 27px; line-height: 1; }
.karo-ad .ik { color: var(--kirmizi); }
.bos-yan { display: flex; flex-direction: column; gap: 16px; }

/* ---------- İletişim ---------- */
.iletisim-bas { margin-top: 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.iletisim-giris { margin-top: 32px; max-width: 560px; }
.dev-kartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dev-kartlar-tek { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.dev-kart { position: relative; padding: 48px 48px 62px; display: flex; flex-direction: column; gap: 32px; color: var(--beyaz); }
.dev-kart:hover { text-decoration: none; }
.dev-kart:hover .dev-btn { filter: brightness(1.08); }
.dev-kart-lacivert { background: var(--lacivert); }
.dev-kart-kirmizi { background: var(--kirmizi); }
.dev-metin { display: flex; flex-direction: column; gap: 12px; }
.dev-baslik { font-family: var(--font-baslik); font-weight: 800; font-size: 65px; line-height: 0.88; letter-spacing: -0.01em; }
.dev-no { font-family: var(--font-baslik); font-weight: 700; font-size: 37px; line-height: 1; overflow-wrap: anywhere; }
.dev-alt { font-size: 18px; max-width: 440px; }
.dev-kart-lacivert .dev-alt { color: var(--soluk-koyu); }
.dev-btn { align-self: flex-start; }
.dev-serit { position: absolute; left: 0; right: 0; bottom: 0; }
.bilgi { border-top: 4px solid var(--lacivert); padding-top: 24px; }
.bilgi-link { font-family: var(--font-baslik); font-weight: 700; font-size: 27px; line-height: 1.1; color: var(--kirmizi); overflow-wrap: anywhere; }
.bilgi-deger { font-family: var(--font-baslik); font-weight: 700; font-size: 27px; line-height: 1.1; }
.bilgi p { margin-top: 16px; color: var(--soluk); }
.harita { position: relative; min-height: 560px; background-image: var(--direk); }
.harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.harita-ic { position: absolute; inset: 32px; background: var(--beyaz); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; }
.harita-baslik { font-family: var(--font-baslik); font-weight: 800; font-size: 55px; line-height: 0.9; }
.harita-adres { font-weight: 600; font-size: 18px; }
.showroom { display: flex; flex-direction: column; justify-content: center; }
.showroom-p { margin-top: 24px; max-width: 480px; font-size: 19px; }
.adimlar-kucuk { margin: 32px 0; border-top: 4px solid var(--lacivert); }
.adimlar-kucuk li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; align-items: center; padding: 16px 0; border-bottom: 2px solid var(--lacivert); }
.adimlar-kucuk li:last-child { border-bottom-width: 4px; }
.adimlar-kucuk .adim-no { font-size: 43px; }
.adimlar-kucuk .adim-ad { font-size: 27px; }

/* ---------- Statik sayfa ---------- */
.sayfa-h1 { margin-top: 40px; overflow-wrap: anywhere; }
.sayfa-lead { margin-top: 32px; max-width: 640px; }
.sayfa-sekme { background: var(--lacivert); border-top: 2px solid var(--cizgi-koyu); }
.sayfa-sekme ul { display: flex; gap: 8px 32px; overflow-x: auto; scrollbar-width: none; }
.sayfa-sekme a { display: block; padding: 16px 0; font-weight: 600; font-size: 16px; color: var(--soluk-koyu); white-space: nowrap; border-bottom: 4px solid transparent; }
.sayfa-sekme a:hover { color: var(--beyaz); text-decoration: none; border-bottom-color: var(--soluk-koyu); }
.sayfa-sekme a[aria-current="page"] { color: var(--beyaz); border-bottom-color: var(--kirmizi); }
.sayfa-kompozisyon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 80px; align-items: start; }
.sayfa-kompozisyon-tek { grid-template-columns: minmax(0, 1fr); }
.sayfa-gorsel { position: sticky; top: 24px; aspect-ratio: 4 / 5; background: var(--zemin-gri); overflow: hidden; }
.sayfa-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sayfa-gorsel-serit { position: absolute; left: 0; right: 0; bottom: 0; }
.sayfa-govde { padding-top: 16px; min-width: 0; }
.hazirlaniyor { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 32px; border-bottom: 4px solid var(--lacivert); }
.hazirlaniyor .giris { max-width: 480px; }
.hazirlaniyor-dar { max-width: 760px; }
.gecis-serit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gecis { display: flex; flex-direction: column; height: 100%; background: var(--beyaz); color: var(--lacivert); }
.gecis:hover { text-decoration: none; }
.gecis-gorsel { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--zemin-gri); }
.gecis-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gecis-ad { flex: 1 1 auto; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-baslik); font-weight: 800; font-size: 29px; line-height: 0.95; }
.gecis-ad .ik { color: var(--kirmizi); }

/* ---------- 404 ---------- */
.hero-404 { padding-top: 72px; padding-bottom: 80px; grid-template-columns: minmax(0, 1.3fr) 80px minmax(0, 1fr); gap: 48px; }
.hero-404 .h1 { margin-top: 32px; }
.hero-404 .vurgu { margin-top: 8px; }
.nf-giris { margin: 40px 0 32px; }
.nf-sag { display: flex; flex-direction: column; justify-content: center; }
.nf-404 { font-family: var(--font-baslik); font-weight: 800; font-size: 231px; line-height: 0.78; letter-spacing: -0.02em; }
.nf-sag .direk-serit { margin-top: 24px; }
.nf-kat { height: 100%; min-height: 160px; background: var(--zemin-gri); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.nf-kat:hover { text-decoration: none; background: var(--zemin-gri-koyu); }
.nf-kat-koyu, .nf-kat-koyu:hover { background: var(--lacivert); color: var(--beyaz); }
.nf-kat-ust { padding: 20px 24px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.nf-kat-ad { font-family: var(--font-baslik); font-weight: 800; font-size: 37px; line-height: 0.95; }
.nf-kat-no { font-family: var(--font-baslik); font-weight: 800; font-size: 25px; line-height: 1; color: var(--kirmizi); }
.nf-kat-koyu .nf-kat-no { color: var(--beyaz); }
.nf-bant { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.nf-bant .h2 { max-width: 700px; }
.nf-bant .giris { margin-top: 16px; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1200px) {
  .ust-nav-liste { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .ust-panel { display: none; }
  .ust-bar { gap: 20px; }
  .izgara-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h1 { font-size: 76px; }
  .h1-103 { font-size: 88px; }
  .h2 { font-size: 60px; }
  .alt-marka { font-size: 104px; }
}
@media (max-width: 1100px) {
  .ust-eylem .btn-ust span { display: none; }
  .ust-eylem .btn-ust { width: 48px; padding: 0; justify-content: center; }
  .menu-ac { display: inline-flex; }
}
@media (max-width: 900px) {
  .hero-grid, .hero-404 { grid-template-columns: minmax(0, 1fr); }
  .direk-dikey { display: none; }
  .hero-gorsel { min-height: 480px; }
  .hero-not { left: 12px; }
  .ikili, .ikili-13, .ikili-115, .ikili-1-11, .ikili-12 { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .mozaik { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; }
  .mozaik-oge { grid-column: auto !important; grid-row: auto !important; }
  .mozaik-1 .mozaik-ad-h { font-size: 40px; }
  .alt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .izgara-4, .filtre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .izgara-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .izgara-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sekme-izgara, .baslik-sira { grid-template-columns: minmax(0, 1fr); }
  .baslik-sira { gap: 24px; }
  .urun-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .galeri, .sayfa-gorsel { position: static; }
  .arac-ic { flex-direction: column; align-items: flex-start; }
  .marka-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .uclu { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dev-kartlar { grid-template-columns: minmax(0, 1fr); }
  .sayfa-kompozisyon { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sayfa-gorsel { aspect-ratio: 16 / 10; }
  .gecis-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-404 { font-size: 180px; }
}
@media (max-width: 640px) {
  .ust-bar { flex-wrap: wrap; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .ust-ara { order: 3; flex: 1 1 100%; max-width: none; }
  .logo-ad { font-size: 30px; }
  .logo-ust { font-size: 11px; }
  .ust-eylem { gap: 8px; }
  .ust-eylem .btn-ust { width: 44px; height: 44px; }
  .h1, .h1-103, .h1-102, .h1-76 { font-size: 55px; }
  .h2, .h2-76, .h2-60, .h2-54 { font-size: 43px; }
  .bolum, .bolum-48-96, .bolum-56-96, .bolum-64-96, .bolum-96-48 { padding-top: 48px; padding-bottom: 48px; }
  .bolum-80, .bolum-96, .bolum-64 { padding-top: 48px; padding-bottom: 48px; }
  .bas-bant-ic, .bas-bant-56, .bas-bant-64 { padding-top: 24px; padding-bottom: 40px; }
  .bolum-bas { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
  .bolum-bas-yan { max-width: none; }
  .hero-grid { padding-top: 40px; padding-bottom: 40px; }
  .hero-gorsel { min-height: 360px; }
  .hero-not { font-size: 23px; max-width: 240px; }
  .tabela-ic { font-size: 21px; gap: 16px; overflow-x: auto; }
  .alt-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .alt-marka { font-size: 55px; white-space: normal; }
  .izgara-4, .izgara-3, .filtre, .karo-izgara, .gecis-serit { grid-template-columns: minmax(0, 1fr); }
  .izgara-5 { position: relative; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; }
  .izgara-5 > li { scroll-snap-align: start; }
  .kart-ad { font-size: 27px; }
  .ray-liste { grid-auto-columns: 78%; }
  .eylem-kart, .eylem-buyuk .eylem-kart { padding: 20px; gap: 16px; }
  .eylem-kart .ik { width: 40px; height: 40px; }
  .eylem-baslik, .eylem-buyuk .eylem-baslik { font-size: 30px; }
  .sekme-ad { font-size: 28px; }
  .bos-durum { padding: 24px; }
  .galeri { grid-template-columns: minmax(0, 1fr); }
  .galeri-kucuk { order: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 72px; }
  .olculer { grid-template-columns: minmax(0, 1fr) !important; }
  .olculer > div + div { padding-left: 0; border-left: 0; border-top: 2px solid var(--lacivert); }
  .secenekler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiyat-satir, .fiyat-eylem { padding: 16px; }
  .btn-genis { padding: 0 16px; font-size: 22px; }
  .btn-genis-kirmizi { font-size: 24px; }
  .btn-genis-no { display: none; }
  .teknik-ic { padding: 16px; }
  .yol-acik ol { font-size: 14px; }
  .alt-cubuk { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; border-top: 3px solid var(--lacivert); }
  .alt-cubuk a { height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-baslik); font-weight: 800; font-size: 22px; }
  .alt-cubuk-ara { background: var(--beyaz); color: var(--lacivert); }
  .alt-cubuk-wa { background: var(--kirmizi); color: var(--beyaz); }
  .sayfa-product .alt { padding-bottom: 59px; }
  .cipler { overflow-x: auto; flex-wrap: nowrap; width: 100%; }
  .siralama { flex-wrap: wrap; gap: 8px 16px; }
  .dev-kart { padding: 24px 24px 40px; gap: 24px; }
  .dev-baslik { font-size: 43px; }
  .dev-no { font-size: 28px; }
  .harita { min-height: 320px; }
  .harita-ic { inset: 16px; }
  .harita-baslik { font-size: 43px; }
  .nf-404 { font-size: 136px; }
  .buyuk-ara { flex-wrap: wrap; }
  .buyuk-ara input { border-right: 2px solid var(--beyaz); flex-basis: 100%; }
  .buyuk-ara button { flex: 1 1 100%; justify-content: center; }
  .sayfalama { margin-top: 40px; }
  .s-btn { min-width: 48px; height: 48px; font-size: 22px; }
  .metin { font-size: 17px; }
  .metin h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Mobil dokunma hedefleri (en az 44px) */
@media (max-width: 900px) {
  .outlet-etiket, .logo, .ok-link, .etiket-lacivert { min-height: 44px; display: inline-flex; align-items: center; }
  .alt-liste a, .cipler a, .yol-acik a { display: inline-flex; align-items: center; min-height: 44px; }
  label:has(#f-ind) { display: flex; align-items: center; min-height: 44px; }
}