/* Nexell — açılış sayfaları (pdf-excel-cevirme, pdf-to-excel, …)
 *
 * base.css + site.css üstüne gelir: gezinti, altbilgi, SSS (.faq), adımlar
 * (.steps/.step), farklar (.feats/.feat) ve kapanış kutusu (.cta) ana
 * sayfayla aynıdır. Burada yalnızca açılış sayfasına özgü parçalar var:
 * dil eşine bağlantı, sayfa yolu, kısa kahraman alanı, gerçek örnek (PDF
 * kâğıdı → komutlar → Excel sayfası), sınırlar ve ilgili işler.
 *
 * Açılış sayfasında .reveal kullanılmaz: içerik JS'siz de görünür olmalı
 * (arama motoru ve yavaş bağlantı). Yerleşim 360 px'te yatay kaydırma
 * üretmez; geniş tablolar kendi kutularında kayar.
 */

/* ------------------------------------------------------------ gezinti */

/* Dil eşine bağlantı: ana sayfadaki dil seçicinin (.langsel) görünümünde,
   ama bir <select> değil — eş sayfa ayrı bir adres. */
.nav__links a.dilbag {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  transition: border-color .2s, color .2s;
}
.nav__links a.dilbag::after { content: none; }
.nav__links a.dilbag:hover { border-color: var(--line); color: var(--text); text-decoration: none; }
.dilbag__kisa { display: none; }
@media (max-width: 860px) {
  /* base.css dar ekranda metin bağlantılarını gizler; dil bağlantısı kalır. */
  .nav__links a.dilbag { display: inline-flex !important; }
}
@media (max-width: 560px) {
  .nav__links a.dilbag { padding: 0 11px; }
  .dilbag__uzun { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dilbag__kisa { display: inline; }
}
@media (max-width: 400px) {
  .nav__links .nav__hesap { display: none; }
}

/* ---------------------------------------------------------- sayfa yolu */

.kirinti { padding-top: 18px; font-size: 13px; color: var(--muted); }
.kirinti ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.kirinti li + li::before { content: "›"; margin-right: 6px; color: var(--muted); }
.kirinti a { color: var(--muted); }
.kirinti a:hover { color: var(--text); }
.kirinti [aria-current="page"] { color: var(--text-2); }

/* -------------------------------------------------------- kahraman */

.ac-hero {
  position: relative;
  padding: clamp(28px, 5vw, 64px) 0 clamp(44px, 6vw, 76px);
  text-align: center;
  overflow: clip;
}
.ac-hero .fx-grid { -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 25%, transparent 72%); }
.ac-hero__in { position: relative; z-index: 1; }
.ac-hero .h1 { font-size: clamp(36px, 6vw, 68px); max-width: 16ch; margin: 0 auto 22px; }
.ac-hero .lead { max-width: 62ch; margin: 0 auto 30px; }
.ac-hero__cta { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.ac-hero__not { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------- bölüm başları */

.ac-bas { max-width: 760px; margin: 0 auto; text-align: center; }
.ac-bas .lead { margin-top: 16px; }
.ac-bas .h2 { font-size: clamp(28px, 3.8vw, 44px); }

/* ------------------------------------------------------- adımlar (4) */

.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin-left: 0; margin-right: 0; margin-top: 48px; }
@media (max-width: 1000px) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .steps--4 { grid-template-columns: minmax(0, 1fr); } }
.steps--4 .step { text-align: left; padding: 26px 24px; }
.steps--4 .step__n { margin: 0 0 16px; }

/* ------------------------------------------------------- gerçek örnek */

