/* =============================================
   Kanaviçe Başlangıç Atölyesi — Ana Stil Dosyası
   Atmosfer: Ev Tekstili + Anadolu Desen
   ============================================= */

/* ---------- CSS Değişkenler ---------- */
:root {
  /* Ana renkler */
  --renk-zemin: #faf6f1;
  --renk-zemin-sicak: #f5ede3;
  --renk-zemin-koyu: #ece0d1;
  --renk-metin: #3b2f2f;
  --renk-metin-acik: #6b5b4f;
  --renk-baslik: #5c3d2e;
  --renk-vurgu: #b0413e;
  --renk-vurgu-koyu: #8e312f;
  --renk-vurgu-acik: #d4726f;
  --renk-mavi: #4a7c8a;
  --renk-mavi-acik: #7ab0be;
  --renk-yesil: #6a8e5b;
  --renk-altin: #c2a04e;
  --renk-altin-acik: #e8d8a0;
  --renk-beyaz: #ffffff;
  --renk-siyah: #2a1f1f;

  /* Gölgeler */
  --golge-hafif: 0 2px 8px rgba(59,47,47,.07);
  --golge-orta: 0 4px 16px rgba(59,47,47,.1);
  --golge-guclu: 0 8px 32px rgba(59,47,47,.14);

  /* Köşe yuvarlama */
  --radius-kucuk: 6px;
  --radius-orta: 12px;
  --radius-buyuk: 20px;

  /* Yazı tipi */
  --yazi-tipi: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --yazi-tipi-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;

  /* Geçişler */
  --gecis: .25s ease;
  --gecis-yavas: .45s ease;

  /* Düzen */
  --icerik-genislik: 1140px;
  --icerik-dar: 780px;
  --bosluk: 1.5rem;
}

/* ---------- Reset & Temel ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  font-size: 100%;
}

body {
  font-family: var(--yazi-tipi);
  color: var(--renk-metin);
  background: var(--renk-zemin);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--renk-vurgu);
  text-decoration: none;
  transition: color var(--gecis);
}
a:hover { color: var(--renk-vurgu-koyu); }

/* Focus stili (erişilebilirlik) */
:focus-visible {
  outline: 3px solid var(--renk-mavi);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip-link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--renk-vurgu);
  color: var(--renk-beyaz);
  padding: .5rem 1rem;
  border-radius: var(--radius-kucuk);
  z-index: 10000;
  font-weight: 600;
}
.skip-link:focus {
  top: .5rem;
}

/* ---------- Tipografi ---------- */
h1, h2, h3, h4 {
  color: var(--renk-baslik);
  font-weight: 700;
  line-height: 1.25;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .75rem; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); margin-bottom: .5rem; }
h4 { font-size: 1.1rem; margin-bottom: .4rem; }
p { margin-bottom: 1rem; }

/* ---------- Kapsayıcı ---------- */
.kapsayici {
  width: 100%;
  max-width: var(--icerik-genislik);
  margin: 0 auto;
  padding: 0 var(--bosluk);
}

.kapsayici--dar {
  max-width: var(--icerik-dar);
}

/* ---------- Dekoratif Dikiş Deseni (CSS ile) ---------- */
.desen-cizgi {
  width: 100%;
  height: 24px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 8px,
      var(--renk-vurgu-acik) 8px,
      var(--renk-vurgu-acik) 12px,
      transparent 12px,
      transparent 20px
    );
  opacity: .3;
}

.desen-cizgi--ince {
  height: 4px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--renk-altin) 0px,
      var(--renk-altin) 6px,
      transparent 6px,
      transparent 14px
    );
  opacity: .35;
}

/* Çapraz dikis deseni arka plan */
.desen-arka-plan {
  position: relative;
}
.desen-arka-plan::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .04;
  background-image:
    linear-gradient(45deg, var(--renk-vurgu) 25%, transparent 25%),
    linear-gradient(-45deg, var(--renk-vurgu) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--renk-vurgu) 75%),
    linear-gradient(-45deg, transparent 75%, var(--renk-vurgu) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  pointer-events: none;
  z-index: 0;
}
.desen-arka-plan > * { position: relative; z-index: 1; }

/* ---------- Üst Başlık (Header) ---------- */
.ust-baslik {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(250,246,241,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--renk-zemin-koyu);
  transition: box-shadow var(--gecis);
}
.ust-baslik.golge-aktif {
  box-shadow: var(--golge-hafif);
}
.ust-baslik__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.ust-baslik__logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--renk-baslik);
  text-decoration: none;
}
.ust-baslik__logo:hover { color: var(--renk-vurgu); }

