/* GES Hesaplama — E-TechRobotic */

:root {
  --zemin:        #f5f6f8;
  --kart:         #ffffff;
  --metin:        #1e3a5f;
  --soluk:        #5b6471;
  --cizgi:        #dfe3e8;
  --vurgu:        #f97316;
  --vurgu-koyu:   #ea580c;
  --iyi:          #1d8a4e;
  --uyari:        #b26a00;
  --gunes:        #f0a315;
  --yesil:        #16a34a;
  --yesil-zemin:  #f0fdf4;
  --mavi:         #0090c0;
  --golge:        0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin:  #15181d;
    --kart:   #1d2127;
    --metin:  #e8eaed;
    --soluk:  #9aa3b0;
    --cizgi:  #2e343d;
    --vurgu:  #fb923c;
    --vurgu-koyu: #fdba74;
    --iyi:    #4cc281;
    --uyari:  #e0a042;
    --yesil:  #4ade80;
  --yesil-zemin: #14281c;
  --mavi:   #3bb8e0;
  --golge:  0 1px 3px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.kap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }

/* ---- kart ---- */
.kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  box-shadow: var(--golge);
  padding: 20px;
  margin-top: 18px;
}
.kart h2 {
  margin: 0 0 4px; font-size: 17px; font-weight: 650;
  display: flex; align-items: center; gap: 10px;
}
.kart h3 { margin: 22px 0 8px; font-size: 14px; color: var(--soluk);
           text-transform: uppercase; letter-spacing: .6px; }
.adim {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--vurgu); color: #fff; font-size: 13px; font-weight: 700;
}
.aciklama { margin: 2px 0 16px; color: var(--soluk); font-size: 13.5px; max-width: 72ch; }

