/* ==========================================================================
   LGS Puan Hesaplama — lgs-calculator.css
   Tüm seçiciler .lgs- prefix'lidir; tema/framework çakışması sıfır.
   8pt grid: spacing değerleri 8'in katı (8 16 24 32 40 48 64).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Token sistemi
   -------------------------------------------------------------------------- */

.lgs-container {
  /* Renkler */
  --lgs-bg:             #ffffff;
  --lgs-bg-secondary:   #f5f5f7;
  --lgs-bg-tertiary:    #fbfbfd;
  --lgs-text-primary:   #1d1d1f;
  --lgs-text-secondary: #6e6e73;
  --lgs-text-tertiary:  #86868b;
  --lgs-accent:         #0071e3;
  --lgs-accent-hover:   #0077ed;
  --lgs-accent-active:  #006edb;
  --lgs-divider:        #d2d2d7;
  --lgs-divider-light:  #e8e8ed;
  --lgs-success:        #29a745;
  --lgs-error:          #ff3b30;

  /* Radii */
  --lgs-radius-card:    18px;
  --lgs-radius-input:   12px;
  --lgs-radius-pill:    980px;
  --lgs-radius-small:   8px;

  /* Gölgeler */
  --lgs-shadow-card:  0 4px 16px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --lgs-shadow-input: inset 0 0 0 1px var(--lgs-divider);
  --lgs-shadow-focus: 0 0 0 4px rgba(0, 113, 227, 0.15);
  --lgs-shadow-error: inset 0 0 0 1.5px var(--lgs-error);

  /* Animasyon */
  --lgs-spring:   cubic-bezier(0.32, 0.72, 0, 1);
  --lgs-ease-out: cubic-bezier(0.16, 1, 0.3,  1);

  /* Tipografi */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Dış kap — kart
   -------------------------------------------------------------------------- */

.lgs-container {
  position: relative;
  max-width: 680px;
  margin-inline: auto;
  background: var(--lgs-bg);
  border-radius: var(--lgs-radius-card);
  box-shadow: var(--lgs-shadow-card);
  padding: 40px;
  box-sizing: border-box;
  color: var(--lgs-text-primary);
}

/* --------------------------------------------------------------------------
   Başlık
   -------------------------------------------------------------------------- */

.lgs-header {
  margin-bottom: 32px;
}

.lgs-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.125;
  color: var(--lgs-text-primary);
  margin: 0 0 8px;
  padding: 0;
}

.lgs-subtitle {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  color: var(--lgs-text-secondary);
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Muafiyet toggle'ları
   -------------------------------------------------------------------------- */

.lgs-muafiyet-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  padding: 20px;
  background: var(--lgs-bg-secondary);
  border-radius: var(--lgs-radius-small);
}

.lgs-muafiyet-baslik {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lgs-text-tertiary);
}

.lgs-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

/* Erişilebilir switch: gerçek checkbox gizli, görsel track üstünde */
.lgs-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.lgs-toggle-input {
  position: absolute;
  width: 51px;
  height: 31px;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.lgs-toggle-track {
  display: block;
  width: 51px;
  height: 31px;
  background: var(--lgs-divider);
  border-radius: var(--lgs-radius-pill);
  transition: background 200ms var(--lgs-ease-out);
  pointer-events: none;
}

.lgs-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.20);
  transition: transform 220ms var(--lgs-spring);
  pointer-events: none;
}

.lgs-toggle-input:checked + .lgs-toggle-track {
  background: var(--lgs-accent);
}

.lgs-toggle-input:checked + .lgs-toggle-track .lgs-toggle-thumb {
  transform: translateX(20px);
}

.lgs-toggle-input:focus-visible + .lgs-toggle-track {
  box-shadow: var(--lgs-shadow-focus);
}

.lgs-toggle-text {
  font-size: 15px;
  font-weight: 400;
  color: var(--lgs-text-primary);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Form başlık satırı (sütun etiketleri)
   -------------------------------------------------------------------------- */

.lgs-form-header {
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  gap: 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--lgs-divider-light);
  margin-bottom: 4px;
}

.lgs-form-header span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lgs-text-tertiary);
}

.lgs-col-dogru,
.lgs-col-yanlis {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Ders satırı
   -------------------------------------------------------------------------- */

.lgs-ders-satiri {
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  grid-template-rows: auto auto;
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--lgs-divider-light);
  transition: opacity 280ms var(--lgs-ease-out);
}

.lgs-ders-satiri:last-of-type {
  border-bottom: none;
}

