@charset "UTF-8";
/* =================================================================
   MISIRLIOĞLU Mobilya — tasarım sistemi
   Referans harmanı:
     · Nestora   → sıcak krem palet, düz+italik ikili serif başlık,
                   kavisli dikey görsel şeridi, "• ETİKET" üst başlık,
                   kademeli proje ızgarası, // ADIM süreç, koyu footer
     · Sōl Haus  → editoryal serif, numaralı hizmet kartları,
                   büyük görsel + yan panel proje kurgusu
     · PeaceCraft→ terrakota vurgu rengi, ikili CTA, "neler yapıyoruz"
                   maddeli koyu bant
   ================================================================= */

/* -----------------------------------------------------------------
   1. Değişkenler
   ----------------------------------------------------------------- */
:root {
  /* Renk */
  --ink:        #14110D;
  --ink-soft:   #2A231B;
  --walnut:     #6C5B48;
  --taupe:      #A79684;
  --sand:       #E7DACA;
  --sand-deep:  #D8C8B4;
  --cream:      #FBF6EE;
  --paper:      #FFFDF9;
  --terra:      #8C491F;
  --terra-deep: #722C0F;

  --line:       rgba(20, 17, 13, .13);
  --line-soft:  rgba(20, 17, 13, .07);
  --line-dark:  rgba(251, 246, 238, .16);

  /* Tipografi */
  --serif: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Ölçü */
  --kenar:      clamp(1.25rem, 5vw, 5rem);
  --en:         1320px;
  --bolum-y:    clamp(4.5rem, 10vw, 9rem);
  --yuvarlak:   4px;
  --yuvarlak-lg: 10px;

  /* Hareket */
  --gecis:      .5s cubic-bezier(.22, .61, .36, 1);
  --gecis-hizli:.28s cubic-bezier(.22, .61, .36, 1);
}

/* -----------------------------------------------------------------
   2. Sıfırlama & temel
   ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

button, input, textarea, select { font: inherit; color: inherit; }

ul, ol { list-style: none; padding: 0; }

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

::selection { background: var(--terra); color: var(--paper); }

/* -----------------------------------------------------------------
   3. Tipografi
   ----------------------------------------------------------------- */
.g-display,
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* Nestora imzası: ikinci satır italik */
.g-italik {
  display: block;
  font-style: italic;
  font-weight: 400;
}

h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.95rem, 4.4vw, 3.15rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.25; }

p { text-wrap: pretty; }

/* "• HAKKIMIZDA" üst etiketi */
.g-etiket {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--walnut);
  margin-bottom: 1.35rem;
}
.g-etiket::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--terra);
  flex: none;
}
.g-etiket--acik { color: var(--sand-deep); }

.g-giris {
  max-width: 54ch;
  color: var(--walnut);
  font-size: clamp(.95rem, 1.5vw, 1.06rem);
}

.g-orta { text-align: center; }
.g-orta .g-giris { margin-inline: auto; }
.g-orta .g-etiket { justify-content: center; }

/* -----------------------------------------------------------------
   4. Düzen
   ----------------------------------------------------------------- */
.kap {
  width: 100%;
  max-width: var(--en);
  margin-inline: auto;
  padding-inline: var(--kenar);
}

.bolum { padding-block: var(--bolum-y); position: relative; }
.bolum--sand  { background: var(--sand); }
.bolum--paper { background: var(--paper); }
.bolum--koyu  { background: var(--ink); color: var(--cream); }
.bolum--koyu h2, .bolum--koyu h3 { color: var(--cream); }
.bolum--koyu .g-giris { color: rgba(251, 246, 238, .66); }

.bolum-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.75rem 2.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.bolum-bas > div { min-width: 0; }

/* -----------------------------------------------------------------
   5. Düğmeler
   ----------------------------------------------------------------- */
.dugme {
  --d-bg: var(--ink);
  --d-fg: var(--cream);
  --d-kenar: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: .85rem 1.85rem;
  border: 1px solid var(--d-kenar);
  border-radius: 999px;
  background: var(--d-bg);
  color: var(--d-fg);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background var(--gecis-hizli), color var(--gecis-hizli),
              border-color var(--gecis-hizli), transform var(--gecis-hizli);
}
.dugme:hover {
  transform: translateY(-2px);
  --d-bg: var(--terra);
  --d-kenar: var(--terra);
  --d-fg: var(--paper);
}
.dugme .ikon { transition: transform var(--gecis-hizli); }
.dugme:hover .ikon { transform: translateX(3px); }

.dugme--cizgi { --d-bg: transparent; --d-fg: var(--ink); --d-kenar: var(--line); }
.dugme--acik  { --d-bg: var(--cream); --d-fg: var(--ink); --d-kenar: var(--cream); }
.dugme--acik-cizgi { --d-bg: rgba(20, 17, 13, .28); --d-fg: var(--cream); --d-kenar: rgba(251, 246, 238, .55); }
.dugme--terra { --d-bg: var(--terra); --d-fg: var(--paper); --d-kenar: var(--terra); }
.dugme--terra:hover { --d-bg: var(--terra-deep); --d-kenar: var(--terra-deep); }

/* Altı çizili metin bağlantısı */
.baglanti {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: .875rem;
  font-weight: 500;
  transition: gap var(--gecis-hizli), color var(--gecis-hizli);
}
.baglanti:hover { gap: .9em; color: var(--terra); }

.dugme-grup {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* -----------------------------------------------------------------
   6. Navigasyon
   ----------------------------------------------------------------- */
.atla {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: 0 0 var(--yuvarlak) 0;
}
.atla:focus { left: 0; top: 0; }

.tepe {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(251, 246, 238, .86);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--gecis-hizli), border-color var(--gecis-hizli),
              box-shadow var(--gecis-hizli), color var(--gecis-hizli);
}
.tepe--kaydi { box-shadow: 0 8px 30px rgba(20, 17, 13, .07); }