/* Logo: dekoratif inline SVG iğne ikonu */
.ust-baslik__logo svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* ---------- Navigasyon ---------- */
.nav {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.nav__link {
  padding: .4rem .75rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--renk-metin);
  border-radius: var(--radius-kucuk);
  transition: background var(--gecis), color var(--gecis);
  white-space: nowrap;
}
.nav__link:hover,
.nav__link--aktif {
  background: var(--renk-zemin-koyu);
  color: var(--renk-vurgu);
}

/* Mobil menü butonu */
.menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  color: var(--renk-metin);
}
.menu-btn svg { width: 26px; height: 26px; }
.menu-btn__kapat { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__hamburger { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__kapat { display: block; }

/* ---------- Kahraman (Hero) Bölümü ---------- */
.kahraman {
  padding: 4rem 0 3rem;
  text-align: center;
  background:
    linear-gradient(180deg, var(--renk-zemin-sicak) 0%, var(--renk-zemin) 100%);
  position: relative;
  overflow: hidden;
}
.kahraman::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -60px;
  width: 300px;
  height: 300px;
  border: 3px dashed var(--renk-altin-acik);
  border-radius: 50%;
  opacity: .25;
  pointer-events: none;
}
.kahraman::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -40px;
  width: 200px;
  height: 200px;
  border: 2px dashed var(--renk-vurgu-acik);
  border-radius: 50%;
  opacity: .18;
  pointer-events: none;
}
.kahraman__baslik {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: .75rem;
}
.kahraman__alt-baslik {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--renk-metin-acik);
  max-width: 600px;
  margin: 0 auto 2rem;
}
.kahraman__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--renk-vurgu);
  color: var(--renk-beyaz);
  padding: .85rem 2rem;
  border-radius: var(--radius-buyuk);
  font-weight: 600;
  font-size: 1rem;
  transition: background var(--gecis), transform var(--gecis);
  border: none;
  cursor: pointer;
}
.kahraman__btn:hover {
  background: var(--renk-vurgu-koyu);
  color: var(--renk-beyaz);
  transform: translateY(-2px);
}

/* ---------- Bölüm Genel ---------- */
.bolum {
  padding: 4rem 0;
}
.bolum--koyu {
  background: var(--renk-zemin-sicak);
}
.bolum--beyaz {
  background: var(--renk-beyaz);
}
.bolum__baslik {
  text-align: center;
  margin-bottom: .5rem;
}
.bolum__alt-baslik {
  text-align: center;
  color: var(--renk-metin-acik);
  max-width: 560px;
  margin: 0 auto 2.5rem;
  font-size: .95rem;
}

/* Dekoratif bölüm ayracı */
.bolum-ayirac {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 0 auto 2rem;
  max-width: 300px;
}
.bolum-ayirac__cizgi {
  flex: 1;
  height: 1px;
  background: var(--renk-zemin-koyu);
}
.bolum-ayirac__ikon {
  width: 18px;
  height: 18px;
  color: var(--renk-vurgu-acik);
  flex-shrink: 0;
}

/* ---------- Kart Izgarası ---------- */
.kart-izgara {
  display: grid;
  gap: 1.5rem;
}
.kart-izgara--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kart-izgara--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.kart {
  background: var(--renk-beyaz);
  border-radius: var(--radius-orta);
  padding: 1.75rem;
  box-shadow: var(--golge-hafif);
  border: 1px solid rgba(236,224,209,.5);
  transition: box-shadow var(--gecis), transform var(--gecis);
}
.kart:hover {
  box-shadow: var(--golge-orta);
  transform: translateY(-3px);
}

.kart__ikon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-kucuk);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--renk-beyaz);
}
.kart__ikon--kirmizi { background: var(--renk-vurgu); }
.kart__ikon--mavi { background: var(--renk-mavi); }
.kart__ikon--yesil { background: var(--renk-yesil); }
.kart__ikon--altin { background: var(--renk-altin); }

.kart__ikon svg { width: 24px; height: 24px; }

/* ---------- İplik & Renk İnteraktif ---------- */
.iplik-araci {
  background: var(--renk-beyaz);
  border-radius: var(--radius-orta);
  padding: 2rem;
  box-shadow: var(--golge-hafif);
  border: 1px solid rgba(236,224,209,.5);
}

