/* ==========================================================================
   Dav Çanta — site stili
   Renkler logodaki dav gemisinden: tik gövde, kırmızı-yeşil şerit.
   Zemin kesim masası beyazı; mavi çizgiler kalıpçı kaleminden.
   ========================================================================== */

:root {
  --deniz: #0e2a33;
  --deniz-2: #17404c;
  --murekkep: #14232a;
  --soluk: #4d5d64;
  --tik: #683b0c;
  --tik-koyu: #412817;
  --masa: #f4f5f1;
  --kanvas: #e5e8e1;
  --beyaz: #ffffff;
  --tebesir: #2b4ec9;
  --kirmizi: #e3000f;
  --yesil: #2bac66;
  --cizgi: rgba(20, 35, 42, 0.14);
  --cizgi-acik: rgba(244, 245, 241, 0.16);

  --f-baslik: 'Big Shoulders Stencil Display', 'Arial Narrow', Impact, sans-serif;
  --f-govde: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --kenar: clamp(16px, 4vw, 40px);
  --genislik: 1200px;
  --ust-yukseklik: 72px;
  --kose: 4px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ust-yukseklik) + 16px);
}

body {
  margin: 0;
  background: var(--masa);
  color: var(--murekkep);
  font-family: var(--f-govde);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; }

:focus-visible {
  outline: 2px solid var(--tebesir);
  outline-offset: 3px;
  border-radius: 2px;
}

[hidden] { display: none !important; }

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

.atla {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  background: var(--deniz);
  color: var(--masa);
  padding: 10px 16px;
  border-radius: var(--kose);
  text-decoration: none;
}
.atla:focus { top: 12px; }

.kap {
  width: min(var(--genislik), 100% - 2 * var(--kenar));
  margin-inline: auto;
}

/* --- Tipografi ----------------------------------------------------------- */

.etiket {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tebesir);
}
.bolum--koyu .etiket { color: #8fa6ff; }

.baslik-1,
.baslik-2 {
  font-family: var(--f-baslik);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.baslik-1 { font-size: clamp(3.4rem, 8.6vw, 8rem); }
.baslik-2 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); }

.baslik-3 {
  font-family: var(--f-govde);
  font-stretch: 82%;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.giris {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--soluk);
  max-width: 38em;
  text-wrap: pretty;
}
.bolum--koyu .giris { color: rgba(244, 245, 241, 0.78); }

.metin { max-width: 38em; text-wrap: pretty; }
.metin p + p { margin-top: 1em; }

/* Gövde şeridi: logodaki kırmızı-yeşil biye */
.serit {
  display: block;
  height: 6px;
  background:
    linear-gradient(var(--kirmizi), var(--kirmizi)) top / 100% 3px no-repeat,
    linear-gradient(var(--yesil), var(--yesil)) bottom / 100% 3px no-repeat;
}

/* --- Düğmeler ------------------------------------------------------------ */

.dugme {
  --dugme-zemin: var(--tik);
  --dugme-yazi: var(--beyaz);
  --dikis: rgba(255, 255, 255, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.7em 1.35em;
  border: 0;
  border-radius: var(--kose);
  background: var(--dugme-zemin);
  color: var(--dugme-yazi);
  font-family: var(--f-govde);
  font-weight: 650;
  font-size: 1rem;
  font-stretch: 90%;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  /* düğme kenarında dikiş izi */
  outline: 1px dashed var(--dikis);
  outline-offset: -5px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.dugme:hover { background: var(--tik-koyu); }
.dugme:active { transform: translateY(1px); }
.dugme:focus-visible {
  outline: 2px solid var(--tebesir);
  outline-offset: 3px;
}
.dugme svg { width: 1.15em; height: 1.15em; flex: none; }

.dugme--cizgi {
  --dugme-zemin: transparent;
  --dugme-yazi: var(--murekkep);
  --dikis: transparent;
  box-shadow: inset 0 0 0 1.5px var(--murekkep);
}
.dugme--cizgi:hover { background: rgba(20, 35, 42, 0.06); }

.dugme--acik {
  --dugme-zemin: var(--masa);
  --dugme-yazi: var(--deniz);
  --dikis: rgba(14, 42, 51, 0.35);
}
.dugme--acik:hover { background: var(--beyaz); }

.dugme--koyu-cizgi {
  --dugme-zemin: transparent;
  --dugme-yazi: var(--masa);
  --dikis: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(244, 245, 241, 0.6);
}
.dugme--koyu-cizgi:hover { background: rgba(244, 245, 241, 0.08); }

.ok-bag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 650;
  font-stretch: 90%;
  color: var(--tik);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.ok-bag:hover { color: var(--tik-koyu); }
.bolum--koyu .ok-bag { color: var(--masa); }

/* --- Üst bar ------------------------------------------------------------- */

.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 245, 241, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--cizgi);
}
.ust__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--ust-yukseklik);
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.marka__gemi { width: 62px; height: auto; }
.marka__yazi { display: grid; gap: 3px; }
.marka__dav { width: 54px; height: auto; }
.marka__alt {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--soluk);
  line-height: 1;
}

