/* =========================
   Reset & Tema
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img,video{display:block;max-width:100%;height:auto}

:root{
  --bg:#0f1115;
  --panel:#121827;
  --surface:#151c2b;
  --text:#e9eef6;
  --muted:#98a1b3;
  --border:#1f2740;
  --accent:#5563ff;
  --ok:#22c55e;

  --radius:18px;
  --rsm:12px;
  --gap:16px;

  --shadow:0 10px 28px rgba(0,0,0,.28);
  --shadow-lg:0 18px 44px rgba(0,0,0,.38);
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#f6f8fb;--panel:#fff;--surface:#fff;
    --text:#0c1222;--muted:#6b7280;--border:#e6e8ee;
    --shadow:0 8px 22px rgba(12,18,34,.08);
    --shadow-lg:0 14px 36px rgba(12,18,34,.10);
  }
}

body{
  background:
    radial-gradient(1200px 800px at -10% -10%, rgba(85,99,255,.14), transparent 60%),
    radial-gradient(1200px 800px at 120% 0%, rgba(16,185,129,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
}

.wrap{max-width:1120px;margin:36px auto;padding:0 18px}

/* =========================
   Arama (index & category)
   ========================= */
.search{margin-bottom:18px}
.searchbar{
  position:relative;display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--border);border-radius:999px;
  padding:12px 16px 12px 44px; box-shadow:var(--shadow);
}
.searchbar--flat{border-radius:14px}
.searchbar__icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.searchbar__input{flex:1;border:none;outline:none;background:transparent;color:var(--text);font-size:15px}
.searchbar__input::placeholder{color:color-mix(in srgb, var(--muted) 70%, transparent)}
.searchbar__clear{width:32px;height:32px;display:grid;place-items:center;border:none;background:transparent;color:var(--muted);border-radius:50%;cursor:pointer}
.searchbar__clear:hover{background:rgba(255,255,255,.06)}

/* Öneri paneli */
.suggest{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  background:var(--panel);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:10px;z-index:30;max-height:360px;overflow:auto
}
.s-group{padding:6px}
.s-title{font-size:12px;color:var(--muted);margin:6px 8px;display:flex;gap:6px;align-items:center}
.s-list{list-style:none;margin:0;padding:0}
.s-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;cursor:pointer}
.s-item:hover,.s-item.is-active{background:rgba(255,255,255,.04)}
.s-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb, var(--i,var(--accent)) 22%, transparent);outline:1px solid color-mix(in srgb, var(--i,var(--accent)) 35%, var(--border))}
.s-icon.soft{background:rgba(255,255,255,.03);outline:1px solid var(--border)}
.s-main{font-weight:700}
.s-meta{font-size:12px;color:var(--muted)}
mark{background:linear-gradient(0deg, rgba(250,204,21,.35), rgba(250,204,21,.35));color:inherit;border-radius:4px;padding:0 .12em}

/* =========================
   INDEX: Kategori Grid
   ========================= */
/* ========== INDEX: Kategori Grid (düzenli, boşluksuz) ========== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:16px;
  align-items:start;
}

/* ========== KART: tam yeniden düzen ========== */
/* Yapı: absolute üst bant + absolute ikon + içerik padding + absolute arrow */
.card{
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  /* Üst bant (72px) + ikon (64px) + sağ alt ok için boşluklar */
  padding: 82px 64px 20px 98px;   /* top right bottom left */
  min-height: 150px;
  color: inherit; text-decoration: none;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease;
}

/* Üst başlık bandı */
.card::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 72px;
  background: color-mix(in srgb, var(--cat, var(--accent)) 18%, transparent);
}

/* Önceki pseudo / pil görünümlerini kesin */
.card::after{ content: none !important; }

/* İkon: sabit konum, bant içinde kapsül */
.card__icon{
  position: absolute;
  left: 16px; top: 14px;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--cat, var(--accent)) 26%, transparent);
  outline: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 38%, var(--border));
  z-index: 1;
}

/* İçerik alanı: artık ek paddingsiz, çünkü dış padding verildi */
.card__body{ padding: 0; min-width: 0; }
.card__title{
  margin: 0 0 8px 0;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.35;
  word-break: break-word;
}
.card__meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.count-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in srgb, var(--cat, var(--accent)) 80%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat, var(--accent)) 20%, transparent);
}

