/* Gelkansoft -- site stili.
   kaynak: netlimiter/website/stil.css, 2026-09-24. Eklenen: marka alani, urun kartlari.
   Tek dosya, harici font/CDN yok: ilk acilis hizli olsun ve cerez/izleme olmasin.
   Vurgu rengi Interlimiter'in vurgu rengiyle ayni (netlimiter/tasks/tasarim_sistemi.md). */

:root {
  --vurgu: #3a7bfd;
  --vurgu-koyu: #2b62d9;
  --metin: #10151c;
  --metin-soluk: #55606e;
  --zemin: #ffffff;
  --zemin-alt: #f4f6f9;
  --cizgi: #dfe4ea;
  --koyu-zemin: #0d1219;
  --koyu-zemin-2: #141c26;
  --koyu-metin: #eef2f7;
  --koyu-metin-soluk: #9aa7b6;
  --olumlu: #1a7f4b;
  --olumsuz: #b4232a;
  --ic: 24px;
  --yuvarlak: 10px;
  --gecis: 140ms ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 400 17px/1.65 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 12px; }
h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 700; }
h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 650; }
h3 { font-size: 19px; font-weight: 650; }
p { margin: 0 0 16px; }

a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 2px; border-radius: 4px; }

.kap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.kap.dar { width: min(760px, 100% - 40px); }
.gizli {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.atla {
  position: absolute; left: -9999px; top: 8px;
  background: var(--vurgu); color: #fff; padding: 10px 16px; border-radius: 6px;
}
.atla:focus { left: 16px; z-index: 10; }

/* --- Ust bar --- */
.ust {
  position: sticky; top: 0; z-index: 5;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.marka {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--metin); font-weight: 650; font-size: 18px; letter-spacing: -0.01em;
}
.marka:hover { text-decoration: none; }
.marka-alan { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marka-ayrac { color: var(--cizgi); font-size: 20px; }
.marka-urun { color: var(--metin); font-weight: 600; font-size: 17px; white-space: nowrap; }
.marka-urun:hover { color: var(--vurgu); text-decoration: none; }
.ust nav { display: flex; align-items: center; gap: 22px; }
.ust nav a { color: var(--metin-soluk); font-size: 15px; font-weight: 500; }
.ust nav a:hover { color: var(--metin); text-decoration: none; }
.ust nav .dugme { color: #fff; }

/* --- Dil secici ve oneri seridi --- */
.dil-secici { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.dil-secici a { color: var(--metin-soluk); }
.dil-secici a:hover { color: var(--metin); text-decoration: none; }
.dil-aktif { color: var(--metin); font-weight: 600; }

#dil-serit {
  background: var(--zemin-alt); border-bottom: 1px solid var(--cizgi);
  padding: 10px 20px; text-align: center; font-size: 15px;
}
#dil-serit a { font-weight: 600; }
#dil-serit button {
  background: none; border: 0; color: var(--metin-soluk);
  font-size: 20px; line-height: 1; cursor: pointer; margin-inline-start: 12px;
}

/* --- Dugmeler --- */
.dugme {
  display: inline-block; background: var(--vurgu); color: #fff;
  border-radius: 8px; font-weight: 600; text-align: center;
  padding: 12px 22px; transition: background var(--gecis), transform var(--gecis);
}
.dugme:hover { background: var(--vurgu-koyu); text-decoration: none; }
.dugme:active { transform: translateY(1px); }
.dugme-kucuk { padding: 8px 16px; font-size: 15px; }
.dugme-buyuk { padding: 15px 32px; font-size: 18px; }

/* --- Kahraman --- */
.kahraman {
  background: linear-gradient(168deg, var(--koyu-zemin) 0%, var(--koyu-zemin-2) 62%, #1b2836 100%);
  color: var(--koyu-metin);
  padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.kahraman-ic {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.kahraman h1 { color: #fff; }
.kahraman h1 em { color: #8ab4ff; font-style: normal; }
.giris { color: var(--koyu-metin-soluk); font-size: clamp(17px, 1.6vw, 20px); max-width: 44ch; }
.kahraman-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 28px 0 24px; }
.kahraman .alt-not { color: var(--koyu-metin-soluk); }
.rozetler {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
}
.rozetler li {
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px;
  padding: 6px 14px; font-size: 14px; color: var(--koyu-metin-soluk);
}
.kahraman-gorsel img {
  width: 100%; height: auto; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  background: var(--koyu-zemin-2);
}

/* --- Bolumler --- */
.bolum { padding: clamp(56px, 7vw, 88px) 0; }
.bolum-alternatif { background: var(--zemin-alt); border-block: 1px solid var(--cizgi); }
.bolum-giris { color: var(--metin-soluk); max-width: 68ch; font-size: 18px; }
.alt-not { color: var(--metin-soluk); font-size: 15px; }
.alt-not.orta { text-align: center; }

.kartlar {
  display: grid; gap: 20px; margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.kart {
  background: var(--zemin); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: var(--ic);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.kart:hover { border-color: #c6cfdb; box-shadow: 0 8px 24px -14px rgba(16, 21, 28, 0.35); }
.kart p { color: var(--metin-soluk); margin: 0; font-size: 16px; }

/* --- Gorsel blok --- */
.gorsel-blok { margin: 44px 0 0; }
.gorsel-blok img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
}
.gorsel-blok figcaption {
  color: var(--metin-soluk); font-size: 15px; margin-top: 12px; text-align: center;
}

/* --- Rehber sayfalari --- */
.kirinti { font-size: 15px; color: var(--metin-soluk); margin-bottom: 20px; }
.kirinti a { color: var(--metin-soluk); }
.kirinti a:hover { color: var(--vurgu); }

.adimlar { counter-reset: adim; list-style: none; padding: 0; margin: 24px 0; }
.adimlar li {
  counter-increment: adim; position: relative;
  padding: 0 0 20px 48px; color: var(--metin-soluk); font-size: 17px;
}
.adimlar li::before {
  content: counter(adim);
  position: absolute; inset-inline-start: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--vurgu); color: #fff;
  font-weight: 650; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.adimlar li strong { color: var(--metin); display: block; margin-bottom: 4px; }

.uyari-kutu {
  border-inline-start: 4px solid var(--vurgu);
  background: var(--zemin-alt);
  border-radius: 0 var(--yuvarlak) var(--yuvarlak) 0;
  padding: 16px 20px; margin: 28px 0;
}
.uyari-kutu p { margin: 0; color: var(--metin-soluk); }

.rehber-eylem { margin: 32px 0; }

.kart-bag { display: block; color: inherit; }
.kart-bag:hover { text-decoration: none; }
.kart-bag h3 { color: var(--vurgu); }

/* --- Vitrin urun kartlari --- */
/* auto-fill: tek urun varken kart butun satira yayilmasin */
.urun-listesi { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.urun-kart { display: flex; flex-direction: column; }
.urun-kart img { margin-bottom: 16px; }
.urun-kart p { flex: 1; }
.kart-eylem { margin-top: 18px; color: var(--vurgu); font-weight: 600; font-size: 15px; }

/* --- Karsilastirma tablosu --- */
.tablo-sar { overflow-x: auto; margin-top: 28px; }
.karsilastirma {
  width: 100%; border-collapse: collapse; background: var(--zemin);
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); overflow: hidden;
  font-size: 16px;
}
.karsilastirma th, .karsilastirma td { padding: 14px 18px; text-align: left; }
.karsilastirma thead th {
  background: var(--zemin-alt); font-size: 14px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--metin-soluk); border-bottom: 1px solid var(--cizgi);
}
.karsilastirma tbody tr + tr th, .karsilastirma tbody tr + tr td { border-top: 1px solid var(--cizgi); }
.karsilastirma tbody th { font-weight: 500; }
.karsilastirma td { text-align: center; width: 140px; font-weight: 600; }
.karsilastirma .var { color: var(--olumlu); }
.karsilastirma .yok { color: var(--metin-soluk); font-weight: 400; }

/* --- Fiyat kutusu --- */
.fiyat-kutu {
  margin: 32px auto 0; max-width: 520px; text-align: center;
  background: var(--zemin); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 28px 24px;
}
.fiyat { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.fiyat-kutu .dugme { margin: 12px 0 8px; }

/* --- Indirme --- */
.indir { text-align: center; }
.indir .bolum-giris { margin-inline: auto; }
.indir p { margin-bottom: 14px; }

/* --- SSS --- */
details {
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  background: var(--zemin); padding: 4px 20px; margin-bottom: 12px;
}
details[open] { border-color: #c6cfdb; }
summary {
  cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; font-size: 22px; color: var(--metin-soluk); line-height: 1;
}
details[open] summary::after { content: "\2212"; }
details p { color: var(--metin-soluk); margin: 0 0 16px; }

/* --- Alt --- */
.alt { background: var(--koyu-zemin); color: var(--koyu-metin-soluk); padding: 32px 0; }
.alt-ic { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.alt p { margin: 0; font-size: 15px; }
.alt nav { display: flex; flex-wrap: wrap; gap: 20px; }
.alt a { color: var(--koyu-metin-soluk); font-size: 15px; }
.alt a:hover { color: #fff; }

/* --- Dar ekran --- */
@media (max-width: 860px) {
  .kahraman-ic { grid-template-columns: 1fr; }
  .kahraman-gorsel { order: 2; }
  /* yalniz menu baglantilari; dil secici dar ekranda da gorunsun */
  .ust nav > a:not(.dugme) { display: none; }
}

/* --- Yazdirma --- */
@media print {
  .ust, .atla, .kahraman-gorsel, .alt nav { display: none; }
  .kahraman { background: none; color: #000; }
  .kahraman h1, .giris { color: #000; }
}