.menu { display: flex; align-items: center; gap: 4px; }
.menu__liste {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.menu__bag {
  display: block;
  padding: 10px 12px;
  font-weight: 560;
  font-stretch: 90%;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--murekkep);
  border-radius: var(--kose);
  position: relative;
}
.menu__bag:hover { background: rgba(20, 35, 42, 0.06); }
.menu__bag[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 0;
  border-bottom: 2px dashed var(--tik);
}
.menu__dugme { margin-left: 10px; min-height: 44px; padding-block: 0.55em; }

.menu-ac {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--murekkep);
  border-radius: var(--kose);
  background: transparent;
  font-weight: 600;
  font-stretch: 90%;
  cursor: pointer;
}
.menu-ac__cizgi,
.menu-ac__cizgi::before,
.menu-ac__cizgi::after {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}
.menu-ac__cizgi { position: relative; }
.menu-ac__cizgi::before,
.menu-ac__cizgi::after { content: ''; position: absolute; left: 0; }
.menu-ac__cizgi::before { top: -6px; }
.menu-ac__cizgi::after { top: 6px; }
.menu-ac[aria-expanded='true'] .menu-ac__cizgi { background: transparent; }
.menu-ac[aria-expanded='true'] .menu-ac__cizgi::before { transform: translateY(6px) rotate(45deg); }
.menu-ac[aria-expanded='true'] .menu-ac__cizgi::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .menu-ac { display: inline-flex; }
  .menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--kenar) 20px;
    background: var(--masa);
    border-bottom: 1px solid var(--cizgi);
    box-shadow: 0 18px 30px -20px rgba(14, 42, 51, 0.35);
    display: none;
  }
  .menu--acik { display: flex; }
  .menu__liste { flex-direction: column; align-items: stretch; }
  .menu__bag { padding: 14px 4px; font-size: 1.1rem; border-bottom: 1px solid var(--cizgi); border-radius: 0; }
  .menu__bag[aria-current='page']::after { left: 4px; right: auto; width: 2.5em; bottom: 8px; }
  .menu__dugme { margin: 16px 0 0; }
}

/* --- Bölümler ------------------------------------------------------------ */

.bolum { padding-block: clamp(64px, 9vw, 120px); }
.bolum--liste { padding-top: clamp(32px, 4vw, 48px); }
.bolum--koyu { background: var(--deniz); color: var(--masa); }
.bolum--kanvas { background: var(--kanvas); }
.bolum--beyaz { background: var(--beyaz); }

.bolum__bas {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.bolum__bas--yan {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px 48px;
}
@media (max-width: 820px) {
  .bolum__bas--yan { grid-template-columns: 1fr; }
}

/* Kesim masası ızgarası */
.masa-izgara {
  background-color: var(--masa);
  background-image:
    linear-gradient(rgba(43, 78, 201, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 78, 201, 0.075) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}

/* --- Ana sayfa hero ------------------------------------------------------ */

.hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 6vw, 88px); overflow: hidden; }
.hero__izgara {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 32px clamp(24px, 4vw, 56px);
}
.hero__metin { display: grid; gap: 22px; justify-items: start; }
.hero__baslik span { display: block; }
.hero__baslik .vurgu { color: var(--tik); }
.hero__eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero__not {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--soluk);
  letter-spacing: 0.02em;
}

@media (max-width: 1000px) {
  .hero__izgara { grid-template-columns: 1fr; }
}

