/* ============================================================
   sayfa.css — /marka/ ve /aile/ ortak iç sayfa stilleri.
   Strateji C: gövde ortak açık zemin; hero kutup rengini taşır.
   Kutup farkları body sınıfıyla token'lara bağlanır:
   .sayfa--creative → lacivert, .sayfa--foto → terrakota.
   ============================================================ */

.sayfa--creative {
  --vurgu: var(--renk-navy);
  --vurgu-koyu: var(--renk-navy-hud);
  --hero-zemin: var(--renk-navy-derin);
  --hero-metin: var(--renk-metin-acik);
  --hero-soluk: var(--renk-metin-acik-soluk);
  --hero-etiket: var(--renk-altin);
  --hero-cta-zemin: var(--renk-altin);
  --hero-cta-metin: var(--renk-navy-hud);
  --karsi-vurgu: var(--renk-terrakota-koyu);
}

.sayfa--foto {
  --vurgu: var(--renk-terrakota-koyu);
  --vurgu-koyu: var(--renk-terrakota-koyu);
  --hero-zemin: linear-gradient(120deg, var(--renk-terrakota), var(--renk-terrakota-koyu));
  --hero-metin: var(--renk-soft);
  --hero-soluk: var(--renk-gecis-sicak);
  --hero-etiket: var(--renk-gecis-sicak);
  --hero-cta-zemin: var(--renk-soft);
  --hero-cta-metin: var(--renk-terrakota-koyu);
  --karsi-vurgu: var(--renk-navy);
}

.sayfa-govde {
  background: var(--renk-kagit);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .sayfa-govde {
    scroll-behavior: auto;
  }
}

/* ---- Üst çubuk ---- */

.ust-cubuk {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bosluk-4);
  padding: var(--bosluk-3) var(--bosluk-6);
  background: var(--renk-kagit);
  border-bottom: var(--cizgi-ince) solid var(--renk-cizgi-acik);
}

.ust-cubuk .marka-link {
  display: inline-flex;
  color: var(--renk-metin-koyu);
  flex-shrink: 0;
}

.ust-cubuk .logo {
  height: var(--logo-yukseklik-mobil);
  width: auto;
}

.ust-cubuk nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ust-cubuk nav ul {
  display: flex;
  align-items: center;
  gap: var(--bosluk-5);
  white-space: nowrap;
}

.ust-cubuk nav a {
  text-decoration: none;
  font-size: var(--punto-kucuk);
  color: var(--renk-metin-koyu-soluk);
}

.ust-cubuk nav a:hover,
.ust-cubuk nav a[aria-current] {
  color: var(--vurgu);
}

.ust-cubuk nav .capraz-gecis {
  color: var(--karsi-vurgu);
  border: var(--cizgi-ince) solid currentColor;
  border-radius: var(--yaricap-buyuk);
  padding: var(--bosluk-1) var(--bosluk-3);
}

/* ---- Hero ---- */

.hero {
  background: var(--hero-zemin);
  color: var(--hero-metin);
  padding: var(--bosluk-9) var(--bosluk-6);
}

.hero-ic {
  max-width: var(--icerik-genislik);
  margin: 0 auto;
}

.hero .bolum-etiket {
  color: var(--hero-etiket);
}

.hero h1 {
  font-size: var(--punto-baslik-1);
  font-weight: 600;
  max-width: 22ch;
  margin-top: var(--bosluk-3);
}

.hero p {
  margin-top: var(--bosluk-4);
  max-width: var(--metin-genislik);
  color: var(--hero-soluk);
  font-size: var(--punto-buyuk);
  line-height: var(--satir-genis);
}

.hero .cta-grup {
  margin-top: var(--bosluk-6);
}

/* ---- Genel bölüm düzeni ---- */

.bolum {
  padding: var(--bosluk-8) var(--bosluk-6);
}

.bolum-ic {
  max-width: var(--icerik-genislik);
  margin: 0 auto;
}

.bolum-etiket {
  font-family: var(--font-mono);
  font-size: var(--punto-hud);
  letter-spacing: var(--harf-aralik-etiket);
  color: var(--vurgu);
  text-transform: uppercase;
}

.bolum h2 {
  font-size: var(--punto-baslik-2);
  color: var(--renk-metin-koyu);
  margin-top: var(--bosluk-2);
}

.bolum-giris {
  margin-top: var(--bosluk-3);
  max-width: var(--metin-genislik);
  color: var(--renk-metin-koyu-soluk);
}

.bolum--dolgu {
  background: var(--renk-soft);
}

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

.cta-grup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
  align-items: center;
}

