/* =========================================================
   MixAPI.store — Yardım Merkezi (/yardim/)
   Değişkenler assets/style.css'ten gelir; hepsinde yedek değer var.
   Üretici: tools/gen-yardim.js
   ========================================================= */

.yz{max-width:860px;margin:0 auto;padding:8px 20px 72px}
.yz--hub{max-width:1080px}

/* ---- başlık ---- */
.yz__hero{padding:28px 0 22px;border-bottom:1px solid var(--border,#e6e8ec);margin-bottom:30px}
.yz__etiket{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2,#4a5160);background:var(--yellow-tint,#fff6d6);
  border:1px solid var(--yellow-soft,#ffe9a3);border-radius:999px;padding:5px 12px;margin-bottom:14px}
.yz__hero h1{font-size:clamp(28px,4.4vw,42px);line-height:1.15;margin:0 0 10px;letter-spacing:-.02em}
.yz__kisa{font-size:17px;color:var(--ink-2,#4a5160);margin:0;max-width:62ch}

/* ---- gövde tipografisi ---- */
.yz__govde{font-size:16.5px;line-height:1.75;color:var(--ink,#1a1d24)}
.yz__govde h2{font-size:26px;line-height:1.25;margin:40px 0 14px;letter-spacing:-.015em;
  padding-bottom:9px;border-bottom:2px solid var(--yellow,#FFC600);display:inline-block}
.yz__govde h3{font-size:20px;margin:30px 0 10px;letter-spacing:-.01em}
.yz__govde h4{font-size:17px;margin:22px 0 8px;color:var(--ink-2,#4a5160)}
.yz__govde p{margin:0 0 15px}
.yz__govde ul,.yz__govde ol{margin:0 0 16px;padding-left:24px}
.yz__govde li{margin:0 0 7px}
.yz__govde a{color:#0b63d6;text-decoration:underline;text-underline-offset:2px}
.yz__govde a:hover{color:#08498f}
.yz__govde code{font-family:var(--ff-mono,ui-monospace,monospace);font-size:.89em;
  background:var(--g-100,#f2f4f7);border:1px solid var(--border,#e6e8ec);
  border-radius:5px;padding:1px 6px}
.yz__govde blockquote{margin:0 0 18px;padding:12px 18px;border-left:4px solid var(--yellow,#FFC600);
  background:var(--bg-soft,#fafbfc);color:var(--ink-2,#4a5160);border-radius:0 8px 8px 0}
.yz__govde strong{font-weight:700}

/* panel derin bağlantısı */
.yz-panel{white-space:nowrap;font-weight:600}
.yz-panel__ic{font-size:.8em;opacity:.65;margin-left:2px}

/* ---- tablo (dar ekranda yatay kaydırılır) ---- */
.yz-tablo{overflow-x:auto;margin:0 0 20px;border:1px solid var(--border,#e6e8ec);border-radius:11px}
.yz-tablo table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
.yz-tablo th{background:var(--g-50,#f8f9fb);text-align:left;font-weight:700;font-size:13.5px;
  letter-spacing:.02em;padding:11px 14px;border-bottom:2px solid var(--border,#e6e8ec);white-space:nowrap}
.yz-tablo td{padding:11px 14px;border-bottom:1px solid var(--border,#e6e8ec);vertical-align:top}
.yz-tablo tr:last-child td{border-bottom:0}
.yz-tablo tbody tr:hover{background:var(--bg-soft,#fafbfc)}

/* ---- :::kutu ---- */
.yz-kutu{margin:0 0 22px;padding:16px 20px;border-radius:12px;border:1px solid;border-left-width:4px}
.yz-kutu__bas{font-size:16px;margin:0 0 8px;display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.yz-kutu p:last-child,.yz-kutu ul:last-child,.yz-kutu ol:last-child{margin-bottom:0}
.yz-kutu--bilgi{background:var(--info-bg,#eaf3ff);border-color:#b9d6ff}
.yz-kutu--basari{background:var(--success-bg,#e9f8ef);border-color:#a7e2bf}
.yz-kutu--uyari{background:var(--warning-bg,#fff7e3);border-color:#f5d68a}
.yz-kutu--tehlike{background:var(--danger-bg,#fdecec);border-color:#f3b4b4}
.yz-kutu--sade{background:var(--g-50,#f8f9fb);border-color:var(--border,#e6e8ec)}

/* ---- :::adimlar ---- */
.yz-adimlar{list-style:none;counter-reset:yzad;padding:0;margin:0 0 22px}
.yz-adimlar li{counter-increment:yzad;position:relative;padding:0 0 15px 46px;margin:0}
.yz-adimlar li::before{content:counter(yzad);position:absolute;left:0;top:-1px;width:30px;height:30px;
  border-radius:9px;background:var(--yellow,#FFC600);color:var(--ink,#1a1d24);
  font-weight:800;font-size:14px;display:grid;place-items:center}
.yz-adimlar li b{display:block;margin-bottom:2px}
.yz-adimlar li span{color:var(--ink-2,#4a5160)}

/* ---- :::akordeon ---- */
.yz-akordeon{border:1px solid var(--border,#e6e8ec);border-radius:12px;margin:0 0 12px;background:#fff}
.yz-akordeon summary{cursor:pointer;padding:15px 18px;font-weight:700;font-size:16px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;border-radius:12px}
.yz-akordeon summary::-webkit-details-marker{display:none}
.yz-akordeon summary::after{content:"+";font-size:21px;font-weight:600;color:var(--ink-3,#7a8294);flex:0 0 auto}
.yz-akordeon[open] summary::after{content:"−"}
.yz-akordeon summary:hover{background:var(--bg-soft,#fafbfc)}
.yz-akordeon__ic{padding:2px 18px 16px;border-top:1px solid var(--border,#e6e8ec)}
.yz-akordeon__ic>:first-child{margin-top:14px}

/* ---- :::kartlar ---- */
.yz-kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px;margin:0 0 22px}
.yz-kart{border:1px solid var(--border,#e6e8ec);border-radius:12px;padding:15px 17px;background:var(--bg-soft,#fafbfc)}
.yz-kart b{display:block;margin-bottom:5px;font-size:15.5px}
.yz-kart p{margin:0;font-size:14.5px;color:var(--ink-2,#4a5160);line-height:1.6}

/* ---- CTA ---- */
.yz__cta{margin:48px 0 0;padding:26px 28px;border-radius:16px;
  background:var(--yellow-tint,#fff6d6);border:1px solid var(--yellow-soft,#ffe9a3)}
.yz__cta h2{font-size:21px;margin:0 0 6px}
.yz__cta p{margin:0 0 16px;color:var(--ink-2,#4a5160)}
.yz__cta-btns{display:flex;gap:11px;flex-wrap:wrap}

/* ---- diğer konular ---- */
.yz__diger{margin-top:48px;padding-top:30px;border-top:1px solid var(--border,#e6e8ec)}
.yz__diger h2{font-size:19px;margin:0 0 15px}
.yz__diger-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:11px}
.yz__diger-grid a,.yz__hub-kart{display:block;padding:14px 16px;border:1px solid var(--border,#e6e8ec);
  border-radius:12px;background:#fff;text-decoration:none;color:inherit;transition:.15s}
.yz__diger-grid a:hover,.yz__hub-kart:hover{border-color:var(--yellow,#FFC600);
  box-shadow:0 5px 18px rgba(20,24,35,.07);transform:translateY(-2px)}
.yz__diger-grid b,.yz__hub-kart b{display:block;font-size:15.5px;margin-bottom:3px}
.yz__diger-grid span,.yz__hub-kart span{font-size:13.5px;color:var(--ink-3,#7a8294);line-height:1.5}
.yz__tumu{display:inline-block;margin-top:17px;font-weight:700;color:var(--ink,#1a1d24)}

/* ---- hub ızgarası ---- */
.yz__hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:13px}

@media (max-width:560px){
  .yz{padding:4px 16px 56px}
  .yz__govde{font-size:16px}
  .yz__govde h2{font-size:23px}
  .yz-adimlar li{padding-left:40px}
}