/* Teknik çizim: gemi bir çanta kalıbı gibi işaretli */
.cizim { position: relative; margin-inline: -8px; }
.cizim__svg { display: block; width: 100%; height: auto; overflow: visible; }
.cizim__gemi { animation: yelken-gel 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.cizim__cizgi {
  fill: none;
  stroke: var(--tebesir);
  stroke-width: 1.3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ciz 0.7s ease-out forwards;
  animation-delay: calc(0.9s + var(--s, 0) * 0.22s);
}
.cizim__nokta {
  fill: var(--masa);
  stroke: var(--tebesir);
  stroke-width: 1.6;
  opacity: 0;
  animation: belir 0.3s ease-out forwards;
  animation-delay: calc(0.8s + var(--s, 0) * 0.22s);
}
.cizim__yazi {
  opacity: 0;
  animation: belir 0.5s ease-out forwards;
  animation-delay: calc(1.35s + var(--s, 0) * 0.22s);
}
.cizim__etiket {
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  fill: var(--tebesir);
}
.cizim__deger {
  font-family: var(--f-govde);
  font-size: 17px;
  font-weight: 600;
  font-stretch: 85%;
  fill: var(--murekkep);
}
.cizim__olcu line { stroke: var(--tebesir); stroke-width: 1.1; }
.cizim__olcu .cizim__etiket { font-size: 12px; }
.cizim__antet rect { fill: none; stroke: var(--tebesir); stroke-width: 1; }
.cizim__antet text { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; fill: var(--tebesir); }
.cizim__no { display: none; }
.cizim__no circle { fill: var(--tebesir); }
.cizim__no text { font-family: var(--f-mono); font-size: 15px; font-weight: 500; fill: var(--beyaz); }

.cizim__lejant { display: none; }

@keyframes ciz { to { stroke-dashoffset: 0; } }
@keyframes belir { to { opacity: 1; } }
@keyframes yelken-gel {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}

/* Dar ekranda yazılar SVG içinde okunmaz; numara + lejant gösterilir */
@media (max-width: 640px) {
  .cizim { margin-inline: 0; }
  .cizim__yazi,
  .cizim__antet,
  .cizim__olcu .cizim__etiket { display: none; }
  .cizim__no { display: inline; }
  .cizim__isaret:not(.cizim__olcu) .cizim__cizgi { display: none; }
  .cizim__lejant {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    list-style: none;
    margin-top: 8px;
    counter-reset: lejant;
  }
  .cizim__lejant li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 2px 8px;
    font-size: 0.92rem;
    line-height: 1.3;
    counter-increment: lejant;
  }
  .cizim__lejant li::before {
    content: counter(lejant);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--tebesir);
    color: var(--beyaz);
    font-family: var(--f-mono);
    font-size: 0.75rem;
  }
  .cizim__lejant b {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tebesir);
  }
}

/* --- Kimler için (sektör kutucukları) ----------------------------------- */

.sektorler {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
}
.sektor {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--kose);
  overflow: hidden;
  background: var(--deniz);
  color: var(--masa);
  text-decoration: none;
  isolation: isolate;
}
.sektor img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}
.sektor::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 42, 51, 0) 40%, rgba(14, 42, 51, 0.88) 100%);
}
.sektor:hover img { transform: scale(1.05); }
.sektor__metin {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  display: grid;
  gap: 4px;
}
.sektor__ad {
  font-family: var(--f-baslik);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.55rem;
  line-height: 0.95;
}
.sektor__alt { font-size: 0.85rem; line-height: 1.35; color: rgba(244, 245, 241, 0.82); }

@media (max-width: 1000px) {
  .sektorler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sektorler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sektor:last-child { grid-column: span 2; aspect-ratio: 16 / 9; }
}

/* --- Süreç: adımlar bir dikiş çizgisiyle birbirine bağlı ----------------- */

.surec {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  counter-reset: adim;
}
.surec::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 22px;
  border-top: 2px dashed rgba(244, 245, 241, 0.35);
}
.surec__adim { position: relative; display: grid; gap: 12px; align-content: start; counter-increment: adim; }
.surec__adim::before {
  content: counter(adim);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--deniz);
  border: 2px solid var(--masa);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 1rem;
  position: relative;
}
.surec__adim p { color: rgba(244, 245, 241, 0.75); font-size: 0.98rem; line-height: 1.5; }

.surec--acik::before { border-top-color: rgba(20, 35, 42, 0.3); }
.surec--acik .surec__adim::before { background: var(--masa); border-color: var(--murekkep); color: var(--murekkep); }
.surec--acik .surec__adim p { color: var(--soluk); }

