/* ===========================================================
   ALVEXA — TEMEL STİLLER
   tokens.css üzerine kurulur. Tipografi, düzen kapları,
   bölüm ritmi, butonlar ve genel yardımcı sınıflar.
   Bileşenler (header, footer, hero, kartlar) ayrı dosyalarda.
   =========================================================== */

/* -----------------------------------------------------------
   GÖVDE
   ----------------------------------------------------------- */
html {
  /* Sabit header'ın altına gizlenen çapa bağlantılarını önler */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text);
  background-color: var(--white);
}

/* -----------------------------------------------------------
   BAŞLIKLAR
   Referans siteye uygun: geniş harf aralığı, orta kalınlık.
   ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-4xl);
  letter-spacing: var(--ls-wide);
}

h2 {
  font-size: var(--fs-3xl);
  letter-spacing: var(--ls-wide);
}

h3 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
}

h4 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}

h5 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}

h6 {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--sp-4);
}

strong, b {
  font-weight: var(--fw-semibold);
  color: inherit;
}

small {
  font-size: var(--fs-sm);
}

/* -----------------------------------------------------------
   BAĞLANTILAR
   ----------------------------------------------------------- */
a {
  color: inherit;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--sage-dark);   /* --sage açık zeminde 3.74:1, AA altı */
}

/* Metin içi bağlantılar altı çizili kalır — erişilebilirlik */
.prose a,
p > a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* -----------------------------------------------------------
   ODAK HALKASI — her yerde görünür, klavye ile gezilebilir
   ----------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.section--dark :focus-visible,
.on-dark :focus-visible {
  outline-color: var(--taupe);
}

/* İçeriğe atla bağlantısı — Tab ile odaklanınca görünür olur */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-overlay);
  padding: var(--sp-3) var(--sp-5);
  background-color: var(--ink);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--white);
}

/* -----------------------------------------------------------
   DÜZEN KAPLARI
   ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: none;
}

/* -----------------------------------------------------------
   BÖLÜM RİTMİ
   ----------------------------------------------------------- */
.section {
  padding-block: var(--section-y);
}

.section--sm {
  padding-block: var(--section-y-sm);
}

.section--flush {
  padding-block: 0;
}

.section--gray {
  background-color: var(--gray-bg);
}

.section--tint {
  background-color: var(--sage-tint);
}

.section--dark {
  background-color: var(--ink);
  color: var(--text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--white);
}

.section--dark a:hover {
  color: var(--taupe);
}

/* -----------------------------------------------------------
   BÖLÜM BAŞLIK BLOĞU
   .eyebrow  → küçük, geniş aralıklı, bej üst etiket
   .section-title → büyük, geniş aralıklı ana başlık
   ----------------------------------------------------------- */
.section-head {
  margin-bottom: var(--section-gap);
}

.section-head--center {
  text-align: center;
  margin-inline: auto;
  max-width: 62ch;
}

.eyebrow {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--taupe-text);   /* açık zemin — ölçülmüş 4.55:1+ */
}

/* Koyu zeminde bejin kendisi zaten 7.6:1 — orada --taupe kalır.
   .page-hero de koyu perdeli bir zemindir; ölçümde --taupe-text
   orada 3.25:1 veriyordu, bu yüzden listede o da var. */
.section--dark .eyebrow,
.on-dark .eyebrow,
.page-hero .eyebrow {
  color: var(--taupe);
}

.section-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink);
}

.section--dark .section-title {
  color: var(--white);
}

/* Başlık altındaki ince adaçayı çizgi */
.section-title--rule::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin-top: var(--sp-5);
  background-color: var(--sage);
}

.section-head--center .section-title--rule::after {
  margin-inline: auto;
}

.section-lead {
  margin-top: var(--sp-5);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  max-width: 68ch;
}

.section--dark .section-lead {
  color: var(--text-on-dark-muted);
}

.section-head--center .section-lead {
  margin-inline: auto;
}

/* Uzun kurumsal metin blokları */
.prose {
  max-width: 68ch;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

.prose h2,
.prose h3 {
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
  color: var(--ink);
}

.prose > :first-child {
  margin-top: 0;
}

/* -----------------------------------------------------------
   BUTONLAR
   ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  /* nowrap DEĞİL. Rusça "Смотреть наши проекты" 360px'te
     338px sürüyor ve buton kabı 13px aşıyordu. Sarmaya izin
     verip uzun kelimeleri de kırıyoruz; tek satıra sığan
     metinler zaten tek satırda kalır. */
  white-space: normal;
  overflow-wrap: break-word;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}

