/* RestoPOS bilesen kutuphanesi.
   Kural: bu dosyada hicbir hex renk yok. Her renk tokens.css'ten var() ile gelir.
   Kural: text-transform yok. Radius ust siniri var(--r-lg) = 8px. */

/* ==========================================================================
   Buton
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  font-family: var(--font-govde);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  padding: var(--b-3) var(--b-6);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.btn--birincil { background: var(--vurgu); color: var(--metin-ters); }
.btn--birincil:hover { background: var(--vurgu-koyu); color: var(--metin-ters); }

.btn--ikincil { background: transparent; color: var(--metin); border-color: var(--kenarlik-koyu); }
.btn--ikincil:hover { border-color: var(--metin); color: var(--metin); }

.btn--metin { background: none; border: 0; padding-inline: 0; color: var(--vurgu-koyu); }
.btn--metin:hover { color: var(--red-800); }

.btn--buyuk { font-size: var(--fs-base); padding: var(--b-4) var(--b-8); }
.btn--kucuk { font-size: var(--fs-xs); padding: var(--b-2) var(--b-4); }

.btn .ikon { width: 18px; height: 18px; color: currentColor; }

/* Koyu zemin uzerinde ikincil buton */
.bolum--koyu .btn--ikincil,
.nav--koyu .btn--ikincil {
  color: var(--metin-ters);
  border-color: color-mix(in srgb, var(--metin-ters) 30%, transparent);
}
.bolum--koyu .btn--ikincil:hover,
.nav--koyu .btn--ikincil:hover { border-color: var(--metin-ters); }

/* ==========================================================================
   Kart
   ========================================================================== */
.kart {
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  padding: var(--b-6);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.kart--tiklanir { display: block; text-decoration: none; color: inherit; }
.kart--tiklanir:hover { border-color: var(--vurgu); box-shadow: var(--sh-md); color: inherit; }
.kart--tiklanir:hover .kart__baslik { color: var(--vurgu-koyu); }

.kart__ikon { width: 28px; height: 28px; color: var(--vurgu-koyu); margin-bottom: var(--b-3); }
.kart__baslik {
  font-family: var(--font-baslik);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--b-2);
  transition: color var(--gecis);
}
.kart__metin { font-size: var(--fs-sm); color: var(--metin-ikincil); line-height: var(--lh-genis); }
.kart__alt { margin-top: var(--b-4); font-size: var(--fs-sm); font-weight: 700; color: var(--vurgu-koyu); display: inline-flex; align-items: center; gap: var(--b-1); }

/* ==========================================================================
   Kanit rakami
   ========================================================================== */
.stat { text-align: center; padding: var(--b-6) var(--b-4); }
.stat__sayi {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
}
.stat__sayi em { font-style: normal; color: var(--vurgu); }
.stat__etiket { display: block; font-size: var(--fs-sm); color: var(--metin-ikincil); font-weight: 600; margin-top: var(--b-2); }

.bolum--koyu .stat__etiket { color: color-mix(in srgb, var(--metin-ters) 60%, transparent); }

/* ==========================================================================
   Ikon
   ========================================================================== */
.ikon { width: 24px; height: 24px; color: var(--vurgu-koyu); flex: none; }
.ikon--kucuk { width: 18px; height: 18px; }
.ikon--buyuk { width: 32px; height: 32px; }