/* Muaf olunan dersin soluk görünmesi */
.lgs-ders-satiri.lgs-muaf {
  opacity: 0.35;
  pointer-events: none;
}

.lgs-ders-adi {
  font-size: 15px;
  font-weight: 500;
  color: var(--lgs-text-primary);
  line-height: 1.4;
}

/* Hata mesajı tam satır kaplar (2. row, tüm kolonlar) */
.lgs-hata-mesaji {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 400;
  color: var(--lgs-error);
  margin: 0;
  padding: 0;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms var(--lgs-ease-out),
              opacity     200ms var(--lgs-ease-out);
  opacity: 0;
}

.lgs-hata-mesaji.lgs-hata-aktif {
  max-height: 48px;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Input grubu (input + /n ipucu)
   -------------------------------------------------------------------------- */

.lgs-input-grup {
  position: relative;
  display: flex;
  align-items: center;
}

.lgs-input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 12px;
  background: var(--lgs-bg-tertiary);
  border: none;
  border-radius: var(--lgs-radius-input);
  box-shadow: var(--lgs-shadow-input);
  font-size: 17px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--lgs-text-primary);
  font-family: inherit;
  text-align: center;
  outline: none;
  appearance: none;
  -moz-appearance: textfield;
  box-sizing: border-box;
  transition: box-shadow 180ms var(--lgs-ease-out),
              background  180ms var(--lgs-ease-out);
}

/* Spinner gizle — Chrome/Safari/Edge */
.lgs-input::-webkit-inner-spin-button,
.lgs-input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.lgs-input:focus {
  background: var(--lgs-bg);
  box-shadow: var(--lgs-shadow-input), var(--lgs-shadow-focus);
}

.lgs-input.lgs-input-hata {
  box-shadow: var(--lgs-shadow-error);
}

.lgs-input.lgs-input-hata:focus {
  box-shadow: var(--lgs-shadow-error), var(--lgs-shadow-focus);
}

.lgs-soru-ipucu {
  position: absolute;
  right: 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--lgs-text-tertiary);
  pointer-events: none;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Form footer — hesapla butonu
   -------------------------------------------------------------------------- */

.lgs-form-footer {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

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

.lgs-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 44px;
  padding: 0 28px;
  background: var(--lgs-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--lgs-radius-pill);
  font-size: 17px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform    200ms var(--lgs-spring),
              background   200ms var(--lgs-ease-out);
}

.lgs-button-primary:hover  { background: var(--lgs-accent-hover); transform: scale(1.02); }
.lgs-button-primary:active { background: var(--lgs-accent-active); transform: scale(0.98); }

.lgs-button-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.lgs-button-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.30);
}

/* --- Secondary (aksiyon butonları) --- */

.lgs-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 20px;
  background: transparent;
  color: var(--lgs-accent);
  border: 1px solid var(--lgs-accent);
  border-radius: var(--lgs-radius-pill);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 200ms var(--lgs-ease-out),
              color     200ms var(--lgs-ease-out),
              transform 200ms var(--lgs-spring);
}

.lgs-button-secondary:hover  { background: var(--lgs-accent); color: #ffffff; }
.lgs-button-secondary:active { transform: scale(0.97); }

.lgs-button-secondary:focus-visible {
  outline: none;
  box-shadow: var(--lgs-shadow-focus);
}

/* --- Ghost (yeniden hesapla) --- */

.lgs-button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  background: transparent;
  color: var(--lgs-text-secondary);
  border: none;
  border-radius: var(--lgs-radius-pill);
  font-size: 15px;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  transition: color 180ms var(--lgs-ease-out),
              background 180ms var(--lgs-ease-out);
}

.lgs-button-ghost:hover { color: var(--lgs-text-primary); background: var(--lgs-bg-secondary); }

.lgs-button-ghost:focus-visible {
  outline: none;
  box-shadow: var(--lgs-shadow-focus);
}

/* --------------------------------------------------------------------------
   Sonuç bölümü
   -------------------------------------------------------------------------- */

.lgs-sonuc {
  margin-top: 40px;
  animation: lgs-fade-slide-in 320ms var(--lgs-ease-out) both;
}

/* hidden attribute ile gizli durum — tarayıcı built-in */
.lgs-sonuc[hidden] { display: none; }

@keyframes lgs-fade-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.lgs-puan-blok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 0 24px;
  text-align: center;
}

.lgs-score-display {
  display: block;
  font-size: 88px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--lgs-text-primary);
  font-variant-numeric: tabular-nums;
}