.iplik-araci__slider-grubu {
  margin-bottom: 1.5rem;
}
.iplik-araci__etiket {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: .5rem;
  font-size: .95rem;
}
.iplik-araci__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--renk-zemin-koyu);
  border-radius: 3px;
  outline: none;
}
.iplik-araci__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--renk-vurgu);
  cursor: pointer;
  border: 3px solid var(--renk-beyaz);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.iplik-araci__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--renk-vurgu);
  cursor: pointer;
  border: 3px solid var(--renk-beyaz);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.iplik-araci__sonuc {
  background: var(--renk-zemin-sicak);
  border-radius: var(--radius-kucuk);
  padding: 1.25rem;
  border-left: 4px solid var(--renk-vurgu);
}
.iplik-araci__sonuc p { margin-bottom: .5rem; }
.iplik-araci__sonuc p:last-child { margin-bottom: 0; }

/* Seviye değiştirici */
.seviye-grup {
  display: flex;
  gap: .5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.seviye-btn {
  padding: .55rem 1.25rem;
  border-radius: var(--radius-buyuk);
  border: 2px solid var(--renk-zemin-koyu);
  background: var(--renk-beyaz);
  color: var(--renk-metin);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: all var(--gecis);
}
.seviye-btn:hover {
  border-color: var(--renk-vurgu-acik);
}
.seviye-btn--aktif {
  border-color: var(--renk-vurgu);
  background: var(--renk-vurgu);
  color: var(--renk-beyaz);
}

/* ---------- SSS (FAQ) Akordeonu ---------- */
.sss-liste {
  max-width: var(--icerik-dar);
  margin: 0 auto;
}
.sss-oge {
  border-bottom: 1px solid var(--renk-zemin-koyu);
}
.sss-soru {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--renk-baslik);
  font-family: inherit;
  line-height: 1.4;
  gap: 1rem;
}
.sss-soru:hover { color: var(--renk-vurgu); }

.sss-soru__ikon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--gecis);
  color: var(--renk-vurgu-acik);
}
.sss-oge--acik .sss-soru__ikon {
  transform: rotate(45deg);
}

.sss-cevap {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--gecis-yavas);
}
.sss-cevap__ic {
  padding: 0 0 1.25rem;
  color: var(--renk-metin-acik);
  line-height: 1.7;
}

/* ---------- Projeler Bölümü ---------- */
.proje-kart {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 700px) {
  .proje-kart {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
}
.proje-kart__gorsel {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-orta);
  background: var(--renk-zemin-koyu);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--renk-zemin-koyu);
}
.proje-kart__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-orta);
}
.proje-kart__icerik h3 {
  margin-bottom: .5rem;
}
.proje-kart + .proje-kart {
  padding-top: 2rem;
  border-top: 1px dashed var(--renk-zemin-koyu);
}

/* ---------- Görsel-Metin Yan Yana (Responsive) ---------- */
.gorsel-metin {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 2rem 0;
}
@media (min-width: 640px) {
  .gorsel-metin { grid-template-columns: 260px 1fr; }
  .gorsel-metin--ters { grid-template-columns: 1fr 260px; }
  .gorsel-metin--ters .gorsel-metin__gorsel { order: 2; }
  .gorsel-metin--ters .gorsel-metin__icerik { order: 1; }
}
@media (min-width: 900px) {
  .gorsel-metin { grid-template-columns: 320px 1fr; }
  .gorsel-metin--ters { grid-template-columns: 1fr 320px; }
}
.gorsel-metin__gorsel {
  width: 100%;
  border-radius: var(--radius-orta);
  overflow: hidden;
  border: 1px solid var(--renk-zemin-koyu);
}
.gorsel-metin__gorsel img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.gorsel-metin__icerik h3 { margin-bottom: .5rem; }

/* ---------- Hatalar Bölümü ---------- */
.hata-liste {
  display: grid;
  gap: 1.25rem;
}
.hata-oge {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  background: var(--renk-beyaz);
  border-radius: var(--radius-orta);
  box-shadow: var(--golge-hafif);
  border: 1px solid rgba(236,224,209,.5);
}
.hata-oge__numara {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--renk-vurgu);
  color: var(--renk-beyaz);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Alt Bilgi (Footer) ---------- */
.alt-bilgi {
  background: var(--renk-siyah);
  color: rgba(255,255,255,.7);
  padding: 3rem 0 1.5rem;
}
.alt-bilgi a {
  color: rgba(255,255,255,.75);
  transition: color var(--gecis);
}
.alt-bilgi a:hover { color: var(--renk-beyaz); }