@media (max-width: 900px) {
  .surec { grid-template-columns: 1fr; gap: 26px; }
  .surec::before { left: 22px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 2px dashed rgba(244, 245, 241, 0.35); }
  .surec--acik::before { border-left-color: rgba(20, 35, 42, 0.3); }
  .surec__adim { grid-template-columns: 46px 1fr; column-gap: 18px; }
  .surec__adim::before { grid-row: span 2; }
}

/* --- Ürün kartları -------------------------------------------------------- */

.urun-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(14px, 2vw, 24px);
  list-style: none;
}
.urun-izgara--uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .urun-izgara--uc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kart { display: flex; }
.kart__ac {
  display: grid;
  grid-template-rows: auto 1fr;
  flex: 1;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--kose);
  background: var(--beyaz);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--cizgi);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.kart__ac:hover { box-shadow: 0 0 0 1px var(--cizgi), 0 18px 34px -22px rgba(14, 42, 51, 0.5); transform: translateY(-2px); }
.kart__gorsel { position: relative; aspect-ratio: 4 / 5; background: var(--kanvas); overflow: hidden; }
.kart__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.kart__ac:hover .kart__gorsel img { transform: scale(1.04); }
.kart__adet {
  position: absolute;
  right: 10px; bottom: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(14, 42, 51, 0.82);
  color: var(--masa);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.kart__govde {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 16px 18px 20px;
  border-top: 1px dashed var(--cizgi);
}
.kart__kategori {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tebesir);
}
.kart__ad { font-size: 1.2rem; }
.kart__ref { font-size: 0.9rem; color: var(--soluk); }

/* Süzgeç düğmeleri */
.suzgec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.suzgec__dugme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1.5px solid var(--cizgi);
  border-radius: 999px;
  background: var(--beyaz);
  font-weight: 560;
  font-stretch: 90%;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.suzgec__dugme:hover { border-color: var(--murekkep); }
.suzgec__dugme[aria-pressed='true'] { background: var(--deniz); border-color: var(--deniz); color: var(--masa); }
.suzgec__sayi { font-family: var(--f-mono); font-size: 0.75rem; opacity: 0.7; }
.suzgec__durum { font-family: var(--f-mono); font-size: 0.8rem; color: var(--soluk); margin-bottom: 16px; }

@media (max-width: 600px) {
  .suzgec {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--kenar) * -1);
    padding-inline: var(--kenar);
    padding-bottom: 4px;
    margin-bottom: 20px;
    scrollbar-width: none;
  }
  .suzgec::-webkit-scrollbar { display: none; }
  .suzgec__dugme { flex: none; }
  .urun-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .urun-izgara .kart__govde { padding: 12px 12px 14px; gap: 4px; }
  .urun-izgara .kart__ad { font-size: 1rem; }
  .urun-izgara .kart__ref { font-size: 0.8rem; line-height: 1.35; }
  .urun-izgara .kart__kategori { font-size: 0.62rem; }
  .urun-izgara .kart__adet { right: 6px; bottom: 6px; font-size: 0.62rem; }
}

/* --- Ürün penceresi (dialog) --------------------------------------------- */

.pencere {
  width: min(1120px, 100% - 24px);
  max-height: min(92vh, 900px);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--masa);
  color: var(--murekkep);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.pencere::backdrop { background: rgba(10, 26, 32, 0.72); backdrop-filter: blur(3px); }
.pencere[open] { display: flex; animation: pencere-ac 0.28s cubic-bezier(.2, .7, .2, 1); }
@keyframes pencere-ac { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.pencere__ic {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  width: 100%;
  height: min(88vh, 820px);
  min-height: 0;
}
.pencere__galeri {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--deniz);
  min-height: 0;
}
.pencere__ana {
  position: relative;
  min-height: 0;
}
.pencere__ana img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pencere__ok {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 245, 241, 0.92);
  color: var(--deniz);
  cursor: pointer;
}
.pencere__ok:hover { background: var(--beyaz); }
.pencere__ok--onceki { left: 12px; }
.pencere__ok--sonraki { right: 12px; }
.pencere__ok svg { width: 20px; height: 20px; }
.pencere__sayac {
  position: absolute;
  left: 14px; top: 12px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: rgba(244, 245, 241, 0.85);
  background: rgba(14, 42, 51, 0.6);
  padding: 3px 8px;
  border-radius: 3px;
}
.pencere__kucukler {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}
.pencere__kucuk {
  flex: none;
  width: 56px; height: 70px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  background: var(--deniz-2);
  cursor: pointer;
  opacity: 0.6;
}
.pencere__kucuk img { width: 100%; height: 100%; object-fit: cover; }
.pencere__kucuk[aria-current='true'] { border-color: var(--masa); opacity: 1; }
.pencere__kucuk:hover { opacity: 1; }

