/* ==========================================================================
   biMARJ — Hesaplama Araçları sayfası
   Yalnızca bu sayfada yüklenir (controller: pageStyles => ['tools']).
   Ana sayfanın tasarım dilini kullanır: Jost, aynı renk paleti, aynı
   radius/shadow sistemi, aynı container genişliği.
   ========================================================================== */

/* ---- Mini hero -------------------------------------------------------- */
.tools-hero{
  background:
    radial-gradient(760px 340px at 82% 20%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(112deg, #ffffff 0%, #f8fbf9 48%, #eef5f0 100%);
  border-bottom: 1px solid #e9efec;
  padding: 26px 0 30px;
}
.tools-hero-inner{
  display: grid; grid-template-columns: 1fr 230px;
  gap: 32px; align-items: center;
}
.tools-hero-copy{ min-width: 0; }

.tools-hero .breadcrumb{
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 12px; padding: 0;
  font-size: 12.5px; color: #77848c;
}
.tools-hero .breadcrumb li + li:before{ content: "›"; margin-right: 8px; color: #b3bec4; }
.tools-hero .breadcrumb a{ color: #77848c; }
.tools-hero .breadcrumb a:hover{ color: var(--green); }

.tools-hero h1{
  position: relative;
  font-size: 36px; font-weight: 700; letter-spacing: -1.1px;
  line-height: 1.12; color: var(--ink);
  margin: 0 0 16px; padding-bottom: 11px;
}
.tools-hero h1:after{
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 52px; height: 3px; border-radius: 3px; background: #e85d4a;
}
.tools-hero p{
  font-size: 16px; line-height: 1.6; color: #44535f;
  margin: 0 0 16px; max-width: 56ch;
}

.tools-hero-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.tools-hero-chips span{
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #e6ece8; border-radius: 20px;
  padding: 7px 13px; font-size: 12.5px; color: #3d4b56;
  box-shadow: 0 2px 6px rgba(25,42,57,.05);
}
.tools-hero-chips svg{
  width: 15px; height: 15px; flex: 0 0 15px;
  fill: none; stroke: #0f8a5f; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; margin-right: 0;
}

/* Dekoratif ikon kompozisyonu */
.tools-hero-art{ position: relative; height: 150px; }
.tha{
  position: absolute; display: grid; place-items: center;
  border-radius: 14px; background: #fff;
  box-shadow: 0 8px 20px rgba(13,40,30,.10);
}
.tha svg{ fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.tha-1{ width: 62px; height: 62px; left: 8px;   top: 12px;  color: #e0654a; }
.tha-1 svg{ width: 30px; height: 30px; }
.tha-2{ width: 54px; height: 54px; right: 6px;  top: 0;     color: #2f72cf; }
.tha-2 svg{ width: 26px; height: 26px; }
.tha-3{ width: 50px; height: 50px; left: 52px;  bottom: 6px; color: #0f8a5f; }
.tha-3 svg{ width: 24px; height: 24px; }
.tha-4{ width: 46px; height: 46px; right: 22px; bottom: 20px; color: #7048c9; }
.tha-4 svg{ width: 22px; height: 22px; }

/* ---- Sayfa gövdesi ---------------------------------------------------- */
.tools-page{ padding: 34px 0 10px; }

/* Kategori bölümleri — hepsi aynı ritimde */
.tool-section{ margin: 0 0 34px; }
.tool-section:last-child{ margin-bottom: 8px; }

.tool-section-title{
  position: relative;
  font-size: 21px; font-weight: 700; letter-spacing: -.5px;
  color: var(--ink); margin: 0 0 20px; padding-bottom: 10px;
}
.tool-section-title:after{
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 3px; border-radius: 3px; background: #e85d4a;
}

/* ---- Kart grid'i ------------------------------------------------------ */
.tool-cards{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; align-items: stretch;
}

/* ---- Araç kartı ------------------------------------------------------- */
.tc{
  position: relative; display: flex; flex-direction: column;
  min-height: 148px; padding: 18px 17px 16px;
  background: #fff; border: 1px solid #e9edeb; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(25,42,57,.04);
  color: inherit; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tc:hover{
  transform: translateY(-3px);
  border-color: #dbe4df;
  box-shadow: 0 12px 26px rgba(13,40,30,.10);
  text-decoration: none;
}

/* İkon kutusu — kategori tonunda */
.tc-ic{
  position: relative;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 12px; display: grid; place-items: center;
  margin-bottom: 13px;
}
.tc-ic svg{
  width: 23px; height: 23px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.tone-coral{ background: #fff0eb; color: #e05426; }
.tone-mint { background: #e7f7ef; color: #058a63; }
.tone-blue { background: #ebf5ff; color: #1673cd; }
.tone-lilac{ background: #f1eaff; color: #6a22dc; }
.tone-amber{ background: #fff7dd; color: #c98a06; }

/* Pazaryeri kartlarında orijinal marka ikonu */
.tc-brand{ background: #fff; border: 1px solid #ebefed; padding: 5px; overflow: visible; }
.tc-brand img{
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 32px; object-fit: contain;
}
/* Komisyon araçlarında logonun yanında küçük % rozeti */
.tc-badge{
  position: absolute; right: -6px; bottom: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #e05426; color: #fff;
  font-style: normal; font-size: 11px; font-weight: 600;
  display: grid; place-items: center; line-height: 1;
  box-shadow: 0 2px 5px rgba(224,84,38,.35);
}

.tc-body{ display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tc-title{
  font-size: 15.5px; font-weight: 600; line-height: 1.3;
  color: var(--ink); margin-bottom: 5px;
}
.tc-desc{
  font-size: 13.5px; line-height: 1.5; color: #5b6a76; margin: 0;
}

/* Yön oku — sağ altta, hover'da hafifçe kayar */
.tc-go{
  position: absolute; right: 14px; bottom: 13px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: #f3f6f4; color: #66757f;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.tc-go svg{
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.tc:hover .tc-go{ background: var(--green); color: #fff; transform: translateX(2px); }
.tc-body{ padding-right: 26px; }   /* ok ile metin çakışmasın */

/* ---- Duyarlı ---------------------------------------------------------- */
@media (max-width: 1180px){
  .tool-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tools-hero h1{ font-size: 33px; }
}
@media (max-width: 980px){
  .tools-hero-inner{ grid-template-columns: 1fr; gap: 20px; }
  /* Özgüllük notu: yedek katmandaki .tools-hero-inner > * kuralı (0,1,1)
     düz .tools-hero-art (0,1,0) kuralını eziyordu. Seçici eşitlendi. */
  .tools-hero-inner > .tools-hero-art{ display: none; }
}
@media (max-width: 860px){
  .tool-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .tools-hero{ padding: 20px 0 24px; }
  .tools-hero h1{ font-size: 28px; letter-spacing: -.8px; margin-bottom: 13px; }
  .tools-hero p{ font-size: 15px; }
  .tools-hero-chips span{ font-size: 12px; padding: 6px 11px; }
  .tools-page{ padding: 24px 0 6px; }
  .tool-section{ margin-bottom: 26px; }
  .tool-section-title{ font-size: 19px; margin-bottom: 16px; }
  .tool-cards{ grid-template-columns: 1fr; gap: 11px; }
  .tc{ min-height: 0; padding: 16px 15px 14px; }
  .tc-ic{ width: 42px; height: 42px; flex: 0 0 42px; margin-bottom: 11px; }
  .tc-title{ font-size: 15px; }
  .tc-desc{ font-size: 13px; }
}

/* ---- Grid desteklemeyen motorlar için yedek --------------------------- */
@supports not (display: grid){
  .tools-hero-inner, .tool-cards{ font-size: 0; }
  .tools-hero-inner > *, .tool-cards > *{
    display: inline-block; vertical-align: top; font-size: 16px;
    box-sizing: border-box;
  }
  .tools-hero-inner > *:first-child{ width: 72%; padding-right: 3%; }
  .tools-hero-inner > *:last-child { width: 26%; }
  .tool-cards > *{ width: 24.2%; margin-right: .8%; margin-bottom: 14px; }
  .tc-ic{ display: inline-block; line-height: 44px; text-align: center; }
  .tc-go{ display: inline-block; line-height: 26px; text-align: center; }
}
@media (max-width: 860px){
  @supports not (display: grid){
    .tool-cards > *{ width: 49%; }
    .tools-hero-inner > *:first-child, .tools-hero-inner > *:last-child{ width: 100%; padding-right: 0; }
  }
}
@media (max-width: 560px){
  @supports not (display: grid){
    .tool-cards > *{ width: 100%; margin-right: 0; }
  }
}