/* ==========================================================================
   DNK MOBİLYA — Tasarım sistemi v3
   Yön: logonun antrasit + metalik altın paleti.
        Açılışlar (hero, sayfa başlıkları, galeri, CTA) koyu;
        uzun metinli içerik bölümleri açık zemin.
   Tüm renk ve ölçüler aşağıdaki değişkenlerden yönetilir.
   ========================================================================== */

:root {
  /* --- Renkler ------------------------------------------------------- */
  --kagit:      #FAF8F4;   /* sayfa zemini — sıcak kağıt beyazı */
  --kagit-2:    #F1ECE3;   /* ikinci yüzey */
  --yuzey:      #FFFFFF;   /* kart */
  --mur:        #1E1D1B;   /* koyu bölüm zemini — espresso */
  --ink:        #1E1D1B;   /* ana metin */
  --ink-2:      #6B655C;   /* soluk metin */
  --ink-3:      #756E66;   /* en soluk (beyaz üstünde 5.0:1 — okunur) */
  --ahsap:      #826234;   /* açık zeminde altın-bronz (krem üstünde 5.3:1) */
  --ahsap-koyu: #705631;
  --amber:      #C9A46A;   /* parlak vurgu */
  --altin-acik: #E7CFA4;   /* altın parlaması (logodaki en açık ton) */
  --cizgi:      #E5DED2;   /* ince ayraç */
  --cizgi-ters: rgba(233, 207, 164, .16);

  /* Logodaki metalik altın geçişi — başlık vurguları ve çizgiler için */
  --altin-metal: linear-gradient(115deg, #E7CFA4 0%, #C9A46A 32%, #8E6F42 58%, #DCC094 82%, #B08F58 100%);

  /* --- Tipografi ------------------------------------------------------ */
  --f-display: "Fraunces", "Times New Roman", serif;
  --f-metin:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Ölçüler -------------------------------------------------------- */
  --en: 1240px;
  --r-s:  10px;
  --r-m:  16px;
  --r-l:  24px;
  --r-xl: 34px;

  --g-1: 0 1px 2px rgba(22, 21, 19, .05);
  --g-2: 0 4px 20px rgba(22, 21, 19, .07);
  --g-3: 0 24px 60px -18px rgba(22, 21, 19, .22);

  --e: cubic-bezier(.22, 1, .36, 1);   /* yumuşak çıkış eğrisi */
  --hiz: 400ms;
}

/* --------------------------------------------- Açılış (giriş) perdesi - */
/* Altın bir çizgi ekranı ortadan "keser", perde kesik yerinden yukarı ve
   aşağı ayrılır. Varsayılan: GİZLİ — yalnızca <head>'deki betik html'e
   .giris-aktif eklediğinde görünür, böylece JS yoksa perde takılı kalmaz. */

.giris { display: none; }

.giris-aktif .giris {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.giris-aktif body { overflow: hidden; }

/* Perdenin iki yarısı — ortada 0,5% bindirme var ki ince bir çizgi sızmasın */
.giris-yari {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: var(--mur);
}
.giris-ust { top: 0; }
.giris-alt { bottom: 0; }
.giris-aktif .giris-ust { animation: girisYariUst 900ms cubic-bezier(.65,0,.35,1) 2400ms forwards; }
.giris-aktif .giris-alt { animation: girisYariAlt 900ms cubic-bezier(.65,0,.35,1) 2400ms forwards; }

.giris-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(300px, 62vw);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.giris-aktif .giris-logo {
  animation: girisLogoBelir 750ms var(--e) 150ms forwards,
             girisLogoSol   400ms var(--e) 1750ms forwards;
}

/* Kesik: ortadan iki yana açılan parlak altın çizgi */
.giris-kesik {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  width: 0;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, var(--altin-acik), #fff, var(--altin-acik), transparent);
  box-shadow: 0 0 14px rgba(231, 207, 164, .9);
}
.giris-aktif .giris-kesik {
  animation: girisKes    850ms var(--e) 1550ms forwards,
             girisKesSol 300ms linear   2400ms forwards;
}

@keyframes girisLogoBelir {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes girisLogoSol { to { opacity: 0; } }
@keyframes girisKes     { to { width: 100%; } }
@keyframes girisKesSol  { to { opacity: 0; } }
@keyframes girisYariUst { to { transform: translateY(-100%); } }
@keyframes girisYariAlt { to { transform: translateY(100%); } }

/* ------------------------------------------------------------ Temel ---- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--kagit);
  color: var(--ink);
  font-family: var(--f-metin);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* İnce doğal grain — kağıt/ahşap hissi verir, çok hafif */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.menu-acik { overflow: hidden; }

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

a { color: var(--ahsap-koyu); text-decoration: none; }

::selection { background: var(--amber); color: var(--mur); }

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

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.7rem, 6.6vw, 5.2rem);
  font-weight: 400;
  line-height: .97;
  letter-spacing: -.038em;
}

h2 {
  font-size: clamp(1.95rem, 4.2vw, 3.3rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.032em;
}

h3 {
  font-size: clamp(1.12rem, 1.6vw, 1.38rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.018em;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

/* Küçük versal etiket */
.etiket {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-metin);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ahsap);
  margin-bottom: 20px;
}
.etiket::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.giris-metni {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink-2);
  letter-spacing: -.012em;
}

/* --------------------------------------------------------- Yerleşim --- */

.kapsayici {
  width: 100%;
  max-width: var(--en);
  margin-inline: auto;
  padding-inline: 28px;
  position: relative;
  z-index: 2;
}

.bolum { padding: clamp(72px, 10vw, 150px) 0; }
.bolum--krem { background: var(--kagit-2); }

.bolum--koyu {
  background: var(--mur);
  color: #B8B1A6;
}
.bolum--koyu h1,
.bolum--koyu h2,
.bolum--koyu h3,
.bolum--koyu h4 { color: #F5EFE4; }
.bolum--koyu .etiket { color: var(--amber); }
.bolum--koyu .giris-metni { color: #9E978C; }

.bolum-basi {
  max-width: 680px;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.bolum-basi.ortala { margin-inline: auto; text-align: center; }
.bolum-basi.ortala .etiket::before { display: none; }

/* Editöryel ikili başlık: solda başlık, sağda açıklama */
.basi-genis {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 76px);
  max-width: none;
}
.basi-genis h2 { margin-bottom: 0; }
.basi-genis .giris-metni { padding-bottom: .4em; }

/* --------------------------------------------------------- Butonlar --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: var(--f-metin);
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--hiz) var(--e), color var(--hiz) var(--e),
              border-color var(--hiz) var(--e), transform var(--hiz) var(--e),
              box-shadow var(--hiz) var(--e);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--dolu { background: var(--ink); color: var(--kagit); }
.btn--dolu:hover { background: var(--ahsap-koyu); color: #fff; box-shadow: var(--g-3); }

.btn--bal { background: var(--amber); color: var(--mur); }
.btn--bal:hover { background: #E4AB67; color: var(--mur); box-shadow: 0 18px 44px -16px rgba(201, 164, 106, .8); }

.btn--bos {
  background: transparent;
  border-color: var(--cizgi);
  color: var(--ink);
}
.btn--bos:hover { background: var(--ink); border-color: var(--ink); color: var(--kagit); }

/* Koyu zeminlerde çerçeveli buton açık renge döner */
.bolum--koyu .btn--bos,
.kahraman .btn--bos,
.cagri .btn--bos,
.sayfa-basligi .btn--bos {
  border-color: var(--cizgi-ters);
  color: #F5EFE4;
}
.bolum--koyu .btn--bos:hover,
.kahraman .btn--bos:hover,
.cagri .btn--bos:hover,
.sayfa-basligi .btn--bos:hover {
  background: #F5EFE4;
  border-color: #F5EFE4;
  color: var(--mur);
}

/* Ok'lu metin bağlantısı */
.ok-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.008em;
  transition: color var(--hiz) var(--e);
}
.ok-link::after {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--hiz) var(--e);
}
.ok-link:hover { color: var(--ahsap-koyu); }
.ok-link:hover::after { transform: translateX(5px); }

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

.ust-bar {
  background: var(--mur);
  color: #8A847A;
  font-size: .78rem;
  letter-spacing: .01em;
  padding: 10px 0;
  position: relative;
  z-index: 2;
}
.ust-bar .kapsayici {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.ust-bar a { color: #9E978C; transition: color var(--hiz) var(--e); }
.ust-bar a:hover { color: var(--amber); }
.ust-bar-iletisim { display: flex; align-items: center; gap: 26px; }

/* Üst bardaki Instagram bağlantısı */
.ust-bar-ig {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ust-bar-ig svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ------------------------------------------------ Yüzen (pill) menü --- */

.baslik {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: 14px;
  padding-bottom: 2px;
  background: transparent;
}

.baslik .kapsayici {
  width: min(100% - 28px, var(--en));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
  padding: 8px 8px 8px 20px;
  /* Logo altın olduğu için hap, logonun kendi antrasit zeminini alır */
  background: rgba(30, 29, 27, .84);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(233, 207, 164, .16);
  border-radius: 999px;
  box-shadow: 0 6px 26px -12px rgba(22, 21, 19, .5);
  transition: box-shadow var(--hiz) var(--e), background var(--hiz) var(--e);
}
.baslik.kaydirildi .kapsayici {
  background: rgba(30, 29, 27, .95);
  box-shadow: 0 10px 34px -14px rgba(22, 21, 19, .65);
}

/* Koyu hap içindeki menü öğeleri */
.baslik .menu a { color: #B8B1A6; }
.baslik .menu a:hover { color: #F5EFE4; background: rgba(233, 207, 164, .1); }
.baslik .menu a.aktif { color: #F5EFE4; }
.baslik .menu a.aktif::after { background: var(--amber); }

.baslik-aksiyon .btn--dolu { background: var(--amber); color: var(--mur); }
.baslik-aksiyon .btn--dolu:hover { background: #E0B678; color: var(--mur); }

.baslik .menu-dugmesi { background: transparent; border-color: rgba(233, 207, 164, .22); }
.baslik .menu-dugmesi span { background: #F5EFE4; }

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--f-display);
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: -.028em;
  color: var(--ink);
  flex-shrink: 0;
  transition: color var(--hiz) var(--e);
}
.logo:hover { color: var(--ahsap-koyu); }
.logo svg { flex-shrink: 0; }

/* Firma logosu (şeffaf PNG) — menüde ve footer'da */
.logo-img {
  display: block;
  height: 48px;
  width: auto;
  transition: opacity var(--hiz) var(--e);
}
.logo:hover .logo-img { opacity: .8; }
.ayak .logo-img { height: 86px; }   /* footer'da slogan da okunsun */
.logo-alt {
  display: block;
  font-family: var(--f-metin);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}

/* Menü */
.menu { display: flex; align-items: center; gap: 2px; }
.menu > .btn { display: none; }   /* yalnızca mobil çekmecede görünür */

.menu a {
  position: relative;
  padding: 9px 15px;
  font-size: .91rem;
  font-weight: 450;
  color: var(--ink-2);
  border-radius: 100px;
  letter-spacing: -.008em;
  transition: color var(--hiz) var(--e), background var(--hiz) var(--e);
}
.menu a:hover { color: var(--ink); background: rgba(22, 21, 19, .045); }
.menu a.aktif { color: var(--ink); font-weight: 500; }
.menu a.aktif::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--ahsap);
}

.baslik-aksiyon { display: flex; align-items: center; gap: 10px; }
.baslik-aksiyon .btn { padding: 13px 24px; font-size: .88rem; }

/* Hamburger */
.menu-dugmesi {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--cizgi);
  border-radius: 50%;
  background: var(--yuzey);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.menu-dugmesi span {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: var(--hiz) var(--e);
}
.menu-dugmesi span:nth-child(1) { top: 17px; }
.menu-dugmesi span:nth-child(2) { top: 22px; }
.menu-dugmesi span:nth-child(3) { top: 27px; }
.menu-dugmesi[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-dugmesi[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-dugmesi[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* --------------------------------------------------------- Kahraman --- */

.kahraman {
  position: relative;
  margin: 12px 14px 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--mur);
  min-height: min(88vh, 780px);
  display: flex;
  align-items: flex-end;
}

.kahraman-gorsel {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #272523 0%, #36332E 45%, #171614 100%);
  background-size: cover;
  background-position: center;
}
/* ahşap damar dokusu — fotoğraf eklenince arkada kalır */
.kahraman-gorsel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(97deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(97deg, rgba(0,0,0,.05) 0 2px, transparent 2px 26px);
}
.kahraman-gorsel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;   /* karartma katmanı videonun da üstünde kalmalı */
  /* Video fonu düz gradyandan parlak olduğu için karartma güçlü tutuldu —
     başlık ve gövde yazıları her karede okunur kalmalı. */
  background: linear-gradient(to top, rgba(20,19,17,.95) 0%, rgba(20,19,17,.74) 46%, rgba(20,19,17,.44) 100%);
}

/* Giriş fonu videosu — video/atolye.mp4 eklenince devreye girer */
.kahraman-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  opacity: 0;
  transition: opacity 900ms var(--e);
}
/* Video gerçekten oynamaya başlayınca yumuşakça belirir */
.kahraman-gorsel.video-var .kahraman-video { opacity: 1; }
/* Video varken sahte ahşap damar dokusu gizlenir */
.kahraman-gorsel.video-var::before { display: none; }

.kahraman .kapsayici { padding-block: clamp(48px, 6vw, 74px); }
.kahraman-icerik { max-width: 780px; }
.kahraman h1 { color: #FBF6EC; margin-bottom: .3em; }
/* Logodaki metalik altın etkisi — yazının içine gradyan uygulanır */
.kahraman h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--amber);            /* gradyan desteklenmezse yedek renk */
  background: var(--altin-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kahraman p {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: #B8B1A6;
  max-width: 520px;
  margin-bottom: 2.1em;
}
.kahraman .etiket { color: var(--amber); }
.kahraman-butonlar { display: flex; flex-wrap: wrap; gap: 12px; }

/* Kahraman altı rakam şeridi */
.kahraman-alt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px;
  margin-top: clamp(40px, 5vw, 62px);
  padding-top: 30px;
  border-top: 1px solid var(--cizgi-ters);
}
.kahraman-alt strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: -.03em;
  color: #F5EFE4;
  line-height: 1;
}
.kahraman-alt small {
  display: block;
  margin-top: 7px;
  font-size: .78rem;
  letter-spacing: .04em;
  color: #8A847A;
}

/* --------------------------------------- Sayfa ortası video bandı ----- */
/* Tam genişlikte, sinematik oranlı, sessiz ve döngüsel üretim görüntüsü. */

.video-bant {
  position: relative;
  z-index: 2;
  width: 100%;
  height: clamp(230px, 34vw, 500px);
  overflow: hidden;
  background: var(--mur);
}
.video-bant video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--e);
}
.video-bant.hazir video { opacity: 1; }
/* Üst ve alt kenarda hafif karartma — sayfayla yumuşak geçiş */
.video-bant::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(20,19,17,.42) 0%, rgba(20,19,17,0) 26%,
    rgba(20,19,17,0) 74%, rgba(20,19,17,.42) 100%);
}

