/* Krom Yapı · Site B (Zemin Seçici) — siteye özel stiller. Ortak stiller: /ortak/web/cekirdek.css
   Karakter: teknik, mühendislik çizimi hissi; koyu grafit bölümler, ince ızgara, katman kesiti. */

/* Teknik ızgara zemini (koyu bölümler) */
.izgara-koyu { background-color: #111113;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px; }
.izgara-acik { background-image: linear-gradient(rgba(24,24,27,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(24,24,27,.05) 1px, transparent 1px);
  background-size: 48px 48px; }
.olcu-cizgi { position: relative; }
.olcu-cizgi::before, .olcu-cizgi::after { content: ''; position: absolute; width: 9px; height: 9px; border-color: var(--kirmizi); }
.olcu-cizgi::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.olcu-cizgi::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

/* Alan kutucukları (seçici) */
.alan-kutu { transition: background .2s, border-color .2s, color .2s, transform .2s; }
.alan-kutu:hover { transform: translateY(-2px); }
.alan-kutu[aria-pressed="true"] { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.alan-kutu[aria-pressed="true"] .alan-ikon { color: #fff; }
.kosul[aria-pressed="true"] { background: #18181b; color: #fff; border-color: #18181b; }
.kosul .kosul-isaret .material-symbols-outlined { opacity: 0; transition: opacity .15s; }
.kosul[aria-pressed="true"] .kosul-isaret { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.kosul[aria-pressed="true"] .kosul-isaret .material-symbols-outlined { opacity: 1; }
.adim-noktasi[data-durum="tamam"] { background: #18181b; color: #fff; border-color: #18181b; }
.adim-noktasi[data-durum="aktif"] { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }
/* yalnız kaydırma: animasyon çalışmasa da içerik görünür kalır */
.secici-adim { animation: adimGir .35s ease; }
@keyframes adimGir { from { transform: translateY(12px); } to { transform: none; } }

/* ------------------------------------------------------------ katman kesiti (2,5B izometrik) */
.kesit-cizim { --derin: 30px; padding: calc(var(--derin) + 8px) calc(var(--derin) + 6px) 8px 0; display: flex; flex-direction: column; }
.kesit { --olcek: 1.7; }
.kat { position: relative; height: calc(var(--h) * var(--olcek) * 1px); min-height: 5px; background: var(--on); cursor: pointer;
  transition: margin .5s cubic-bezier(.22,.61,.36,1), transform .3s ease, filter .3s; }
.kat::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--derin); background: var(--ust);
  transform-origin: bottom left; transform: skewX(-45deg); background-image: inherit; }
.kat::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--derin); background: var(--yan);
  transform-origin: top left; transform: skewY(-45deg); }
.kesit.ayrik .kat + .kat { margin-top: 26px; }
.kat.aktif { transform: translateX(-10px); filter: brightness(1.12); }
.kat .kat-no { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font: 800 10px/1 Switzer, sans-serif;
  letter-spacing: .1em; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; }
.kat.ince .kat-no { display: none; }
.m-ayak::before { background-image: none; }
.kesit-liste li { transition: background .2s, border-color .2s; }
.kesit-liste li.aktif { background: rgba(226,31,38,.08); border-color: var(--kirmizi); }
.kesit-koyu .kesit-liste li.aktif { background: rgba(255,255,255,.06); }

/* Malzemeler: --on ön yüz, --ust üst yüz, --yan yan yüz */
.m-beton { --on: #9a9a9a; --ust: #b9b9b9; --yan: #7d7d7d; background-image: radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.4px), radial-gradient(rgba(255,255,255,.25) 1px, transparent 1.4px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; }
.m-sap { --on: #c7c4bd; --ust: #dddad3; --yan: #aaa7a0; }
.m-astar { --on: #3f3f46; --ust: #52525b; --yan: #27272a; }
.m-tutkal { --on: #d4a72c; --ust: #e8c55a; --yan: #a8831f; }
.m-resurfacer { --on: #6b6f73; --ust: #868a8f; --yan: #55585c; }
.m-akrilik { --on: #2f7d4f; --ust: #3f9a64; --yan: #23603c; }
.m-cizgi { --on: #f4f4f5; --ust: #ffffff; --yan: #d4d4d8; }
.m-sbr-toz { --on: #26262a; --ust: #3a3a40; --yan: #18181b; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.3px); background-size: 4px 4px; }
.m-sbr-rulo { --on: #1f1f23; --ust: #34343a; --yan: #121214; background-image: radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.6px); background-size: 6px 6px; }
.m-sbr-granul { --on: #232327; --ust: #37373d; --yan: #141416; background-image: radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 2px), radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.5px); background-size: 8px 8px, 5px 5px; background-position: 0 0, 2px 3px; }
.m-epdm { --on: #b5332e; --ust: #cf4a43; --yan: #8d2420; background-image: radial-gradient(rgba(255,255,255,.22) 1.4px, transparent 1.9px), radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.5px); background-size: 7px 7px, 5px 5px; background-position: 0 0, 3px 2px; }
.m-pu { --on: #3d5a80; --ust: #4f6f99; --yan: #2c4360; }
.m-pvc { --on: #4b6a88; --ust: #6383a3; --yan: #384f66; }
.m-pvc-seffaf { --on: rgba(186,214,232,.85); --ust: rgba(214,232,244,.9); --yan: rgba(150,184,206,.85); }
.m-desen { --on: #7a8fa6; --ust: #94a8bd; --yan: #5d7186; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 6px, transparent 6px 14px); }
.m-profor { --on: #3b3f45; --ust: #4f545b; --yan: #2a2d31; background-image: radial-gradient(rgba(255,255,255,.1) 2px, transparent 2.6px); background-size: 9px 9px; }
.m-laminat { --on: #a47b52; --ust: #bf9469; --yan: #84603e; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 22px); }
.m-granit { --on: #8b8680; --ust: #a6a19a; --yan: #6e6a64; background-image: radial-gradient(rgba(0,0,0,.25) 1px, transparent 1.6px), radial-gradient(rgba(255,255,255,.3) 1px, transparent 1.5px); background-size: 5px 5px, 9px 9px; }
.m-yonga { --on: #c49a5c; --ust: #d8b077; --yan: #a17c45; background-image: radial-gradient(rgba(90,50,10,.25) 1px, transparent 1.6px); background-size: 6px 6px; }
.m-alu { --on: #c9ced4; --ust: #e1e5e9; --yan: #a8adb3; }
.m-celik { --on: #9aa3ad; --ust: #b8c0c8; --yan: #7b838c; }
.m-ayak { --on: transparent; --ust: rgba(161,161,170,.10); --yan: rgba(161,161,170,.06);
  background-image: linear-gradient(90deg, transparent 0 9%, #71717a 9% 11.5%, transparent 11.5% 47%, #71717a 47% 49.5%, transparent 49.5% 86%, #71717a 86% 88.5%, transparent 88.5%),
                    repeating-linear-gradient(0deg, transparent 0 12px, rgba(226,31,38,.25) 12px 13px, transparent 13px 26px); }
.kesit-koyu .m-ayak { --ust: rgba(255,255,255,.05); --yan: rgba(255,255,255,.03); }

@media (max-width: 639px) { .kesit { --olcek: 1.15; } .kesit-cizim { --derin: 22px; } .kesit.ayrik .kat + .kat { margin-top: 18px; } }
@media (prefers-reduced-motion: reduce) { .kat { transition: none; } }

/* Teknik katalog kartı */
.spec-satir:not(:last-child) { border-bottom: 1px solid #e4e4e7; }