/* OK (arrow): SAĞ-ALT sabit — hem .card__arrow hem fallback <i.fa-arrow-right-long> */
.card__arrow,
.card > .fa-arrow-right-long{
  position: absolute;
  right: 14px; bottom: 14px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.card:hover .card__arrow,
.card:hover > .fa-arrow-right-long{
  transform: translateX(2px);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-color: color-mix(in srgb, var(--cat, var(--accent)) 40%, var(--border));
}

/* Hover yükselme */
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Küçük ekran düzeni */
@media (max-width:560px){
  .grid{ grid-template-columns: 1fr; }
  .card{ padding: 78px 56px 18px 92px; }
}


/* =========================
   Breadcrumb (category)
   ========================= */
.crumbs{margin-bottom:12px}
.crumbs__link{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.crumbs__link:hover{text-decoration:underline}

/* =========================
   Category Header
   ========================= */
.cathead{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;
  background:var(--panel);border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow);padding:14px;
}
.cathead__icon{
  width:56px;height:56px;display:grid;place-items:center;border-radius:16px;
  background:color-mix(in srgb, var(--cat,var(--accent)) 24%, transparent);
  outline:1px solid color-mix(in srgb, var(--cat,var(--accent)) 36%, var(--border));
}
.cathead__title{margin:0 0 4px 0;font:800 22px/1.25 inherit}
.cathead__desc{margin:0;color:var(--muted)}

/* =========================
   Questions (category)
   ========================= */
.section{margin-top:12px}
.qlist{margin-top:12px}
.q{
  border:1px solid var(--border);border-radius:16px;
  background:var(--surface);box-shadow:var(--shadow);
  margin-bottom:12px;overflow:hidden;
}
.q__head{
  width:100%;display:grid;grid-template-columns:1fr auto;gap:8px;
  padding:12px 14px;border:none;background:transparent;color:inherit;text-align:left;cursor:pointer;
}
.q__head:hover{background:rgba(255,255,255,.03)}
.q__title{font-weight:800}
.q__right{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.q__body{padding:12px 14px 14px;border-top:1px dashed var(--border);animation:fade .18s ease}
.q__answer{white-space:pre-wrap;margin-bottom:10px}
@keyframes fade{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}

.badge{display:inline-block;font-size:12px;font-weight:800;padding:4px 8px;border-radius:999px;color:#0b3012;background:#86efac;border:1px solid #34d399}

/* Media */
.media{margin-top:10px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0a0d14}
.media img,.media video{width:100%}

/* =========================
   Durumlar & Yardımcılar
   ========================= */
.empty,.muted,.error,.loading{
  display:grid;place-items:center;gap:8px;padding:22px;
  color:var(--muted);background:transparent;border:1px dashed var(--border);border-radius:var(--radius)
}
.error{color:#ef4444}
[hidden]{display:none !important}

/* Scrollbar (ops.) */
@media (pointer:fine){
  *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--muted) 40%, transparent) transparent}
  *::-webkit-scrollbar{height:10px;width:10px}
  *::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--muted) 40%, transparent);border-radius:999px;border:2px solid transparent;background-clip:content-box}
}

/* Responsive */
@media (max-width:560px){
  .searchbar{border-radius:14px}
  .card{grid-template-columns:56px 1fr;padding-bottom:52px}
  .cathead{grid-template-columns:1fr;row-gap:8px}
}
/* Rich içindeki görselleri taşırma ve kompakt görünüm */
.rich img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: .4rem 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Kompakt media kutusu (image/video) */
.media.is-compact{
  max-width: 420px;
  margin: .6rem 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #0a0d14;
  box-shadow: var(--shadow);
}
.media--image .media__thumb{
  display: block;
  position: relative;
  overflow: hidden;
}
.media--image .media__thumb img{
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition: transform .25s ease;
}
.media--image .media__thumb:hover img{ transform: scale(1.03); }
.media__caption{
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px 8px;
  background: rgba(255,255,255,.03);
  border-top: 1px dashed var(--border);
}

/* Lightbox */
.lb[hidden]{ display:none !important; }
.lb{
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
}
.lb__backdrop{
  position: absolute; inset: 0; background: rgba(0,0,0,.6);
  border: none; padding: 0; margin: 0; cursor: zoom-out;
}
.lb__inner{
  position: relative; z-index: 1; max-width: 92vw; max-height: 90vh;
}
.lb__inner img{
  max-width: 92vw; max-height: 90vh;
  display: block; border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.lb__close{
  position: absolute; top: 8px; right: 8px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--border);
  background: rgba(0,0,0,.35); color: #fff; cursor: pointer;
}