/* Hero görselinin üzerine binen saydam hâli */
.tepe--seffaf {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(251, 246, 238, .22);
  color: var(--cream);
}
.tepe--seffaf .marka__alt { color: rgba(251, 246, 238, .6); }
.tepe--seffaf .gezinme a { color: rgba(251, 246, 238, .82); }
.tepe--seffaf .gezinme a:hover,
.tepe--seffaf .gezinme a[aria-current="page"] { color: var(--cream); }
/* Kaydırınca normal hâline döner */
.tepe--seffaf.tepe--kaydi {
  position: fixed;
  background: rgba(251, 246, 238, .9);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--line-soft);
  color: var(--ink);
}
.tepe--seffaf.tepe--kaydi .marka__alt { color: var(--taupe); }
.tepe--seffaf.tepe--kaydi .gezinme a { color: var(--ink-soft); }
.tepe--seffaf.tepe--kaydi .gezinme a[aria-current="page"] { color: var(--terra); }

.tepe .kap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 76px;
}

.marka {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  line-height: 1;
}
.marka__ad {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 2.2vw, 1.28rem);
  letter-spacing: .07em;
  font-weight: 500;
}
.marka__alt {
  display: block;
  margin-top: 3px;
  font-size: .56rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--taupe);
}

.gezinme--sol { grid-column: 1; }
.tepe__sag {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.6rem);
}
.gezinme ul { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.85rem); }
.gezinme a {
  position: relative;
  display: block;
  padding-block: .4rem;
  font-size: .84rem;
  font-weight: 450;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color var(--gecis-hizli);
}
.gezinme a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--gecis-hizli);
}
.gezinme a:hover { color: var(--ink); }
.gezinme a:hover::after { transform: scaleX(1); transform-origin: left; }
.gezinme a[aria-current="page"] { color: var(--terra); }
.gezinme a[aria-current="page"]::after { transform: scaleX(1); }

.tepe__tel {
  display: inline-flex !important;
  align-items: center;
  gap: .45em;
  padding: .5rem 1rem !important;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 500;
  opacity: .9;
}
.tepe__tel::after { display: none; }
.tepe__tel:hover { opacity: 1; }

/* ---- Dil seçici ---- */
.dil-sec {
  display: flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(251, 246, 238, .5);
}
.dil-sec a {
  display: block;
  padding: .3rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--taupe);
  transition: color var(--gecis-hizli), background var(--gecis-hizli);
}
.dil-sec a:hover { color: var(--ink); }
.dil-sec a[aria-current="true"] {
  background: var(--ink);
  color: var(--cream);
}
/* Hero üzerindeki saydam hâl */
.tepe--seffaf .dil-sec {
  border-color: rgba(251, 246, 238, .3);
  background: rgba(251, 246, 238, .1);
}
.tepe--seffaf .dil-sec a { color: rgba(251, 246, 238, .75); }
.tepe--seffaf .dil-sec a:hover { color: var(--cream); }
.tepe--seffaf .dil-sec a[aria-current="true"] {
  background: var(--cream);
  color: var(--ink);
}
.tepe--seffaf.tepe--kaydi .dil-sec {
  border-color: var(--line);
  background: rgba(251, 246, 238, .5);
}
.tepe--seffaf.tepe--kaydi .dil-sec a { color: var(--taupe); }
.tepe--seffaf.tepe--kaydi .dil-sec a[aria-current="true"] {
  background: var(--ink);
  color: var(--cream);
}

/* -----------------------------------------------------------------
   7. Hero — tam ekran görsel + kademeli dev tipografi (Sōl Haus)
   ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92svh, 860px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(8rem, 18vh, 12rem) clamp(2.5rem, 6vw, 4.5rem);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.hero__fon {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__fon img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Tipografinin okunması için sıcak koyu perde */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(26, 19, 13, .62) 0%, rgba(26, 19, 13, .34) 52%, rgba(26, 19, 13, .1) 100%),
    linear-gradient(180deg, rgba(20, 17, 13, .32) 0%, transparent 18%, transparent 54%, rgba(20, 17, 13, .42) 100%);
}

.hero__ic { position: relative; width: 100%; }

.hero__etiket {
  color: rgba(251, 246, 238, .75);
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}
.hero__etiket::before { background: var(--sand); }

/* Kademeli üç satır: her satır bir öncekinden içeri kayar */
.hero h1 {
  font-size: clamp(2.6rem, 9.5vw, 8rem);
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--cream);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}
.hero h1 span { display: block; }
.hero h1 .s2 { margin-left: clamp(1.5rem, 12vw, 11rem); font-style: italic; }
.hero h1 .s3 { margin-left: clamp(.75rem, 6vw, 5.5rem); }

.hero__ayak {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.75rem 3rem;
  max-width: 1120px;
  margin-left: auto;
}
.hero__metin {
  max-width: 34ch;
  color: rgba(251, 246, 238, .78);
  font-size: clamp(.9rem, 1.4vw, 1rem);
  line-height: 1.7;
}
.hero .dugme-grup { align-items: center; }

.hero__bag {
  display: inline-flex;
  align-items: center;
  gap: .85em;
  min-height: 48px;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(251, 246, 238, .5);
  color: var(--cream);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: gap var(--gecis-hizli), border-color var(--gecis-hizli), color var(--gecis-hizli);
}
.hero__bag .ikon { margin-left: clamp(1.5rem, 4vw, 3.5rem); }
.hero__bag:hover { gap: 1.4em; color: #fff; border-color: var(--cream); }

/* Arkadaki hayalet kelime işareti */
.hero__hayalet {
  position: absolute;
  top: clamp(1rem, 3vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 13vw, 11rem);
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  color: rgba(251, 246, 238, .07);
  pointer-events: none;
  user-select: none;
}

/* Kavisli dikey görsel şeridi — dikey fotoğraflar için */
.serit {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.75rem) 0;
  padding-inline: var(--kenar);
  background: linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%);
  overflow: hidden;
}

.serit__raf {
  display: flex;
  gap: clamp(.5rem, 1.1vw, .9rem);
  align-items: flex-end;
  max-width: 1500px;
  margin-inline: auto;
}