/* ==========================================================================
   Navigasyon
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--zemin);
  border-bottom: 1px solid var(--kenarlik);
}
.nav__kap {
  display: flex;
  align-items: center;
  gap: var(--b-8);
  max-width: var(--genislik-icerik);
  margin-inline: auto;
  padding: var(--b-4);
}
.nav__logo { flex: none; display: block; }
.nav__logo img { height: 28px; width: auto; }

.nav__liste { display: flex; align-items: center; gap: var(--b-6); list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--b-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--metin-ikincil);
  text-decoration: none;
  padding-block: var(--b-2);
  background: none;
  border: 0;
}
.nav__link:hover { color: var(--metin); }
.nav__link[aria-current="page"],
.nav__link[aria-expanded="true"] { color: var(--metin); font-weight: 700; }
.nav__link[aria-current="page"]::after,
.nav__link[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: calc(var(--b-4) * -1 - 1px);
  height: 2px;
  background: var(--vurgu);
}

.nav__sag { margin-left: auto; display: flex; align-items: center; gap: var(--b-4); }
.nav__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
  font-family: var(--font-baslik);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--metin);
  text-decoration: none;
}
.nav__tel .ikon { width: 16px; height: 16px; color: var(--vurgu); }

.nav__mobil { display: none; background: none; border: 0; padding: var(--b-2); color: var(--metin); }

/* --- Mega menu ---
   Duz baglanti listesi yerine: ikon + tek cumlelik tanim + alt urunler,
   sagda one cikan panel, altta serit. Menuyu veri modelinden ureten
   tools/menu-uret.py bu yapiyi cikartir. */
.mega {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  isolation: isolate;
  background: var(--zemin);
  border-bottom: 1px solid var(--kenarlik);
  box-shadow: var(--sh-lg);
}
/* Hero perdesinin acik zemindeki karsiligi - ayni aci, cok dusuk guc */
.mega::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--perde-acik);
}
.mega[hidden] { display: none; }

.mega__kap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: var(--b-12);
  max-width: var(--genislik-icerik);
  margin-inline: auto;
  padding: var(--b-8) var(--b-4);
}
.mega__kap--sektor { grid-template-columns: minmax(0, 1fr); }

/* --- Urun ailesi izgarasi ---
   Her aile CERCEVELI bir kutu; icinde baslik ve alt urun listesi var.
   Kutular satir icinde ESIT YUKSEKLIGE uzar (align-items varsayilani stretch),
   boylece alt listeler farkli uzunlukta olsa da ikinci satir duzgun hizalanir.
   Onceki surumde cerceve yoktu ve sutunlar yatayda birbirine giriyordu. */
.mega__izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--b-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega__oge { margin: 0; display: flex; }

.mega__kutu {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--b-4);
  /* Beyaz ic: perdeli zeminden ayrilir, kartlar gecisin uzerinde yuzer gibi
     durur. Sektor kartlari da beyaz; iki menu ayni dili konusur. */
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.mega__kutu:hover { border-color: var(--kenarlik-koyu); box-shadow: var(--sh-sm); }

.mega__bas {
  display: flex;
  align-items: flex-start;
  gap: var(--b-3);
  text-decoration: none;
  color: inherit;
}
.mega__bas:hover { color: inherit; }
.mega__bas:hover .mega__yazi b { color: var(--vurgu-koyu); }

.mega__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--zemin-vurgu);
  border-radius: var(--r-md);
  transition: background var(--gecis);
}
.mega__ikon svg {
  width: 20px; height: 20px;
  color: var(--vurgu-koyu);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: color var(--gecis);
}
.mega__kutu:hover .mega__ikon { background: var(--vurgu); }
.mega__kutu:hover .mega__ikon svg { color: var(--metin-ters); }

/* Baslik blogu SABIT yukseklikte: baslik 2 satir + aciklama 2 satir.
   Boylece ayrac cizgisi ve alt liste, satirdaki tum kutularda ayni
   yukseklikte baslar. Aksi halde 2 ve 3 satirlik aciklamalar hizayi bozuyor. */
.mega__yazi {
  min-width: 0;
  min-height: 4.6rem;
}
.mega__yazi b {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--metin);
  line-height: 1.3;
  transition: color var(--gecis);
  /* Iki satirlik baslik icin yer ayrilir; tek satirlikta bosluk kalir ama
     ayrac cizgisi tum kutularda ayni hizada durur. */
  min-height: calc(1.3em * 1);
}
.mega__yazi span {
  display: block;
  font-size: var(--fs-xs);
  /* --metin-soluk beyaz uzerinde 4.3 kontrast verir, AA sinirinin (4.5)
     altinda kalir. Perde eklendiginde 3.8'e dusuyordu. --metin-ikincil 5.7. */
  color: var(--metin-ikincil);
  line-height: 1.5;
  margin-top: var(--b-1);
}