/* ------------------------------------------------ Kayan malzeme şeridi */

.serit {
  background: var(--mur);
  padding: 18px 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
  border-block: 1px solid rgba(255,255,255,.06);
}
.serit-ic {
  display: flex;
  width: max-content;
  animation: kay 46s linear infinite;
}
.serit:hover .serit-ic { animation-play-state: paused; }
.serit span {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: #9E978C;
}
.serit span::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ahsap);
  flex-shrink: 0;
}
@keyframes kay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hero'nun hemen altındaki şerit, hero kartıyla tek parça görünsün */
.kahraman:has(+ .serit) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.kahraman + .serit {
  margin: 0 14px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  border-block: 0;
  border-top: 1px solid var(--cizgi-ters);
  /* hero'nun alt kenarıyla aynı ton — birleşme yerinde çizgi oluşmasın */
  background: #171614;
}

/* Sayfa başlığının ardından koyu bir bölüm geliyorsa (galeri gibi),
   ikisi tek bir koyu yüzey olarak aksın */
.sayfa-basligi:has(+ .bolum--koyu) {
  margin-inline: 0;
  margin-top: 0;
  border-radius: 0;
}
/* Gradyan, alt kenarda tam olarak --mur'e insin ki alttaki koyu
   bölümle arasında ton farkı (görünür bir çizgi) kalmasın */