.serit__kart {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4.15;
  border-radius: var(--yuvarlak-lg) var(--yuvarlak-lg) 0 0;
  overflow: hidden;
  background: var(--sand-deep);
  box-shadow: 0 18px 44px -24px rgba(20, 17, 13, .45);
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.serit__kart img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
/* Kaldırma efekti yalnızca imleçli cihazlarda; dokunmatikte :hover
   takılı kalıp yay dizilimini bozuyordu. */
@media (hover: hover) and (pointer: fine) {
  .serit__kart:hover { transform: translateY(-10px) !important; }
}
.serit__kart:hover img { transform: scale(1.06); }

/* Yay: ortadakiler yukarıda, kenarlar aşağıda */
.serit__kart:nth-child(1) { transform: translateY(42px) rotate(-3.2deg); }
.serit__kart:nth-child(2) { transform: translateY(20px) rotate(-2deg); }
.serit__kart:nth-child(3) { transform: translateY(6px)  rotate(-.8deg); }
.serit__kart:nth-child(4) { transform: translateY(0)    rotate(0); }
.serit__kart:nth-child(5) { transform: translateY(6px)  rotate(.8deg); }
.serit__kart:nth-child(6) { transform: translateY(20px) rotate(2deg); }
.serit__kart:nth-child(7) { transform: translateY(42px) rotate(3.2deg); }

.serit__yazi {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem .85rem .85rem;
  background: linear-gradient(transparent, rgba(20, 17, 13, .78));
  color: var(--cream);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--gecis-hizli), transform var(--gecis-hizli);
}
.serit__kart:hover .serit__yazi { opacity: 1; transform: none; }

/* -----------------------------------------------------------------
   8. Kayan kategori şeridi
   ----------------------------------------------------------------- */
.kayan {
  background: var(--ink);
  color: var(--sand);
  padding-block: 1.05rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.kayan__iz {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: kay 42s linear infinite;
}
.kayan:hover .kayan__iz { animation-play-state: paused; }
.kayan__parca {
  display: flex;
  align-items: center;
  gap: 3rem;
  font-family: var(--serif);
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  letter-spacing: .04em;
  white-space: nowrap;
}
.kayan__parca span::after {
  content: "·";
  margin-left: 3rem;
  color: var(--terra);
}
@keyframes kay { to { transform: translateX(-50%); } }

/* -----------------------------------------------------------------
   9. Hakkımızda — dağınık görsel kurgusu
   ----------------------------------------------------------------- */
.hakkinda { position: relative; }

.hakkinda__izgara {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  row-gap: clamp(.9rem, 2vw, 1.5rem);
}

.hakkinda__yazi {
  grid-column: 4 / 10;
  grid-row: 1 / 3;
  text-align: center;
  padding-inline: clamp(0rem, 1vw, 1rem);
}
.hakkinda__yazi h2 { margin-bottom: 1.35rem; }
.hakkinda__yazi p { color: var(--walnut); margin-bottom: 1rem; }
.hakkinda__yazi .baglanti { margin-top: .85rem; }

.hakkinda__g {
  overflow: hidden;
  border-radius: var(--yuvarlak);
  background: var(--sand-deep);
}
.hakkinda__g img { width: 100%; height: 100%; object-fit: cover; }

/* Sol ve sağ sütunda ikişer görsel; hafif kaydırmayla dağınık his */
.hakkinda__g--1 { grid-column: 1 / 4;   grid-row: 1; aspect-ratio: 4/3; transform: translateY(-14%); }
.hakkinda__g--2 { grid-column: 1 / 4;   grid-row: 2; aspect-ratio: 5/4; transform: translateY(2%); }
.hakkinda__g--3 { grid-column: 10 / 13; grid-row: 1; aspect-ratio: 4/3; transform: translateY(-2%); }
.hakkinda__g--4 { grid-column: 10 / 13; grid-row: 2; aspect-ratio: 3/4; transform: translateY(12%); }

/* -----------------------------------------------------------------
   10. Hizmetler — numaralı ızgara (Sōl Haus + Nestora)
   ----------------------------------------------------------------- */
.hizmetler {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.hizmet {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1.75rem, 3vw, 2.6rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background var(--gecis-hizli);
}
.hizmet:hover { background: var(--paper); }
.hizmet__no {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--taupe);
}
.hizmet .ikon {
  width: 30px; height: 30px;
  color: var(--terra);
  stroke-width: 1.2;
  margin-block: .35rem .25rem;
}
.hizmet h3 { font-size: 1.28rem; }
.hizmet p { font-size: .9rem; color: var(--walnut); flex: 1; }
.hizmet .baglanti { align-self: flex-start; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

/* Kategori bloğu — koyu zemin, solda metin, sağda numaralı görsel kartlar (Sōl Haus) */
.kategori-blok {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.kategori-blok__yazi { align-self: center; }
/* Yapışkan davranış yalnızca iki sütunlu düzende anlamlı; tek sütuna
   inince metin kartların üstüne biniyordu. */
@media (min-width: 1101px) {
  .kategori-blok__yazi { position: sticky; top: 7rem; }
}
.kategori-blok__yazi h2 { margin-bottom: 1.15rem; }
.kategori-blok__yazi .g-giris { margin-bottom: 1.75rem; }

.kategori-kartlar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.8rem, 1.8vw, 1.25rem);
}
.kategori-kart {
  display: block;
  padding: clamp(.7rem, 1.4vw, 1rem);
  border-radius: var(--yuvarlak);
  background: var(--cream);
  transition: transform var(--gecis-hizli), box-shadow var(--gecis-hizli);
}
.kategori-kart:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6);
}
.kategori-kart__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .7rem;
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--taupe);
}
.kategori-kart__gorsel {
  display: block;          /* span olduğu için gerekli: aspect-ratio satır içi öğede çalışmaz */
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  overflow: hidden;
  background: var(--sand-deep);
}
.kategori-kart__gorsel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.kategori-kart:hover .kategori-kart__gorsel img { transform: scale(1.06); }
.kategori-kart h3 {
  margin-top: .75rem;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
}
.kategori-kart p {
  margin-top: .3rem;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--walnut);
  /* Metin PHP'de kesilmiyor; taşan kısmı burada sınırlıyoruz */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Hizmet detay satırları (zig-zag) */
.hizmet-satirlar { display: grid; gap: clamp(3.5rem, 8vw, 7rem); }

.hizmet-satir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  scroll-margin-top: 7rem;
}
.hizmet-satir--ters .hizmet-satir__gorsel { order: 2; }