/* Alt urun listesi: kutunun icinde, basliktan cizgiyle ayrilir */
.mega__alt-liste {
  list-style: none;
  margin: var(--b-3) 0 0;
  padding: var(--b-3) 0 0;
  border-top: 1px solid var(--kenarlik);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mega__alt-liste li { margin: 0; }
.mega__alt-link {
  display: block;
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
  text-decoration: none;
  padding: 3px 0;
  line-height: 1.35;
}
.mega__alt-link:hover { color: var(--vurgu-koyu); }

/* --- One cikan panel --- */
.mega__one-cikan { border-left: 1px solid var(--kenarlik); padding-left: var(--b-8); }
.mega__etiket {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--vurgu-koyu);
  margin-bottom: var(--b-3);
}
.mega__kart {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.mega__kart:hover { border-color: var(--vurgu); box-shadow: var(--sh-md); color: inherit; }
.mega__kart img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  background: var(--zemin-alt);
  border-bottom: 1px solid var(--kenarlik);
}
.mega__kart b {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  padding: var(--b-3) var(--b-4) var(--b-1);
}
.mega__kart span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--metin-ikincil);
  line-height: var(--lh-genis);
  padding: 0 var(--b-4) var(--b-4);
}

/* --- Sektor izgarasi ---
   Dikey kart: ikon ustte, baslik ve aciklama altta. Yatay/kompakt surumde
   kartlar alcak kaliyor ve panel bos duruyordu. */
.mega__sektorler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--b-4);
}
.mega__sektor {
  display: block;
  padding: var(--b-6);
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.mega__sektor:hover { border-color: var(--vurgu); box-shadow: var(--sh-md); color: inherit; }
.mega__sektor .mega__ikon { width: 2.75rem; height: 2.75rem; margin-bottom: var(--b-4); }
.mega__sektor .mega__ikon svg { width: 24px; height: 24px; }
.mega__sektor:hover .mega__ikon { background: var(--vurgu); }
.mega__sektor:hover .mega__ikon svg { color: var(--metin-ters); }
.mega__sektor .mega__yazi { min-height: 0; }
.mega__sektor .mega__yazi b {
  font-size: var(--fs-lg);
  margin-bottom: var(--b-2);
}
.mega__sektor .mega__yazi span {
  font-size: var(--fs-sm);
  line-height: var(--lh-genis);
  margin-top: 0;
}
.mega__sektor:hover .mega__yazi b { color: var(--vurgu-koyu); }

/* --- Alt serit --- */
.mega__serit { border-top: 1px solid var(--kenarlik); background: var(--zemin-alt); }
.mega__serit-kap {
  display: flex;
  align-items: center;
  gap: var(--b-6);
  max-width: var(--genislik-icerik);
  margin-inline: auto;
  padding: var(--b-3) var(--b-4);
}
.mega__serit-kap a {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--metin-ikincil);
  text-decoration: none;
}
.mega__serit-kap a:hover { color: var(--vurgu-koyu); }
.mega__serit-tel {
  margin-left: auto;
  font-family: var(--font-baslik);
  font-weight: 700;
  color: var(--metin) !important;
}

/* Menu oku acilinca doner */
.nav__ok { transform: rotate(90deg); transition: transform var(--gecis); color: currentColor; }
.nav__link[aria-expanded="true"] .nav__ok { transform: rotate(-90deg); }

@media (max-width: 1100px) {
  .mega__izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega__kap { grid-template-columns: minmax(0, 1fr); }
  .mega__one-cikan { display: none; }
}
@media (max-width: 760px) {
  .mega__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega__sektorler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega__serit-tel { margin-left: 0; }
  .mega__serit-kap { flex-wrap: wrap; gap: var(--b-4); }
}