.pencere__bilgi {
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px);
  overflow-y: auto;
}
.pencere__kapat {
  position: absolute;
  top: 12px; right: 12px;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.pencere__kapat:hover { background: rgba(20, 35, 42, 0.08); }
.pencere__kapat svg { width: 22px; height: 22px; }
.pencere__baslik { padding-right: 44px; font-size: clamp(2rem, 3.4vw, 2.8rem); }
.pencere__ref { color: var(--soluk); margin-top: -8px; }
.pencere__ozellik { list-style: none; display: grid; gap: 8px; }
.pencere__ozellik li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; line-height: 1.4; }
.pencere__ozellik li::before {
  content: '';
  width: 14px; height: 0;
  margin-top: 0.7em;
  border-top: 2px dashed var(--tik);
}
.pencere__veri { display: grid; gap: 0; border-top: 1px solid var(--cizgi); }
.pencere__veri div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.pencere__veri dt { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soluk); padding-top: 3px; }
.pencere__veri dd { margin: 0; font-weight: 560; }
.pencere__varyant { display: flex; flex-wrap: wrap; gap: 8px; }
.pencere__varyant button {
  min-height: 38px;
  padding: 0 14px;
  border: 1.5px solid var(--cizgi);
  border-radius: 999px;
  background: var(--beyaz);
  font-size: 0.9rem;
  cursor: pointer;
}
.pencere__varyant button:hover { border-color: var(--murekkep); }
.pencere__varyant button[aria-pressed='true'] { border-color: var(--tik); box-shadow: inset 0 0 0 1px var(--tik); }
.pencere__eylem { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.pencere__not { font-size: 0.88rem; color: var(--soluk); }

@media (max-width: 860px) {
  .pencere { max-height: 94vh; }
  .pencere[open] { display: block; overflow-y: auto; }
  .pencere__ic { grid-template-columns: 1fr; height: auto; }
  .pencere__ana { height: 56vh; }
  .pencere__bilgi { overflow: visible; }
  .pencere__kapat { position: fixed; top: calc(3vh + 10px); right: 22px; background: var(--masa); box-shadow: 0 2px 10px rgba(0,0,0,.25); z-index: 2; }
}

/* --- Kumaş ve denye -------------------------------------------------------- */

.denye {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.denye__formul {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  justify-content: start;
  gap: 4px 14px;
  margin-top: 24px;
  font-family: var(--f-mono);
}
.denye__formul b {
  font-family: var(--f-baslik);
  font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--tik);
}
.denye__formul span { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soluk); }
.denye__formul .denye__esit { font-family: var(--f-baslik); font-size: 2.2rem; letter-spacing: 0; text-transform: none; color: var(--soluk); }

.iplikler { display: grid; gap: 18px; list-style: none; }
.iplik { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: 16px; }
.iplik__ad { font-family: var(--f-mono); font-size: 0.85rem; font-weight: 500; }
.iplik__cizgi {
  height: var(--kalinlik);
  border-radius: 999px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.18) 0 3px, transparent 3px 7px),
    var(--tik);
}
.iplikler__aciklama { font-size: 0.85rem; color: var(--soluk); margin-top: 6px; }

@media (max-width: 820px) {
  .denye { grid-template-columns: 1fr; }
}

