/* Tanıtım sitesi (elektrometraj.com). Renk, yazı tipi, çerçeve: Industry tokenları (industry.css, koyu: industry-koyu.css). */
:root {
  --yesil: #2a9a50;
  --yesil-zemin: #cdeed7;
  --sari: #c88a00;
  --sari-zemin: #fbe3a6;
  --kirmizi: #d03c3c;
  --kirmizi-zemin: #f9cccc;
  --kenar: clamp(20px, 6vw, 96px);
}
:root[data-theme='dark'] {
  --yesil: #5fd07f;
  --yesil-zemin: rgba(70, 200, 110, 0.26);
  --sari: #f0b93a;
  --sari-zemin: rgba(240, 180, 50, 0.28);
  --kirmizi: #f06464;
  --kirmizi-zemin: rgba(240, 90, 90, 0.28);
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 15px/1.55 var(--font-body); font-variant-numeric: tabular-nums; }
a { color: inherit; }
h1, h2 { font-family: var(--font-heading); font-weight: 600; margin: 0; letter-spacing: -0.01em; }

/* çerçeve + "+" kayıt işaretleri (uygulamadaki .cerceve ile aynı) */
.cerceve { position: relative; border: 1px solid var(--color-divider); }
.cerceve::before {
  content: '';
  position: absolute;
  inset: -6px;
  pointer-events: none;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  background:
    linear-gradient(currentColor, currentColor) left 5px top 0 / 1px 11px no-repeat,
    linear-gradient(currentColor, currentColor) left 0 top 5px / 11px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right 5px top 0 / 1px 11px no-repeat,
    linear-gradient(currentColor, currentColor) right 0 top 5px / 11px 1px no-repeat,
    linear-gradient(currentColor, currentColor) left 5px bottom 0 / 1px 11px no-repeat,
    linear-gradient(currentColor, currentColor) left 0 bottom 5px / 11px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right 5px bottom 0 / 1px 11px no-repeat,
    linear-gradient(currentColor, currentColor) right 0 bottom 5px / 11px 1px no-repeat;
}

.marka { font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.marka.kucuk { font-size: 15px; }
.etiket { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.bosluk { flex: 1; }
.r { text-align: right; }

.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); cursor: pointer; }
.dugme.buyuk { min-height: 46px; padding: 0 22px; font-size: 17px; }
.dugme.birincil { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.dugme.birincil:hover { background: var(--color-accent-600); }
.dugme.ikincil:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.dugme:disabled { opacity: 0.45; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* üst çubuk */
.ust { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px 24px; min-height: 60px; padding: 0 var(--kenar); background: var(--color-bg); border-bottom: 1px solid var(--color-divider); flex-wrap: wrap; }
.ust nav { display: flex; gap: 20px; font-size: 14px; }
.ust nav a { text-decoration: none; }
.ust nav a:hover { color: var(--color-accent-700); }

/* kahraman */
.kahraman { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 72px var(--kenar) 80px; }
.kahraman-metin { display: flex; flex-direction: column; gap: 22px; }
.kahraman h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.02; text-wrap: balance; }
.giris { font-size: 17px; line-height: 1.55; color: var(--color-neutral-800); max-width: 560px; margin: 0; }
.eylemler { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

/* temsili ızgara */
.ornek { margin: 0; padding: 18px 20px 14px; background: var(--color-surface); display: flex; flex-direction: column; font-size: 13.5px; }
.ornek-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 12px; font-size: 13px; color: var(--color-neutral-700); }
.ornek-bas .toplam { display: flex; flex-direction: column; align-items: flex-end; }
.ornek-bas b { font-family: var(--font-heading); font-weight: 600; font-size: 24px; color: var(--color-text); }
.ornek-satir { display: grid; grid-template-columns: minmax(0, 1fr) 40px 56px 92px 86px; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.ornek-satir.baslik { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); border-bottom-color: var(--color-text); }
.ornek-satir > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ornek .dolu { padding: 1px 6px; margin: -1px -6px; font-weight: 600; }
.ornek .yesil { background: var(--yesil-zemin); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yesil) 55%, transparent); }
.ornek .sari { background: var(--sari-zemin); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sari) 55%, transparent); }
.ornek .bos { text-align: center; background: var(--kirmizi-zemin); color: var(--kirmizi); }
.ornek .d { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border: 1px solid; vertical-align: 0; }
.ornek .d.tam { border-color: var(--yesil); background: var(--yesil); }
.ornek .d.yakin { border-color: var(--sari); }
.ornek .d.donusum { border-color: var(--sari); background: var(--sari-zemin); }
.ornek .d.yok { border-color: var(--kirmizi); background: var(--kirmizi-zemin); }
.ornek figcaption { padding-top: 12px; font-size: 12.5px; color: var(--color-neutral-700); }

/* nasıl çalışır */
.nasil { padding: 64px var(--kenar); border-top: 1px solid var(--color-divider); }
.nasil h2, .demo h2 { font-size: 40px; line-height: 1.05; }
.adimlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid var(--color-divider); }
.adimlar > div { display: flex; flex-direction: column; gap: 8px; padding: 20px 28px 0 0; }
.adimlar .n { font-family: var(--font-heading); font-weight: 600; font-size: 36px; line-height: 1; color: var(--color-neutral-400); }
.adimlar .t { font-size: 17px; font-weight: 600; }
.adimlar .d { font-size: 14.5px; line-height: 1.5; color: var(--color-neutral-700); }

/* demo formu */
.demo { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; padding: 72px var(--kenar) 88px; background: var(--color-surface); border-top: 1px solid var(--color-divider); }
.demo-metin { display: flex; flex-direction: column; gap: 16px; }
.demo-metin p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--color-neutral-800); max-width: 440px; }
.demo-form { padding: 28px; background: var(--color-bg); display: flex; flex-direction: column; gap: 16px; }
.alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.alanlar label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.alanlar label.genis { grid-column: 1 / -1; }
.alanlar .istege { text-transform: none; letter-spacing: 0; font-weight: 400; }
.alanlar input, .alanlar textarea { font: 15px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-divider); padding: 9px 11px; caret-color: var(--color-accent); }
.alanlar input:focus, .alanlar textarea:focus { outline: none; border-color: var(--color-accent); }
.alanlar textarea { resize: vertical; }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kvkk { margin: 0; font-size: 12.5px; color: var(--color-neutral-700); }
.gonder { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.durum { font-size: 14px; }
.durum.tamam { color: var(--yesil); }
.durum.hata { color: var(--kirmizi); }

/* alt bilgi */
.alt { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 22px var(--kenar); border-top: 1px solid var(--color-divider); font-size: 13px; color: var(--color-neutral-700); }
.alt .marka { color: var(--color-text); }

@media (max-width: 960px) {
  .kahraman, .demo { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .kahraman { padding-top: 48px; }
  .adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
}
@media (max-width: 600px) {
  .ust nav, .ust .ikincil { display: none; }
  .adimlar, .alanlar { grid-template-columns: minmax(0, 1fr); }
  .ornek-satir { grid-template-columns: minmax(0, 1fr) 60px 80px; }
  .ornek-satir > :nth-child(2), .ornek-satir > :nth-child(3) { display: none; }
  .nasil h2, .demo h2 { font-size: 32px; }
}