/* Rehber sayfalarının belge.css üstüne eklentisi.
   Kendi :root'u YOK — renk ve ölçü kodları belge.css'ten geliyor, ikinci bir
   token kümesi ikisinin sessizce ayrışması demek olurdu. */

.arac{ margin-top:26px; background:var(--card); border:1px solid var(--line);
       border-radius:var(--r-card); padding:24px; }
.arac>*:first-child{ margin-top:0; }

.arac-satir{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.arac-alan{ flex:1 1 260px; min-width:0; }
.arac-alan label{ display:block; font-family:"JetBrains Mono",ui-monospace,monospace;
                  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
                  color:var(--dim); margin-bottom:7px; }
.arac input[type=text], .arac input[type=number], .arac select{
  width:100%; box-sizing:border-box; padding:11px 13px;
  font:inherit; font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--r-btn); }
.arac input:focus-visible, .arac select:focus-visible, .arac button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; }

.arac button{ padding:11px 20px; font:inherit; font-size:15px; font-weight:600;
              color:#fff; background:var(--accent); border:0;
              border-radius:var(--r-btn); cursor:pointer; }
.arac button:hover{ background:var(--accent-1); }
.arac button[disabled]{ opacity:.55; cursor:default; }

/* durum satırı — yükleniyor / hata / ipucu */
.arac-durum{ margin-top:14px; font-size:14.5px; color:var(--dim); min-height:1.2em; }
.arac-durum[data-tur=hata]{ color:#8A1212; }

/* arama sonuçları */
.arac-liste{ margin-top:12px; list-style:none; padding:0;
             border:1px solid var(--line); border-radius:var(--r-kucuk);
             overflow:hidden; }
.arac-liste:empty{ display:none; border:0; }
.arac-liste li + li{ border-top:1px solid var(--line); }
.arac-liste button{ display:block; width:100%; text-align:left;
                    padding:12px 14px; font-size:14.5px; font-weight:400;
                    color:var(--ink); background:var(--card); border-radius:0; }
.arac-liste button:hover{ background:var(--accent-wash); }

/* sonuç: tuval + ölçüler */
.arac-cikti{ margin-top:22px; display:grid; gap:22px;
             grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.arac-cikti[hidden]{ display:none; }
@media (max-width:760px){ .arac-cikti{ grid-template-columns:1fr; } }

.tuval-sar{ position:relative; }
.tuval-sar canvas{ display:block; width:100%; border-radius:var(--r-kucuk);
                   border:1px solid var(--line-2); background:var(--sunken); }
.tuval-ipucu{ margin-top:9px; font-family:"JetBrains Mono",ui-monospace,monospace;
              font-size:12px; color:var(--dim); min-height:1.3em; }
.pusula{ position:absolute; top:9px; right:9px;
         font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
         letter-spacing:.12em; color:var(--ink); background:rgba(247,247,245,.86);
         border:1px solid var(--line); border-radius:var(--r-kucuk); padding:3px 7px; }

/* ölçü listesi — sayfanın özgün metni burada, tuvalde değil */
.olcu{ list-style:none; padding:0; margin:0; }
.olcu li{ display:flex; justify-content:space-between; gap:14px;
          padding:9px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.olcu li:first-child{ padding-top:0; }
.olcu dt, .olcu .ad{ color:var(--dim); }
.olcu .deger{ font-family:"JetBrains Mono",ui-monospace,monospace;
              font-weight:500; color:var(--ink); text-align:right; }

/* eğim bandı göstergesi */
.efsane{ margin-top:18px; list-style:none; padding:0; }
.efsane li{ display:flex; align-items:baseline; gap:10px; padding:5px 0; font-size:13.5px; }
.efsane .kutucuk{ flex:none; width:14px; height:14px; border-radius:3px;
                  border:1px solid rgba(0,0,0,.10); transform:translateY(2px); }
.efsane .aralik{ font-family:"JetBrains Mono",ui-monospace,monospace;
                 font-size:12.5px; color:var(--ink); flex:none; min-width:66px; }
.efsane .not{ color:var(--dim); }

/* hesap makinesi (egim-hesaplama) */
.hesap-cikti{ margin-top:22px; display:grid; gap:14px;
              grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.hesap-kutu{ background:var(--paper); border:1px solid var(--line);
             border-radius:var(--r-kucuk); padding:16px 18px; }
.hesap-kutu .ad{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
                 letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.hesap-kutu .deger{ margin-top:7px; font-size:26px; font-weight:600;
                    letter-spacing:-.02em; color:var(--ink); }
.hesap-kutu .deger small{ font-size:15px; font-weight:400; color:var(--dim); }

/* dönüşüm çizelgesi */
.cevrim{ width:100%; margin-top:20px; border-collapse:collapse; font-size:14.5px; }
.cevrim th, .cevrim td{ padding:9px 12px; text-align:left;
                        border-bottom:1px solid var(--line); }
.cevrim th{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
            letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
            font-weight:400; }
.cevrim td:first-child, .cevrim td:nth-child(2){
  font-family:"JetBrains Mono",ui-monospace,monospace; }

/* sık sorulanlar */
.sss{ margin-top:26px; }
.sss details{ border-bottom:1px solid var(--line); }
.sss summary{ padding:16px 0; font-size:16px; font-weight:600; cursor:pointer;
              list-style:none; display:flex; justify-content:space-between; gap:14px; }
.sss summary::-webkit-details-marker{ display:none; }
.sss summary::after{ content:"+"; color:var(--accent); font-weight:400; flex:none; }
.sss details[open] summary::after{ content:"−"; }
.sss details p{ padding-bottom:16px; margin-top:0; color:var(--dim); }

/* rehber sayfaları arası geçiş */
.rehber-yol{ margin-top:56px; padding-top:26px; border-top:1px solid var(--line);
             display:grid; gap:14px;
             grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.rehber-yol a{ display:block; padding:18px 20px; text-decoration:none;
               background:var(--card); border:1px solid var(--line);
               border-radius:var(--r-card); }
.rehber-yol a:hover{ border-color:var(--accent); }
.rehber-yol .bas{ font-size:15.5px; font-weight:600; color:var(--ink); }
.rehber-yol .alt{ margin-top:6px; font-size:13.5px; color:var(--dim); }

@media (prefers-reduced-motion:no-preference){
  .arac button, .rehber-yol a{ transition:background .15s ease, border-color .15s ease; }
}