/* ============================================================
   Tüm Araçlar — araçlar dizini / hub
   Scope: .okt-araclar
   Token'lar ve @keyframes global (style.css / shell.css) kaynaklıdır.
   ============================================================ */

/* ---- Hero ---- */
.okt-araclar .ar-hero { position:relative; overflow:hidden; }

.okt-araclar .ar-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--fg-muted); margin-bottom:14px; }
.okt-araclar .ar-crumbs a { color:var(--fg-muted); text-decoration:none; }
.okt-araclar .ar-crumbs a:hover { color:var(--primary-700); }
.okt-araclar .ar-crumbs [aria-current="page"] { color:var(--ink-900); font-weight:600; }

.okt-araclar .ar-pill {
  display:inline-block; padding:6px 14px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:-.005em;
  color:var(--primary-700); background:var(--primary-50);
}

.okt-araclar .ar-h1 { margin:14px 0 12px; color:var(--ink-900); max-width:780px; }
.okt-araclar .ar-lead { max-width:640px; color:var(--ink-700); }

/* ---- Float chip'ler (mobilde gizli) ---- */
.okt-araclar .ar-chip { display:none; }
@media (min-width:1100px){
  .okt-araclar .ar-chip { display:flex; }
  .okt-araclar .ar-chip-1 { top:18%; left:2%;   animation:float-up 8s ease-in-out infinite; }
  .okt-araclar .ar-chip-2 { top:45%; left:5%;   animation:float-up 9s ease-in-out infinite; animation-delay:.6s; }
  .okt-araclar .ar-chip-3 { top:72%; left:2.5%; animation:float-up 7s ease-in-out infinite; animation-delay:1.2s; }
  .okt-araclar .ar-chip-4 { top:18%; right:3%;  animation:float-up 9s ease-in-out infinite; animation-delay:.3s; }
  .okt-araclar .ar-chip-5 { top:45%; right:2%;  animation:float-up 8s ease-in-out infinite; animation-delay:.9s; }
  .okt-araclar .ar-chip-6 { top:72%; right:4%;  animation:float-up 10s ease-in-out infinite; animation-delay:1.5s; }
}

/* ---- İçerik bölümü ---- */
.okt-araclar .ar-section { padding:48px 0 80px; background:#fff; }
@media (min-width:768px){ .okt-araclar .ar-section { padding:56px 0 96px; } }

/* ---- Arama / filtre ---- */
.okt-araclar .ar-toolbar { margin-bottom:36px; }
.okt-araclar .ar-search {
  position:relative; display:flex; align-items:center;
  max-width:480px;
}
.okt-araclar .ar-search > svg {
  position:absolute; left:14px; color:var(--fg-muted); pointer-events:none;
}
.okt-araclar .ar-search-input {
  width:100%; padding:13px 16px 13px 42px;
  font-size:15px; font-family:var(--font-sans);
  color:var(--ink-900); background:#fff;
  border:1px solid var(--border); border-radius:12px;
  transition:border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.okt-araclar .ar-search-input::placeholder { color:var(--fg-muted); }
.okt-araclar .ar-search-input:focus {
  outline:none; border-color:var(--primary-500);
  box-shadow:0 0 0 3px var(--primary-50);
}
.okt-araclar .ar-empty {
  margin-top:20px; font-size:14px; color:var(--fg-muted);
}

/* ---- Kategori ---- */
.okt-araclar .ar-cat { margin-bottom:44px; }
.okt-araclar .ar-cat:last-child { margin-bottom:0; }
.okt-araclar .ar-cat[hidden] { display:none; }

.okt-araclar .ar-cat-head {
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.okt-araclar .ar-cat-bar { width:6px; height:24px; border-radius:3px; flex:none; }
.okt-araclar .ar-cat-title { margin:0; color:var(--ink-900); font-size:21px; font-weight:800; }

/* ---- Grid (mobil öncelikli: tek kolon → çok kolon) ---- */
.okt-araclar .ar-grid {
  display:grid; grid-template-columns:1fr; gap:14px;
}
@media (min-width:560px){
  .okt-araclar .ar-grid { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
}

/* Geniş/öne çıkan kart içeren kategoriler: sabit 4 → 2 → 1 kolon */
@media (min-width:560px){
  .okt-araclar .ar-grid--wide { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:960px){
  .okt-araclar .ar-grid--wide { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.okt-araclar .ar-rev { height:100%; }
.okt-araclar .ar-rev[hidden] { display:none; }

/* big: iki kolon kapla (geniş ekran) */
@media (min-width:960px){
  .okt-araclar .ar-rev--big { grid-column:span 2; }
}
/* wide: tüm satırı kapla */
.okt-araclar .ar-rev--wide { grid-column:1 / -1; }

/* ---- Kart ---- */
.okt-araclar .ar-card {
  display:block; position:relative; height:100%;
  padding:20px; text-decoration:none;
  background:#fff; border:1px solid var(--border); border-radius:16px;
}
.okt-araclar .ar-card--wide {
  display:flex; align-items:center; gap:16px;
}
@media (min-width:560px){
  .okt-araclar .ar-card--wide { min-height:137px; }
}

.okt-araclar .ar-ic {
  width:40px; height:40px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.okt-araclar .ar-card--wide .ar-ic { margin-bottom:0; }

.okt-araclar .ar-card--wide .ar-card-body { flex:1; min-width:0; }

.okt-araclar .ar-card-t {
  font-size:16px; font-weight:800; color:var(--ink-900); margin:0 0 4px;
}
.okt-araclar .ar-card-d { font-size:12.5px; color:var(--fg-muted); }

/* ---- "POPÜLER" rozeti ---- */
.okt-araclar .ar-hot {
  position:absolute; top:14px; right:14px;
  padding:2px 8px; border-radius:5px;
  background:var(--accent-500,#C6F25A); color:#3F5208;
  font-size:9px; font-weight:800; letter-spacing:.04em;
}

/* ---- Geniş kart oku ---- */
.okt-araclar .ar-arrow {
  flex:none; font-size:22px; font-weight:800; line-height:1; padding-right:4px;
}
.okt-araclar .ar-arrow--hot { padding-right:56px; }