/* =============================================================================
   Kalan yardımcı sayfalar — v2 tasarım dili.

   Kapsam (site 2026-08-08'de tek sayfaya indirildikten sonra ayakta kalan 4 sayfa):
     · .lg-*  → yasal metinler: /kvkk, /gizlilik, /kullanim-sozlesmesi
     · .gs-*  → /giris (mağaza paneli yönlendirme kartı)

   Bu sayfalar SİLİNMEDİ çünkü: KVKK/gizlilik/kullanım sözleşmesi yasal zorunluluk
   ve sipariş formundaki onay kutusu doğrudan /kullanim-sozlesmesi'ne link veriyor;
   /giris ise müşterilerin panellerine ulaşma yolu.

   ⚠️ MARKUP'A DOKUNULMADI — yalnızca mevcut sınıflar yeniden boyandı.
   ========================================================================== */

.section { padding: clamp(44px, 6vw, 84px) 0; }
.container { width: min(100% - 40px, 1240px); margin-inline: auto; }

/* ==================================================== YASAL METİN SAYFALARI */

.lg-head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.lg-head h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--vd2-ink);
}
.lg-updated {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--vd2-line);
  background: var(--vd2-surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--vd2-muted);
}

/* ⚠️ `.lg-body` bir <section> SARMALAYICISIDIR (içinde .container > .row > .col-lg-8).
   Kart görünümü sarmalayıcıya verilirse tüm ekran genişliğine yayılır — kartı
   iç sütuna uygula, tipografiyi sarmalayıcıdan miras al. */
.lg-body {
  color: var(--vd2-ink-soft);
  font-size: 0.97rem;
  line-height: 1.8;
}
.lg-body .col-lg-8 {
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--vd2-r-lg);
  border: 1px solid var(--vd2-line);
  background: var(--vd2-surface);
  box-shadow: var(--vd2-shadow);
}
.lg-body h2 {
  margin: 34px 0 12px;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vd2-ink);
}
.lg-body h2:first-child { margin-top: 0; }
.lg-body h3 {
  margin: 24px 0 8px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--vd2-ink);
}
.lg-body p { margin: 0 0 14px; }
.lg-body ul,
.lg-body ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; }
.lg-body li::marker { color: var(--vd2-blue); }
.lg-body a { color: var(--vd2-blue-hi); }
.lg-body strong,
.lg-body b { color: var(--vd2-ink); }
.lg-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 0.9rem;
}
.lg-body th,
.lg-body td {
  padding: 10px 12px;
  border: 1px solid var(--vd2-line);
  text-align: left;
  vertical-align: top;
}
.lg-body th { background: var(--vd2-surface-2); color: var(--vd2-ink); font-weight: 700; }

.lg-note {
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: var(--vd2-r);
  border: 1px solid rgba(79, 141, 255, 0.32);
  background: rgba(79, 141, 255, 0.09);
  font-size: 0.9rem;
  color: var(--vd2-ink-soft);
}
.lg-note a { color: var(--vd2-blue-hi); }

/* ============================================================ /giris KARTI */

.gs-section {
  min-height: 64vh;
  display: flex;
  align-items: center;
}

.gs-card {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 44px) clamp(22px, 3.4vw, 42px);
  border-radius: var(--vd2-r-xl);
  border: 1px solid var(--vd2-line);
  background: var(--vd2-surface);
  box-shadow: var(--vd2-shadow);
  text-align: center;
}
.gs-card h1 {
  margin: 18px 0 10px;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--vd2-ink);
}
.gs-card p.lede { margin: 0 0 22px; color: var(--vd2-ink-soft); font-size: 0.98rem; line-height: 1.7; }

.gs-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(124, 77, 255, 0.32);
  background: rgba(124, 77, 255, 0.10);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--vd2-violet-hi);
}
.gs-badge svg { width: 14px; height: 14px; }

/* Mağaza adresi vurgusu — kopyalanabilir görünsün diye kesikli çerçeve korunur */
.gs-url {
  display: block;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1.5px dashed rgba(124, 77, 255, 0.45);
  background: var(--vd2-surface-2);
  font-weight: 800;
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  color: var(--vd2-ink);
  overflow-wrap: anywhere;
}
.gs-url .adm {
  background: var(--vd2-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gs-hint { margin: 14px 0 26px; font-size: 0.85rem; line-height: 1.7; color: var(--vd2-muted); }

.gs-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 18px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--vd2-muted);
}
.gs-divider::before,
.gs-divider::after { content: ""; flex: 1; height: 1px; background: var(--vd2-line); }

.gs-alt { font-size: 0.92rem; color: var(--vd2-ink-soft); }
.gs-alt a { color: var(--vd2-blue-hi); font-weight: 700; text-decoration: none; }
.gs-alt a:hover { text-decoration: underline; }

.gs-help { margin-top: 18px; font-size: 0.85rem; color: var(--vd2-muted); }
.gs-help a { color: var(--vd2-blue-hi); font-weight: 600; text-decoration: none; }
.gs-help a:hover { text-decoration: underline; }

/* ============================================================== DUYARLI */

@media (max-width: 620px) {
  .container { width: calc(100% - 32px); }
  .lg-body { font-size: 0.94rem; }
}