/* =====================================================================
   SEOKaos - Google Anahtar Kelime Araci  |  shared stylesheet
   Tek CSS dosyasi. Tum renkler degiskenlerde. Ikonlar CSS mask ile
   (HTML temiz kalir, text/html orani yukselir).
   ===================================================================== */

:root{
  --bg:#f4f6f8; --bg-2:#eef2f5; --surface:#ffffff; --surface-2:#f4f8f8;
  --ink:#13171c; --ink-2:#2b323b; --muted:#5b6573; --faint:#737d8a;
  --line:#e4e9ed; --line-2:#d3dbe0;
  --accent:#0f8a6f; --accent-2:#13a282; --accent-deep:#0a5f4f; --accent-soft:#e6f4ef; --accent-ring:#bfe3d8;
  --gold:#ffcf45; --mark:#ffe6a0; --mark-ink:#5a4708; --amber:#9a6b12; --danger:#cf4a2e;
  --radius:14px; --radius-sm:10px; --radius-lg:22px;
  --sh-1:0 1px 2px rgba(19,23,28,.06);
  --sh-2:0 2px 6px rgba(19,23,28,.05),0 14px 30px -16px rgba(19,23,28,.22);
  --sh-3:0 22px 60px -30px rgba(10,95,79,.55);
  --font-primary:'Poppins','Segoe UI',-apple-system,BlinkMacSystemFont,'DejaVu Sans',sans-serif;
  --mono:"DejaVu Sans Mono",Consolas,"Courier New",monospace;
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-primary); font-size:16px; line-height:1.65; letter-spacing:.004em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(58% 50% at 86% -6%, rgba(15,138,111,.12), transparent 60%),
    radial-gradient(46% 40% at 4% 2%, rgba(19,162,130,.07), transparent 58%);
  background-repeat:no-repeat;
}
a{color:var(--accent-deep); text-underline-offset:3px;}
a:hover{color:var(--accent);}
h1,h2,h3{font-family:var(--font-primary); font-weight:700; line-height:1.16; letter-spacing:-.015em; color:var(--ink); margin:0;}
p{margin:0;}
img{max-width:100%; height:auto;}
::selection{background:var(--mark); color:var(--mark-ink);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.skip{position:absolute; left:-9999px; top:auto;}
.skip:focus{left:14px; top:12px; z-index:60; background:var(--accent); color:#fff; padding:9px 14px; border-radius:9px;}

/* ---------- Icon system (CSS mask, currentColor) ---------- */
.i{display:inline-block; width:1em; height:1em; flex:0 0 auto; background-color:currentColor;
   -webkit-mask:no-repeat center / contain; mask:no-repeat center / contain; vertical-align:-.14em;}
.i-search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");}
.i-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");}
.i-x{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");}
.i-dash{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");}
.i-clock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E");}
.i-copy{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 012-2h10'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 012-2h10'/%3E%3C/svg%3E");}
.i-download{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M4 21h16'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M4 21h16'/%3E%3C/svg%3E");}
.i-arrow{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");}
.i-help{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 115.8 1c0 2-3 2-3 4M12 17h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 115.8 1c0 2-3 2-3 4M12 17h.01'/%3E%3C/svg%3E");}
.i-list{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3C/svg%3E");}
.i-doc{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");}
.i-eye{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");}
.i-bolt{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E");}
.i-trend{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M17 7h4v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M17 7h4v4'/%3E%3C/svg%3E");}

/* ---------- Header ---------- */
.site-head{position:sticky; top:0; z-index:40; background:rgba(244,246,248,.88); -webkit-backdrop-filter:saturate(140%) blur(9px); backdrop-filter:saturate(140%) blur(9px); border-bottom:1px solid var(--line);}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; gap:14px;}
.brand{display:inline-flex; align-items:center; text-decoration:none;}
.brand img{height:38px; width:170px; object-fit:contain; object-position:left center; display:block;}
.lang-switch{display:inline-flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--line-2); border-radius:999px; padding:3px; box-shadow:var(--sh-1);}
.lang-switch a{font-size:.78rem; font-weight:600; letter-spacing:.03em; padding:6px 13px; border-radius:999px; color:var(--muted); text-decoration:none; transition:color .15s, background .15s;}
.lang-switch a:hover{color:var(--ink);}
.lang-switch a[aria-current="true"]{background:var(--accent); color:#fff;}

/* ---------- Hero ---------- */
.hero{padding:50px 0 12px;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-soft); border:1px solid var(--accent-ring); padding:6px 13px; border-radius:999px;}
.eyebrow .i{width:13px; height:13px;}
.hero h1{font-size:clamp(2.05rem,5.6vw,3.3rem); margin:18px 0 0; max-width:18ch;}
.hero h1 .accent{color:var(--accent);}
.lede{font-size:1.08rem; color:var(--ink-2); max-width:58ch; margin:16px 0 0;}
.lede b{color:var(--ink); font-weight:600;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
.chip{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:500; color:var(--ink-2); background:var(--surface); border:1px solid var(--line-2); border-radius:999px; padding:7px 13px; box-shadow:var(--sh-1);}
.chip .i{width:15px; height:15px; color:var(--accent);}

/* ---------- Tool panel ---------- */
.tool{margin:26px 0 4px;}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--sh-2); padding:24px;}
.field{margin:0;}
.field + .field{margin-top:0;}
label.lbl{display:block; font-size:.8rem; font-weight:600; color:var(--ink-2); margin:0 0 7px; letter-spacing:.01em;}
.kw-input input{width:100%; font-family:var(--font-primary); font-size:1.1rem; color:var(--ink); background:var(--surface-2); border:1.5px solid var(--line-2); border-radius:var(--radius); padding:15px 16px; transition:border-color .15s, box-shadow .15s, background .15s;}
.kw-input input::placeholder{color:var(--faint);}
.kw-input input:focus{outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--accent-soft);}
.selects{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px;}
.selects select{width:100%; font-family:var(--font-primary); font-size:.96rem; color:var(--ink); background:var(--surface-2); border:1.5px solid var(--line-2); border-radius:var(--radius); padding:13px 14px; cursor:pointer; transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6573' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:18px; padding-right:40px;}
.selects select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.custom-code{display:none; margin-top:9px; width:100%; font-family:var(--font-primary); font-size:.92rem; color:var(--ink); background:#fff; border:1.5px solid var(--accent-ring); border-radius:10px; padding:11px 12px;}
.custom-code.show{display:block;}
.custom-code::placeholder{color:var(--faint);}
.custom-code:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}

.opts-head{font-size:.8rem; font-weight:600; color:var(--ink-2); margin:18px 0 9px; letter-spacing:.01em;}
.opts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border:0; padding:0; margin:0; min-width:0;}
.opt{display:flex; align-items:flex-start; gap:10px; background:var(--surface-2); border:1.5px solid var(--line-2); border-radius:12px; padding:11px 12px; cursor:pointer; position:relative; transition:border-color .15s, background .15s, transform .12s; -webkit-user-select:none; user-select:none;}
.opt:hover{border-color:var(--accent-ring); transform:translateY(-1px);}
.opt input{position:absolute; opacity:0; width:0; height:0;}
.opt .box{flex:0 0 auto; width:20px; height:20px; border:2px solid var(--line-2); border-radius:6px; background:#fff; display:grid; place-items:center; margin-top:1px; transition:background .15s, border-color .15s;}
.opt .box .i{width:13px; height:13px; color:#fff; opacity:0; transform:scale(.6); transition:opacity .15s, transform .15s;}
.opt input:checked + .box{background:var(--accent); border-color:var(--accent);}
.opt input:checked + .box .i{opacity:1; transform:scale(1);}
.opt input:focus-visible + .box{box-shadow:0 0 0 4px var(--accent-soft);}
.opt .txt{font-size:.86rem; font-weight:500; color:var(--ink); line-height:1.32;}
.opt .txt small{display:block; font-weight:400; color:var(--muted); font-size:.74rem; margin-top:2px;}
.opt input:checked ~ .txt{color:var(--accent-deep);}

/* ---------- Math captcha ---------- */
.captcha{display:flex; align-items:center; gap:12px; margin-top:16px; padding:12px 14px; background:var(--accent-soft); border:1.5px solid var(--accent-ring); border-radius:12px; flex-wrap:wrap; transition:background .2s, border-color .2s;}
.captcha .q{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--accent-deep); font-size:.95rem;}
.captcha .q .i{width:17px; height:17px;}
.captcha input{width:92px; font-family:var(--font-primary); font-size:1rem; font-weight:600; text-align:center; color:var(--ink); background:#fff; border:1.5px solid var(--line-2); border-radius:10px; padding:9px 10px;}
.captcha input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.captcha .state{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:500; color:var(--muted);}
.captcha .state .i{width:15px; height:15px;}
.captcha.ok{background:#e9f7ef; border-color:#a8e0c2;}
.captcha.ok .state{color:var(--accent-deep);}
.captcha.shake{animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}}

.submit-row{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; flex-wrap:wrap;}
.btn-row{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;}
.quota{display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:500; color:var(--muted);}
.quota .num{font-weight:700; color:var(--accent-deep); font-variant-numeric:tabular-nums;}
.quota.low .num{color:var(--danger);}
.quota .i{width:15px; height:15px; color:var(--accent);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-primary); font-size:.96rem; font-weight:600; border-radius:12px; border:1.5px solid transparent; padding:13px 22px; cursor:pointer; transition:transform .12s, box-shadow .15s, background .15s, color .15s, border-color .15s; text-decoration:none;}
.btn .i{width:18px; height:18px;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 20px -10px rgba(15,138,111,.8);}
.btn-primary:hover{background:var(--accent-deep); color:#fff;}
.btn-primary:disabled{background:var(--line-2); color:var(--faint); cursor:not-allowed; box-shadow:none; transform:none;}
.btn-ghost{background:var(--surface); color:var(--ink-2); border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--accent-ring); color:var(--accent-deep); background:var(--surface-2);}

/* ---------- Results ---------- */
.results{margin-top:18px;}
.result-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 0 4px; border-top:1px dashed var(--line-2);}
.result-stat{font-size:.85rem; font-weight:600; color:var(--ink-2);}
.filter-wrap{position:relative; flex:1 1 200px; min-width:160px;}
.filter-wrap .i{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--faint);}
.filter-wrap input{width:100%; font-family:var(--font-primary); font-size:.86rem; color:var(--ink); background:var(--surface-2); border:1.5px solid var(--line-2); border-radius:10px; padding:9px 11px 9px 32px;}
.filter-wrap input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.only-results{display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:500; color:var(--muted); cursor:pointer;}
.only-results input{accent-color:var(--accent); width:15px; height:15px;}
.result-actions{display:inline-flex; gap:8px;}
.result-actions .btn{padding:9px 13px; font-size:.82rem; border-radius:10px;}

.progress{margin:14px 0 4px;}
.progress-track{height:7px; background:var(--bg-2); border-radius:99px; overflow:hidden; border:1px solid var(--line);}
.progress-bar{height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:99px; transition:width .25s ease;}
.progress-text{font-size:.76rem; color:var(--muted); margin-top:6px; font-variant-numeric:tabular-nums;}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:13px; margin-top:16px;}
.gcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column;}
.gcard.empty{opacity:.6;}
.gcard-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 13px; background:var(--surface-2); border-bottom:1px solid var(--line);}
.gcard-q{font-family:var(--mono); font-size:.82rem; font-weight:700; color:var(--accent-deep); word-break:break-word;}
.gcard-count{flex:0 0 auto; font-size:.7rem; font-weight:600; color:var(--muted); background:var(--bg-2); border-radius:99px; padding:3px 9px; font-variant-numeric:tabular-nums;}
.gcard ul{list-style:none; margin:0; padding:6px; display:flex; flex-direction:column; gap:2px;}
.gcard li{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.88rem; color:var(--ink-2); padding:7px 9px; border-radius:8px; cursor:default; transition:background .12s;}
.gcard li:hover{background:var(--surface-2);}
.gcard li mark{background:var(--mark); color:var(--mark-ink); padding:0 1px; border-radius:3px;}
.gcard li .cp{flex:0 0 auto; width:26px; height:26px; border-radius:7px; border:1px solid transparent; background:transparent; color:var(--faint); display:grid; place-items:center; cursor:pointer; opacity:0; transition:opacity .12s, color .12s, border-color .12s, background .12s;}
.gcard li:hover .cp{opacity:1;}
.gcard li .cp:hover{color:var(--accent-deep); border-color:var(--line-2); background:#fff;}
.gcard li .cp .i{width:14px; height:14px;}
.gnote{font-size:.78rem; color:var(--faint); padding:10px 13px;}
.spinner{width:16px; height:16px; border:2.5px solid var(--line-2); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Content blocks ---------- */
.block{padding:56px 0;}
.block.tint{background:linear-gradient(180deg,var(--bg-2),var(--bg)); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.block h2{font-size:clamp(1.55rem,3.4vw,2.05rem);}
.lead-row{max-width:64ch;}
.sub{color:var(--muted); font-size:1.02rem; margin:10px 0 0;}
.prose{max-width:70ch; margin:22px 0 0; color:var(--ink-2); font-size:1rem;}
.prose p + p{margin-top:14px;}
.prose a{font-weight:600;}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px;}
.step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 20px 22px; box-shadow:var(--sh-1); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.step::before{content:""; position:absolute; left:0; top:0; height:3px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .35s ease;}
.step:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:var(--accent-ring);}
.step:hover::before{width:100%;}
.step .no{font-size:2.1rem; font-weight:700; color:var(--accent); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; transition:transform .25s ease, color .2s ease; display:inline-block;}
.step:hover .no{transform:scale(1.12); color:var(--accent-deep);}
.step h3{font-size:1.12rem; margin:12px 0 6px;}
.step p{color:var(--muted); font-size:.92rem;}
.step code{font-family:var(--mono); font-size:.84em; background:var(--accent-soft); color:var(--accent-deep); padding:1px 6px; border-radius:5px;}

/* infographic */
.infographic{margin-top:30px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--sh-1); padding:22px 18px;}
.infographic figcaption{text-align:center; font-size:.82rem; color:var(--muted); margin-top:8px;}
.infographic svg{display:block; width:100%; height:auto;}

/* statistics */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 18px; box-shadow:var(--sh-1);}
.stat .big{display:flex; align-items:baseline; gap:6px; font-size:2.1rem; font-weight:700; color:var(--accent); letter-spacing:-.02em; line-height:1;}
.stat p{margin:11px 0 0; font-size:.88rem; color:var(--ink-2); line-height:1.5;}
.stat .src{display:inline-block; margin-top:10px; font-size:.7rem; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.05em;}

/* comparison table */
.table-scroll{margin-top:28px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--sh-1); background:var(--surface); -webkit-overflow-scrolling:touch;}
table.cmp{width:100%; border-collapse:collapse; min-width:560px;}
table.cmp caption{text-align:left; padding:16px 18px 0; font-size:.82rem; color:var(--muted); caption-side:top;}
table.cmp th, table.cmp td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle;}
table.cmp thead th{font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; background:var(--surface-2);}
table.cmp thead th.me{color:var(--accent-deep);}
table.cmp tbody th{font-weight:600; font-size:.9rem; color:var(--ink-2);}
table.cmp td{font-size:.9rem; color:var(--ink-2);}
table.cmp col.col-me{background:var(--accent-soft);}
table.cmp tr:last-child th, table.cmp tr:last-child td{border-bottom:0;}
.yes,.no,.part{display:inline-flex; align-items:center; gap:7px; font-weight:500; font-size:.88rem;}
.yes{color:var(--accent-deep);} .no{color:var(--faint);} .part{color:var(--amber);}
.yes .i,.no .i,.part .i{width:16px; height:16px;}

/* features */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px;}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--sh-1); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.feat:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--accent-ring);}
.feat .ic{display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:var(--accent-soft); color:var(--accent-deep); margin-bottom:14px;}
.feat .ic .i{width:21px; height:21px;}
.feat h3{font-size:1.06rem; margin:0 0 5px;}
.feat p{color:var(--muted); font-size:.9rem;}