/* Masaustu menu bar genisligi OLCULDU (font metrikleriyle, agirlik 600):
   logo 240 + menu 560 + telefon/buton 226 + bosluklar = 1122 px.
   Kirilma noktasi 960 px iken 961-1122 px arasinda bar tasiyordu - menu
   ogeleri iki satira kiriliyordu. Esik olculen genisligin ustune alindi.
   Menuye oge eklenirse bu deger yeniden olculmeli. */
@media (max-width: 1160px) {
  .nav__liste, .nav__tel { display: none; }
  .nav__mobil { display: block; }
  .nav--acik .nav__liste {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--b-1);
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--zemin);
    border-bottom: 1px solid var(--kenarlik);
    padding: var(--b-4);
  }
}

/* ==========================================================================
   Kirinti (breadcrumb)
   ========================================================================== */
.kirinti { padding-block: var(--b-4); }
.kirinti ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2); list-style: none; margin: 0; padding: 0; }
.kirinti li + li::before { content: "/"; color: var(--metin-soluk); margin-right: var(--b-2); }
.kirinti a { font-size: var(--fs-xs); color: var(--metin-ikincil); text-decoration: none; }
.kirinti a:hover { color: var(--vurgu-koyu); }
.kirinti li:last-child a { color: var(--metin); font-weight: 600; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  position: relative;
  isolation: isolate;
  background: var(--zemin-koyu);
  color: var(--metin-ters);
  padding-block: var(--b-16) var(--b-8);
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--perde-hafif);
}
.footer__izgara {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--b-8);
  max-width: var(--genislik-icerik);
  margin-inline: auto;
  padding-inline: var(--b-4);
}
/* Resmi logo siyah "POS" yazisi iceriyor; koyu zeminde kaybolmamasi icin
   beyaz plaka uzerine konur. Logo dosyasina dokunulmaz (spec karar 6). */
.footer__logo-plaka {
  display: inline-block;
  background: var(--beyaz);
  padding: var(--b-2) var(--b-3);
  border-radius: var(--r-sm);
  margin-bottom: var(--b-4);
}
.footer__logo-plaka img { height: 22px; width: auto; }

.footer__ozet { font-size: var(--fs-sm); color: color-mix(in srgb, var(--metin-ters) 62%, transparent); line-height: var(--lh-genis); max-width: 34ch; }

.footer__adres {
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: var(--lh-genis);
  color: color-mix(in srgb, var(--metin-ters) 62%, transparent);
  margin-bottom: var(--b-4);
}
.footer__adres strong { color: var(--metin-ters); font-weight: 700; }
.footer__baslik { font-family: var(--font-baslik); font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--b-4); color: var(--metin-ters); }
.footer__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--b-2); }
.footer__liste a { font-size: var(--fs-sm); color: color-mix(in srgb, var(--metin-ters) 62%, transparent); text-decoration: none; }
.footer__liste a:hover { color: var(--metin-ters); }

.footer__alt {
  max-width: var(--genislik-icerik);
  margin: var(--b-12) auto 0;
  padding: var(--b-6) var(--b-4) 0;
  border-top: 1px solid color-mix(in srgb, var(--metin-ters) 12%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-4);
}
.footer__hukuki { display: flex; flex-wrap: wrap; gap: var(--b-4); list-style: none; margin: 0; padding: 0; }
.footer__hukuki a { font-size: var(--fs-xs); color: color-mix(in srgb, var(--metin-ters) 50%, transparent); text-decoration: none; }
.footer__hukuki a:hover { color: var(--metin-ters); }
.footer__telif { font-size: var(--fs-xs); color: color-mix(in srgb, var(--metin-ters) 50%, transparent); margin-left: auto; }

.footer__sosyal { display: flex; gap: var(--b-4); margin-top: var(--b-6); }
.footer__sosyal a { color: color-mix(in srgb, var(--metin-ters) 62%, transparent); }
.footer__sosyal a:hover { color: var(--metin-ters); }