.sayfa-basligi:has(+ .bolum--koyu)::before {
  /* Çizgili doku burada yok: alttaki bölümde de olmadığı için
     birleşme yerinde doku değişimi çizgi gibi görünüyordu. */
  background: linear-gradient(180deg, #2B2925 0%, #1E1D1B 100%);
}

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

.sayfa-basligi {
  position: relative;
  margin: 12px 14px 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--mur);
  color: #B8B1A6;
}
.sayfa-basligi::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(95deg, rgba(201,164,106,.05) 0 2px, transparent 2px 11px),
    linear-gradient(140deg, #262421 0%, #34312C 60%, #1A1917 100%);
}
.sayfa-basligi .kapsayici { padding-block: clamp(52px, 7vw, 92px); }
.sayfa-basligi h1 { color: #FBF6EC; max-width: 17ch; }
.sayfa-basligi p {
  color: #9E978C;
  max-width: 560px;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  margin-top: .6em;
}
.sayfa-basligi .etiket { color: var(--amber); }

.kirinti {
  font-size: .78rem;
  letter-spacing: .02em;
  color: #7C766D;
  margin-bottom: 26px;
}
.kirinti a { color: #7C766D; transition: color var(--hiz) var(--e); }
.kirinti a:hover { color: var(--amber); }
.kirinti span { margin-inline: 9px; opacity: .45; }

/* ------------------------------------------ Görsel yer tutucuları ----- */
/* Fotoğraf eklemek için .gorsel div'ini <img> ile değiştirin.            */

.gorsel {
  position: relative;
  background: linear-gradient(145deg, #9C6A40 0%, #B98A5C 48%, #7A5231 100%);
  border-radius: var(--r-l);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  min-height: 280px;
  color: rgba(255,255,255,.9);
}
.gorsel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(94deg, rgba(255,255,255,.05) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(94deg, rgba(0,0,0,.045) 0 3px, transparent 3px 24px);
}
.gorsel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,16,9,.5), transparent 58%);
}
.gorsel span {
  position: relative;
  z-index: 1;
  font-size: .8rem;
  font-weight: 450;
  letter-spacing: .01em;
  opacity: .8;
}
.gorsel--uzun  { min-height: 460px; }
.gorsel--kisa  { min-height: 210px; }
.gorsel--kare  { aspect-ratio: 1; min-height: 0; }
.gorsel--dikey { aspect-ratio: 4 / 5; min-height: 0; }
.gorsel--ton2  { background: linear-gradient(145deg, #6F4B32 0%, #96693F 52%, #4E3421 100%); }
.gorsel--ton3  { background: linear-gradient(145deg, #C59A65 0%, #9A7045 50%, #6B4A2E 100%); }

/* ----------------------------------- Görsel kutusunun içindeki video --- */
/* .gorsel yer tutucusunun üstüne oturur; video yüklenince yer tutucunun
   dokusu ve yazısı kaybolur, yüklenmezse hiçbir şey değişmez.            */

.medya-kutu .kutu-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--e);
}
.medya-kutu.hazir .kutu-video { opacity: 1; }
.medya-kutu.hazir::before,
.medya-kutu.hazir::after { display: none; }
.medya-kutu.hazir > span { opacity: 0; }

/* -------------------------------------------------------- İkili düzen - */

.ikili {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
.ikili--ters .ikili-gorsel { order: 2; }
.ikili-metin h2 { margin-bottom: .45em; }

/* Rakamlar */
.rakamlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 26px;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--cizgi);
}
.bolum--koyu .rakamlar { border-top-color: var(--cizgi-ters); }
.rakam strong {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 3vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -.035em;
  color: var(--ahsap-koyu);
  line-height: 1;
}
.bolum--koyu .rakam strong { color: var(--amber); }
.rakam small {
  display: block;
  margin-top: 9px;
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--ink-2);
}
.bolum--koyu .rakam small { color: #8A847A; }

/* ------------------------------------------- Editöryel numaralı liste - */
/* Kutu yerine ince çizgili, numaralı satırlar.                           */

.liste-editoryal {
  counter-reset: satir;
  border-top: 1px solid var(--cizgi);
}
.bolum--koyu .liste-editoryal { border-top-color: var(--cizgi-ters); }

.satir {
  counter-increment: satir;
  display: grid;
  grid-template-columns: 70px 1.05fr 1.5fr;
  gap: clamp(16px, 3vw, 46px);
  align-items: start;
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--cizgi);
  transition: background var(--hiz) var(--e), padding-inline var(--hiz) var(--e);
}
.bolum--koyu .satir { border-bottom-color: var(--cizgi-ters); }
.satir:hover { background: rgba(176, 122, 74, .055); padding-inline: 16px; }