.hizmet-satir__gorsel {
  border-radius: var(--yuvarlak-lg);
  overflow: hidden;
  background: var(--sand-deep);
  aspect-ratio: 4 / 3;
}
.hizmet-satir__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.hizmet-satir__yazi h2 { margin-bottom: 1rem; }

.madde-liste { display: grid; gap: 0; }
.madde-liste li {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding-block: .7rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: .92rem;
}
.madde-liste li:first-child { border-top: 1px solid var(--line-soft); }
.madde-liste .ikon { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--terra); stroke-width: 2; }

/* -----------------------------------------------------------------
   11. Projeler — kademeli ızgara
   ----------------------------------------------------------------- */
.suzgec {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.suzgec button, .suzgec a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 42px;
  padding: .5rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: .82rem;
  cursor: pointer;
  transition: all var(--gecis-hizli);
}
.suzgec button:hover, .suzgec a:hover { border-color: var(--walnut); }
.suzgec [aria-pressed="true"], .suzgec [aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.suzgec small { opacity: .55; font-size: .72rem; }

.proje-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
}
/* Kademe: 2. sütun aşağı, 3. sütun hafif aşağı */
.proje-izgara--kademeli > *:nth-child(3n + 2) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.proje-izgara--kademeli > *:nth-child(3n + 3) { margin-top: clamp(.75rem, 2vw, 1.5rem); }

.proje {
  display: block;
  opacity: 1;
}
.proje__cerceve {
  position: relative;
  overflow: hidden;
  border-radius: var(--yuvarlak);
  background: var(--sand-deep);
  aspect-ratio: 3 / 4;
}
.proje[data-yon="yatay"] .proje__cerceve { aspect-ratio: 4 / 3; }
.proje__cerceve img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}
.proje:hover .proje__cerceve img { transform: scale(1.05); }

.proje__rozet {
  position: absolute;
  top: .85rem; left: .85rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(251, 246, 238, .92);
  backdrop-filter: blur(6px);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .06em;
}
.proje__sayi {
  position: absolute;
  top: .85rem; right: .85rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: rgba(20, 17, 13, .6);
  backdrop-filter: blur(6px);
  color: var(--cream);
  font-size: .68rem;
}

.proje__bilgi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .95rem;
}
.proje__bilgi h3 { font-size: 1.12rem; }
.proje__yil { font-size: .8rem; color: var(--taupe); flex: none; }
.proje__konum {
  display: flex;
  align-items: center;
  gap: .4em;
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--walnut);
}
.proje__konum .ikon { width: 14px; height: 14px; opacity: .7; }

/* -----------------------------------------------------------------
   12. Neler yapıyoruz — koyu bant (PeaceCraft)
   ----------------------------------------------------------------- */
.teslim {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.teslim__liste { display: grid; gap: 0; margin-top: 2rem; }
.teslim__liste li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line-dark);
}
.teslim__liste li:first-child { border-top: 1px solid var(--line-dark); }
.teslim__liste .ikon {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 3px;
  color: var(--terra);
  stroke-width: 2;
}
.teslim__liste strong { display: block; font-weight: 500; font-size: .98rem; }
.teslim__liste span { font-size: .85rem; color: rgba(251, 246, 238, .6); }

.teslim__gorsel {
  position: relative;
  border-radius: var(--yuvarlak-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.teslim__gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* Yüzen küçük kart (PeaceCraft) */
.teslim__yuzen {
  position: absolute;
  right: -1.25rem; bottom: 2rem;
  width: 45%;
  max-width: 220px;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  border: 5px solid var(--ink);
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .6);
  aspect-ratio: 4 / 3;
}
.teslim__yuzen img { width: 100%; height: 100%; object-fit: cover; }

/* -----------------------------------------------------------------
   13. Süreç — // ADIM 01
   ----------------------------------------------------------------- */
.surec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.surec__adim {
  padding: 2rem clamp(1rem, 2vw, 1.75rem) .5rem;
  border-left: 1px solid var(--line);
}
.surec__adim:last-child { border-right: 1px solid var(--line); }
.surec__no {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--terra);
  margin-bottom: 2.5rem;
}
.surec__sekil {
  width: 58px; height: 58px;
  margin-bottom: 1.5rem;
  color: var(--walnut);
  opacity: .8;
}
.surec__adim h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.surec__adim p { font-size: .88rem; color: var(--walnut); }

/* -----------------------------------------------------------------
   14. Video
   ----------------------------------------------------------------- */
/* 6 video → 3 sütun × 2 satır. Hiçbir satırda tek başına kart kalmaz. */
.video-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 2vw, 1.4rem);
}
.video-kart {
  position: relative;
  border-radius: var(--yuvarlak-lg);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4 / 3;
  cursor: pointer;
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
}
.video-kart img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: transform 1s cubic-bezier(.22,.61,.36,1), opacity var(--gecis-hizli);
}
.video-kart:hover img { transform: scale(1.05); opacity: .68; }
.video-kart__ust {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.1rem;
  background: linear-gradient(180deg, rgba(20,17,13,.25), transparent 35%, rgba(20,17,13,.7));
  color: var(--cream);
}
.video-kart__oynat {
  align-self: center;
  margin: auto;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(251,246,238,.92);
  color: var(--ink);
  transition: transform var(--gecis-hizli), background var(--gecis-hizli);
}
.video-kart:hover .video-kart__oynat { transform: scale(1.1); background: var(--terra); color: var(--paper); }
.video-kart__oynat .ikon { margin-left: 3px; }
.video-kart__alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.video-kart__alt strong { font-size: .92rem; font-weight: 500; }
.video-kart__alt span { font-size: .75rem; opacity: .72; }

.video-not {
  margin-top: 1.5rem;
  font-size: .8rem;
  color: var(--walnut);
}

/* -----------------------------------------------------------------
   15. İstatistik
   ----------------------------------------------------------------- */