.alt-bilgi__izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}
.alt-bilgi__baslik {
  color: var(--renk-beyaz);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .75rem;
}
.alt-bilgi__liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.alt-bilgi__liste a {
  font-size: .9rem;
}
.alt-bilgi__cizgi {
  border: none;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-bottom: 1rem;
}
.alt-bilgi__telif {
  text-align: center;
  font-size: .8rem;
  opacity: .6;
}

/* ---------- İletişim Sayfası ---------- */
.iletisim-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Форма как отдельный блок */
.form-blok {
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-zemin-koyu);
  border-radius: var(--radius-orta);
  padding: 2rem;
  box-shadow: var(--golge-hafif);
  max-width: 640px;
  margin: 0 auto;
}
.form-blok h2 {
  margin-bottom: 1.25rem;
}

.iletisim-bilgi__oge {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.iletisim-bilgi__ikon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-kucuk);
  background: var(--renk-zemin-sicak);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--renk-vurgu);
}
.iletisim-bilgi__ikon svg { width: 20px; height: 20px; }

/* ---------- Form Stilleri ---------- */
.form-grup {
  margin-bottom: 1.25rem;
}
.form-etiket {
  display: block;
  font-weight: 600;
  margin-bottom: .35rem;
  font-size: .9rem;
  color: var(--renk-baslik);
}
.form-etiket--zorunlu::after {
  content: ' *';
  color: var(--renk-vurgu);
}
.form-girdi,
.form-metin {
  width: 100%;
  padding: .7rem 1rem;
  border: 2px solid var(--renk-zemin-koyu);
  border-radius: var(--radius-kucuk);
  font-family: inherit;
  font-size: .95rem;
  color: var(--renk-metin);
  background: var(--renk-beyaz);
  transition: border-color var(--gecis);
}
.form-girdi:focus,
.form-metin:focus {
  border-color: var(--renk-mavi);
  outline: none;
}
.form-girdi--hata,
.form-metin--hata {
  border-color: var(--renk-vurgu);
}
.form-metin {
  min-height: 120px;
  resize: vertical;
}
.form-onay {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .85rem;
  color: var(--renk-metin-acik);
}
.form-onay input { margin-top: .25rem; flex-shrink: 0; }

.form-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--renk-vurgu);
  color: var(--renk-beyaz);
  padding: .75rem 2rem;
  border-radius: var(--radius-kucuk);
  border: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--gecis);
  font-family: inherit;
}
.form-btn:hover { background: var(--renk-vurgu-koyu); }
.form-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.form-mesaj {
  padding: 1rem;
  border-radius: var(--radius-kucuk);
  font-size: .9rem;
  margin-top: 1rem;
  display: none;
}
.form-mesaj--basari {
  background: #e8f5e8;
  color: #2e6b2e;
  border: 1px solid #a8d5a8;
  display: block;
}
.form-mesaj--hata {
  background: #fde8e8;
  color: #8e312f;
  border: 1px solid #f0b8b8;
  display: block;
}
.form-hata-metin {
  color: var(--renk-vurgu);
  font-size: .8rem;
  margin-top: .25rem;
  display: none;
}

/* Honeypot gizli alan */
.gizli-alan { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  padding: .75rem 0;
  font-size: .85rem;
  color: var(--renk-metin-acik);
}
.breadcrumb a { color: var(--renk-metin-acik); }
.breadcrumb a:hover { color: var(--renk-vurgu); }
.breadcrumb__ayirac {
  margin: 0 .4rem;
  opacity: .5;
}

/* ---------- Hakkımızda / Metin sayfaları ---------- */
.metin-sayfa {
  padding: 3rem 0;
  min-height: 60vh;
}
.metin-sayfa h1 { margin-bottom: 1.5rem; }
.metin-sayfa h2 { margin-top: 2rem; }
.metin-sayfa h3 { margin-top: 1.5rem; }
.metin-sayfa ul,
.metin-sayfa ol {
  margin: .75rem 0 1rem 1.5rem;
}
.metin-sayfa li {
  margin-bottom: .35rem;
}

/* ---------- Cookie Banner ---------- */
.cerez-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--renk-beyaz);
  box-shadow: 0 -4px 20px rgba(0,0,0,.12);
  padding: .75rem var(--bosluk);
  display: none;
  border-top: 3px solid var(--renk-vurgu-acik);
}
.cerez-banner--gorunur { display: block; }

.cerez-banner__ic {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.cerez-banner__metin {
  flex: 1 1 auto;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--renk-metin-acik);
  text-align: center;
}
.cerez-banner__metin a { text-decoration: underline; }