.buton {
  display: inline-block;
  padding: var(--bosluk-3) var(--bosluk-5);
  border-radius: var(--yaricap-orta);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--punto-kucuk);
  background: var(--hero-cta-zemin);
  color: var(--hero-cta-metin);
}

.buton--govde {
  background: var(--vurgu);
  color: var(--renk-kagit);
}

.buton--ikincil {
  background: transparent;
  color: inherit;
  border: var(--cizgi-ince) solid currentColor;
  font-weight: 500;
}

/* ---- Kartlar (hizmetler / çekim türleri) ---- */

.kart-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--bosluk-4);
  margin-top: var(--bosluk-6);
}

.kart {
  background: var(--renk-soft);
  border: var(--cizgi-ince) solid var(--renk-cizgi-acik);
  border-radius: var(--yaricap-orta);
  padding: var(--bosluk-5);
}

.bolum--dolgu .kart {
  background: var(--renk-kagit);
}

.kart .kart-no {
  font-family: var(--font-mono);
  font-size: var(--punto-hud);
  color: var(--vurgu);
  letter-spacing: var(--harf-aralik-etiket);
}

.kart h3 {
  font-size: var(--punto-baslik-3);
  color: var(--renk-metin-koyu);
  margin-top: var(--bosluk-2);
}

.kart p {
  margin-top: var(--bosluk-2);
  color: var(--renk-metin-koyu-soluk);
  font-size: var(--punto-kucuk);
}

/* ---- Süreç adımları ---- */

.surec {
  margin-top: var(--bosluk-6);
  display: grid;
  gap: var(--bosluk-4);
  counter-reset: adim;
}

.surec li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--bosluk-4);
  align-items: start;
}

.surec li::before {
  counter-increment: adim;
  content: '0' counter(adim);
  font-family: var(--font-mono);
  color: var(--vurgu);
  font-size: var(--punto-buyuk);
  line-height: var(--satir-siki);
  padding-top: var(--bosluk-1);
}

.surec h3 {
  font-size: var(--punto-buyuk);
  color: var(--renk-metin-koyu);
}

.surec p {
  color: var(--renk-metin-koyu-soluk);
  font-size: var(--punto-kucuk);
  margin-top: var(--bosluk-1);
  max-width: var(--metin-genislik);
}

/* ---- Galeri (Seçme Kareler) ---- */

.galeri-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bosluk-4);
  margin-top: var(--bosluk-6);
}

.kare {
  margin: 0;
}

.kare-ac {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: var(--yaricap-orta);
  overflow: hidden;
  cursor: zoom-in;
}

.kare img,
.kare-yertutucu {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kare-yertutucu {
  font-family: var(--font-mono);
  font-size: var(--punto-hud);
  letter-spacing: var(--harf-aralik-etiket);
  text-transform: uppercase;
}

.sayfa--creative .kare-yertutucu {
  background: linear-gradient(140deg, var(--renk-navy), var(--renk-navy-derin));
  color: var(--renk-etiket-koyu-zemin);
}

.sayfa--foto .kare-yertutucu {
  background: linear-gradient(140deg, var(--renk-gecis-sicak), var(--renk-terrakota));
  color: var(--renk-soft);
}

.kare figcaption {
  margin-top: var(--bosluk-2);
}

.kare figcaption b {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--punto-buyuk);
  color: var(--renk-metin-koyu);
  font-weight: 600;
}

.kare figcaption p {
  color: var(--renk-metin-koyu-soluk);
  font-size: var(--punto-kucuk);
  margin-top: var(--bosluk-1);
}

.instagram-bandi {
  margin-top: var(--bosluk-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bosluk-4);
  flex-wrap: wrap;
  border-top: var(--cizgi-ince) solid var(--renk-cizgi-acik);
  padding-top: var(--bosluk-5);
}

.instagram-bandi p {
  color: var(--renk-metin-koyu-soluk);
}

/* ---- Lightbox ---- */

.isik-kutusu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--renk-navy-hud);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--bosluk-6);
}

.isik-kutusu[hidden] {
  display: none;
}

.isik-kutusu img,
.isik-kutusu .kare-yertutucu {
  max-width: min(100%, var(--icerik-genislik));
  max-height: 72dvh;
  width: auto;
  aspect-ratio: auto;
  border-radius: var(--yaricap-orta);
}

.isik-kutusu .kare-yertutucu {
  width: 100%;
  max-width: var(--metin-genislik);
  aspect-ratio: 4 / 3;
}

.isik-kutusu-yazi {
  color: var(--renk-metin-acik);
  text-align: center;
  margin-top: var(--bosluk-4);
  max-width: var(--metin-genislik);
}