/* word-group kartlari (taranabilir, fragment uslubu) */
.mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:26px;}
.mini{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px; box-shadow:var(--sh-1);}
.mini b{display:block; font-size:.95rem; color:var(--accent-deep); margin-bottom:3px;}
.mini span{font-size:.85rem; color:var(--muted);}
.mini code{font-family:var(--mono); font-size:.82em; background:var(--accent-soft); color:var(--accent-deep); padding:1px 5px; border-radius:5px;}

/* tikli liste (taranabilir maddeler) */
.ticks{list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:11px 24px;}
.ticks li{position:relative; padding-left:27px; font-size:.92rem; color:var(--ink-2); line-height:1.45;}
.ticks li::before{content:""; position:absolute; left:0; top:2px; width:17px; height:17px; background-color:var(--accent); -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");}
.ticks li b{color:var(--ink); font-weight:600;}
@media (max-width:760px){.mini-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.ticks{grid-template-columns:1fr;}}
@media (max-width:440px){.mini-grid{grid-template-columns:1fr;}}

/* faq */
.faq{margin-top:26px; display:flex; flex-direction:column; gap:10px;}
.qa{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--sh-1); transition:border-color .15s;}
.qa[open]{border-color:var(--accent-ring);}
.qa summary{list-style:none; cursor:pointer; padding:16px 18px; font-weight:600; font-size:.98rem; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:12px;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary .pm{flex:0 0 auto; width:22px; height:22px; position:relative;}
.qa summary .pm::before, .qa summary .pm::after{content:""; position:absolute; background:var(--accent); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.qa summary .pm::before{left:4px; right:4px; top:10px; height:2.4px;}
.qa summary .pm::after{top:4px; bottom:4px; left:10px; width:2.4px;}
.qa[open] summary .pm::after{transform:scaleY(0); opacity:0;}
.qa .a{padding:0 18px 17px; color:var(--ink-2); font-size:.93rem; line-height:1.6;}
.qa .a a{font-weight:600;}

/* ---------- Footer ---------- */
.site-foot{background:#0e1418; color:#cdd6dd; margin-top:8px;}
.site-foot .wrap{padding:44px 22px 30px;}
.foot-cta{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.1);}
.foot-cta p{font-size:1.18rem; font-weight:600; color:#fff; letter-spacing:-.01em;}
.btn-home{display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:#fff; font-weight:600; font-size:.96rem; padding:13px 22px; border-radius:12px; text-decoration:none; transition:background .15s, transform .12s;}
.btn-home:hover{background:var(--accent-2); color:#fff; transform:translateY(-2px);}
.btn-home .i{width:18px; height:18px;}
.foot-meta{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:22px; font-size:.84rem; color:#94a1ab;}
.foot-meta a{color:#cdd6dd; text-decoration:none;}
.foot-meta a:hover{color:#fff; text-decoration:underline;}
.foot-meta nav{display:inline-flex; gap:18px; flex-wrap:wrap;}
.disclaimer{margin:18px 0 0; font-size:.76rem; color:#76828c; line-height:1.6; max-width:80ch;}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; font-size:.86rem; font-weight:500; padding:11px 18px; border-radius:11px; box-shadow:0 16px 40px -14px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .opts{grid-template-columns:1fr 1fr;}
  .steps, .features{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .hero{padding:36px 0 8px;}
  .block{padding:44px 0;}
  .foot-cta p{font-size:1.05rem;}
}
@media (max-width:440px){
  .opts{grid-template-columns:1fr;}
  .selects{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .result-actions{width:100%;}
  .result-actions .btn{flex:1;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.opt-toggle{margin-top:16px;}