.cerez-banner__butonlar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.cerez-btn {
  padding: .6rem 1.25rem;
  border-radius: var(--radius-kucuk);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  border: 2px solid var(--renk-vurgu);
  font-family: inherit;
  transition: all var(--gecis);
}
.cerez-btn--kabul {
  background: var(--renk-vurgu);
  color: var(--renk-beyaz);
}
.cerez-btn--kabul:hover { background: var(--renk-vurgu-koyu); border-color: var(--renk-vurgu-koyu); }

.cerez-btn--reddet {
  background: var(--renk-beyaz);
  color: var(--renk-vurgu);
}
.cerez-btn--reddet:hover { background: var(--renk-zemin-sicak); }

.cerez-btn--ayarlar {
  background: transparent;
  color: var(--renk-metin);
  border-color: var(--renk-zemin-koyu);
}
.cerez-btn--ayarlar:hover { border-color: var(--renk-metin-acik); }

/* Cookie Ayarlar Modalı */
.cerez-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.cerez-modal--gorunur { display: flex; }

.cerez-modal__arka {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.cerez-modal__kutu {
  position: relative;
  background: var(--renk-beyaz);
  border-radius: var(--radius-orta);
  max-width: 520px;
  width: calc(100% - 2rem);
  max-height: 80vh;
  overflow-y: auto;
  padding: 2rem;
  box-shadow: var(--golge-guclu);
}
.cerez-modal__kapat {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--renk-metin-acik);
  padding: .25rem;
}
.cerez-modal__kapat svg { width: 20px; height: 20px; }

.cerez-kategori {
  padding: 1rem 0;
  border-bottom: 1px solid var(--renk-zemin-koyu);
}
.cerez-kategori:last-of-type { border-bottom: none; }

.cerez-kategori__ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cerez-kategori__baslik { font-weight: 600; }
.cerez-kategori__aciklama {
  font-size: .85rem;
  color: var(--renk-metin-acik);
  margin-top: .25rem;
}

/* Toggle switch */
.cerez-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.cerez-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cerez-toggle__gorsel {
  position: absolute;
  inset: 0;
  background: var(--renk-zemin-koyu);
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--gecis);
}
.cerez-toggle__gorsel::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--renk-beyaz);
  border-radius: 50%;
  transition: transform var(--gecis);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.cerez-toggle input:checked + .cerez-toggle__gorsel { background: var(--renk-yesil); }
.cerez-toggle input:checked + .cerez-toggle__gorsel::after { transform: translateX(20px); }
.cerez-toggle input:disabled + .cerez-toggle__gorsel { opacity: .6; cursor: not-allowed; }

.cerez-modal__kaydet {
  margin-top: 1rem;
  width: 100%;
}

/* ---------- Sayfa İçi Dekoratif Stitch SVG ---------- */
.dikis-dekor {
  display: block;
  margin: 2rem auto;
  max-width: 200px;
  height: auto;
  opacity: .2;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--renk-beyaz);
    flex-direction: column;
    padding: 1rem;
    box-shadow: var(--golge-orta);
    transform: translateY(-120%);
    transition: transform var(--gecis-yavas);
    z-index: 899;
    gap: .25rem;
  }
  .nav--acik { transform: translateY(0); }
  .nav__link { width: 100%; padding: .75rem 1rem; }
  .menu-btn { display: block; }

  .kahraman { padding: 3rem 0 2rem; }

  .bolum { padding: 2.5rem 0; }

  .proje-kart__gorsel { max-width: 100%; }

}

@media (max-width: 480px) {
  :root { --bosluk: 1rem; }
  .cerez-banner { padding: .6rem var(--bosluk); }
  .cerez-banner__ic { flex-direction: column; align-items: stretch; gap: .5rem; }
  .cerez-banner__metin { text-align: left; font-size: .8rem; }
  .cerez-banner__butonlar { flex-direction: row; justify-content: stretch; }
  .cerez-btn { flex: 1; text-align: center; padding: .5rem .75rem; font-size: .8rem; }
}

/* ---------- Animasyonlar ---------- */
.gorunur-ol {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.gorunur-ol--gorundu {
  opacity: 1;
  transform: translateY(0);
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .gorunur-ol { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Yazdırma ---------- */
@media print {
  .ust-baslik, .alt-bilgi, .cerez-banner, .cerez-modal { display: none !important; }
  body { background: #fff; color: #000; }
  .bolum { padding: 1rem 0; }
}