/* Kredi Karti Asistani - ic sayfalar (kilavuz.html, gizlilik.html)
   v2.css'in uzerine yuklenir: ayni palet, fontlar, menu ve alt bilgi.
   Burada yalnizca uzun metin tipografisi, tablo, ipucu kutulari,
   dil sekmeleri ve kilavuz ekran goruntuleri tanimlanir. */

/* Sayfanin ust kosesinde ana sayfadaki auroranin sakin bir yankisi */
.doc-page {
  background:
    radial-gradient(48vw 34vw at 100% 0%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 70%),
    radial-gradient(30vw 26vw at 78% 6%, color-mix(in srgb, var(--pink) 10%, transparent), transparent 70%),
    var(--ice);
  background-repeat: no-repeat;
}

.doc {
  max-width: 900px;
  padding-top: clamp(28px, 6vw, 72px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.doc h1 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.06; letter-spacing: -.035em;
  margin: 0 0 14px; max-width: 22ch;
}
.doc .sub {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: -.01em; line-height: 1.7;
  color: var(--muted); max-width: none; margin: 0 0 28px;
}

.doc h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.15; letter-spacing: -.03em;
  margin: 44px 0 16px; padding-top: 28px; border-top: 1px solid var(--line); clear: both;
}
/* kilavuzda sekmelerin hemen altindaki ilk baslik cizgisiz */
.doc section > h2:first-child { margin-top: 36px; padding-top: 0; border-top: 0; }
/* Basliklarin onunde, ana sayfadaki ekran etiketleri gibi renkli serit */
.doc h2::before {
  content: ""; display: block; width: 34px; height: 8px; border-radius: 8px;
  background: var(--sky); margin-bottom: 16px;
}
.doc section > h2:nth-of-type(6n+2)::before { background: var(--pink); }
.doc section > h2:nth-of-type(6n+3)::before { background: var(--mint); }
.doc section > h2:nth-of-type(6n+4)::before { background: var(--cyan); }
.doc section > h2:nth-of-type(6n+5)::before { background: var(--amber); }
.doc section > h2:nth-of-type(6n)::before { background: var(--coral); }

.doc h3 { font: 700 1.08rem/1.3 var(--f-display); letter-spacing: -.02em; margin: 30px 0 10px; }
.doc p, .doc li { font-size: 1rem; }
.doc p { margin: 0 0 14px; }
.doc ul { padding-left: 0; list-style: none; margin: 0 0 18px; }
.doc li { position: relative; padding-left: 22px; margin: 8px 0; }
.doc li::before {
  content: ""; position: absolute; left: 2px; top: .68em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint);
}
.doc strong { font-weight: 600; color: var(--ink); }
.doc a { color: var(--sky-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.doc a:hover { color: var(--ink); }

/* tablolar: yuzey karti icinde */
.doc table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 16px 0 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  font-size: .94rem;
}
.doc th, .doc td { text-align: left; padding: 12px 16px; vertical-align: top; border-top: 1px solid var(--line); }
.doc thead th {
  border-top: 0; background: var(--ice-2);
  font: 600 .66rem var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft);
}
.doc td:first-child { white-space: nowrap; font-weight: 600; }

/* ipucu ve uyari kutulari */
.doc .tip, .doc .note {
  margin: 20px 0; padding: 16px 18px 16px 20px; border-radius: 18px;
  font-size: .95rem; line-height: 1.6; color: var(--ink);
  background: color-mix(in srgb, var(--c) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  position: relative; overflow: hidden;
}
.doc .tip::before, .doc .note::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c);
}
.doc .tip { --c: var(--sky); }
.doc .note { --c: var(--amber); }

/* TR / EN sekmeleri: ana sayfadaki segment dugmeleri gibi */
.tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.tab {
  appearance: none; border: 0; cursor: pointer; background: none;
  font: 600 .78rem var(--f-mono); color: var(--ink-soft);
  padding: 9px 18px; border-radius: 10px; transition: background .2s, color .2s;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--ice); }

/* kilavuz ekran goruntuleri: ana sayfadaki telefon cercevesi */
.kk-shot { float: right; width: 236px; margin: 6px 0 22px 32px; }
.kk-shot img {
  width: 100%; height: auto; border-radius: 24px;
  padding: 7px; background: #0a1226;
  box-shadow: 0 30px 50px -28px rgba(10, 24, 56, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.kk-shot figcaption {
  font: 400 .66rem/1.5 var(--f-mono); color: var(--muted); text-align: center; margin-top: 12px;
}

@media (max-width: 640px) {
  .kk-shot { float: none; width: 100%; max-width: 260px; margin: 18px auto 26px; }
  .doc h2 { margin-top: 36px; }
  /* dar ekranda tablo satirlari karta donusur */
  .doc table, .doc thead, .doc tbody, .doc tr, .doc td, .doc th { display: block; }
  .doc thead { display: none; }
  .doc tr { padding: 12px 16px; border-top: 1px solid var(--line); }
  .doc tr:first-child { border-top: 0; }
  .doc td { border: 0; padding: 2px 0; white-space: normal; }
  .doc td:first-child { color: var(--sky-ink); white-space: normal; }
}