.satir::before {
  content: "0" counter(satir);
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ahsap);
  padding-top: .35em;
}
.satir h3 { margin: 0; }
.satir p {
  margin: 0;
  color: var(--ink-2);
  font-size: .98rem;
  line-height: 1.6;
}
.bolum--koyu .satir p { color: #9C9086; }

/* ------------------------------------------- Hikâye (iki sütunlu metin) */
/* Solda başlık, sağda gövde — fotoğrafsız uzun metinler için.             */

.hikaye-duzen {
  display: grid;
  grid-template-columns: .82fr 1.3fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.hikaye-basi h2 { margin-bottom: 0; }
/* Satır uzunluğu ~70 karakterde tutulur; "ch" birimi bu fontta yanıltıcı
   çıktığı için ölçülen gerçek karakter genişliğinden hesaplandı. */
.hikaye-govde { max-width: 550px; }
.hikaye-govde p {
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.68;
  margin-bottom: 1.25em;
}
.hikaye-govde p:last-child {
  margin-bottom: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 1.16rem;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: -.015em;
  padding-top: .5em;
}

@media (max-width: 900px) {
  .hikaye-duzen { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------------------------------------------------------- Kartlar --- */

.izgara {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.izgara--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.izgara--4 { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }

.kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-l);
  padding: 34px 32px;
  overflow: hidden;
  transition: transform var(--hiz) var(--e), box-shadow var(--hiz) var(--e),
              border-color var(--hiz) var(--e), background var(--hiz) var(--e);
}
.kart:hover {
  transform: translateY(-5px);
  box-shadow: var(--g-3);
  border-color: transparent;
}
.bolum--koyu .kart {
  background: rgba(255,255,255,.035);
  border-color: var(--cizgi-ters);
}
.bolum--koyu .kart:hover {
  background: rgba(255,255,255,.065);
  border-color: var(--cizgi-ters);
  box-shadow: none;
}

.kart-ikon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kagit-2);
  color: var(--ahsap-koyu);
  margin-bottom: 22px;
  transition: background var(--hiz) var(--e), color var(--hiz) var(--e);
}
.kart:hover .kart-ikon { background: var(--ahsap); color: #fff; }

.kart h3 { margin-bottom: .4em; }
.kart p { color: var(--ink-2); font-size: .95rem; margin: 0; }

.kart-liste {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  font-size: .91rem;
  color: var(--ink-2);
}
.kart-liste li {
  position: relative;
  padding-left: 19px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.kart-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

/* Kart içi üst görsel */
.kart > .gorsel:first-child {
  margin: -34px -32px 26px;
  border-radius: var(--r-l) var(--r-l) 0 0;
}

/* ------------------------------------------------ Süreç (yapışkan) ---- */

.surec-duzen {
  display: grid;
  grid-template-columns: .85fr 1.4fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.surec-yapisik { position: sticky; top: 130px; }

.surec {
  counter-reset: adim;
  border-top: 1px solid var(--cizgi);
}
.bolum--koyu .surec { border-top-color: var(--cizgi-ters); }

/* Konumlandırma "absolute" — böylece adımın içinde kaç eleman olursa olsun
   (sarmalayıcı div'li ya da düz h3 + p) düzen bozulmaz. */
.surec-adim {
  counter-increment: adim;
  position: relative;
  padding: 28px 0 28px 64px;
  border-bottom: 1px solid var(--cizgi);
  transition: background var(--hiz) var(--e);
}
.bolum--koyu .surec-adim { border-bottom-color: var(--cizgi-ters); }
.surec-adim:hover { background: rgba(142,111,66,.06); }

.surec-adim::before {
  content: "0" counter(adim);
  position: absolute;
  left: 0;
  top: 28px;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ahsap);
}
.surec-adim h3 { margin-bottom: .32em; }
.surec-adim p { font-size: .95rem; color: var(--ink-2); margin: 0; }
.bolum--koyu .surec-adim p { color: #9C9086; }

/* ----------------------------------------------------------- Galeri --- */

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}
.galeri-oge {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
}
.galeri-oge .gorsel {
  border-radius: 0;
  transition: transform 900ms var(--e);
}
.galeri-oge:hover .gorsel { transform: scale(1.055); }

.galeri-oge-bilgi {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 26px;
  color: #fff;
  pointer-events: none;
  transform: translateY(6px);
  transition: transform var(--hiz) var(--e);
}
.galeri-oge:hover .galeri-oge-bilgi { transform: translateY(0); }
.galeri-oge-bilgi strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -.022em;
}
.galeri-oge-bilgi small {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  letter-spacing: .02em;
  opacity: .78;
}

/* Filtreler */
.filtreler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.filtre {
  padding: 10px 21px;
  border: 1px solid var(--cizgi);
  border-radius: 100px;
  background: transparent;
  font-family: var(--f-metin);
  font-size: .87rem;
  font-weight: 450;
  color: var(--ink-2);
  cursor: pointer;
  transition: var(--hiz) var(--e);
}
.filtre:hover { border-color: var(--ahsap); color: var(--ink); }
.filtre.aktif { background: var(--ink); border-color: var(--ink); color: var(--kagit); }

/* Koyu zeminli galeri bölümünde filtreler */
.bolum--koyu .filtre {
  border-color: var(--cizgi-ters);
  color: #9E978C;
}
.bolum--koyu .filtre:hover { border-color: var(--amber); color: #F5EFE4; }
.bolum--koyu .filtre.aktif {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--mur);
}

/* --------------------------------------------------------- Referans -- */

.alinti {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-l);
  padding: 36px 32px;
  transition: transform var(--hiz) var(--e), box-shadow var(--hiz) var(--e);
}
.alinti:hover { transform: translateY(-4px); box-shadow: var(--g-3); }
.alinti blockquote {
  margin: 0 0 26px;
  font-family: var(--f-display);
  font-size: 1.14rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: -.018em;
  color: var(--ink);
}
.alinti-kisi { display: flex; align-items: center; gap: 13px; }
.alinti-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ahsap), var(--ahsap-koyu));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 500;
  flex-shrink: 0;
}
.alinti-kisi strong { display: block; font-size: .91rem; font-weight: 500; }
.alinti-kisi small { color: var(--ink-2); font-size: .81rem; }