@media (max-width: 860px) {
  .footer__izgara { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer__izgara { grid-template-columns: 1fr; }
  .footer__telif { margin-left: 0; }
}

/* ==========================================================================
   Akordiyon (SSS)
   ========================================================================== */
.akordiyon { border-top: 1px solid var(--kenarlik); }
.akordiyon__oge { border-bottom: 1px solid var(--kenarlik); }
.akordiyon__tetik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-4);
  width: 100%;
  padding: var(--b-4) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-baslik);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--metin);
}
.akordiyon__tetik .ikon { transition: transform var(--gecis); }
.akordiyon__tetik[aria-expanded="true"] .ikon { transform: rotate(90deg); }
.akordiyon__govde { padding-bottom: var(--b-4); color: var(--metin-ikincil); font-size: var(--fs-sm); max-width: var(--genislik-metin); }
.akordiyon__govde[hidden] { display: none; }

/* ==========================================================================
   Sekme
   ========================================================================== */
.sekme__liste { display: flex; gap: var(--b-1); border-bottom: 1px solid var(--kenarlik); margin-bottom: var(--b-6); }
.sekme__tetik {
  padding: var(--b-3) var(--b-4);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--metin-ikincil);
  margin-bottom: -1px;
}
.sekme__tetik[aria-selected="true"] { color: var(--metin); font-weight: 700; border-bottom-color: var(--vurgu); }
.sekme__panel[hidden] { display: none; }

/* ==========================================================================
   Logo duvari
   Her logo kendi cercevesinde durur. Gri ton paletin disina cikmalarini onler
   ama TAM OPAKLIKTA kalirlar - soluk gorunup kaybolmazlar. Hover'da kendi
   rengine doner.
   ========================================================================== */
.logo-duvari {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--b-3);
}
.logo-duvari img {
  width: 100%;
  height: auto;
  margin-inline: 0;
  margin-inline: auto;
  filter: grayscale(1) contrast(1.08);
  transition: filter var(--gecis);
}
.logo-duvari > img,
.logo-duvari > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  padding: var(--b-4);
  background: var(--zemin);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.logo-duvari > img:hover,
.logo-duvari > a:hover { border-color: var(--kenarlik-koyu); box-shadow: var(--sh-sm); }
.logo-duvari > img:hover, .logo-duvari a:hover img { filter: none; }

@media (max-width: 560px) {
  .logo-duvari { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--b-2); }
  .logo-duvari > img, .logo-duvari > a { min-height: 5rem; }
}

/* ==========================================================================
   Form
   ========================================================================== */
.form { max-width: 34rem; }
.alan { display: flex; flex-direction: column; gap: var(--b-2); margin-bottom: var(--b-4); }
.alan label { font-size: var(--fs-sm); font-weight: 600; }
.alan input, .alan select, .alan textarea {
  font-family: var(--font-govde);
  font-size: var(--fs-base);
  color: var(--metin);
  background: var(--zemin);
  padding: var(--b-3);
  border: 1px solid var(--kenarlik-koyu);
  border-radius: var(--r-sm);
  width: 100%;
}
.alan textarea { min-height: 8rem; resize: vertical; }
.alan input:hover, .alan select:hover, .alan textarea:hover { border-color: var(--metin-soluk); }
.alan input:focus-visible, .alan select:focus-visible, .alan textarea:focus-visible { border-color: var(--vurgu); }
.alan input:user-invalid, .alan select:user-invalid, .alan textarea:user-invalid { border-color: var(--vurgu); }

.alan__hata { font-size: var(--fs-xs); color: var(--vurgu-koyu); font-weight: 600; display: none; }
.alan input:user-invalid ~ .alan__hata,
.alan select:user-invalid ~ .alan__hata,
.alan textarea:user-invalid ~ .alan__hata { display: block; }

.alan--onay { flex-direction: row; align-items: flex-start; gap: var(--b-3); }
.alan--onay label { display: flex; align-items: flex-start; gap: var(--b-3); font-weight: 400; font-size: var(--fs-sm); line-height: var(--lh-genis); }
.alan--onay input { width: auto; flex: none; margin-top: .3em; accent-color: var(--vurgu); }