/* Birincil — dolu adaçayı */
.btn--primary {
  background-color: var(--sage-solid);   /* beyaz metin 4.52:1 */
  border-color: var(--sage-solid);
  color: var(--white);
}

.btn--primary:hover {
  background-color: var(--sage-dark);
  border-color: var(--sage-dark);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

/* Çerçeveli — açık zeminde koyu çerçeve */
.btn--outline {
  background-color: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--outline:hover {
  background-color: var(--ink);
  color: var(--white);
}

/* Açık — koyu zeminde / hero görseli üzerinde */
.btn--light {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
}

.btn--light:hover {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

/* Dolu beyaz — koyu zeminde vurgulu eylem */
.btn--solid-light {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.btn--solid-light:hover {
  background-color: var(--taupe);
  border-color: var(--taupe);
  color: var(--ink);
}

.btn--sm {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
}

.btn--lg {
  padding: var(--sp-5) var(--sp-10);
  font-size: var(--fs-base);
}

/* Dar ekranda büyük butonun yatay dolgusu bir kademe iner —
   uzun çevirilerde metne daha çok yer kalır. */
@media (max-width: 479px) {
  .btn--lg {
    padding-inline: var(--sp-6);
  }
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Metin bağlantısı biçiminde eylem — "Devamını oku →" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--sage-dark);   /* açık zeminde 5.43:1 */
}

.section--dark .link-arrow,
.on-dark .link-arrow {
  color: var(--taupe);
}

.link-arrow::after {
  content: '→';
  transition: transform var(--transition-fast);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

/* -----------------------------------------------------------
   GRID YARDIMCILARI
   ----------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--sp-8);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Otomatik sarma — kart genişliği tabanlı */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

@media (max-width: 1023px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.flow > * + * {
  margin-top: var(--sp-4);
}

/* -----------------------------------------------------------
   GENEL YARDIMCI SINIFLAR
   ----------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-muted  { color: var(--text-muted); }
/* Açık zeminde kullanılmak üzere: ikisi de AA geçen tonlar */
.text-sage   { color: var(--sage-dark); }
.text-taupe  { color: var(--taupe-text); }

.uppercase   { text-transform: uppercase; }
.tracking-wide   { letter-spacing: var(--ls-wide); }
.tracking-wider  { letter-spacing: var(--ls-wider); }
.tracking-widest { letter-spacing: var(--ls-widest); }

.no-wrap { white-space: nowrap; }

.divider {
  height: 1px;
  border: 0;
  background-color: var(--gray-line);
}

.section--dark .divider {
  background-color: rgba(255, 255, 255, 0.14);
}

/* Görsel oranları — CLS (düzen kayması) önlemek için */
.ratio {
  position: relative;
  overflow: hidden;
}

.ratio > img,
.ratio > picture,
.ratio > picture > img,
.ratio > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio--16x9 { aspect-ratio: 16 / 9; }
.ratio--4x3  { aspect-ratio: 4 / 3; }
.ratio--3x2  { aspect-ratio: 3 / 2; }
.ratio--1x1  { aspect-ratio: 1 / 1; }
.ratio--3x4  { aspect-ratio: 3 / 4; }

/* ===========================================================
   İÇ SAYFA HERO'SU
   PROMPT 5'te hakkimizda.html için yazıldı, PROMPT 6'da
   projelerimiz.html de aynısını kullandığı için buraya taşındı.
   Ana sayfanın hero'su 80vh ve AYDINLIK fotoğraf + koyu yazı
   (açık perde, css/home.css). İç sayfalarda 60vh, metin beyaz
   ve perde KOYU, soldan geliyor.
   Fotoğrafın kadrajı sayfaya göre değişir: `object-position`
   ilgili sayfanın CSS'inde ezilir.
   =========================================================== */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 60vh;
  min-height: 60svh;      /* mobilde adres çubuğu zıplatmasın */
  overflow: hidden;
  background-color: var(--ink);   /* görsel yüklenene kadar */
}

.page-hero__media {
  position: absolute;
  inset: 0;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Koyu perde — soldan sağa saydamlaşır */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    to right,
    var(--overlay-strong) 0%,
    var(--overlay) 42%,
    transparent 72%
  );
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--section-y-sm);
}

.page-hero__content {
  max-width: 36rem;
}

.page-hero__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--white);
}

.page-hero__subtitle {
  margin-top: var(--sp-5);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--text-on-dark);
}