.kumaslar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 14px;
  list-style: none;
}
.kumas {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 22px 24px;
  background: var(--beyaz);
  border-radius: var(--kose);
  box-shadow: 0 0 0 1px var(--cizgi);
  position: relative;
}
/* kumaş numunesi gibi zikzak kesik üst kenar */
.kumas::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 7px;
  background:
    linear-gradient(135deg, var(--masa) 50%, transparent 50%) 0 0 / 10px 7px repeat-x,
    linear-gradient(225deg, var(--masa) 50%, transparent 50%) 0 0 / 10px 7px repeat-x;
}
.bolum--kanvas .kumas::before {
  background:
    linear-gradient(135deg, var(--kanvas) 50%, transparent 50%) 0 0 / 10px 7px repeat-x,
    linear-gradient(225deg, var(--kanvas) 50%, transparent 50%) 0 0 / 10px 7px repeat-x;
}
.kumas__ad { font-size: 1.25rem; margin-top: 4px; }
.kumas p { font-size: 0.95rem; line-height: 1.5; color: var(--soluk); }
.rozetler { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-top: 4px; }
.rozet {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--kanvas);
  color: var(--murekkep);
}
.rozet--su { background: #dfe6fb; color: #1d3aa0; }

/* --- Fermuar --------------------------------------------------------------- */

.fermuar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.fermuar__karsilastirma { display: grid; gap: 20px; list-style: none; }
.fermuar__satir { display: grid; grid-template-columns: 4.5em 1fr; align-items: center; gap: 16px; }
.fermuar__ad { font-family: var(--f-mono); font-size: 0.85rem; font-weight: 500; }
.fermuar__satir--vurgu .fermuar__ad { color: var(--tik); }
.fermuar__serit {
  --dis: 8px;
  position: relative;
  height: calc(var(--dis) * 2 + 20px);
  border-radius: 3px;
  background: var(--deniz-2);
}
.fermuar__serit::before,
.fermuar__serit::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px;
  height: var(--dis);
  top: 50%;
  background: repeating-linear-gradient(90deg, #c9ced0 0 calc(var(--dis) * 0.7), transparent calc(var(--dis) * 0.7) calc(var(--dis) * 1.4));
  border-radius: 1px;
}
.fermuar__serit::before { translate: 0 -100%; }
.fermuar__serit::after { background-position: calc(var(--dis) * 0.7) 0; }
.fermuar__satir--vurgu .fermuar__serit { background: var(--tik-koyu); }
.fermuar__satir--vurgu .fermuar__serit::before,
.fermuar__satir--vurgu .fermuar__serit::after {
  background-image: repeating-linear-gradient(90deg, #e9d4a8 0 calc(var(--dis) * 0.7), transparent calc(var(--dis) * 0.7) calc(var(--dis) * 1.4));
}
.fermuar__olcu { padding-left: calc(4.5em + 16px); margin-top: -8px; }
.fermuar__olcu span { font-family: var(--f-mono); font-size: 0.78rem; color: var(--soluk); }

.bilgi-listesi { display: grid; gap: 0; border-top: 1px solid var(--cizgi); }
.bilgi-listesi div { display: grid; grid-template-columns: 10em 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--cizgi); }
.bilgi-listesi dt { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soluk); padding-top: 4px; }
.bilgi-listesi dd { margin: 0; line-height: 1.5; }
@media (max-width: 560px) {
  .bilgi-listesi div, .pencere__veri div { grid-template-columns: 1fr; gap: 4px; }
}

/* --- Özelleştirme listesi ------------------------------------------------- */

.secenekler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  border-top: 1px solid var(--cizgi);
  border-left: 1px solid var(--cizgi);
}
.secenek {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 26px 24px 30px;
  border-right: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
}
.secenek p { color: var(--soluk); font-size: 0.97rem; line-height: 1.5; }
@media (max-width: 900px) { .secenekler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .secenekler { grid-template-columns: 1fr; } }

/* --- Sayfa başlığı (iç sayfalar) ------------------------------------------ */

.sayfa-bas { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.sayfa-bas__ic { display: grid; gap: 20px; }
.sayfa-bas .baslik-1 { font-size: clamp(3rem, 7.2vw, 6.4rem); max-width: 14ch; }

/* --- Hakkımızda ------------------------------------------------------------ */

.hikaye {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.hikaye__gorsel { position: relative; }
.hikaye__gorsel img { width: 100%; max-width: 360px; height: auto; margin-inline: auto; }
.hikaye__alinti {
  font-family: var(--f-baslik);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 0.95;
  color: var(--tik);
  margin-bottom: 20px;
  max-width: 16ch;
}
@media (max-width: 860px) { .hikaye { grid-template-columns: 1fr; } }

.atolye {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  list-style: none;
}
.atolye figure { display: grid; gap: 12px; }
.atolye img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--kose); }
.atolye figcaption { font-size: 0.95rem; line-height: 1.45; color: rgba(244, 245, 241, 0.8); }
.atolye figcaption b { display: block; color: var(--masa); font-stretch: 85%; font-size: 1.1rem; margin-bottom: 2px; }
@media (max-width: 760px) { .atolye { grid-template-columns: 1fr; } .atolye img { aspect-ratio: 16 / 10; } }