.sayilar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}
.sayi__deger {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.sayi__etiket {
  margin-top: .55rem;
  font-size: .82rem;
  color: var(--walnut);
}
.bolum--koyu .sayi__etiket { color: rgba(251,246,238,.6); }

/* -----------------------------------------------------------------
   16. Yorumlar
   ----------------------------------------------------------------- */
.yorumlar {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.yorum-gorsel {
  position: relative;
  border-radius: var(--yuvarlak-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.yorum-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.yorum-kart {
  padding: 1.5rem;
  border-radius: var(--yuvarlak);
  background: var(--paper);
  border: 1px solid var(--line-soft);
}
.yorum-kart p { font-size: .92rem; color: var(--ink-soft); }
.yorum-kart__kisi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
}
.yorum-kart__kisi strong { display: block; font-size: .88rem; font-weight: 500; }
.yorum-kart__kisi small { font-size: .76rem; color: var(--taupe); }
.yorum-kart__kisi .ikon { color: var(--sand-deep); width: 28px; height: 28px; }
.yorum-sutun { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }

/* -----------------------------------------------------------------
   17. Harekete geçirme kartı (PeaceCraft)
   ----------------------------------------------------------------- */
.cagri-kap { background: var(--paper); padding-block: clamp(3rem, 6vw, 5rem) 0; }

.cagri-kart {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(260px, 38vw, 420px);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: clamp(14px, 2vw, 24px);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.cagri-kart > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.cagri-kart::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20,17,13,.35), rgba(20,17,13,.72));
}
.cagri-kart__ic { display: grid; gap: 1.75rem; justify-items: center; }
.cagri-kart h2 { color: var(--cream); max-width: 18ch; }
.cagri-kart .dugme-grup { justify-content: center; }

/* -----------------------------------------------------------------
   18. Footer — açık zemin (PeaceCraft)
   ----------------------------------------------------------------- */
.alt {
  background: var(--paper);
  color: var(--walnut);
  padding-top: clamp(3rem, 6vw, 5rem);
  font-size: .875rem;
}
.alt a { transition: color var(--gecis-hizli); }
.alt a:hover { color: var(--terra); }

.alt__ust {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-soft);
}

.alt__logo {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  letter-spacing: .02em;
  color: var(--ink);
  line-height: 1;
}
.alt__ozet {
  max-width: 46ch;
  margin-top: 1rem;
  font-size: .9rem;
  line-height: 1.75;
}

/* Satır içi eylem kapsülü */
.alt__eylem {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, 420px);
  margin-top: 1.75rem;
  padding: .4rem .4rem .4rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .87rem;
  color: var(--taupe);
  transition: border-color var(--gecis-hizli);
}
.alt__eylem:hover { border-color: var(--walnut); color: var(--taupe); }
.alt__eylem-dugme {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  padding: .55rem 1.35rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--gecis-hizli);
}
.alt__eylem:hover .alt__eylem-dugme { background: var(--terra); }

.alt__yan {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.alt__baglar {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: .75rem 2rem;
  justify-items: end;
  text-align: right;
}
.alt__baglar a { color: var(--ink-soft); font-size: .88rem; }
.alt__baglar a[aria-current="page"] { color: var(--terra); }

.alt__sosyal { display: flex; gap: .55rem; }
.alt__sosyal a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--ink);
  color: var(--cream);
  transition: background var(--gecis-hizli), transform var(--gecis-hizli);
}
.alt__sosyal a:hover { background: var(--terra); color: var(--paper); transform: translateY(-2px); }

.alt__bilgi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.75rem 2rem;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  font-size: .85rem;
  line-height: 1.7;
}
.alt__etiket {
  display: block;
  margin-bottom: .4rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* Telefon numarasının yanındaki kişi adı — numara asıl bilgi, ad ikincil */
.alt__kisi {
  margin-left: .45rem;
  font-size: .82em;
  white-space: nowrap;
  color: var(--taupe);
}
.alt__kisi::before {
  content: "·";
  margin-right: .45rem;
  opacity: .55;
}
/* Koyu iletişim kartında aynı hiyerarşi */
.bilgi-kart .alt__kisi { color: rgba(251, 246, 238, .58); }

.alt__telif {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.35rem;
  border-top: 1px solid var(--line-soft);
  font-size: .78rem;
  color: var(--taupe);
}

/* -----------------------------------------------------------------
   18b. Mobil alt navigasyon — liquid glass
   ----------------------------------------------------------------- */
.alt-gez {
  display: none;
  position: fixed;
  left: 50%;
  bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 95;
  width: min(calc(100% - 1.5rem), 460px);
  border-radius: 24px;
  /* cam katmanı */
  background: rgba(251, 246, 238, .62);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 -1px 0 rgba(20, 17, 13, .05) inset,
    0 12px 34px -10px rgba(20, 17, 13, .3),
    0 2px 8px -2px rgba(20, 17, 13, .16);
  overflow: hidden;
}

/* Cam desteği varsa saydamlık + bulanıklık, yoksa opak zemin */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .alt-gez {
    background: rgba(251, 246, 238, .55);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .alt-gez { background: rgba(251, 246, 238, .97); }
}

/* Üstteki ince ışık yansıması — cam hissini veren detay */
.alt-gez::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent);
  pointer-events: none;
}

.alt-gez ul {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.alt-gez a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 60px;
  padding: .5rem .25rem;
  color: var(--walnut);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-align: center;
  transition: color var(--gecis-hizli);
}
.alt-gez .ikon { stroke-width: 1.5; transition: transform var(--gecis-hizli); }
.alt-gez a:active .ikon { transform: scale(.88); }
.alt-gez a[aria-current="page"] { color: var(--terra); }
.alt-gez a[aria-current="page"] .ikon { stroke-width: 1.9; }

/* -----------------------------------------------------------------
   19. Sayfa başlığı (iç sayfalar)
   ----------------------------------------------------------------- */
.sayfa-bas {
  background: var(--sand);
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.sayfa-bas h1 { margin-bottom: 1rem; }
.sayfa-bas p { max-width: 58ch; margin-inline: auto; color: var(--walnut); }
.kirinti {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  font-size: .78rem;
  color: var(--taupe);
}
.kirinti a:hover { color: var(--terra); }

/* -----------------------------------------------------------------
   20. Proje detay
   ----------------------------------------------------------------- */
.detay {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.detay__ana {
  border-radius: var(--yuvarlak-lg);
  overflow: hidden;
  background: var(--sand-deep);
}
.detay__ana img { width: 100%; height: auto; }

.detay__yan { position: sticky; top: 7rem; }
.detay__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
  font-size: .78rem;
  color: var(--taupe);
}
.detay__yan h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 1rem; }
.detay__yan > p { color: var(--walnut); margin-bottom: 1.5rem; }