.ornek { max-width: 1000px; margin: 44px auto 0; display: grid; gap: 16px; }
.ornek__adim {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  padding: clamp(16px, 2.6vw, 26px);
}
.ornek__etiket {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ornek__no {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--grad);
  color: var(--on-accent);
  font-size: 12px;
  letter-spacing: 0;
}
.ornek__ok { display: grid; place-items: center; color: var(--accent-text); }
.ornek__ok svg { width: 22px; height: 22px; }
.ornek__not { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.ornek__not b { color: var(--text-2); font-weight: 600; }
.ornek__kaynak { max-width: 1000px; margin: 14px auto 0; font-size: 12.5px; color: var(--muted); text-align: center; }

/* PDF kâğıdı: basılı bir sayfanın görüntüsü — iki temada da açık zemin.
   Yazı tipi sitenin yazı tipidir (Montserrat, inherit); eş aralıklı yazı tipi
   sitede kullanılmaz, sayılar tabular-nums ile hizalanır. */
.kagit-kutu { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
/* Üst üste iki kâğıt (ör. iki fatura PDF'i) arasında boşluk. */
.kagit-kutu + .kagit-kutu { margin-top: 12px; }
/* İki girdili örnek (ör. DÜŞEYARA: iki dosya): genişte yan yana, darda alt alta.
   <div class="kagit-ikili"><div class="kagit kagit--metin">…</div><div class="kagit kagit--metin">…</div></div> */
.kagit-ikili { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.kagit {
  min-width: 560px;
  background: #fdfdfb;
  color: #1c1c1a;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-s);
  padding: 18px 20px 14px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  line-height: 1.45;
}
.kagit__ust { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.kagit__ust b { display: block; font-size: 13px; }
.kagit__rapor { text-align: right; }
.kagit table { width: 100%; border-collapse: collapse; }
.kagit th { text-align: left; border-bottom: 1.5px solid #41413e; padding: 4px 8px 4px 0; font-size: 10.5px; }
.kagit td { padding: 4px 8px 4px 0; border-bottom: 1px solid #e6e7e3; white-space: nowrap; }
.kagit .s { text-align: right; }
.kagit tr.kagit__top td { font-weight: 700; border-top: 1.5px solid #41413e; border-bottom: 0; }
.kagit__alt { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 10px; color: #6b6b66; }

/* Yapıştırılan metin (WhatsApp dışa aktarımı, dağınık liste, CSV satırları):
   satırlar olduğu gibi kalır, dar ekranda kutu içinde kırılır (yatay kaydırma
   yok). <div class="kagit kagit--metin" role="img" aria-label="…">satır\nsatır</div> */
.kagit--metin {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12.5px;
  line-height: 1.6;
}
/* Fotoğraf / taranmış sayfa girdisi: gerçek görsel yerine çizilen kâğıt hafif eğik ve gölgeli. */
.kagit--foto { transform: rotate(-0.6deg); box-shadow: var(--shadow-m, var(--shadow-s)); }
@media (prefers-reduced-motion: reduce) { .kagit--foto { transform: none; } }

/* Komut akışı: yazılan istek ve motorun bildirdiği sonuç. */
.akis { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.akis li { display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--bg-alt); border: 1px solid var(--line-soft); min-width: 0; }
.akis__komut { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.akis__komut::before { content: "› "; color: var(--accent-text); font-weight: 700; }
.akis__sonuc { color: var(--accent-text); font-size: 13px; }
.akis__sonuc::before { content: "✓ "; font-weight: 700; }
.akis__bilgi { color: var(--text-2); font-size: 13.5px; }

/* Excel sayfası: formül çubuğu + ızgara + sayfa sekmeleri. */
.xl { border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: var(--surface); }
.xl__fx {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-alt);
  font-family: inherit; font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  white-space: nowrap;
  overflow-x: auto;
}
.xl__ad { min-width: 30px; font-weight: 700; color: var(--text-2); }
.xl__fxi { font-family: inherit; font-style: italic; font-weight: 700; color: var(--muted); }
.xl__fx code { font-family: inherit; color: var(--text); }
.xl__izgara { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.xl__t { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 660px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.xl__t caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xl__t thead th {
  background: var(--bg-alt);
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-align: center;
  padding: 4px 8px;
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
}
.xl__t tbody th {
  width: 34px;
  background: var(--bg-alt);
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
  text-align: center;
  padding: 6px 4px;
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
}
.xl__t td { padding: 6px 10px; border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); white-space: nowrap; color: var(--text); }
.xl__t td:last-child, .xl__t thead th:last-child { border-right: 0; }
.xl__t td.n { text-align: right; }
.xl__t tr.xl__bas td { background: var(--head); color: var(--on-head); font-weight: 600; }
.xl__t tr.xl__top td { font-weight: 700; background: var(--tint); }
.xl__t td.fx { position: relative; }
.xl__t td.fx::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  border-style: solid;
  border-width: 0 7px 7px 0;
  border-color: transparent var(--accent) transparent transparent;
}
.xl__t td.sec { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Hata değeri hücresi (#YOK, #N/A): Excel'deki gibi ortada. */
.xl__t td.hata { text-align: center; }
/* Koşullu biçimin Excel'deki görünümü: dosyadaki dxf renkleri. Excel'deki gibi
   iki temada da aynıdır (tema değişkeni kullanılmaz).
   kb-kirmizi: açık kırmızı dolgu F8D7DA, koyu kırmızı yazı 9C0006
   kb-yesil:   açık yeşil dolgu D4EDDA, koyu yeşil yazı 006100
   xl__vurgu:  motorun sarı vurgusu, dolgu FFF2CC, yazı 7F6000 */
.xl__t tr.kb-kirmizi td { background: #f8d7da; color: #9c0006; }
.xl__t tr.kb-yesil td { background: #d4edda; color: #006100; }
.xl__t tr.xl__vurgu td { background: #fff2cc; color: #7f6000; }
/* Veri çubuğu: <td class="n kb-cubuk" style="--bar:25%"> (Excel'in en kısa %10, en uzun %90 çubuğu) */
.xl__t td.kb-cubuk { background: linear-gradient(90deg, rgba(0,191,99,.42) var(--bar), transparent var(--bar)); }
.xl__t tr.kb-kirmizi td.kb-cubuk { background: linear-gradient(90deg, rgba(0,191,99,.42) var(--bar), #f8d7da var(--bar)); }
.xl__sekmeler { display: flex; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--line-soft); background: var(--bg-alt); font-size: 12px; color: var(--muted); }
.xl__sekme { padding: 3px 12px; border-radius: 6px; }
.xl__sekme.is-on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-s); }

/* ---------------------------------------------------------- farklar */

.ac-fark { margin-top: 44px; }
.feat h3 { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.012em; line-height: 1.3; }
.feat h3::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  border-radius: 6px;
  background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a957' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.ac-fark .feat p { font-size: 13.5px; }

/* --------------------------------------------------------- sınırlar */

.sinirlar { max-width: 820px; margin: 40px auto 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sinirlar li {
  position: relative;
  padding: 15px 18px 15px 50px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}
.sinirlar li::before {
  content: "!";
  position: absolute;
  left: 16px; top: 16px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  color: var(--warn);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}
.sinirlar b { color: var(--text); font-weight: 600; }

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

.ac-sss .faq { margin-top: 40px; }
/* Cevaptaki bölünmeyen uzun formül (=EĞERHATA(DÜŞEYARA(…))) dar ekranda sayfayı genişletmesin. */
.faq { overflow-wrap: anywhere; }

/* ------------------------------------------------------ ilgili işler */

.ilgili { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .ilgili { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ilgili { grid-template-columns: minmax(0, 1fr); } }
.ilgili a {
  display: block;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  transition: border-color .2s, transform .3s var(--ease-out), box-shadow .3s;
}
.ilgili a:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--line-soft)); transform: translateY(-2px); box-shadow: var(--shadow-s); }
.ilgili b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.ilgili b::after { content: " →"; color: var(--accent-text); }
.ilgili span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* Altbilgi: dört sütun düzeni (.foot__grid--4) site.css'te; ana sayfa da kullanır. */