:root{
  --ink:#101426; --muted:#6f7488; --line:#e7eaf5; --bg:#f7f8fc;
  --blue:#2563eb; --indigo:#4f46e5; --violet:#6a3be8; --pink:#ec008c;
  --grad:linear-gradient(90deg,#2643e6 0%,#8a2be2 55%,#ec008c 100%);
  --pad:clamp(14px,4vw,32px);
  --pad-card:clamp(14px,3vw,24px);
  --r:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;width:100%}
body.lock{overflow:hidden}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}
a{text-decoration:none;color:inherit}
img,svg,canvas{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:6px}
.page{max-width:960px;margin:0 auto;padding:0 var(--pad);width:100%}
/* scroll-reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--rd,0s),transform .6s ease var(--rd,0s)}
.reveal.in{opacity:1;transform:none}
/* ================= HEADER ================= */
.header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(16,20,38,.06)}
.header-inner{max-width:960px;margin:0 auto;height:clamp(60px,10vw,96px);display:flex;align-items:center;gap:10px;padding:0 14px 0 var(--pad)}
.logo{display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.logo > svg{width:clamp(24px,4vw,34px);height:auto;flex:none}
/* ---- LOGO WORDMARK ---- */
.logo-text{font-size:clamp(17px,2.6vw,22px);font-weight:800;letter-spacing:-.6px;white-space:nowrap;
 background-image:linear-gradient(115deg,#e8008f 0%,#8a2be2 90%);
 -webkit-background-clip:text;background-clip:text;color:transparent;transition:filter .2s}
.logo-text span{background-image:linear-gradient(115deg,#2563eb 0%,#00a3ff 90%);
 -webkit-background-clip:text;background-clip:text;color:transparent}
.logo:hover .logo-text{filter:brightness(1.18)}
.nav{display:flex;align-items:center;gap:clamp(14px,2.9vw,28px);margin-left:clamp(6px,2.6vw,26px);height:100%;min-width:0}
.nav a{position:relative;color:#20243c;font-size:clamp(11px,1.3vw,12.5px);font-weight:600;transition:.15s;white-space:nowrap}
.nav a:hover{color:var(--indigo)}
.nav a.active{color:var(--indigo)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:3px;border-radius:2px;background:linear-gradient(90deg,#2643e6,#8a2be2)}
.header-actions{margin-left:auto;display:flex;gap:8px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;height:clamp(36px,4.5vw,40px);padding:0 clamp(12px,1.8vw,16px);font-size:clamp(11.5px,1.3vw,12.5px);font-weight:700;border:none;transition:.2s;white-space:nowrap}
.btn-ghost{background:#fff;border:1px solid #e3e6f3;color:#171b34}
.btn-ghost:hover{border-color:#c9cdea;background:#f6f7fd}
.btn-grad{background:linear-gradient(90deg,#8a2be2,#ec008c);color:#fff;box-shadow:0 6px 16px rgba(236,0,140,.25)}
.btn-grad:hover{filter:brightness(1.07)}
.hamburger{display:none;margin-left:auto;background:none;border:none;padding:8px;color:#171b34;border-radius:8px;flex:none}
/* mobil çekmece */
.mm-backdrop{position:fixed;inset:0;background:rgba(13,17,40,.45);opacity:0;pointer-events:none;transition:.25s;z-index:60}
.mm-backdrop.show{opacity:1;pointer-events:auto}
.mobile-menu{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(320px,88vw);background:#fff;z-index:70;transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.25,1);padding:18px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.mobile-menu.show{transform:translateX(0)}
.mm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mm-close{background:none;border:none;padding:8px;color:#171b34;border-radius:8px}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{padding:13px 12px;border-radius:10px;font-size:14px;font-weight:600;color:#20243c}
.mobile-menu nav a:hover{background:#f4f5fc;color:var(--indigo)}
.mobile-menu nav a.active{color:var(--indigo);background:#eef0ff}
.mm-actions{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:18px}
.mm-actions .btn{width:100%;height:46px;font-size:13px}
/* ================= REKLAM ================= */
.ad{width:100%;max-width:770px;margin:clamp(10px,2vw,16px) auto 0;background:#eef0f9;border-radius:12px;
 display:flex;align-items:center;gap:clamp(10px,2vw,16px);
 padding:clamp(10px,2.2vw,16px) clamp(14px,3vw,24px);
 min-height:clamp(50px,8.5vw,77px)}
.ad-icon{width:clamp(28px,5vw,40px);height:auto;flex:none}
.ad-title{font-size:clamp(12px,1.7vw,13px);font-weight:600;color:#171b34;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-size{margin-left:auto;flex:none;font-size:10px;font-weight:800;color:#6b5cf6;background:#e2ddfb;border:1px dashed #b7a8f8;border-radius:999px;padding:4px 10px;letter-spacing:.3px;white-space:nowrap}
/* ================= YÜKLEME KARTI ================= */
.card{background:#fff;border:1px solid #eceef8;border-radius:var(--r);margin-top:clamp(16px,3vw,26px);box-shadow:0 1px 2px rgba(16,20,38,.04)}
.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 var(--pad-card)}
.tab{position:relative;display:flex;align-items:center;gap:10px;height:clamp(54px,8vw,78px);font-size:clamp(12.5px,1.8vw,14px);font-weight:700;color:var(--ink);white-space:nowrap}
.tab svg{flex:none;width:clamp(16px,2.4vw,20px);height:auto}
.tab::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-1px;height:4px;border-radius:3px;background:linear-gradient(90deg,#2643e6,#7a2be0)}
.dropzone{margin:var(--pad-card) var(--pad-card) 0;height:clamp(200px,42vw,300px);border:2px dashed #c9cdea;border-radius:12px;background:#f6f7fd;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s;padding:16px;text-align:center}
.dropzone.drag{border-color:var(--indigo);background:#eef0ff}
.dropzone.flash{border-color:#7a2be0;box-shadow:0 0 0 5px rgba(122,43,224,.22)}
.dropzone > svg{width:clamp(60px,12vw,92px);height:auto}
.dz-title{font-size:clamp(14px,2.4vw,17px);font-weight:700;color:#171b34;margin-top:clamp(10px,2vw,20px)}
.dz-sub{font-size:clamp(11.5px,1.9vw,13.5px);color:var(--muted);margin-top:8px}
.dz-sub a{color:#2563eb;font-weight:600}
.file{margin:clamp(12px,3vw,20px) var(--pad-card) 0;padding:10px;background:#fbfbfe;border:1px solid #edeff9;border-radius:12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.file img{width:clamp(52px,9vw,76px);height:clamp(52px,9vw,76px);border-radius:10px;object-fit:cover;flex:none}
.file-info{flex:1 1 140px;min-width:0}
.file-name{font-size:clamp(13px,2vw,15px);font-weight:700;overflow-wrap:anywhere}
.file-meta{display:flex;gap:clamp(16px,6vw,58px);margin-top:8px;font-size:clamp(11px,1.6vw,12.5px);color:#8a8fa8;flex-wrap:wrap}
.file-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.icon-btn{background:none;border:none;padding:6px;display:inline-flex;color:#141838;transition:.15s;border-radius:8px}
.icon-btn:hover{transform:scale(1.08)}
.lock-chip{display:none;align-items:center;gap:6px;background:#eef0ff;color:#4f46e5;border-radius:999px;padding:5px 10px;font-size:10.5px;font-weight:700;white-space:nowrap}
.lock-chip svg{flex:none}
.file.protected .lock-chip{display:inline-flex}
/* ---- seçenekler ---- */
.opts{margin:clamp(12px,3vw,20px) var(--pad-card) 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2.5vw,20px)}
.opt{border:1px solid #edeff9;border-radius:12px;padding:clamp(12px,2vw,16px);min-width:0}
.opt-label{display:flex;align-items:center;gap:8px;font-size:clamp(11.5px,1.6vw,12.5px);font-weight:600;color:#565b74;flex-wrap:wrap}
.opt-label svg{flex:none}
.opt-label .info{color:#9aa0b5;display:inline-flex}
.opt-link{display:flex;flex-direction:column}
.opt-action{margin-top:12px;width:100%;min-height:clamp(44px,6vw,48px);display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid #e3e6f3;border-radius:10px;padding:0 14px;color:var(--indigo);font-size:clamp(13px,1.8vw,14px);font-weight:700;line-height:1.2;text-decoration:none;transition:border-color .15s,background-color .15s,box-shadow .15s}
.opt-action:hover{border-color:#c9cdea;background:#f8f8ff;color:var(--indigo)}
.opt-action:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.upload-actions{margin:12px var(--pad-card) 0;display:flex;justify-content:flex-end;align-items:center;min-height:38px}
.upload-actions:empty{display:none}
.upload-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 13px;border:1px solid #e3e6f3;border-radius:10px;background:#fff;color:#565b74;font:700 11.5px/1 'Inter',sans-serif;transition:border-color .15s,background-color .15s,color .15s;cursor:pointer}
.upload-actions button:hover{border-color:#fecdd3;background:#fff1f2;color:#be123c}
.upload-actions button:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.upload-actions button.hidden,.upload-actions[hidden]{display:none}
.selected-files-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:right}
.selected-files-summary .upload-actions{margin:0;min-height:38px;flex:none;order:-1}
.selected-files-summary [data-selected-files-summary-text]{margin-left:auto;white-space:nowrap}
.opt-action i{flex:none;transition:transform .15s}
.opt-action:hover i{transform:translateX(2px)}
.select{margin-top:12px;width:100%;height:clamp(44px,6vw,48px);appearance:none;background:#fff;border:1px solid #e3e6f3;border-radius:10px;padding:0 14px;font:600 clamp(13px,1.8vw,14px) 'Inter',sans-serif;color:var(--ink);outline:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23141838' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 14px center;transition:.15s}
.select:hover,.select:focus{border-color:#c9cdea}
/* ---- şifre koruması ---- */
.opt-pass{grid-column:1/-1}
.opt-pass-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.switch{position:relative;width:42px;height:24px;flex:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#d9dcee;border-radius:999px;transition:.2s;cursor:pointer}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.switch input:checked + .slider{background:linear-gradient(90deg,#2643e6,#8a2be2)}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch input:focus-visible + .slider{outline:2px solid var(--indigo);outline-offset:2px}
.pass-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.opt-pass.on .pass-body{max-height:160px}
.pass-input{margin-top:12px;display:flex;align-items:center;gap:8px;border:1px solid #e3e6f3;border-radius:10px;padding:0 8px 0 14px;height:48px;background:#fff;transition:border-color .15s}
.pass-input:focus-within{border-color:#c9cdea}
.pass-input input{flex:1;border:none;outline:none;font:600 clamp(13px,1.8vw,14px) 'Inter',sans-serif;color:var(--ink);background:transparent;min-width:0;letter-spacing:.02em}
.pass-eye{color:#8a8fa8}
.pass-eye .eye-off{display:none}
.pass-eye.active .eye-off{display:block}
.pass-eye.active .eye-on{display:none}
.pass-gen{display:inline-flex;align-items:center;gap:6px;border:none;background:#eef0ff;color:#4f46e5;font-size:11.5px;font-weight:700;padding:9px 12px;border-radius:8px;transition:.15s;flex:none}
.pass-gen:hover{background:#e2e6ff}
.pass-hint{margin-top:10px;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pass-hint svg{flex:none}
/* ---- yükle & güvenlik ---- */
.upload-btn{margin:var(--pad-card);width:calc(100% - var(--pad-card)*2);height:clamp(52px,9vw,72px);border:none;border-radius:12px;background:var(--grad);color:#fff;font-size:clamp(14px,2.4vw,17px);font-weight:700;display:flex;align-items:center;justify-content:center;gap:12px;transition:.2s}
.upload-btn:hover{filter:brightness(1.06);box-shadow:0 10px 26px rgba(90,50,230,.35)}
.upload-btn svg{flex:none;width:clamp(17px,2.6vw,22px);height:auto}
.secure{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 var(--pad-card) var(--pad-card);font-size:clamp(11px,1.7vw,12.5px);color:var(--muted);text-align:center;flex-wrap:wrap}
.secure svg{flex:none}
.secure a{color:#4f46e5;font-weight:600}
/* ================= ADIMLAR ================= */
.steps{margin-top:clamp(28px,6vw,48px);position:relative}
.steps::before{content:"";position:absolute;left:-40px;right:-40px;top:-24px;height:230px;background:radial-gradient(60% 100% at 50% 0,rgba(122,43,224,.09),transparent 70%);pointer-events:none}
.steps h2{font-size:clamp(17px,3vw,20px);font-weight:800;
 background:linear-gradient(90deg,#2643e6 0%,#8a2be2 30%,#ec008c 55%,#2643e6 90%);background-size:200% 100%;
 -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite}
.steps .sub{margin-top:7px;font-size:clamp(11.5px,1.9vw,12.5px);color:var(--muted)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.6vw,24px);margin-top:clamp(18px,3.4vw,28px)}
.step{display:grid;grid-template-columns:26px 1fr;column-gap:12px;align-items:start;min-width:0;position:relative;z-index:1;
 padding:12px 12px 14px;border-radius:14px;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.step:hover{background:#fff;box-shadow:0 14px 34px rgba(30,40,120,.12);transform:translateY(-4px)}
.step-num{width:26px;height:26px;border-radius:50%;color:#fff;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;background:var(--c,#6a3be8);position:relative}
.step-num::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c,#6a3be8);opacity:0}
.step:hover .step-num::after{animation:ping .9s ease-out infinite}
@keyframes ping{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.55);opacity:0}}
.step h3{font-size:clamp(13px,1.8vw,14px);font-weight:700;padding-top:4px}
.step p{grid-column:2;margin-top:9px;font-size:clamp(11px,1.6vw,12px);line-height:1.6;color:var(--muted)}
/* illüstrasyon şeridi */
.illus{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:clamp(8px,1.4vw,12px);margin-top:clamp(20px,3.6vw,30px)}
.illus .ill-box:first-child{justify-self:start}
.illus .ill-box:last-child{justify-self:end}
.illus .ill-selects,.illus .arrow-wrap{justify-self:center}
.ill-box{width:clamp(110px,15vw,155px);aspect-ratio:155/133;border-radius:16px;background:#eef0fa;position:relative;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .25s ease,box-shadow .25s ease}
.ill-box:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 34px rgba(30,40,120,.14)}
.ill-box > svg{width:64%;height:auto}
.ill-box:first-child > svg{animation:floatY 4.5s ease-in-out infinite}
.ill-box:last-child > svg{animation:floatY 5s ease-in-out infinite .8s}
.plus-badge{position:absolute;right:15%;bottom:12%;width:clamp(22px,3vw,26px);height:clamp(22px,3vw,26px);border-radius:50%;background:#6a3be8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;box-shadow:0 4px 10px rgba(106,59,232,.4);animation:pulseB 2.2s ease-in-out infinite}
.link-badge{position:absolute;right:12%;bottom:16%;width:clamp(34px,4.6vw,44px);height:clamp(34px,4.6vw,44px);border-radius:50%;background:#6a3be8;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(106,59,232,.4);animation:pulseB 2.2s ease-in-out infinite .6s}
@keyframes pulseB{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.link-badge svg{width:55%;height:auto}
.ill-selects{display:flex;flex-direction:column;gap:10px;width:clamp(160px,20vw,205px)}
.ill-select{width:100%;height:44px;background:#fff;border:1px solid #e6e8f4;border-radius:10px;box-shadow:0 8px 18px rgba(20,30,80,.08);display:flex;align-items:center;padding:0 12px;gap:10px;font-size:clamp(11.5px,1.5vw,12.5px);font-weight:700;min-width:0}
.ill-select:nth-child(1){animation:selGlow 3.2s ease-in-out infinite}
.ill-select:nth-child(2){animation:selGlow 3.2s ease-in-out infinite 1.6s}
@keyframes selGlow{0%,100%{box-shadow:0 8px 18px rgba(20,30,80,.08)}50%{box-shadow:0 8px 24px rgba(90,50,230,.25);border-color:#c9b8f5}}
.ill-select svg{flex:none}
.ill-select .chev{margin-left:auto;color:#141838;display:inline-flex}
.arrow-wrap{flex:none;display:flex;align-items:center;justify-content:center}
.arrow{width:clamp(38px,5.4vw,52px);height:auto}
.arrow .flow{stroke-dasharray:5 9;animation:dashMove 1.1s linear infinite}
@keyframes dashMove{to{stroke-dashoffset:-28}}
/* ================= YÖNET ================= */
.manage{margin-top:clamp(26px,5.6vw,46px);border-radius:var(--r);position:relative;overflow:hidden;
 background:#eef1f6 url('../../static/images/ui/share-panel-photo.webp') center 48%/cover no-repeat}
.manage::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,248,252,.98) 0%,rgba(247,248,252,.78) 34%,rgba(247,248,252,.12) 68%);pointer-events:none}
.manage-head{position:relative;z-index:1;padding:clamp(18px,4vw,30px) var(--pad-card) 0}
.manage-head h2{font-size:clamp(16px,2.8vw,19px);font-weight:800;color:#141838}
.manage-head p{margin-top:9px;font-size:clamp(11.5px,1.9vw,12.5px);color:#3c4258}
.share-card{position:relative;z-index:1;margin:clamp(14px,3vw,20px) clamp(10px,2.4vw,16px) clamp(16px,3vw,24px);background:#fff;border-radius:12px;box-shadow:0 14px 34px rgba(20,25,60,.14);display:flex;align-items:stretch;padding:20px 0}
.sc-col{padding:0 var(--pad-card);display:flex;flex-direction:column;min-width:0}
.sc-col + .sc-col{border-left:1px solid #e8eaf5}
.sc-label{font-size:11px;font-weight:700;color:#171b34;display:flex;align-items:center}
.sc-badge{display:none;margin-left:8px;background:#eef0ff;color:#4f46e5;border-radius:999px;padding:3px 8px;font-size:9.5px;font-weight:800;align-items:center;gap:4px}
.sc-badge.show{display:inline-flex}
.sc-icon-only .lbl{display:none}
.sc-input{margin-top:10px;width:100%;max-width:262px;height:48px;border:1px solid #e3e6f3;border-radius:10px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;gap:8px}
.sc-input span{font-size:11.5px;color:#8a8fa8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sc-input .icon-btn{color:#6a3be8;flex:none}
.qr-row{margin-top:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.qr-row canvas,.qr-preview{width:72px;height:72px;flex:none;display:flex;align-items:center;justify-content:center;background:#fff;color:#171b34;border-radius:6px;font-size:64px;line-height:1;image-rendering:pixelated}
.qr-copy{background:none;border:none;text-align:left;font-size:12px;font-weight:700;color:#171b34;line-height:1.4;max-width:88px;padding:4px 0}
.qr-copy:hover{color:var(--indigo)}
.sc-center{justify-content:center;align-items:center;text-align:center}
.sc-center .lbl{margin-top:10px;font-size:11px;font-weight:600;color:#171b34;line-height:1.4}
.sc-center .big{color:#6a3be8;display:inline-flex}
/* ================= SSS ================= */
.faq{margin-top:clamp(26px,5.6vw,46px)}
.faq-title{text-align:center;font-size:clamp(11.5px,2vw,13px);font-weight:800;padding:0 8px}
.faq-title::after{content:"";display:block;width:36px;height:3px;border-radius:2px;background:#7a2be0;margin:10px auto 0}
.faq-list{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.faq-item{background:#eef0fa;border-radius:10px;overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;background:none;border:none;text-align:left;min-height:44px}
.faq-num{width:18px;height:18px;border-radius:50%;color:#fff;font-size:8.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.faq-number-pink{background:#ec008c}
.faq-number-cyan{background:#0090f0}
.faq-number-blue{background:#2563eb}
.faq-number-violet{background:#6a3be8}
.faq-q .txt{flex:1;font-size:clamp(10.5px,1.8vw,11.5px);font-weight:600;color:#171b34;min-width:0}
.faq-plus{color:#171b34;transition:.2s;display:inline-flex;flex:none}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:340px}
.faq-a p{font-size:11.5px;color:var(--muted);padding:0 46px 14px}
.faq-item.open .faq-plus{transform:rotate(45deg)}
/* ================= CTA ================= */
.cta{position:relative;overflow:hidden;border-radius:20px;margin-top:clamp(18px,3.4vw,26px);
 padding:clamp(24px,4vw,34px) clamp(18px,4.4vw,44px);
 display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(14px,2.6vw,28px);
 background:linear-gradient(115deg,#2643e6 0%,#7a2be0 48%,#ec008c 95%);
 background-size:220% 220%;animation:ctaGrad 9s ease-in-out infinite alternate;
 box-shadow:0 18px 44px rgba(90,40,220,.35)}
@keyframes ctaGrad{0%{background-position:0% 30%}100%{background-position:100% 70%}}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;pointer-events:none;animation:orbFloat 7s ease-in-out infinite alternate}
.cta::before{width:220px;height:220px;background:#00d1ff;left:-60px;top:-90px}
.cta::after{width:260px;height:260px;background:#ff2ea6;right:-70px;bottom:-120px;animation-delay:1.2s}
@keyframes orbFloat{from{transform:translateY(-8px) scale(1)}to{transform:translateY(14px) scale(1.08)}}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;opacity:0;left:var(--x);top:var(--y);animation:twinkle 3.2s var(--d) ease-in-out infinite;pointer-events:none;box-shadow:0 0 10px rgba(255,255,255,.8)}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}
@keyframes shine{to{background-position:200% 0}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.cta-art{flex:none;width:clamp(96px,14vw,140px);height:auto;justify-self:start;position:relative;filter:drop-shadow(0 12px 24px rgba(0,0,0,.28));animation:floatY 5s ease-in-out infinite}
.cta-mid{grid-column:2;text-align:center;min-width:0;position:relative}
.cta-kicker{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.cta h2{margin-top:12px;font-size:clamp(18px,3.2vw,24px);font-weight:800;letter-spacing:-.3px;
 background:linear-gradient(90deg,#fff 0%,#ffd7f0 35%,#c9e6ff 65%,#fff 100%);background-size:200% 100%;
 -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4.5s linear infinite}
.cta p{margin-top:8px;font-size:clamp(12px,2vw,14px);color:rgba(255,255,255,.92)}
.cta-btn{margin-top:16px;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;background:#fff;color:#6a2be0;font-size:14px;font-weight:800;padding:12px 24px;border-radius:999px;border:none;box-shadow:0 10px 26px rgba(0,0,0,.28);transition:.25s}
.cta-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 16px 36px rgba(0,0,0,.32);color:#ec008c}
.cta-btn svg{transition:.25s}
.cta-btn:hover svg{transform:translateX(4px)}
.cta-btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(122,43,224,.28),transparent);animation:btnShine 2.8s ease-in-out infinite}
@keyframes btnShine{0%{left:-70%}60%,100%{left:135%}}
.gauge{grid-column:3;justify-self:center;position:relative;width:clamp(68px,9vw,88px);height:clamp(68px,9vw,88px);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.28);flex:none}
.gauge::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:halo 2.4s ease-out infinite}
@keyframes halo{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.gauge svg{width:78%;height:auto}
.g-arc{stroke-dasharray:120;stroke-dashoffset:120;animation:arcDraw 1.4s .3s ease forwards}
@keyframes arcDraw{to{stroke-dashoffset:0}}
.g-sweep{transform-origin:44px 50px;animation:sweep 1.5s .3s cubic-bezier(.3,1.5,.4,1) both}
@keyframes sweep{from{transform:rotate(-75deg)}to{transform:rotate(0deg)}}
.g-idle{transform-origin:44px 50px;animation:idle 2.8s 2s ease-in-out infinite alternate}
@keyframes idle{from{transform:rotate(-6deg)}to{transform:rotate(9deg)}}
/* ================= FOOTER ================= */
.footer{background:#fff;margin-top:clamp(20px,3.6vw,28px);border-top:1px solid #edeff7}
.footer-inner{max-width:960px;margin:0 auto;padding:20px var(--pad) calc(20px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer .copy{font-size:11px;color:#8a8fa8}
.footer-links{margin-left:auto;display:flex;gap:clamp(14px,2.8vw,26px);flex-wrap:wrap}
.footer-links a{font-size:11px;color:#565b74}
.footer-links a:hover{color:var(--indigo)}
.socials{display:flex;gap:18px;margin-left:6px}
.socials a{color:#171b34;display:inline-flex;transition:.15s;padding:4px}
.socials a:hover{color:var(--indigo)}
/* toast */
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(120px);background:#171b34;color:#fff;font-size:12.5px;font-weight:600;padding:10px 18px;border-radius:10px;opacity:0;transition:.3s;z-index:99;max-width:92vw;text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* =============== KIRILIM NOKTALARI =============== */
@media (max-width:900px){
  .nav{display:none}
  .header-actions{display:none}
  .hamburger{display:inline-flex}
  .steps-grid{gap:14px}
  .illus{grid-template-columns:repeat(3,1fr);justify-items:center;gap:16px}
  .illus .ill-box:first-child,.illus .ill-box:last-child{justify-self:center}
  .arrow-wrap{display:none}
  .ill-box{width:100%;max-width:190px}
  .ill-selects{width:100%;max-width:225px}
}
@media (max-width:820px){
  .manage::before{background:linear-gradient(180deg,rgba(247,248,252,.94) 0%,rgba(247,248,252,.6) 45%,rgba(247,248,252,.15) 100%)}
  .manage{background-position:center 40%}
  .share-card{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:12px}
  .sc-col{padding:14px;border:1px solid #edeff9;border-radius:12px;background:#fbfbfe;min-width:0}
  .sc-col + .sc-col{border-left:1px solid #edeff9}
  .sc-col:nth-child(1){grid-column:1/-1}
  .sc-col:nth-child(2){grid-column:1/-1}
  .sc-col:nth-child(n+3){grid-column:span 2}
  .sc-center{flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:10px}
  .sc-center .lbl{margin-top:0;font-size:10.5px;line-height:1.35}
  .sc-icon-only .lbl{display:block}
  .sc-center .big{width:46px;height:46px;border-radius:14px;background:#eef0ff;align-items:center;justify-content:center;flex:none}
  .sc-input{max-width:100%}
  .qr-row{margin-top:12px;justify-content:space-between;gap:12px}
  .qr-copy{max-width:none;flex:1;background:linear-gradient(90deg,#2643e6,#8a2be2);color:#fff;border-radius:10px;padding:12px 14px;font-size:12px;font-weight:700;text-align:center;line-height:1.2}
  .qr-copy:hover{color:#fff;filter:brightness(1.06)}
}
@media (max-width:680px){
  .opts{grid-template-columns:1fr}
  .opt-pass{grid-column:auto}
  .cta{grid-template-columns:1fr;justify-items:center;text-align:center;padding:28px 18px;gap:18px}
  .cta-art{justify-self:center;width:clamp(110px,38vw,150px)}
  .cta-mid{grid-column:1}
  .gauge{grid-column:1}
  .footer-inner{flex-direction:column;justify-content:center;text-align:center;gap:12px}
  .footer-links{margin-left:0;justify-content:center}
  .socials{margin-left:0}
}
@media (max-width:640px){
  .steps-grid{grid-template-columns:1fr;gap:18px}
  .illus{grid-template-columns:1fr;justify-items:center;gap:12px}
  .arrow-wrap{display:flex;width:40px;height:56px}
  .arrow{width:52px;height:36px;transform:rotate(90deg)}
  .ill-box{max-width:230px}
  .ill-selects{max-width:250px}
}
@media (max-width:480px){
  .file{gap:10px}
  .file-actions{margin-left:0;width:100%;justify-content:flex-end}
  .faq-a p{padding:0 16px 14px 46px}
  .qr-row{gap:12px}
  .cta{padding:24px 16px}
  .pass-gen span{display:none}
  .ill-box{max-width:100%}
  .ill-selects{max-width:100%}
  .step{padding:10px 10px 12px}
  .ad{gap:10px;padding:10px 14px}
  .ad-size{padding:3px 8px}
  .sc-col:nth-child(n+3){grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:12px}
  .sc-center{flex-direction:row}
  .sc-center .lbl{font-size:11px}
}
@media (max-width:360px){
  .logo-text{font-size:16px}
  .tab{gap:6px}
  .file-meta{gap:12px}
  .step{column-gap:9px}
  .sc-col{padding:12px}
  .ad-size{display:none}
}
@media (pointer:coarse){
  .select,.pass-input input{font-size:16px}
  .icon-btn{padding:8px}
  .faq-q{padding:14px 16px}
  .qr-copy{padding:12px 14px}
  .socials a{padding:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .g-arc{stroke-dashoffset:0}
  .g-sweep{transform:none}
}
@media (hover:none){
  .btn-grad:hover,.upload-btn:hover{filter:none;box-shadow:none}
  .icon-btn:hover{transform:none}
  .cta-btn:hover{transform:none}
  .step:hover{transform:none}
  .ill-box:hover{transform:none}
  .logo:hover .logo-text{filter:none}
}