.kunye { display: grid; gap: 0; margin-bottom: 2rem; }
.kunye div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding-block: .8rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: .87rem;
}
.kunye dt { color: var(--taupe); }
.kunye dd { margin: 0; }

.detay__galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.detay__galeri img {
  width: 100%;
  border-radius: var(--yuvarlak);
  background: var(--sand-deep);
}

/* -----------------------------------------------------------------
   21. İletişim
   ----------------------------------------------------------------- */
.iletisim {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.bilgi-kart {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--yuvarlak-lg);
  background: var(--ink);
  color: rgba(251,246,238,.68);
}
.bilgi-kart h3 { color: var(--cream); margin-bottom: .35rem; }
.bilgi-kart__satir { display: flex; align-items: flex-start; gap: .9rem; }
.bilgi-kart__satir .ikon { flex: none; width: 19px; height: 19px; margin-top: 4px; color: var(--terra); }
.bilgi-kart__satir strong { display: block; color: var(--cream); font-weight: 500; font-size: .92rem; margin-bottom: .15rem; }
.bilgi-kart__satir span, .bilgi-kart__satir a { font-size: .87rem; line-height: 1.65; }
/* Aynı satırda birden çok numara varsa alt alta dursun */
.bilgi-kart__satir > div > a { display: block; }

.form { display: grid; gap: 1.1rem; }
.form__cift { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.alan { display: grid; gap: .45rem; }
.alan label { font-size: .8rem; font-weight: 500; letter-spacing: .02em; }
.alan label span { color: var(--terra); }
.alan input, .alan textarea, .alan select {
  width: 100%;
  min-height: 50px;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--yuvarlak);
  background: var(--paper);
  font-size: .92rem;
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}
.alan textarea { min-height: 140px; resize: vertical; line-height: 1.65; }
.alan input:focus, .alan textarea:focus, .alan select:focus {
  outline: none;
  border-color: var(--walnut);
  box-shadow: 0 0 0 3px rgba(140, 73, 31, .1);
}
.alan input:user-invalid, .alan textarea:user-invalid { border-color: #B3452B; }

.uyari {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.15rem;
  border-radius: var(--yuvarlak);
  font-size: .88rem;
  line-height: 1.6;
}
.uyari--basari { background: #E8F0E6; color: #2C5226; border: 1px solid #C3DBBD; }
.uyari--hata   { background: #F7E7E3; color: #7A2E1B; border: 1px solid #E5C4BB; }
.uyari .ikon { flex: none; width: 18px; height: 18px; margin-top: 2px; }

/* Sık sorulan sorular — açılır kapanır */
.sss { margin-top: clamp(3rem, 6vw, 4.5rem); }
.sss__liste { border-top: 1px solid var(--line); }

.sss__oge { border-bottom: 1px solid var(--line); }
.sss__oge summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
}
.sss__oge summary::-webkit-details-marker { display: none; }
.sss__oge h3 {
  font-family: var(--sans);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}
.sss__oge summary:hover h3 { color: var(--terra); }

/* Artı / eksi işareti */
.sss__isaret {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
}
.sss__isaret::before,
.sss__isaret::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.5px;
  background: var(--terra);
  transform: translate(-50%, -50%);
  transition: transform var(--gecis-hizli), opacity var(--gecis-hizli);
}
.sss__isaret::after { transform: translate(-50%, -50%) rotate(90deg); }
.sss__oge[open] .sss__isaret::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }

.sss__oge p {
  max-width: 72ch;
  padding-bottom: 1.25rem;
  color: var(--walnut);
  font-size: .92rem;
  line-height: 1.75;
}

.harita {
  margin-top: 2rem;
  border-radius: var(--yuvarlak-lg);
  overflow: hidden;
  background: var(--sand-deep);
  aspect-ratio: 16 / 7;
}
.harita iframe { width: 100%; height: 100%; border: 0; }
.harita__yok {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  color: var(--walnut);
  font-size: .88rem;
}

/* Sabit WhatsApp düğmesi */
.wa-sabit {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--terra);
  color: var(--paper);
  box-shadow: 0 12px 30px -8px rgba(140, 73, 31, .6);
  transition: transform var(--gecis-hizli), background var(--gecis-hizli);
}
.wa-sabit:hover { transform: scale(1.08); background: var(--terra-deep); }

/* -----------------------------------------------------------------
   21b. Galeri
   ----------------------------------------------------------------- */
.galeri {
  columns: 4;
  column-gap: clamp(.7rem, 1.6vw, 1.1rem);
}
.galeri figure {
  position: relative;
  break-inside: avoid;
  margin: 0 0 clamp(.7rem, 1.6vw, 1.1rem);
  border-radius: var(--yuvarlak);
  overflow: hidden;
  background: var(--sand-deep);
  cursor: zoom-in;
}
.galeri img {
  width: 100%;
  display: block;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.galeri figure:hover img { transform: scale(1.04); }
.galeri figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.25rem .85rem .8rem;
  background: linear-gradient(transparent, rgba(20,17,13,.8));
  color: var(--cream);
  font-size: .76rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--gecis-hizli), transform var(--gecis-hizli);
}
.galeri figcaption span {
  display: block;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
  margin-top: 2px;
}
.galeri figure:hover figcaption { opacity: 1; transform: none; }

/* -----------------------------------------------------------------
   22. Işık kutusu (lightbox)
   ----------------------------------------------------------------- */
.kutu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 8, 6, .93);
  backdrop-filter: blur(6px);
}
.kutu[data-acik="true"] { display: grid; }
.kutu__ic { max-width: min(1100px, 100%); max-height: 100%; }
.kutu__ic img, .kutu__ic video {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  border-radius: var(--yuvarlak);
  margin-inline: auto;
}
.kutu__yazi { margin-top: 1rem; text-align: center; color: rgba(251,246,238,.7); font-size: .85rem; }

