/* TEMEL: renk degiskenleri, yazi tipi, yerlesim, ust menu.
   Kutu/dugme/tablo gibi bilesenler bilesenler.css icinde.
   Dis kaynak (font, ikon, kutuphane) kullanilmaz; sayfa hizli acilir. */

:root {
  --yazi: #16181d;
  --soluk: #646b78;
  --cizgi: #e4e7ec;
  --cizgi-koyu: #d0d5dd;
  --zemin: #f6f7f9;      /* sayfa zemini hafif gri */
  --kart: #ffffff;       /* kutular beyaz, zeminden ayrilir */
  --acik: #eef1f5;       /* ikincil zemin */
  --vurgu: #1f5f7a;      /* baglanti ve ana dugme rengi */
  --acil: #b3261e;
  --tamam: #17703f;
  --dugme-yazi: #ffffff;
  --acil-zemin: #fdecea;
  --tamam-zemin: #e8f4ed;
  --vurgu-zemin: #e9f1f5;

  --r1: 8px;
  --r2: 12px;
  --golge1: 0 1px 2px rgba(16, 24, 40, .06);
  --golge2: 0 4px 14px rgba(16, 24, 40, .09);

  color-scheme: light;
}

:root[data-tema="koyu"] {
  --yazi: #e7e9ee;
  --soluk: #98a0ae;
  --cizgi: #2b2f37;
  --cizgi-koyu: #3b414c;
  --zemin: #0f1115;
  --kart: #171a20;
  --acik: #1f242c;
  --vurgu: #7bbdd8;
  --acil: #ff8377;
  --tamam: #58cd8d;
  --dugme-yazi: #0f1115;
  --acil-zemin: #2f1d1b;
  --tamam-zemin: #13291e;
  --vurgu-zemin: #16242c;

  --golge1: 0 1px 2px rgba(0, 0, 0, .45);
  --golge2: 0 4px 14px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
               "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--yazi);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 27px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 20px; }
h2 { font-size: 18px; font-weight: 620; letter-spacing: -.01em; margin: 0 0 14px; }
p  { margin: 0 0 10px; }
a  { color: var(--vurgu); text-underline-offset: 3px; }

/* --- Ust menu ------------------------------------------------------- */
.ustbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 30px;
  padding: 0 26px; height: 62px;
  background: var(--kart);
  border-bottom: 1px solid var(--cizgi);
  box-shadow: var(--golge1);
}

.marka {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 680; letter-spacing: -.02em;
  text-decoration: none; color: var(--yazi);
}
.marka::before {
  content: ""; width: 9px; height: 22px; border-radius: 3px;
  background: var(--vurgu);
}

.menu { display: flex; gap: 4px; }
/* Alt cizgi her zaman yer kaplar (saydam); yoksa fare uzerine gelince
   menu yukselir ve butun sayfa asagi kayar. */
.menu a {
  padding: 7px 13px; border-radius: var(--r1);
  text-decoration: none; color: var(--soluk); font-weight: 550;
  border-bottom: 2px solid transparent;
}
.menu a:hover { background: var(--acik); color: var(--yazi); }
.menu a.etkin { color: var(--yazi); border-bottom-color: var(--vurgu); }

.sag-grup { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.cikis {
  padding: 7px 13px; border-radius: var(--r1);
  text-decoration: none; color: var(--soluk); font-size: 15.5px;
}
.cikis:hover { background: var(--acik); color: var(--yazi); }

.tema-dugme {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 15px; cursor: pointer; user-select: none;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--cizgi-koyu); background: var(--kart); color: var(--soluk);
}
.tema-dugme:hover { background: var(--acik); color: var(--yazi); }

/* --- Yerlesim ------------------------------------------------------- */
.govde { max-width: 1180px; margin: 0 auto; padding: 28px 26px 70px; }

.sayfa-basligi { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sayfa-basligi h1 { margin: 0; }

.izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.satir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Etiketli form alanlari yan yanayken dugme alt hizaya otursun */
.form-satir { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.form-satir > div { flex: 1 1 160px; }
.form-satir > div.dar { flex: 0 0 auto; }
.sagda { margin-left: auto; }

.soluk { color: var(--soluk); }
.acil { color: var(--acil); font-weight: 600; }
.tamam { color: var(--tamam); font-weight: 600; }

*:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .dugme, .menu a, .cikis, .tema-dugme, .kutu, .sayi-kart { transition: all .13s ease; }
}

@media (max-width: 860px) {
  .izgara, .form-izgara { grid-template-columns: 1fr !important; }
  .govde { padding: 20px 14px 56px; }
  .ustbar { height: auto; padding: 10px 14px; gap: 12px; flex-wrap: wrap; }
  .menu { order: 3; width: 100%; overflow-x: auto; }
  .sag-grup { margin-left: auto; }
}