/* ========================================================================== pixepi — arac.css · araç sayfası ve kategori sayfası bileşenleri -------------------------------------------------------------------------- Ortak sistem: fonts.css + site.css + site.js (+ bu dosya). Sayfa kendi marka rengini taşır: (GörselKüçült: #7c5cff · KargoLabel: #efa448 — ürün manifestoları esas alınır.) ========================================================================== */ /* --- Araç kahramanı ------------------------------------------------------ */ .tool-hero{ position:relative;overflow:hidden; border:1px solid var(--line);border-radius:var(--radius-xl); padding:clamp(24px,3.4vw,38px); background: radial-gradient(560px 260px at 88% -10%,rgba(var(--accent-rgb),.16),transparent 70%), linear-gradient(140deg,#0d1624,#0a111d); } .tool-hero .tool-top{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap} .tool-badge{ display:grid;place-items:center;width:58px;height:58px;flex:none;border-radius:16px; border:1px solid rgba(var(--accent-rgb),.38);background:rgba(var(--accent-rgb),.14);color:var(--accent); } .tool-badge svg{width:28px;height:28px} .tool-hero h1{font-size:clamp(26px,3.6vw,40px);font-weight:800;line-height:1.1;margin-top:10px} .tool-hero .tool-tagline{margin-top:10px;max-width:620px;font-size:16px;line-height:1.65;color:var(--muted)} .tool-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px} .tool-meta .cat-tag{font-size:13px} .tool-meta .domain-link{font-size:13px;color:var(--muted-2)} .tool-meta .domain-link:hover{color:#c5a2ff} .tool-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} /* --- Çalışma tezgâhı (tasarım demosu) ----------------------------------- */ .workbench{margin-top:22px;border:1px solid var(--line);border-radius:18px;background:#0c141f;padding:clamp(18px,2.6vw,26px)} .dropzone{ display:grid;place-items:center;gap:12px;text-align:center; padding:clamp(34px,5vw,54px) 24px; border:1.5px dashed #2f3f5d;border-radius:16px;background:#0a111d; transition:border-color .18s,background .18s; } .dropzone:hover{border-color:rgba(var(--accent-rgb),.6);background:#0b1322} .dz-ico{ display:grid;place-items:center;width:58px;height:58px;border-radius:18px; border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.13);color:var(--accent); } .dz-ico svg{width:26px;height:26px} .dropzone strong{font-size:17px;font-weight:600} .dropzone .dz-hint{font-size:13px;color:var(--muted-2)} .opt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px} .opt-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .opt{border:1px solid var(--line);border-radius:12px;background:#0b1320;padding:14px 16px} .opt label{display:block;margin-bottom:9px;font-size:13px;color:var(--muted)} .opt output{display:block;margin-top:8px;font-size:13px;color:var(--accent)} .range{width:100%;height:26px;accent-color:var(--accent)} .opt select{width:100%;height:38px;border:1px solid var(--line-2);border-radius:9px;background:#080f19;padding:0 10px;font-size:14px} .opt .opt-hint{margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--muted-2)} .opt .opt-range-labels{display:flex;justify-content:space-between;gap:10px;margin-top:2px;font-size:12px;color:var(--muted-2)} .opt .num{width:100%;height:38px;border:1px solid var(--line-2);border-radius:9px;background:#080f19;padding:0 10px;font-size:14px;color:var(--ink)} .opt .num::placeholder{color:var(--muted-2)} .opt .switch{display:flex;align-items:center;gap:10px;margin-bottom:0;cursor:pointer;font-size:14px;color:var(--body)} .opt .switch input{position:absolute;opacity:0;width:1px;height:1px} .opt .switch-track{position:relative;width:40px;height:22px;flex:none;border-radius:999px;background:#283448;border:1px solid var(--line-2);transition:background .16s,border-color .16s} .opt .switch-track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#c6d2e6;transition:transform .16s,background .16s} .opt .switch input:checked + .switch-track{background:var(--accent);border-color:var(--accent)} .opt .switch input:checked + .switch-track:after{transform:translateX(18px);background:#08101c} .opt .switch input:focus-visible + .switch-track{box-shadow:var(--ring)} .workbench-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px} .workbench-actions .tool-note{margin:0;font-size:13px;color:var(--muted-2)} @media (max-width:900px){.opt-grid{grid-template-columns:1fr 1fr}} @media (max-width:600px){.opt-grid{grid-template-columns:1fr}} /* --- İlgili araçlar + ürün imzası --------------------------------------- */ .related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} @media (max-width:980px){.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.related-grid{grid-template-columns:1fr}} .tool-signature{ margin-top:36px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between; gap:14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;background:#0b1320; font-size:14px;color:var(--muted); } .tool-signature strong{color:var(--body);font-weight:600} .tool-signature img{height:22px;width:auto;opacity:.9} /* --- Kategori kahramanı + araç listesi ---------------------------------- */ .cat-hero{ position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-xl); padding:clamp(24px,3.4vw,36px); background: radial-gradient(520px 240px at 6% -20%,rgba(var(--accent-rgb),.18),transparent 70%), linear-gradient(140deg,#0d1624,#0a111d); } .cat-hero-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .cat-hero .cat-badge{ display:grid;place-items:center;width:54px;height:54px;border-radius:15px; border:1px solid rgba(var(--accent-rgb),.38);background:rgba(var(--accent-rgb),.14);color:var(--accent); } .cat-hero .cat-badge svg{width:26px;height:26px} .cat-hero h1{font-size:clamp(25px,3.4vw,38px);font-weight:800;line-height:1.12} .cat-hero .cat-lead{margin-top:12px;max-width:640px;font-size:16px;line-height:1.7;color:var(--muted)} .cat-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .cat-fact{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:#0b1320;font-size:13px;color:var(--muted)} .cat-fact:before{content:"";width:7px;height:7px;border-radius:2px;background:var(--accent)} .cat-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} /* --- Küçük yardımcılar --------------------------------------------------- */ .anchor-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .anchor-list a{font-size:13.5px;color:#c0aeff} .anchor-list a:hover{color:#e0d6ff}