.ilkeler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 5vw, 72px);
  list-style: none;
}
.ilke { display: grid; gap: 8px; padding: 24px 0; border-top: 1px solid var(--cizgi); }
.ilke p { color: var(--soluk); }
@media (max-width: 720px) { .ilkeler { grid-template-columns: 1fr; } }

.referanslar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}
.referanslar li {
  padding: 12px 18px;
  border: 1.5px dashed var(--cizgi);
  border-radius: var(--kose);
  font-family: var(--f-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Çağrı bandı ----------------------------------------------------------- */

.cagri { position: relative; overflow: hidden; }
.cagri__ic {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 28px 48px;
  align-items: end;
}
.cagri__eylem { display: flex; flex-wrap: wrap; gap: 12px; }
.cagri__gemi {
  position: absolute;
  right: -40px; bottom: -40px;
  width: min(520px, 60vw);
  opacity: 0.07;
  pointer-events: none;
}
@media (max-width: 860px) { .cagri__ic { grid-template-columns: 1fr; align-items: start; } }

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

.iletisim {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .iletisim { grid-template-columns: 1fr; } }

.kanallar { display: grid; gap: 0; list-style: none; border-top: 1px solid var(--cizgi); }
.kanal { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--cizgi); align-items: start; }
.kanal__simge {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--kanvas);
  color: var(--tik);
}
.kanal__simge svg { width: 20px; height: 20px; }
.kanal__ad { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soluk); }
.kanal__deger { font-weight: 600; font-stretch: 92%; font-size: 1.08rem; overflow-wrap: anywhere; }
.kanal__deger a { text-decoration: none; }
.kanal__deger a:hover { text-decoration: underline; }

.bos { color: var(--soluk); font-weight: 400; font-style: italic; }

.form {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 36px);
  background: var(--beyaz);
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--cizgi);
}
.form__satir { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form__satir { grid-template-columns: 1fr; } }
.alan { display: grid; gap: 6px; }
.alan label { font-weight: 600; font-stretch: 92%; font-size: 0.95rem; }
.alan label .istege-bagli { font-weight: 400; color: var(--soluk); }
.alan input,
.alan select,
.alan textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid rgba(20, 35, 42, 0.25);
  border-radius: var(--kose);
  background: var(--masa);
  font-size: 1rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.alan textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.alan input:hover, .alan select:hover, .alan textarea:hover { border-color: rgba(20, 35, 42, 0.5); }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-color: var(--tebesir); background: var(--beyaz); box-shadow: 0 0 0 3px rgba(43, 78, 201, 0.15); }
.alan [aria-invalid='true'] { border-color: var(--kirmizi); }
.alan__hata { font-size: 0.88rem; color: #b3000c; min-height: 0; }
.alan__hata:empty { display: none; }
.alan__ipucu { font-size: 0.85rem; color: var(--soluk); }
.form__eylem { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form__durum { font-size: 0.92rem; }
.form__durum--hata { color: #b3000c; }
.form__not { font-size: 0.85rem; color: var(--soluk); }

/* --- Alt bilgi ------------------------------------------------------------- */

.alt { background: var(--deniz); color: var(--masa); }
.alt__ic {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding-block: 56px 40px;
}
.alt__marka { display: grid; gap: 16px; align-content: start; }
.alt__marka img { width: 132px; height: auto; }
.alt__marka p { color: rgba(244, 245, 241, 0.72); max-width: 30ch; font-size: 0.95rem; }
.alt__baslik { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 245, 241, 0.6); margin-bottom: 14px; }
.alt__liste { list-style: none; display: grid; gap: 8px; }
.alt__liste a { text-decoration: none; color: var(--masa); }
.alt__liste a:hover { text-decoration: underline; }
.alt__liste .bos { color: rgba(244, 245, 241, 0.55); }
.alt__dip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-block: 20px 28px;
  border-top: 1px solid var(--cizgi-acik);
  font-size: 0.85rem;
  color: rgba(244, 245, 241, 0.6);
}
@media (max-width: 760px) { .alt__ic { grid-template-columns: 1fr; gap: 32px; } }

/* --- Hareket tercihi ------------------------------------------------------- */

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