@media (max-width: 767px) {
  .page-hero {
    min-height: 52vh;
    min-height: 52svh;
  }

  /* Dar ekranda perde yatay değil dikey — metin altta duruyor */
  .page-hero::before {
    background-image: linear-gradient(
      to bottom,
      transparent 0%,
      var(--overlay) 45%,
      var(--overlay-strong) 100%
    );
  }
}

/* ===========================================================
   KAPANIŞ CTA ŞERİDİ
   Ana sayfada ve Projelerimiz'de aynı bileşen kullanılıyor;
   PROMPT 6'da home.css'ten buraya taşındı. `.section--dark`
   ile birlikte kullanılır.
   =========================================================== */
.cta-band {
  text-align: center;
}

.cta-band__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--white);
}

.cta-band__desc {
  max-width: 58ch;
  margin: var(--sp-6) auto 0;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--text-on-dark-muted);
}

.cta-band__actions {
  margin-top: var(--sp-10);
}

/* ===========================================================
   HİZMET KARTLARI — üç faaliyet alanı
   PROMPT 3'te index.html için yazıldı, PROMPT 7'de iletisim.html
   de aynısını kullandığı için home.css'ten buraya taşındı.
   Kartın tamamı tıklanabilir: <a> mutlak konumlu bir örtü
   (stretched link) olarak kartı kaplar, böylece link
   semantiği tek ve doğru kalır.
   =========================================================== */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-10) var(--sp-8) var(--sp-8);
  background-color: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  transition: transform var(--transition),
              box-shadow var(--transition),
              border-color var(--transition);
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.service-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-6);
  color: var(--sage);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color var(--transition), transform var(--transition);
}

.service-card:hover .service-card__icon,
.service-card:focus-within .service-card__icon {
  color: var(--sage-dark);
  transform: scale(1.06);
}

.service-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink);
}

.service-card__desc {
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.service-card__link {
  /* auto: aciklamalar farkli uzunlukta olsa da baglantilar
     ucunde ayni hizada durur */
  margin-top: auto;
  padding-top: var(--sp-8);
  align-self: flex-start;
}

/* Örtü: kartın tamamını tıklanabilir yapar */
.service-card__link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Odak halkası bağlantı metninde değil, kartın tamamında görünsün.
   :focus-within fare tıklamasında da tetiklendiği için çerçeve
   :has(:focus-visible) ile yalnızca klavye kullanıcısına çizilir. */
.service-card__link:focus-visible {
  outline: none;
}

.service-card:has(:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card__icon {
    transition: none;
  }

  .service-card:hover,
  .service-card:focus-within {
    transform: none;
  }

  .service-card:hover .service-card__icon,
  .service-card:focus-within .service-card__icon {
    transform: none;
  }
}

/* ===========================================================
   SCROLL İLE BELİRME (js/reveal.js)

   *** JS KAPALIYKEN SİTE BOŞ GÖRÜNMESİN ***
   Burada HİÇBİR ŞEY varsayılan olarak opacity:0 DEĞİL.
   Gizleme yalnızca `html.has-reveal` altında geçerli ve o sınıfı
   reveal.js ekliyor. Dosya yüklenmezse, hata verirse veya JS
   kapalıysa `[data-reveal]` niteliği hiç yazılmaz ve bu bloktaki
   kuralların tamamı ölü kalır — içerik olduğu gibi görünür.
   Bu bloğa `.has-reveal` öneki olmayan bir gizleme kuralı EKLEME.
   =========================================================== */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.has-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  /* 520ms + yumuşak ease-out; --reveal-delay kademeyi taşır
     (reveal.js her kardeşe 70ms'lik katları yazıyor). */
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

/* Ekranın üstünde kalmış öğeler ve emniyet ağı: geçişsiz aç */
.has-reveal [data-reveal].is-revealed--instant {
  opacity: 1;
  transform: none;
  transition: none;
}

/* CSS tarafındaki ikinci güvence. reveal.js zaten bu ayarda
   .has-reveal sınıfını hiç eklemiyor; yine de sınıf bir şekilde
   sayfada kalırsa öğeler gizli kalmasın. */
@media (prefers-reduced-motion: reduce) {
  .has-reveal [data-reveal],
  .has-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* Baskı için basit temizlik */
@media print {
  /* Belirme animasyonu baskıda anlamsız; her şey açık gelsin */
  .has-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .skip-link,
  .site-header,
  .site-footer {
    display: none !important;
  }

  body {
    color: var(--ink);
    background: var(--white);
  }
}