/* ---------------------------------------------------------- Malzeme -- */

.malzemeler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 18px;
}
.malzeme-ornek {
  height: 108px;
  border-radius: var(--r-m);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  transition: transform var(--hiz) var(--e);
}
.malzeme:hover .malzeme-ornek { transform: translateY(-4px); }
.malzeme-ornek::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(93deg, rgba(0,0,0,.06) 0 1px, transparent 1px 7px);
}
.malzeme strong { display: block; font-size: .93rem; font-weight: 500; }
.malzeme small { font-size: .79rem; color: var(--ink-2); }

/* -------------------------------------------------------------- SSS -- */

.sss { max-width: 820px; }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss details:first-of-type { border-top: 1px solid var(--cizgi); }
.sss summary {
  padding: 24px 50px 24px 0;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color var(--hiz) var(--e);
}
.sss summary:hover { color: var(--ahsap-koyu); }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::before,
.sss summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  background: var(--ahsap);
  transition: transform var(--hiz) var(--e), opacity var(--hiz) var(--e);
}
.sss summary::before { width: 14px; height: 1.5px; margin-top: -1px; }
.sss summary::after  { width: 1.5px; height: 14px; margin-top: -7px; right: 14.25px; }
.sss details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.sss details p {
  padding: 0 60px 26px 0;
  color: var(--ink-2);
  font-size: .97rem;
  margin: 0;
}