/* ---- alanlar ---- */
.izgara {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: 12px;
}
.alan { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.alan > span { font-weight: 550; }
.alan small { font-weight: 400; color: var(--soluk); }
.ipucu { font-size: 12px; color: var(--soluk); line-height: 1.4; }

input, select {
  font: inherit; color: var(--metin); background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: 7px;
  padding: 8px 10px; width: 100%; min-width: 0;
}
input:focus, select:focus {
  outline: 2px solid var(--vurgu); outline-offset: -1px; border-color: var(--vurgu);
}

.satir-buton { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.satir-buton input { flex: 1 1 160px; }
.hazir { flex: 0 1 240px; }

/* ---- butonlar ---- */
.btn, .btn-ikincil {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: 7px; padding: 9px 18px; border: 1px solid transparent;
  white-space: nowrap;
}
.btn { background: var(--vurgu); color: #fff; font-size: 15px; padding: 11px 26px; }
.btn:hover { background: var(--vurgu-koyu); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-ikincil { background: transparent; color: var(--vurgu); border-color: var(--cizgi); }
.btn-ikincil:hover { border-color: var(--vurgu); }

.hesapla-satir {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px;
}

/* ---- sekmeler ---- */
.sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); margin: 12px 0 4px; }
.sekme {
  font: inherit; font-size: 13.5px; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 14px; color: var(--soluk);
}
.sekme.aktif { color: var(--vurgu); border-bottom-color: var(--vurgu); font-weight: 600; }

/* ---- durum ---- */
.durum { font-size: 13px; color: var(--soluk); margin: 10px 0 0; min-height: 1.2em; }
.durum.hata { color: #c0392b; }
.durum.iyi  { color: var(--iyi); }

/* ---- özet kutuları ---- */
.ozet {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  margin-top: 14px;
}
.kutu {
  border: 1px solid var(--cizgi); border-radius: 8px; padding: 12px 14px;
  background: color-mix(in srgb, var(--vurgu) 4%, var(--kart));
}
.kutu .etiket { font-size: 12px; color: var(--soluk); display: block; }
.kutu .deger  { font-size: 21px; font-weight: 700; line-height: 1.25; }
.kutu .birim  { font-size: 13px; font-weight: 500; color: var(--soluk); }
.kutu .alt    { font-size: 12px; color: var(--soluk); margin-top: 3px; display: block; }
.kutu.one-cikan { background: color-mix(in srgb, var(--gunes) 12%, var(--kart));
                  border-color: color-mix(in srgb, var(--gunes) 45%, var(--cizgi)); }
.kutu.iyi-kutu  { background: color-mix(in srgb, var(--iyi) 9%, var(--kart)); }

/* ---- tablo ---- */
.tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; }
.tablo th, .tablo td {
  border-bottom: 1px solid var(--cizgi); padding: 7px 8px; text-align: right;
}
.tablo th:first-child, .tablo td:first-child { text-align: left; }
.tablo thead th { color: var(--soluk); font-weight: 600; font-size: 12.5px; }
.tablo tfoot td { font-weight: 700; border-top: 2px solid var(--cizgi); border-bottom: 0; }
.tablo input { padding: 5px 7px; font-size: 13px; }
.tablo.dar { max-width: 560px; }
.sil {
  background: none; border: 0; cursor: pointer; color: var(--soluk);
  font-size: 17px; line-height: 1; padding: 2px 6px;
}
.sil:hover { color: #c0392b; }

/* ---- grafik ---- */
.grafik { width: 100%; overflow-x: auto; }
.grafik svg { display: block; min-width: 520px; width: 100%; height: auto; }

.kaynak { font-size: 12px; color: var(--soluk); margin-top: 14px; }
.not { font-size: 13px; color: var(--uyari); margin: 10px 0 0; }

.uyari {
  font-size: 12.5px; color: var(--soluk); line-height: 1.6;
  border-left: 3px solid var(--cizgi); padding: 2px 0 2px 14px;
  margin: 26px 0 40px; max-width: 80ch;
}

@media (max-width: 560px) {
  .kart { padding: 16px 14px; }
  .kutu .deger { font-size: 19px; }
}

/* ===== harita bölümü ===== */
.harita {
  height: 520px; width: 100%;
  border: 1px solid var(--cizgi); border-radius: 8px;
  margin-top: 12px; background: #dfe3e8;
}
.arac-cubugu {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  margin-top: 12px;
}
.arac-cubugu .btn-ikincil { padding: 8px 12px; font-size: 13.5px; }
.dar-alan { flex: 0 1 220px; }
.dar-izgara { margin: 0; flex: 1 1 300px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

.alan-etiket {
  background: rgba(17,24,39,.78); color: #fff;
  border: 0; border-radius: 4px; padding: 2px 6px;
  font-size: 11.5px; font-weight: 600; box-shadow: none;
}
.alan-etiket::before { display: none; }

.parsel { margin-top: 18px; border-top: 1px solid var(--cizgi); padding-top: 12px; }
.parsel summary {
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--vurgu);
  list-style: none;
}
.parsel summary::marker, .parsel summary::-webkit-details-marker { display: none; }
.parsel summary::before { content: "▸ "; }
.parsel[open] summary::before { content: "▾ "; }

/* Leaflet koyu temada okunur kalsın */
@media (prefers-color-scheme: dark) {
  .leaflet-container { background: #2a2f36; }
  .leaflet-control-layers, .leaflet-bar a,
  .leaflet-control-scale-line { background: var(--kart); color: var(--metin); }
  .leaflet-bar a { border-bottom-color: var(--cizgi); }
}

@media (max-width: 560px) {
  .harita { height: 380px; }
}

.btn-ikincil.etkin {
  background: var(--vurgu); color: #fff; border-color: var(--vurgu);
}

/* ===== adım adım akış ===== */
.ilerleme {
  display: flex; align-items: center; gap: 4px;
  padding-block: 18px 2px; overflow-x: auto;
}
.ilerleme-adim {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: default; padding: 4px 2px;
  font: inherit; font-size: 13px; color: var(--soluk); white-space: nowrap;
}
.ilerleme-no {
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; font-size: 12px; font-weight: 700;
  background: var(--cizgi); color: var(--soluk); flex: 0 0 auto;
}
.ilerleme-adim.simdi { color: var(--metin); font-weight: 650; }
.ilerleme-adim.simdi .ilerleme-no { background: var(--vurgu); color: #fff; }
.ilerleme-adim.tamam { cursor: pointer; color: var(--iyi); }
.ilerleme-adim.tamam .ilerleme-no { background: var(--iyi); color: #fff; }
.ilerleme-adim.tamam:hover .ilerleme-ad { text-decoration: underline; }
.ilerleme-cizgi { flex: 1 1 14px; height: 1px; background: var(--cizgi); min-width: 14px; }

.sayfa h2 { font-size: 19px; margin-bottom: 6px; }

.gezinme {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px;
}
.gezinme .btn, .gezinme .btn-ikincil { padding: 11px 24px; }
.adim-bilgi { font-size: 13px; color: var(--soluk); margin-inline: auto; }
.adim-bilgi.hata { color: #c0392b; font-weight: 600; }

/* ===== seçim kartları ===== */
.secimler { display: grid; gap: 10px; margin-top: 10px; }
.secim {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: 8px; padding: 12px 14px;
  font-size: 14px;
}
.secim:hover { border-color: var(--vurgu); }
.secim input { width: auto; margin-top: 3px; flex: 0 0 auto; accent-color: var(--vurgu); }
.secim span { display: block; }
.secim small { display: block; color: var(--soluk); font-size: 12.5px;
               font-weight: 400; margin-top: 2px; line-height: 1.45; }
.secim:has(input:checked) {
  border-color: var(--vurgu);
  background: color-mix(in srgb, var(--vurgu) 6%, var(--kart));
}

@media (max-width: 560px) {
  .ilerleme-ad { display: none; }
  .ilerleme { gap: 2px; }
  .gezinme { gap: 8px; }
  .adim-bilgi { order: 3; width: 100%; text-align: center; margin: 0; }
}

/* ===== teklif formu ===== */
textarea {
  font: inherit; color: var(--metin); background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: 7px;
  padding: 8px 10px; width: 100%; resize: vertical; min-height: 64px;
}
textarea:focus { outline: 2px solid var(--vurgu); outline-offset: -1px; border-color: var(--vurgu); }
.zorunlu { color: #c0392b; font-weight: 700; }
.onay {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 14px; font-size: 13.5px; cursor: pointer;
}
.onay input { width: auto; flex: 0 0 auto; margin-top: 3px; accent-color: var(--vurgu); }
.alan-hata { border-color: #c0392b !important; }
.teklif-tamam {
  border: 1px solid color-mix(in srgb, var(--iyi) 40%, var(--cizgi));
  background: color-mix(in srgb, var(--iyi) 8%, var(--kart));
  border-radius: 8px; padding: 16px; margin-top: 14px;
}
.teklif-tamam strong { color: var(--iyi); }

/* ===== adres arama sonuçları ===== */
.adres-liste { display: grid; gap: 6px; margin-top: 10px; }
.adres-sonuc {
  display: flex; gap: 10px; align-items: baseline; text-align: left;
  font: inherit; font-size: 13px; cursor: pointer;
  background: var(--kart); color: var(--metin);
  border: 1px solid var(--cizgi); border-radius: 7px; padding: 9px 12px;
}
.adres-sonuc:hover { border-color: var(--vurgu);
  background: color-mix(in srgb, var(--vurgu) 6%, var(--kart)); }
.adres-sonuc strong { flex: 0 0 86px; color: var(--vurgu); font-size: 12.5px; }
.adres-sonuc span { color: var(--soluk); line-height: 1.4; }

/* ===== sehpa tutamağı ===== */
.sehpa-tutamak {
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; color: #fff;
  background: #f0a315; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: move; line-height: 1;
}

/* ===== hesaplanan açı paneli ===== */
.hesaplanan {
  border: 1px solid color-mix(in srgb, var(--vurgu) 35%, var(--cizgi));
  background: color-mix(in srgb, var(--vurgu) 4%, var(--kart));
  border-radius: 8px; padding: 14px 16px; margin-top: 16px;
}
.hesaplanan h4 {
  margin: 0; font-size: 13px; color: var(--vurgu);
  text-transform: uppercase; letter-spacing: .6px;
}

/* ===== panel sınıfı seçimi ===== */
.panel-secim {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.panel-kart {
  border: 1px solid var(--cizgi); border-radius: 9px; padding: 14px;
  cursor: pointer; background: var(--kart); text-align: left;
  font: inherit; color: var(--metin); display: block;
}
.panel-kart:hover { border-color: var(--vurgu); }
.panel-kart.secili {
  border-color: var(--vurgu); border-width: 2px; padding: 13px;
  background: color-mix(in srgb, var(--vurgu) 7%, var(--kart));
}
.panel-kart .pk-ad { font-weight: 700; font-size: 15px; display: block; }
.panel-kart .pk-alt { font-size: 12px; color: var(--soluk); display: block; margin-top: 2px; }
.panel-kart .pk-guc { font-size: 24px; font-weight: 700; margin: 10px 0 2px; display: block; }
.panel-kart .pk-guc small { font-size: 13px; font-weight: 500; color: var(--soluk); }
.panel-kart dl { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; }
.panel-kart dt { color: var(--soluk); }
.panel-kart dd { margin: 0; text-align: right; font-weight: 600; }

/* ===== GES tipi seçimi ===== */
.tip-secim {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.tip-kart {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  font: inherit; color: var(--metin); background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: 10px; padding: 16px;
}
.tip-kart:hover { border-color: var(--vurgu);
  background: color-mix(in srgb, var(--vurgu) 5%, var(--kart)); }
.tip-kart.secili {
  border-color: var(--vurgu); border-width: 2px; padding: 15px;
  background: color-mix(in srgb, var(--vurgu) 8%, var(--kart));
}
.tip-ikon { font-size: 26px; line-height: 1; }
.tip-ad   { font-weight: 650; font-size: 15px; margin-top: 4px; }
.tip-alt  { font-size: 12.5px; color: var(--soluk); line-height: 1.45; }

/* ===== serbest adres katlanır bölümü ===== */
.serbest { margin-top: 16px; border-top: 1px solid var(--cizgi); padding-top: 12px; }
.serbest summary {
  cursor: pointer; font-size: 13.5px; color: var(--vurgu);
  font-weight: 600; list-style: none;
}
.serbest summary::marker, .serbest summary::-webkit-details-marker { display: none; }
.serbest summary::before { content: "▸ "; }
.serbest[open] summary::before { content: "▾ "; }
.serbest input { flex: 1 1 220px; }

select:disabled { opacity: .6; cursor: not-allowed; }

/* ===== üst marka bandı ===== */
.ust { padding-block: 22px 2px; display: flex; justify-content: center; }
.marka-hap {
  display: flex; align-items: center; gap: 18px;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 9px 14px 9px 16px; box-shadow: var(--golge);
}
.marka-logo { height: 34px; width: auto; display: block; }
.anasayfa {
  font-size: 14px; font-weight: 650; color: var(--metin);
  text-decoration: none; padding: 7px 14px; border-radius: 9px;
  border: 1px solid transparent; white-space: nowrap;
}
.anasayfa:hover { border-color: var(--cizgi); background: var(--zemin); }
@media (prefers-color-scheme: dark) {
  .marka-logo { filter: brightness(1.15); }
}

/* ===== giriş ekranı ===== */
.giris { text-align: center; }
.giris-baslik {
  margin: 6px 0; font-size: 27px; font-weight: 800;
  letter-spacing: -.5px; line-height: 1.2; color: var(--metin);
}
.giris-alt { margin: 0 auto; color: var(--soluk); font-size: 14.5px; max-width: 62ch; }
.giris .tip-secim { text-align: left; margin-top: 22px; }
.giris .durum { text-align: left; }
.tip-ikon { font-size: 25px; line-height: 1.1; }

/* ===== "GES Hesaplama Hakkında" ===== */
.hakkinda {
  margin-top: 18px; text-align: left;
  border: 1px solid var(--cizgi); border-radius: 10px; background: var(--kart);
}
.hakkinda summary {
  cursor: pointer; list-style: none; padding: 14px 44px 14px 16px;
  font-weight: 650; font-size: 14px; color: var(--metin);
  display: flex; align-items: center; gap: 10px; position: relative;
}
.hakkinda summary::marker, .hakkinda summary::-webkit-details-marker { display: none; }
.hakkinda summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 500; color: var(--gunes);
}
.hakkinda[open] summary::after { content: "−"; }
.hakkinda-ikon {
  display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto;
  border-radius: 50%; background: var(--gunes); color: #fff;
  font-size: 12px; font-weight: 700; font-style: italic;
}
.hakkinda p { margin: 0 16px 14px; font-size: 13.5px; color: var(--soluk); line-height: 1.6; }

@media (max-width: 560px) {
  .giris-baslik { font-size: 21px; }
  .marka-logo { height: 28px; }
}

/* ===== giriş ekranı: kart kabuğu yok, dar kolon ===== */
body.giris-modu .kap { max-width: 760px; }
body.giris-modu .uyari { display: none; }

.sayfa.giris {
  background: none; border: 0; box-shadow: none; padding: 8px 0 0;
  margin-top: 10px;
}
.giris-baslik { margin: 4px 0 8px; }

/* kartlar: görseldeki gibi açık zemin, ince kenar, sol hizalı */
.giris .tip-secim { gap: 14px; grid-template-columns: repeat(3, 1fr); }
.giris .tip-kart {
  background: color-mix(in srgb, var(--vurgu) 3%, var(--kart));
  border-color: color-mix(in srgb, var(--vurgu) 16%, var(--cizgi));
  border-radius: 12px; padding: 18px 16px 20px; gap: 2px;
  min-height: 118px; align-content: start;
}
.giris .tip-ad  { margin-top: 10px; font-size: 15px; font-weight: 700; }
.giris .tip-alt { font-size: 12.5px; margin-top: 3px; }

@media (max-width: 760px) { .giris .tip-secim { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .giris .tip-secim { grid-template-columns: 1fr; } }

/* ===== bölüm başlığı: ikon çipi + başlık + alt yazı ===== */
.bolum-basi { display: flex; gap: 14px; align-items: flex-start; }
.bolum-ikon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 11px;
  background: color-mix(in srgb, var(--vurgu) 14%, var(--kart));
  color: var(--vurgu); font-size: 18px;
}
.bolum-basi h2 { margin: 0 0 2px; font-size: 21px; font-weight: 750; }
.bolum-basi .aciklama { margin: 0; }

/* ===== ilerleme: 5 parçalı şerit ===== */
.ilerleme { gap: 7px; padding-block: 16px 2px; }
.ilerleme-adim { flex: 1 1 0; display: block; padding: 0; min-width: 0; }
.ilerleme-no, .ilerleme-ad { display: none; }
.ilerleme-adim::before {
  content: ""; display: block; height: 5px; border-radius: 3px;
  background: var(--cizgi);
}
.ilerleme-adim.tamam::before { background: var(--vurgu); }
.ilerleme-adim.simdi::before { background: var(--vurgu); }
.ilerleme-cizgi { display: none; }

/* ===== seçenek kartları ===== */
.secenek-izgara {
  display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.secenek-kart {
  display: grid; gap: 2px; text-align: left; cursor: pointer; font: inherit;
  color: var(--metin); background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: 12px; padding: 18px;
  align-content: start;
}
.secenek-kart:hover { border-color: var(--vurgu); }
.secenek-kart.secili {
  border: 2px solid var(--yesil); padding: 17px;
  background: var(--yesil-zemin);
}
.secenek-ikon { font-size: 22px; line-height: 1; color: var(--vurgu); }
.secenek-ad  { font-weight: 700; font-size: 15px; margin-top: 10px; }
.secenek-alt { font-size: 12.5px; color: var(--soluk); line-height: 1.5; margin-top: 3px; }
.secenek-rozet {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 12.5px; font-weight: 700; color: var(--yesil);
}
.secenek-kart:not(.secili) .secenek-rozet,
.secenek-kart:not(.onerilen) .secenek-rozet { display: none; }

/* ===== uyarı kutusu ===== */
.uyari-kutu {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--vurgu) 35%, var(--cizgi));
  border-left: 4px solid var(--vurgu);
  background: color-mix(in srgb, var(--vurgu) 7%, var(--kart));
  border-radius: 9px; padding: 13px 15px;
}
.uyari-kutu p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--metin); }
.uyari-ikon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--vurgu); color: #fff; font-size: 12px; font-weight: 800;
}

/* ===== alt gezinme: görseldeki gibi ===== */
.gezinme { gap: 14px; margin-top: 22px; }
.gezinme #geri {
  flex: 0 0 auto; border: 1px solid var(--cizgi); border-radius: 11px;
  padding: 14px 26px; font-size: 15px; background: var(--kart);
}
.gezinme #ileri, .gezinme #hesapla {
  flex: 1 1 auto; border-radius: 11px; padding: 14px 26px; font-size: 15.5px;
  font-weight: 700;
}
.adim-bilgi { display: none; }

/* ===== sehpa kaydırma / döndürme paneli ===== */
.tasima {
  display: grid; gap: 18px; margin-top: 16px;
  grid-template-columns: auto 1fr; align-items: start;
  border: 1px solid var(--cizgi); border-radius: 10px; padding: 14px 16px;
  background: color-mix(in srgb, var(--vurgu) 3%, var(--kart));
}
.tasima.pasif { opacity: .5; pointer-events: none; }
.tasima-bolum { display: grid; gap: 9px; }
.tasima-baslik {
  font-size: 12px; font-weight: 700; color: var(--soluk);
  text-transform: uppercase; letter-spacing: .6px;
}
.ok-pad {
  display: grid; gap: 5px; justify-content: start;
  grid-template-columns: repeat(3, 38px);
  grid-template-areas: ".  yu ." "so or sa" ".  as .";
}
.ok-pad [data-tasi="0,1"]  { grid-area: yu; }
.ok-pad [data-tasi="-1,0"] { grid-area: so; }
.ok-pad [data-tasi="1,0"]  { grid-area: sa; }
.ok-pad [data-tasi="0,-1"] { grid-area: as; }
.ok-orta {
  grid-area: or; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--soluk);
}
.ok {
  font: inherit; font-size: 15px; cursor: pointer; height: 34px;
  border: 1px solid var(--cizgi); border-radius: 8px;
  background: var(--kart); color: var(--metin);
}
.ok:hover { border-color: var(--vurgu); color: var(--vurgu); }
.ok:active { background: color-mix(in srgb, var(--vurgu) 15%, var(--kart)); }
.tasima .alan { max-width: 130px; }

@media (max-width: 620px) { .tasima { grid-template-columns: 1fr; } }