/* Görselin altındaki ileri/geri çubuğu */
.kutu__gez {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3.5vw, 2.25rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem;
  border-radius: 999px;
  background: rgba(251, 246, 238, .1);
  border: 1px solid rgba(251, 246, 238, .2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.kutu__gez[hidden] { display: none; }

.kutu__ok {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: background var(--gecis-hizli), transform var(--gecis-hizli);
}
.kutu__ok:hover { background: rgba(251, 246, 238, .18); }
.kutu__ok:active { transform: scale(.92); }

.kutu__sayac {
  min-width: 4.5rem;
  text-align: center;
  color: rgba(251, 246, 238, .78);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* Gezinme çubuğu görseli örtmesin */
.kutu[data-acik="true"] .kutu__ic img,
.kutu[data-acik="true"] .kutu__ic video { max-height: 72vh; }
.kutu__kapat {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid rgba(251,246,238,.25);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}
.kutu__kapat:hover { background: rgba(251,246,238,.12); }

/* -----------------------------------------------------------------
   23. Girişte beliren animasyon
   ----------------------------------------------------------------- */
/* Gizleme YALNIZCA JS çalışıyorsa uygulanır — betik yüklenmezse
   içerik olduğu gibi görünür kalır (html.js sınıfı head'de eklenir). */
.js [data-beliren] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1),
              transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--gecikme, 0ms);
}
.js [data-beliren="gorundu"] { opacity: 1; transform: none; }

/* =================================================================
   24. DUYARLI DÜZEN
   ================================================================= */

/* ---- ≤1100px : tablet ---- */
@media (max-width: 1100px) {
  .hizmetler { grid-template-columns: repeat(2, 1fr); }
  .surec { grid-template-columns: repeat(2, 1fr); }
  .surec__adim:nth-child(2) { border-right: 1px solid var(--line); }
  .proje-izgara { grid-template-columns: repeat(2, 1fr); }
  .proje-izgara--kademeli > *:nth-child(3n + 2),
  .proje-izgara--kademeli > *:nth-child(3n + 3) { margin-top: 0; }
  .proje-izgara--kademeli > *:nth-child(2n) { margin-top: clamp(1.25rem, 4vw, 2.5rem); }
  .detay { grid-template-columns: 1fr; }
  .detay__yan { position: static; }
  .galeri { columns: 3; }
  .kategori-blok { grid-template-columns: 1fr; }
  .gezinme ul { gap: .9rem; }
  .tepe__tel { display: none !important; }
}

/* ---- ≤900px : mobil düzene geçiş ---- */
@media (max-width: 900px) {
  /* Üst menü yerini alt navigasyona bırakır; logo ortada kalır */
  .gezinme { display: none; }
  .tepe .kap { grid-template-columns: 1fr; min-height: 62px; position: relative; }
  .marka { grid-column: 1; justify-self: center; }

  /* Dil seçici sağ kenara sabitlenir — akışta yer kaplasaydı logoyu
     ortadan kaydırırdı; mutlak konum logonun tam ortada kalmasını garanti eder. */
  .tepe__sag {
    position: absolute;
    /* Kap boşluğunun yarısı — dil seçici kenara daha yakın dursun.
       env(): çentikli telefonlarda yatay modda ekran dışında kalmasın. */
    right: calc(var(--kenar) / 2 + env(safe-area-inset-right, 0px));
    top: 50%;
    transform: translateY(-50%);
    grid-column: 1;
  }
  .dil-sec a { padding: .28rem .45rem; font-size: .66rem; }

  .alt-gez { display: block; }
  /* Alt çubuğun altında kalan içerik olmasın */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .wa-sabit { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  .hakkinda__izgara { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 1rem; }
  .hakkinda__yazi { grid-column: 1 / -1; grid-row: 1; margin-bottom: .5rem; }
  .hakkinda__izgara > .hakkinda__g { grid-row: auto; transform: none !important; margin: 0 !important; }
  .hakkinda__g--1 { grid-column: 1; aspect-ratio: 4/3; }
  .hakkinda__g--2 { grid-column: 2; aspect-ratio: 4/3; }
  .hakkinda__g--3 { grid-column: 1; aspect-ratio: 4/3; }
  .hakkinda__g--4 { grid-column: 2; aspect-ratio: 4/3; }

  .teslim { grid-template-columns: 1fr; }
  .teslim__gorsel { aspect-ratio: 4 / 3; max-width: 560px; }
  .teslim__yuzen { right: 1rem; width: 38%; }

  .yorumlar { grid-template-columns: 1fr; }
  .iletisim { grid-template-columns: 1fr; }

  .hizmet-satir { grid-template-columns: 1fr; gap: 1.5rem; }
  .hizmet-satir--ters .hizmet-satir__gorsel { order: 0; }
  .hizmet-satir__gorsel { aspect-ratio: 16 / 10; }

  .alt__ust { grid-template-columns: 1fr; }
  .alt__yan { align-items: flex-start; }
  .alt__baglar { justify-items: start; text-align: left; }

  .hero { min-height: min(88svh, 720px); }
  .hero h1 .s2 { margin-left: clamp(1rem, 8vw, 4rem); }
  .hero h1 .s3 { margin-left: clamp(.5rem, 4vw, 2rem); }
  .hero__ayak { margin-left: 0; }
  /* Dikey kırpımda tavan yerine mobilyayı göster */
  .hero__fon img { object-position: center 62%; }
  /* Dar ekranda diyagonal perde çok alan kaplıyor; daha dengeli bir perde */
  .hero::after {
    background:
      linear-gradient(180deg, rgba(20, 17, 13, .4) 0%, rgba(20, 17, 13, .18) 26%,
                              rgba(26, 19, 13, .64) 52%, rgba(20, 17, 13, .86) 100%);
  }
}

/* ---- ≤720px : telefon ---- */
@media (max-width: 720px) {
  :root { --bolum-y: clamp(3.25rem, 11vw, 4.5rem); }

  h1 { font-size: clamp(2.05rem, 9vw, 2.9rem); }
  h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }

  .bolum-bas { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .g-orta .bolum-bas { align-items: center; }


  /* Kayan bant: dar ekranda aralıklar daralır ki masaüstündeki gibi
     aynı anda birkaç başlık görünsün, tek kelime asılı kalmasın. */
  .kayan { padding-block: .85rem; }
  .kayan__parca { font-size: .9rem; gap: 1.15rem; }
  .kayan__iz { gap: 1.15rem; }
  .kayan__parca span::after { margin-left: 1.15rem; }
  .kayan {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }

  .hizmetler { grid-template-columns: 1fr; }
  .surec { grid-template-columns: 1fr; }
  .surec__adim { border-right: 1px solid var(--line); padding-block: 1.5rem; }
  .surec__no { margin-bottom: 1.25rem; }
  .surec__sekil { width: 46px; height: 46px; margin-bottom: 1rem; }

  .proje-izgara { grid-template-columns: 1fr; gap: 1.75rem; }
  .proje-izgara--kademeli > * { margin-top: 0 !important; }

  .video-izgara { grid-template-columns: 1fr 1fr; }
  .galeri { columns: 2; }

  /* ---- Çalışma alanları: 161px'lik kartta küçük görsel + iki satıra
          taşan başlık + ortasından kesilen açıklama üst üste biniyordu.
          Açıklamayı düşürüp görseli büyütüyoruz; kart temiz bir görsel
          karoya dönüşüyor. Açıklamalar zaten Hizmetler sayfasında. ---- */
  .kategori-kartlar { gap: .55rem; }
  .kategori-kart { padding: .5rem; }
  .kategori-kart__ust { margin-bottom: .45rem; font-size: .64rem; }
  .kategori-kart__gorsel { aspect-ratio: 3 / 4; }
  .kategori-kart h3 {
    margin-top: .6rem;
    font-size: .76rem;
    line-height: 1.32;
    letter-spacing: .06em;
  }
  .kategori-kart p { display: none; }

  /* ---- Projeler: başlık/konum görselin üstüne biner,
          kart tek parça bir kapak gibi durur. ---- */
  .proje { position: relative; }
  .proje__cerceve { aspect-ratio: 4 / 5; }
  .proje[data-yon="yatay"] .proje__cerceve { aspect-ratio: 4 / 3; }
  .proje__cerceve::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    background: linear-gradient(transparent, rgba(20, 17, 13, .88));
    pointer-events: none;
  }
  .proje__bilgi {
    position: absolute;
    left: 1.1rem; right: 1.1rem; bottom: 2.35rem;
    margin: 0;
    align-items: flex-end;
  }
  .proje__bilgi h3 { color: var(--cream); font-size: 1.22rem; }
  .proje__yil { color: rgba(251, 246, 238, .66); }
  .proje__konum {
    position: absolute;
    left: 1.1rem; bottom: 1.1rem;
    margin: 0;
    color: rgba(251, 246, 238, .72);
  }
  .proje__konum .ikon { opacity: .85; }

  .sayilar { grid-template-columns: 1fr; gap: 1.5rem; text-align: left; }
  .sayilar > * { display: flex; align-items: baseline; gap: 1rem; }
  .sayi__etiket { margin-top: 0; }

  .form__cift { grid-template-columns: 1fr; }
  .alt__izgara { grid-template-columns: 1fr; gap: 2rem; }
  .kunye div { grid-template-columns: 1fr; gap: .15rem; }
  .harita { aspect-ratio: 1 / 1; }
  .teslim__yuzen { display: none; }
  .detay__galeri { grid-template-columns: 1fr; }
  .wa-sabit { width: 52px; height: 52px; }
}

