/* tappon.bio MCP info + setup guide (2026-11-03). Loaded after home.css and home-nav.css; uses their tokens. */
:root{--ym-night:#0B0C1A;--ym-night2:#171936;--ym-on:#F4F5FF;--ym-on2:#B9BCD8}
body{margin:0}
.ym{max-width:1040px;margin:0 auto;padding:clamp(20px,4vw,36px) max(16px,env(safe-area-inset-right,0px)) clamp(48px,7vw,80px) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:clamp(36px,5vw,56px)}
.ym svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ym h1,.ym h2{font-family:var(--grot);letter-spacing:-.02em;text-wrap:balance;margin:0}
.ym-hero{background:var(--ym-night);color:var(--ym-on);border-radius:26px;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px;align-items:center}
.ym-hero>div{min-width:0}
.ym-hero.tek{grid-template-columns:1fr}
.ym-hero h1{font-size:clamp(30px,4.6vw,46px);line-height:1.08;font-weight:800;margin-bottom:12px}
.ym-hero p{margin:0;color:var(--ym-on2);max-width:56ch}
.ym-et{display:inline-block;background:var(--vl);color:var(--ym-night);font:700 13px var(--f);border-radius:999px;padding:4px 12px;margin-bottom:12px}
.ym-alt{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:18px;font-size:14px;font-weight:600}
.ym-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;font:700 15px var(--f);padding:12px 18px;min-height:44px;text-decoration:none;cursor:pointer;transition:transform .15s}
.ym-btn:hover{transform:translateY(-1px)}
.ym-btn:focus-visible,.ym button:focus-visible,.ym input:focus-visible,.ym summary:focus-visible{outline:3px solid var(--vc);outline-offset:2px}
.ym-lime{background:var(--vl);color:var(--ym-night)}
.ym-mavi{background:var(--vc);color:#fff}
.ym-cizgi{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.ym-sohbet{background:var(--ym-night2);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.ym-sohbet .m{border-radius:14px;padding:10px 13px;max-width:92%}
.ym-sohbet .k{background:var(--vc);color:#fff;align-self:flex-end}
.ym-sohbet .y{background:#262948;color:var(--ym-on);align-self:flex-start;display:flex;gap:8px;align-items:flex-start}
.ym-sohbet .y svg{color:var(--vl);margin-top:1px}
.ym-blok{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:16px;min-width:0}
.ym-blok h2{font-size:clamp(20px,2.6vw,24px);font-weight:800}
.ym-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.ym-liste li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.ym-liste svg{color:var(--vc);margin-top:2px}
.ym-tw{overflow-x:auto}
.ym table{border-collapse:collapse;width:100%;min-width:460px;font-size:15px}
.ym table.dar{min-width:0;max-width:420px}
.ym th,.ym td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.ym th{font-weight:700;font-size:14px}
.ym tbody tr:last-child td{border-bottom:0}
.ym td.s,.ym th.s{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ym .kr{font-family:var(--m);font-weight:500}
.ym-not{margin:0;font-size:14px;color:var(--muted);max-width:72ch}
.ym-hesap{background:var(--soft);border-radius:16px;padding:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;align-items:end}
.ym-hesap label{font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:6px;min-width:0}
.ym-hesap input{font:inherit;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--card);color:var(--fg);width:100%}
.ym-hesap .sonuc{margin:0;font-size:15px;font-weight:600}
.ym-hesap .sonuc b{font:800 26px var(--grot);color:var(--vc);display:block}
.ym-dugme{display:flex;flex-wrap:wrap;gap:10px}
.ym-sekme{display:flex;flex-wrap:wrap;gap:8px}
.ym-sekme button{font:600 14px var(--f);border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:9px 15px;min-height:42px;cursor:pointer}
.ym-sekme button[aria-selected="true"]{background:var(--vc);border-color:var(--vc);color:#fff}
.ym [role=tabpanel]{display:flex;flex-direction:column;gap:14px;min-width:0}
.ym [role=tabpanel][hidden]{display:none}
.ym-oto{display:inline-flex;background:var(--vl);color:var(--ym-night);border-radius:999px;font:700 13px var(--f);padding:4px 11px;align-self:flex-start}
.ym-oto.el{background:var(--soft);color:var(--fg)}
.ym-adim{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ym-adim li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.ym-adim li>svg{color:var(--vc);margin-top:3px}
.ym-adim li>div{min-width:0;flex:1}
.ym-adim .ym-btn{margin-top:8px}
.ym-kod{display:flex;gap:10px;align-items:center;background:var(--ym-night);color:var(--ym-on);border-radius:12px;padding:10px 12px;margin-top:8px}
.ym-kod code{font:500 13.5px var(--m);overflow-x:auto;white-space:nowrap;flex:1;min-width:0}
.ym-kod button{font:600 13px var(--f);background:var(--vl);color:var(--ym-night);border:0;border-radius:8px;padding:7px 11px;cursor:pointer;flex:none}
.ym-dene{margin:0;font:600 18px var(--grot);color:var(--vc)}
.ym-sss{display:flex;flex-direction:column}
.ym-sss details{border-bottom:1px solid var(--line);padding:12px 0}
.ym-sss details:last-child{border-bottom:0}
.ym-sss summary{font-weight:600;cursor:pointer}
.ym-sss p{margin:8px 0 0;font-size:15px;color:var(--muted)}
.ym-son{background:var(--vc);color:#fff;padding:clamp(32px,5vw,56px) max(16px,env(safe-area-inset-right,0px)) 28px max(16px,env(safe-area-inset-left,0px))}
.ym-son-ic{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px}
.ym-marka{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ym-marka p{margin:0;color:#fff;font-size:14px}
.ym-son nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;grid-column:span 2;min-width:0}
.ym-son nav div{display:flex;flex-direction:column;gap:8px;font-size:14px}
.ym-son nav a{color:#fff;text-decoration:none}
.ym-son nav a:hover{text-decoration:underline}
.ym-pay{max-width:1040px;margin:24px auto 0}
@media (max-width:760px){.ym-son nav{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.ym-btn{transition:none}.ym-btn:hover{transform:none}}
.ym-son .flogo{display:inline-flex;align-items:center;font:800 30px/1 var(--grot);letter-spacing:-.03em;color:#fff;text-decoration:none}
.ym-son .flogo em{font-style:normal;color:var(--vl)}
@media (max-width:600px){.ym table{min-width:0;font-size:14px}.ym th,.ym td{padding:9px 6px}.ym th{font-size:13px}.ym td.s,.ym th.s{white-space:normal}}