.form__not {
  margin-top: var(--b-4);
  padding: var(--b-3) var(--b-4);
  background: var(--zemin-vurgu);
  border-left: 3px solid var(--vurgu);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  color: var(--metin-ikincil);
}

/* ==========================================================================
   Uyari
   ========================================================================== */
.uyari {
  padding: var(--b-4);
  border-radius: var(--r-md);
  border: 1px solid var(--kenarlik);
  background: var(--zemin-alt);
  font-size: var(--fs-sm);
}
.uyari--vurgu { background: var(--zemin-vurgu); border-color: var(--red-200); }

/* ==========================================================================
   Tablo
   ========================================================================== */
.tablo-sar { overflow-x: auto; }
.tablo { border: 1px solid var(--kenarlik); border-radius: var(--r-lg); overflow: hidden; }
.tablo th, .tablo td { padding: var(--b-3) var(--b-4); text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--kenarlik); }
.tablo th { background: var(--zemin-alt); font-family: var(--font-baslik); font-weight: 700; }
.tablo tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   Izgaralar
   ========================================================================== */
.izgara { display: grid; gap: var(--b-6); }
.izgara--2 { grid-template-columns: repeat(2, 1fr); }
.izgara--3 { grid-template-columns: repeat(3, 1fr); }
.izgara--4 { grid-template-columns: repeat(4, 1fr); }
.izgara--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
  .izgara--6 { grid-template-columns: repeat(3, 1fr); }
  .izgara--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .izgara--6, .izgara--4, .izgara--3, .izgara--2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .izgara--6, .izgara--4, .izgara--3, .izgara--2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Bolum basligi
   ========================================================================== */
.bolum__bas { margin-bottom: var(--b-8); max-width: var(--genislik-metin); }
.bolum__ust { font-size: var(--fs-sm); font-weight: 700; color: var(--vurgu-koyu); margin-bottom: var(--b-2); }
.bolum__ozet { font-size: var(--fs-lg); color: var(--metin-ikincil); margin-top: var(--b-3); }

/* ==========================================================================
   Genis form (form sayfalari)
   Iki sutunlu izgara; uzun alanlar (metin kutusu, onay grubu) tam genislik.
   ========================================================================== */
.form--genis {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--b-6);
  align-items: start;
}
.form--genis > .alan--grup,
.form--genis > .alan--onay,
.form--genis > button,
.form--genis > .form__not { grid-column: 1 / -1; }
.form--genis .alan:has(textarea) { grid-column: 1 / -1; }

.alan label span {
  font-weight: 400;
  color: var(--metin-soluk);
  font-size: var(--fs-xs);
}
.alan__ipucu {
  font-size: var(--fs-xs);
  color: var(--metin-soluk);
  line-height: 1.5;
}

/* Onay kutusu grubu */
.alan--grup {
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-lg);
  padding: var(--b-4);
  margin-bottom: var(--b-4);
}
.alan--grup legend {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding-inline: var(--b-2);
}
.onay-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--b-2) var(--b-4);
}
.onay-kutu {
  display: flex;
  align-items: center;
  gap: var(--b-2);
  font-size: var(--fs-sm);
  font-weight: 400;
  cursor: pointer;
}
.onay-kutu input { width: auto; flex: none; accent-color: var(--vurgu); }

.form--genis button[type="submit"] { justify-self: start; margin-top: var(--b-2); }

/* Gonderilmeye calisildiginda hatali alanlar isaretlenir */
.form--dogrulandi .alan input:invalid,
.form--dogrulandi .alan select:invalid,
.form--dogrulandi .alan textarea:invalid { border-color: var(--vurgu); }
.form--dogrulandi .alan input:invalid ~ .alan__hata,
.form--dogrulandi .alan select:invalid ~ .alan__hata,
.form--dogrulandi .alan textarea:invalid ~ .alan__hata { display: block; }

@media (max-width: 720px) {
  .form--genis { grid-template-columns: minmax(0, 1fr); }
}
.form__not--vurgulu { border-left-width: 4px; background: var(--red-100); color: var(--metin); }