:root[data-theme="dark"] {
    --bg:#0a0a0a;--bg2:#111111;--bg3:#1a1a1a;--border:#2a2a2a;
    --accent:#e01c1c;--accent2:#ff3333;--text:#f0f0f0;--text2:#888;
    --text3:#555;--card:#141414;--glow:rgba(224,28,28,0.15);
  }
  :root[data-theme="light"] {
    --bg:#f8f8f8;--bg2:#ffffff;--bg3:#f0f0f0;--border:#e0e0e0;
    --accent:#cc0000;--accent2:#e01c1c;--text:#111111;--text2:#555;
    --text3:#aaa;--card:#ffffff;--glow:rgba(204,0,0,0.08);
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .4s,color .4s;overflow-x:hidden}
  #intro{position:fixed;inset:0;background:#000;z-index:9999;display:flex;align-items:center;justify-content:center;animation:introFade .6s ease 2.2s forwards}
  @keyframes introFade{to{opacity:0;pointer-events:none}}
  .intro-logo{font-family:'Bebas Neue',sans-serif;font-size:clamp(60px,15vw,140px);letter-spacing:.1em;color:#fff;position:relative;overflow:hidden}
  .intro-logo::after{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:revealBar .5s ease .3s forwards,hideBar .4s ease 1.4s forwards}
  @keyframes revealBar{to{transform:scaleX(1)}}
  @keyframes hideBar{to{transform:scaleX(0);transform-origin:right}}
  .intro-logo span{opacity:0;animation:showText 0s ease .9s forwards}
  @keyframes showText{to{opacity:1}}
  .intro-line{position:absolute;bottom:40%;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--accent);animation:lineGrow .8s ease 1.6s forwards}
  @keyframes lineGrow{to{width:200px}}
  body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");background-size:200px;pointer-events:none;z-index:0;opacity:.5}
  nav{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:64px;animation:slideDown .6s ease 2.8s both;opacity:0}
  @keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
  .nav-logo{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:.15em;color:var(--text)}
  .nav-logo span{color:var(--accent)}
  .theme-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;background:var(--bg3);border:1px solid var(--border);border-radius:50px;padding:6px 16px;color:var(--text2);font-size:13px;font-weight:500;transition:all .3s;user-select:none}
  .theme-toggle:hover{border-color:var(--accent);color:var(--text)}
  .toggle-dot{width:20px;height:20px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;transition:background .3s}
  .hero{text-align:center;padding:80px 20px 40px;animation:fadeUp .8s ease 3s both;opacity:0}
  @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  .hero-tag{display:inline-block;background:var(--glow);border:1px solid var(--accent);color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:6px 16px;border-radius:50px;margin-bottom:24px}
  .hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,10vw,100px);letter-spacing:.05em;line-height:.95;margin-bottom:20px;color:var(--text)}
  .hero h1 span{color:var(--accent)}
  .hero p{color:var(--text2);font-size:16px;max-width:480px;margin:0 auto 48px;line-height:1.6}
  .tab-menu{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 20px;animation:fadeUp .8s ease 3.2s both;opacity:0}
  .tab-btn{display:flex;align-items:center;gap:10px;padding:14px 28px;border-radius:12px;border:1.5px solid var(--border);background:var(--card);color:var(--text2);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .25s}
  .tab-btn:hover{border-color:var(--accent);color:var(--text);transform:translateY(-2px)}
  .tab-btn.active{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 30px var(--glow)}
  .tab-btn .tab-icon{font-size:18px}
  .tab-btn .tab-formats{font-size:11px;opacity:.7}
  main{max-width:720px;margin:16px auto 0;padding:0 20px 80px;animation:fadeUp .8s ease 3.4s both;opacity:0}
  .panel{display:none}
  .panel.active{display:block}
  .url-section{background:var(--card);border:1.5px solid var(--border);border-radius:20px;padding:32px;margin-bottom:24px;position:relative;overflow:hidden}
  .url-section::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
  .section-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.1em;color:var(--text);margin-bottom:6px}
  .section-sub{color:var(--text2);font-size:13px;margin-bottom:24px}
  .input-wrap{display:flex;gap:10px}
  .url-input{flex:1;background:var(--bg3);border:1.5px solid var(--border);border-radius:12px;padding:14px 18px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color .2s}
  .url-input:focus{border-color:var(--accent)}
  .url-input::placeholder{color:var(--text3)}
  .fetch-btn{background:var(--accent);color:#fff;border:none;border-radius:12px;padding:14px 24px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
  .fetch-btn:hover{background:var(--accent2);transform:scale(1.02)}
  .fetch-btn:active{transform:scale(.98)}
  .fetch-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
  .format-section{background:var(--card);border:1.5px solid var(--border);border-radius:20px;padding:32px;margin-bottom:24px}
  .format-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-top:16px}
  .format-card{border:1.5px solid var(--border);border-radius:10px;padding:14px 10px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg3)}
  .format-card:hover{border-color:var(--accent);transform:translateY(-2px)}
  .format-card.selected{border-color:var(--accent);background:var(--glow);box-shadow:0 0 20px var(--glow)}
  .format-ext{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.1em;color:var(--accent);display:block}
  .format-desc{font-size:10px;color:var(--text3);margin-top:4px;text-transform:uppercase;letter-spacing:.05em}
  .quality-row{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
  .quality-btn{padding:8px 18px;border-radius:8px;border:1.5px solid var(--border);background:var(--bg3);color:var(--text2);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}
  .quality-btn:hover{border-color:var(--accent);color:var(--text)}
  .quality-btn.selected{border-color:var(--accent);color:var(--accent);background:var(--glow)}
  .download-btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:14px;padding:18px;font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.2em;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 4px 40px var(--glow);margin-top:8px}
  .download-btn:hover{transform:translateY(-3px);box-shadow:0 8px 50px var(--glow),0 0 0 1px var(--accent)}
  .download-btn:active{transform:translateY(-1px)}
  .download-btn:disabled{opacity:.4;cursor:not-allowed;transform:none !important;box-shadow:none}
  .info-box{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-top:20px;display:flex;align-items:flex-start;gap:12px;color:var(--text2);font-size:13px;line-height:1.5}
  .info-box-icon{color:var(--accent);font-size:16px;flex-shrink:0;margin-top:1px}
  .txt-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:16px}
  .txt-feature{background:var(--bg3);border:1.5px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s}
  .txt-feature:hover{border-color:var(--accent);transform:translateY(-2px)}
  .txt-feature.selected{border-color:var(--accent);background:var(--glow)}
  .txt-feature-icon{font-size:24px;margin-bottom:8px}
  .txt-feature-title{font-weight:600;font-size:14px;color:var(--text);margin-bottom:4px}
  .txt-feature-desc{font-size:12px;color:var(--text2);line-height:1.4}
  .divider{border:none;border-top:1px solid var(--border);margin:24px 0}
  footer{border-top:1px solid var(--border);padding:32px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
  .footer-brand{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:.15em;color:var(--text3)}
  .footer-credit{font-size:13px;color:var(--text2)}
  .footer-credit a{color:var(--accent);text-decoration:none;font-weight:600;transition:opacity .2s}
  .footer-credit a:hover{opacity:.8}
  .footer-name{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:.1em;color:var(--text)}
  .footer-name span{color:var(--accent)}
  .nav-controls{display:flex;align-items:center;gap:10px}
  .lang-selector{position:relative}
  .lang-btn{display:flex;align-items:center;gap:8px;cursor:pointer;background:var(--bg3);border:1px solid var(--border);border-radius:50px;padding:6px 14px;color:var(--text2);font-size:13px;font-weight:500;transition:all .3s;user-select:none;font-family:'DM Sans',sans-serif}
  .lang-btn:hover{border-color:var(--accent);color:var(--text)}
  .lang-flag{font-size:15px}
  .lang-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;min-width:140px;box-shadow:0 8px 32px rgba(0,0,0,.3);z-index:200}
  .lang-dropdown.open{display:block}
  .lang-option{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;font-size:13px;color:var(--text2);transition:all .2s;font-family:'DM Sans',sans-serif;border:none;background:none;width:100%;text-align:left}
  .lang-option:hover{background:var(--bg3);color:var(--text)}
  .lang-option.active{color:var(--accent);font-weight:600}
  .orb{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;opacity:.06}
  .orb1{width:600px;height:600px;background:var(--accent);top:-200px;right:-200px}
  .orb2{width:400px;height:400px;background:var(--accent);bottom:0;left:-100px}

  /* ═══════════ DOWNLOAD OVERLAY ═══════════ */
  #dl-overlay{
    display:none;position:fixed;inset:0;z-index:5000;
    background:rgba(0,0,0,.80);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    align-items:center;justify-content:center;
  }
  #dl-overlay.visible{display:flex;animation:overlayIn .25s ease forwards}
  @keyframes overlayIn{from{opacity:0}to{opacity:1}}

  .dl-card{
    background:var(--card);border:1.5px solid var(--border);border-radius:28px;
    padding:48px 52px 40px;text-align:center;max-width:360px;width:90%;
    position:relative;overflow:hidden;
    animation:cardIn .35s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  /* Hareketli kırmızı üst çizgi */
  .dl-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));
    background-size:200% 100%;animation:lineSlide 1.8s linear infinite;
  }
  @keyframes lineSlide{0%{background-position:0% 0}100%{background-position:200% 0}}
  @keyframes cardIn{from{opacity:0;transform:scale(.82) translateY(24px)}to{opacity:1;transform:scale(1) translateY(0)}}

  /* SVG Spinner */
  .dl-spinner{width:80px;height:80px;margin:0 auto 28px;position:relative}
  .dl-spinner svg{width:80px;height:80px;animation:rotateSvg 2s linear infinite}
  @keyframes rotateSvg{to{transform:rotate(360deg)}}
  .dl-spinner-track{fill:none;stroke:var(--border);stroke-width:4}
  .dl-spinner-arc{
    fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;
    stroke-dasharray:60 190;
    animation:dashAnim 1.5s ease-in-out infinite;
  }
  @keyframes dashAnim{
    0%{stroke-dasharray:20 230;stroke-dashoffset:0}
    50%{stroke-dasharray:140 110;stroke-dashoffset:-40}
    100%{stroke-dasharray:20 230;stroke-dashoffset:-250}
  }
  /* Pulse halkası */
  .dl-spinner-pulse{
    position:absolute;inset:-12px;border-radius:50%;
    background:radial-gradient(circle,var(--glow) 0%,transparent 70%);
    animation:pulseRing 2s ease-in-out infinite;
  }
  @keyframes pulseRing{0%,100%{opacity:.3;transform:scale(.95)}50%{opacity:1;transform:scale(1.08)}}

  .dl-title{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:.2em;color:var(--text);margin-bottom:10px}
  .dl-status{color:var(--text2);font-size:13px;margin-bottom:28px;min-height:20px;transition:opacity .4s}

  /* Alt progress şeridi */
  .dl-track{height:3px;background:var(--border);border-radius:99px;overflow:hidden;margin-bottom:22px}
  .dl-track-fill{
    height:100%;border-radius:99px;width:0%;transition:width .6s ease;
    background-image:linear-gradient(90deg,var(--accent) 0%,var(--accent2) 45%,var(--accent) 100%);
    background-size:200% 100%;animation:fillShimmer 2s linear infinite;
  }
  @keyframes fillShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

  .dl-note{font-size:11px;color:var(--text3);letter-spacing:.06em;text-transform:uppercase}