.isik-kutusu-yazi p {
  color: var(--renk-etiket-koyu-zemin);
  font-size: var(--punto-kucuk);
}

.isik-kutusu button {
  position: absolute;
  color: var(--renk-metin-acik);
  font-size: var(--punto-baslik-3);
  line-height: 1;
  padding: var(--bosluk-3);
}

.isik-kutusu .kapat { top: var(--bosluk-4); right: var(--bosluk-4); }
.isik-kutusu .onceki { left: var(--bosluk-2); top: 50%; transform: translateY(-50%); }
.isik-kutusu .sonraki { right: var(--bosluk-2); top: 50%; transform: translateY(-50%); }

/* ---- Referans şeridi ---- */

.referans-seridi {
  margin-top: var(--bosluk-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-5) var(--bosluk-7);
  align-items: center;
}

.referans-seridi img {
  height: var(--bosluk-6);
  width: auto;
  opacity: 0.8;
}

.referans-seridi .referans-ad {
  font-family: var(--font-baslik);
  font-size: var(--punto-baslik-3);
  font-weight: 500;
  color: var(--renk-metin-koyu-soluk);
  letter-spacing: 0.02em;
}

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

.sss {
  margin-top: var(--bosluk-6);
  max-width: var(--metin-genislik);
  display: grid;
  gap: var(--bosluk-3);
}

.sss details {
  background: var(--renk-soft);
  border: var(--cizgi-ince) solid var(--renk-cizgi-acik);
  border-radius: var(--yaricap-orta);
  padding: var(--bosluk-4) var(--bosluk-5);
}

.sss summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--renk-metin-koyu);
  font-family: var(--font-baslik);
  font-size: var(--punto-buyuk);
}

.sss details p {
  margin-top: var(--bosluk-3);
  color: var(--renk-metin-koyu-soluk);
}

/* ---- Hakkımda ---- */

.hakkimda-ic {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--bosluk-6);
  align-items: start;
  margin-top: var(--bosluk-6);
}

.hakkimda-gorsel {
  width: clamp(10rem, 22vw, 16rem);
  aspect-ratio: 3 / 4;
  border-radius: var(--yaricap-buyuk);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--punto-hud);
  letter-spacing: var(--harf-aralik-etiket);
}

.sayfa--creative .hakkimda-gorsel {
  background: linear-gradient(160deg, var(--renk-navy), var(--renk-navy-hud));
  color: var(--renk-etiket-koyu-zemin);
}

.sayfa--foto .hakkimda-gorsel {
  background: linear-gradient(160deg, var(--renk-gecis-sicak), var(--renk-terrakota));
  color: var(--renk-soft);
}

.hakkimda-metin p {
  color: var(--renk-metin-koyu-soluk);
  max-width: var(--metin-genislik);
  margin-top: var(--bosluk-3);
}

/* ---- İletişim / CTA bandı ---- */

.iletisim {
  background: var(--hero-zemin);
  color: var(--hero-metin);
}

.iletisim h2 {
  color: var(--hero-metin);
}

.iletisim .bolum-etiket {
  color: var(--hero-etiket);
}

.iletisim .bolum-giris {
  color: var(--hero-soluk);
}

.iletisim .cta-grup {
  margin-top: var(--bosluk-6);
}

.iletisim .diger-kanallar {
  margin-top: var(--bosluk-5);
  font-size: var(--punto-kucuk);
  color: var(--hero-soluk);
}

.iletisim .diger-kanallar a {
  color: var(--hero-metin);
}

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

.alt-bilgi {
  background: var(--renk-navy-hud);
  color: var(--renk-etiket-koyu-zemin);
  padding: var(--bosluk-5) var(--bosluk-6);
  font-family: var(--font-mono);
  font-size: var(--punto-hud);
  letter-spacing: var(--harf-aralik-hud);
  display: flex;
  justify-content: space-between;
  gap: var(--bosluk-4);
  flex-wrap: wrap;
}

.alt-bilgi a {
  color: var(--renk-metin-acik);
  text-decoration: none;
}

/* ---- Mobil ---- */
/* breakpoint sabiti: tokens.css'teki istisna notuna bakın */
@media (max-width: 56em) {
  .galeri-izgara {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 44em) {
  .ust-cubuk,
  .hero,
  .bolum,
  .alt-bilgi {
    padding-left: var(--bosluk-4);
    padding-right: var(--bosluk-4);
  }

  .hero,
  .bolum {
    padding-top: var(--bosluk-7);
    padding-bottom: var(--bosluk-7);
  }

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

  .hakkimda-ic {
    grid-template-columns: 1fr;
  }
}