/* ---- ≤420px : küçük telefon ---- */

/* ---- ≤1100px : kavisli şerit tablette de kaydırmalı yay olur ----
   Masaüstü kuralı 7 kartı genişliğe böldüğü için tablette kartlar
   96px'e kadar sıkışıyordu. ---- */
@media (max-width: 1100px) {
  /* Kavisli şerit → yatay kaydırmalı karusel.
     align-items: stretch KULLANMA — aspect-ratio ile çakışıp kartları
     ince bir şeride eziyor. flex-end ile yükseklik orandan gelir. */
  .serit { padding-inline: 0; padding-bottom: 0; }
  .serit__raf {
    gap: .5rem;
    padding-inline: var(--kenar);
    overflow-x: auto;
    /* Aşağı kayan kartlar koyu bandın hizasında kesilsin diye dikeyde
       kırpılır; bu, masaüstündeki kesik yayın birebir karşılığı. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: flex-end;
  }
  .serit__raf::-webkit-scrollbar { display: none; }
  .serit__kart {
    flex: 0 0 min(44vw, 185px);
    aspect-ratio: 3 / 4.15;
    /* Masaüstündeki yay kuralları burada iptal — kartlar düz dizilir */
    transform: none !important;
    /* Alt kenar koyu bandın içine giriyor — masaüstündeki kesik görünümün karşılığı */
    border-radius: var(--yuvarlak-lg) var(--yuvarlak-lg) 0 0;
    scroll-snap-align: center;
    box-shadow: 0 10px 26px -16px rgba(20, 17, 13, .5);
  }

  /* Etiket dar ekranda her zaman görünür (masaüstünde yalnızca üzerine gelince) */
  .serit__yazi {
    opacity: 1;
    transform: none;
    padding: 1.75rem .6rem .7rem;
    font-size: .58rem;
    letter-spacing: .08em;
  }
}

/* ---- ≤420px : küçük telefon ---- */
@media (max-width: 420px) {
  .video-izgara { grid-template-columns: 1fr; }
  .dugme-grup .dugme { width: 100%; }
  .hero .dugme-grup .dugme { width: auto; }
  .alt-gez a { font-size: .6rem; }
  .alt__eylem { flex-direction: column; align-items: stretch; gap: .6rem; padding: .85rem; border-radius: 16px; }
  .alt__eylem-dugme { justify-content: center; }
}

/* -----------------------------------------------------------------
   25. Hareket azaltma / yazdırma
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-beliren] { opacity: 1; transform: none; }
  .kayan__iz { animation: none; }
}

@media print {
  .tepe, .alt, .alt-gez, .wa-sabit, .kutu, .kayan, .cagri-kap { display: none !important; }
  body { background: #fff; }
}