/* -------------------------------------------------------------- CTA -- */

.cagri {
  position: relative;
  overflow: hidden;
  background: var(--mur);
  color: #B8B1A6;
  border-radius: var(--r-xl);
  padding: clamp(50px, 7vw, 92px) clamp(28px, 5vw, 60px);
  text-align: center;
}
.cagri::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 130% at 50% 118%, rgba(201,164,106,.22), transparent 62%),
    repeating-linear-gradient(95deg, rgba(201,164,106,.045) 0 2px, transparent 2px 12px);
}
.cagri > * { position: relative; z-index: 1; }
.cagri h2 { color: #FBF6EC; }
.cagri p {
  color: #9E978C;
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: 2.1em;
  font-size: 1.04rem;
}
.cagri-butonlar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

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

.iletisim-duzen {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(34px, 5vw, 70px);
  align-items: start;
}

.bilgi-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cizgi);
}
.bilgi-liste li {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--cizgi);
}
.bilgi-ikon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kagit-2);
  color: var(--ahsap-koyu);
}
.bilgi-liste strong {
  display: block;
  font-size: .71rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.bilgi-liste a,
.bilgi-liste span { color: var(--ink); font-size: 1rem; }
.bilgi-liste a { transition: color var(--hiz) var(--e); }
.bilgi-liste a:hover { color: var(--ahsap-koyu); }

/* Form */
.form {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-l);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--g-1);
}
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.alan { margin-bottom: 20px; }
.alan label {
  display: block;
  font-size: .71rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 9px;
}
.alan label .zorunlu { color: var(--ahsap); }
.alan input,
.alan select,
.alan textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-s);
  background: var(--kagit);
  font-family: var(--f-metin);
  font-size: .96rem;
  color: var(--ink);
  transition: border-color var(--hiz) var(--e), box-shadow var(--hiz) var(--e), background var(--hiz) var(--e);
}
.alan textarea { min-height: 148px; resize: vertical; }
.alan input:focus,
.alan select:focus,
.alan textarea:focus {
  outline: none;
  border-color: var(--ahsap);
  background: var(--yuzey);
  box-shadow: 0 0 0 4px rgba(142, 111, 66, .12);
}
.alan input::placeholder,
.alan textarea::placeholder { color: var(--ink-3); }