.lgs-puan-etiket {
  font-size: 15px;
  font-weight: 400;
  color: var(--lgs-text-secondary);
}

/* --------------------------------------------------------------------------
   Ayraç
   -------------------------------------------------------------------------- */

.lgs-divider {
  height: 1px;
  background: var(--lgs-divider-light);
  margin: 8px 0;
}

/* --------------------------------------------------------------------------
   Detay tablosu
   -------------------------------------------------------------------------- */

.lgs-detay-tablo {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.lgs-detay-tablo thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lgs-text-tertiary);
  text-align: left;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--lgs-divider-light);
}

.lgs-detay-tablo thead th:not(:first-child) {
  text-align: right;
}

.lgs-detay-tablo tbody tr {
  border-bottom: 1px solid var(--lgs-divider-light);
}

.lgs-detay-tablo tbody tr:last-child {
  border-bottom: none;
}

.lgs-detay-tablo tbody td {
  font-size: 15px;
  color: var(--lgs-text-primary);
  padding: 12px 0;
  vertical-align: middle;
}

.lgs-detay-tablo tbody td:first-child {
  font-weight: 500;
}

.lgs-detay-tablo tbody td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--lgs-text-secondary);
}

.lgs-detay-tablo .lgs-td-net {
  font-weight: 600;
  color: var(--lgs-text-primary);
}

.lgs-detay-sonuc-icerik {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.lgs-detay-dogru-yanlis {
  font-size: 13px;
  color: var(--lgs-text-tertiary);
}

/* --------------------------------------------------------------------------
   Uyarı notu
   -------------------------------------------------------------------------- */

.lgs-uyari {
  font-size: 13px;
  font-weight: 400;
  color: var(--lgs-text-tertiary);
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Aksiyon butonları (sonuç altı)
   -------------------------------------------------------------------------- */

.lgs-aksiyon-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Sosyal paylaşım linkleri
   -------------------------------------------------------------------------- */

.lgs-sosyal-group {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  animation: lgs-fade-slide-in 200ms var(--lgs-ease-out) both;
}

.lgs-sosyal-group[hidden] { display: none; }

.lgs-sosyal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--lgs-radius-pill);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  transition: opacity 180ms var(--lgs-ease-out),
              transform 180ms var(--lgs-spring);
}

.lgs-sosyal-link:hover  { opacity: 0.80; }
.lgs-sosyal-link:active { transform: scale(0.96); }

.lgs-sosyal-x        { background: #000000; color: #ffffff; }
.lgs-sosyal-whatsapp { background: #25d366; color: #ffffff; }
.lgs-sosyal-facebook { background: #1877f2; color: #ffffff; }

.lgs-sosyal-link:focus-visible {
  outline: none;
  box-shadow: var(--lgs-shadow-focus);
}

/* --------------------------------------------------------------------------
   Yeniden hesapla
   -------------------------------------------------------------------------- */

.lgs-yeniden-grup {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.lgs-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: rgba(29, 29, 31, 0.92);
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Helvetica Neue", Arial, sans-serif;
  padding: 12px 20px;
  border-radius: var(--lgs-radius-small);
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 220ms var(--lgs-ease-out),
              transform 220ms var(--lgs-spring);
}

.lgs-toast.lgs-toast-aktif {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.lgs-toast[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Ekran okuyucu yardımcısı
   -------------------------------------------------------------------------- */

.lgs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Responsive — 680px'e kadar tam genişlik, 480px altı mobil mod
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {
  .lgs-container {
    border-radius: 0;
    box-shadow: none;
    padding: 24px;
    max-width: 100%;
  }

  .lgs-title { font-size: 26px; }
}

@media (max-width: 480px) {
  /* Form header gizlenir; etiketler input'ların üstüne gelir */
  .lgs-form-header { display: none; }

  .lgs-ders-satiri {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 6px;
    padding: 16px 0;
  }

  .lgs-ders-adi {
    grid-column: 1 / -1;
    font-size: 14px;
  }

  .lgs-input-grup { flex-direction: column; align-items: stretch; }

  .lgs-soru-ipucu {
    position: static;
    text-align: right;
    margin-top: 2px;
  }

  .lgs-score-display { font-size: 64px; }

  .lgs-aksiyon-group { flex-direction: column; align-items: center; }
  .lgs-button-secondary { width: 100%; max-width: 280px; justify-content: center; }

  .lgs-sosyal-group { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   Hareket azaltma tercihi
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}