/* Spam tuzağı — ekranda ve ekran okuyucuda yok, botlar doldurunca eleniyor */
.tuzak {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.onay {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .86rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 26px;
}
.onay input { width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; accent-color: var(--ahsap); }

.form-not { margin-top: 18px; font-size: .8rem; color: var(--ink-3); text-align: center; }

.form-durum {
  display: none;
  margin-top: 18px;
  padding: 15px 17px;
  border-radius: var(--r-s);
  font-size: .91rem;
}
.form-durum.gorunur { display: block; }
.form-durum.basarili { background: #EAF3EC; color: #2A5C38; }
.form-durum.hata     { background: #FAEAE7; color: #8A3125; }

/* Harita */
.harita {
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--cizgi);
  background: var(--kagit-2);
}
.harita iframe {
  width: 100%;
  height: 440px;
  border: 0;
  display: block;
  filter: saturate(.85) contrast(1.02);
}

/* ----------------------------------------------------------- Footer -- */

.ayak {
  background: var(--mur);
  color: #8A847A;
  padding: clamp(56px, 8vw, 96px) 0 0;
  font-size: .91rem;
  position: relative;
  z-index: 2;
}
.ayak-ust {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.25fr;
  gap: 44px;
  padding-bottom: 56px;
}
.ayak h4 {
  color: #F5EFE4;
  font-family: var(--f-metin);
  font-size: .71rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ayak p { color: #8A847A; line-height: 1.7; }
.ayak ul { list-style: none; margin: 0; padding: 0; }
.ayak ul li { margin-bottom: 12px; }
.ayak a { color: #9E978C; transition: color var(--hiz) var(--e); }
.ayak a:hover { color: var(--amber); }
.ayak .logo { color: #F5EFE4; margin-bottom: 20px; }
.ayak .logo:hover { color: var(--amber); }
.ayak .logo-alt { color: #7C766D; }

.sosyal { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }

/* Etiketli sosyal buton (ikon + kullanıcı adı) */
.ig-buton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--cizgi-ters);
  border-radius: 100px;
  color: #9E978C;
  font-size: .89rem;
  font-weight: 500;
  letter-spacing: -.005em;
  transition: var(--hiz) var(--e);
}
.ig-buton svg { flex-shrink: 0; }
.ig-buton:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--mur);
  transform: translateY(-2px);
}

.ayak-alt {
  border-top: 1px solid var(--cizgi-ters);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .83rem;
  color: #6E6961;
}

/* --------------------------------------------------------- WhatsApp -- */

.wa-buton {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px -6px rgba(37, 211, 102, .55);
  transition: transform var(--hiz) var(--e), box-shadow var(--hiz) var(--e);
}
.wa-buton:hover {
  color: #fff;
  transform: scale(1.07) translateY(-2px);
  box-shadow: 0 16px 40px -8px rgba(37, 211, 102, .7);
}

/* ----------------------------------------------- Kaydırma animasyonu -- */

.beliren {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--e), transform .85s var(--e);
}
.beliren.gorundu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .beliren { opacity: 1; transform: none; }
  .serit-ic { animation: none; }
}

/* --------------------------------------------------------- Responsive - */

@media (max-width: 1080px) {
  .ayak-ust { grid-template-columns: 1fr 1fr; gap: 38px; }
  .surec-duzen { grid-template-columns: 1fr; }
  .surec-yapisik { position: static; }
  .basi-genis { grid-template-columns: 1fr; align-items: start; gap: 20px; }
}

@media (max-width: 960px) {
  .iletisim-duzen { grid-template-columns: 1fr; }
  .satir { grid-template-columns: 46px 1fr; }
  .satir p { grid-column: 2; }
}

@media (max-width: 820px) {
  body { font-size: 16px; }

  .ust-bar-slogan { display: none; }
  .ust-bar-iletisim { width: 100%; justify-content: space-between; gap: 14px; }
  /* Yazılar sıkışıp kırpılmasın */
  .ust-bar-iletisim > a { white-space: nowrap; flex-shrink: 0; }

  .baslik .kapsayici { padding-left: 14px; min-height: 58px; }
  .logo-img { height: 34px; }
  .ayak .logo-img { height: 62px; }
  .menu-dugmesi { display: block; }
  .baslik-aksiyon > .btn { display: none; }

  .menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(330px, 86vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 100px 24px 36px;
    background: var(--kagit);
    border-left: 1px solid var(--cizgi);
    border-radius: 0;
    box-shadow: -24px 0 60px -20px rgba(22,21,19,.3);
    transform: translateX(100%);
    /* kapalıyken görünmez: hem yatay taşmayı hem de klavyeyle
       gizli bağlantılara odaklanmayı engeller */
    visibility: hidden;
    transition: transform 420ms var(--e), visibility 0s linear 420ms;
    overflow-y: auto;
  }
  .menu.acik {
    transform: none;
    visibility: visible;
    transition: transform 420ms var(--e), visibility 0s;
  }
  .menu a {
    padding: 17px 4px;
    font-size: 1.08rem;
    font-weight: 450;
    color: var(--ink);
    border-bottom: 1px solid var(--cizgi);
    border-radius: 0;
  }
  .menu a:hover { background: transparent; color: var(--ahsap-koyu); }
  .menu a.aktif::after { left: auto; right: 4px; bottom: auto; top: 50%; margin-top: -2px; }
  .menu > .btn { display: inline-flex; margin-top: 26px; border-bottom: 0; }

  .menu-perde {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(22, 21, 19, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: var(--hiz) var(--e);
  }
  .menu-perde.acik { opacity: 1; visibility: visible; }

  .ikili { grid-template-columns: 1fr; }
  .ikili--ters .ikili-gorsel { order: 0; }

  .form-satir { grid-template-columns: 1fr; gap: 0; }

  .kahraman { min-height: auto; margin-inline: 10px; }
  .kahraman + .serit { margin-inline: 10px; }
  .sayfa-basligi { margin-inline: 10px; }
  .sayfa-basligi:has(+ .bolum--koyu) { margin-inline: 0; }
}

@media (max-width: 560px) {
  .kapsayici { padding-inline: 20px; }
  .ust-bar { font-size: .73rem; }
  /* Dar ekranda üst bar tek satırda kalsın: e-posta gizlenir
     (zaten footer'da ve İletişim sayfasında var), telefon + Instagram durur */
  .ust-bar-iletisim > a[href^="mailto:"] { display: none; }

  .kahraman, .sayfa-basligi, .cagri { border-radius: var(--r-l); }
  .kahraman .kapsayici { padding-block: 52px; }
  .kahraman-butonlar .btn { width: 100%; }

  .satir { grid-template-columns: 1fr; gap: 10px; }
  .satir::before { padding-top: 0; }
  .satir:hover { padding-inline: 0; }
  .satir p { grid-column: 1; }

  .surec-adim { padding-left: 0; padding-top: 58px; }
  .surec-adim::before { top: 24px; font-size: 1.3rem; }

  .kart { padding: 30px 24px; }
  .kart > .gorsel:first-child { margin: -30px -24px 22px; }

  .ayak-ust { grid-template-columns: 1fr; gap: 34px; }
  .ayak-alt { flex-direction: column; text-align: center; align-items: center; }
}

/* ------------------------------------------------------------ Yazdır -- */

@media print {
  .baslik, .ust-bar, .wa-buton, .menu-perde, .cagri, .ayak, .serit { display: none; }
  body { background: #fff; }
  body::before { display: none; }
  .beliren { opacity: 1; transform: none; }
}